Login Flow
Spin up a mobile-first HTML login screen prototype with SMS, password, and social SSO states before you commit to production auth.
Overview
Login-flow is an agent skill for the Validate phase that generates mobile-first HTML login and authentication screen prototypes with checklist-gated states.
Install
npx skills add https://github.com/nexu-io/open-design --skill login-flowWhat is this skill?
- Workflow: read references → choose phone/SMS, password, or SSO → P0 checklist gate → HTML in `<artifact>`
- P0/P1 acceptance criteria in references/checklist.md before any output ships
- Labels above inputs, show/hide password, social SSO with SVG icons, inline errors, CTA loading spinner
- Mobile-first: 375px viewport, 44px minimum touch targets, safe-area insets, tel/password input types
- Single standalone HTML file with no horizontal scroll on notched devices
- P0/P1 checklist gate in references/checklist.md
- 375px wide mobile viewport
Adoption & trust: 808 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a believable mobile sign-in UI to test auth choices before you invest in production identity plumbing.
Who is it for?
Indie mobile or SaaS builders prototyping onboarding with phone/SMS, password, or social SSO on a 375px-first layout.
Skip if: Teams that already need production OAuth wiring, server-side session management, or web-desktop-only layouts without mobile constraints.
When should I use this skill?
User wants mobile sign-in, registration/login flows, phone or SMS login, password login, or mentions login/sign-in triggers from the skill frontmatter.
What do I get? / Deliverables
You get a checklist-approved standalone HTML login prototype with default, loading, and error states ready to demo or hand off to frontend implementation.
- Single standalone HTML login screen file wrapped in an artifact tag
Recommended Skills
Journey fit
The skill is tagged under Validate because it emits standalone HTML prototypes gated by a P0 checklist—not production backend auth—so builders can test sign-in UX early. Prototype is the canonical shelf: output is a 375px mobile artifact with default, loading, and error states, matching open-design prototype mode.
How it compares
A prototype generator for login screens—not a backend auth integration or a full design system kit.
Common Questions / FAQ
Who is login-flow for?
Solo and indie builders shipping mobile apps or mobile web who want agent-generated login screens that meet basic UX and touch-target standards before coding real auth.
When should I use login-flow?
Use it in Validate when you are proving onboarding UX—in prototype subphase—or early Build frontend spikes; skip it when your sign-in spec is already implemented in your app codebase.
Is login-flow safe to install?
Review the Security Audits panel on this Prism page and inspect references/checklist.md and any generated HTML locally before exposing prototypes externally.
SKILL.md
READMESKILL.md - Login Flow
# 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