Login Flow Skill

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

• 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