login-flow - SKILL.md Agent Skill

name: login-flow description: Mobile login and authentication flow screens od: mode: prototype platform: mobile triggers: - login - sign in - 注册登录 - 登录注册 - 手机号登录 - 验证码登录 - 密码登录

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

Read reference files first (see below)
Clarify auth method: phone/SMS, password, or social SSO
Checklist gate — verify P0 items before emitting <artifact>
Build the HTML prototype with proper states (default, loading, error)
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