mcpField
L
login-flow

login-flow

github.com/nexu-ioDesign & UI104.6k2.8k installsUpdated today
Repository

About login-flow

login-flow is a skill for generating mobile-first login and authentication screens, with phone/SMS, password, and social SSO options. It produces a standalone HTML prototype with default, loading, and error states under mobile layout constraints.

Key features

  1. 01Generate mobile-first login screens
  2. 02Support SMS, password, and social SSO
  3. 03Include default, loading, and error states
  4. 04Output a standalone HTML file
  5. 05Follow mobile layout constraints

Use cases

  1. 01Build a mobile app login screen
  2. 02Prototype phone and SMS verification
  3. 03Prototype password or social SSO login

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill login-flow

After installing, type/login-flowin Claude Code to confirm it loaded.

Bundled filesexample.htmlreferences/checklist.md

Details

From the project README

Login Flow Skill

A skill for generating mobile-first login and authentication screens. Use this when the user wants a sign-in experience for a mobile app, including phone + SMS verification, password-based login, and social SSO options.

Workflow

  1. Read reference files first (see below)
  2. Clarify auth method: phone/SMS, password, or social SSO
  3. Checklist gate — verify P0 items before emitting <artifact>
  4. Build the HTML prototype with proper states (default, loading, error)
  5. Wrap in <artifact> tag referencing the output file

Side Files

  • references/checklist.md — P0/P1 acceptance criteria

Output

A single standalone HTML file implementing the login screen with:

  • Labels above inputs (never placeholder-only)
  • Password field with show/hide toggle
  • Social SSO buttons with SVG icons
  • Error states below fields
  • Loading spinner in primary CTA
  • Touch targets minimum 44px

Mobile-First Constraints

  • Viewport: 375px wide (iPhone standard)
  • No horizontal scroll
  • Safe area insets for notched devices
  • Input keyboards: tel for phone, password for password fields

Comments

Markdown supported