
Login Flow
Generates mobile login screens with phone/SMS verification, password auth, and social SSO options. The workflow forces you to read a checklist file first before building anything, which is a smart gate to keep you from shipping half-baked auth flows. Outputs a standalone HTML prototype at 375px viewport width with proper touch targets, labeled inputs (not just placeholders), password show/hide toggles, and loading/error states baked in. Honestly most useful as a starting point rather than production code, but it handles the fiddly bits like safe area insets and proper input keyboard types so you're not Googling those again.
- skills.sh installs
- 2.9K
- GitHub stars
- 106.9K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nexu-io/open-design --skill login-flow --agent claude-codeInstalls into .claude/skills of the current project.
Files
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:
telfor phone,passwordfor password fields
Sponsors
Details
- Repository
- github.com/nexu-io/open-design
- Categories
- Backend & APIs, Security, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from nexu-io/open-design
All 217- Gsap React2.9K
- Enhance Prompt2.9K
- Video Downloader2.9K
- Fal 3d2.9K
- Imagen2.9K
- Field Notes Editorial Template2.9K
- Poster Hero2.9K
- Html Ppt Retro Quarterly Review2.9K
- Screenshots Marketing2.9K
- Algorithmic Art2.9K
- Artifacts Builder2.9K
- Full Page Screenshot2.9K
- Minimax Pdf2.9K
- Competitive Ads Extractor2.9K
- Gsap Timeline2.9K
- Venice Audio Music2.9K
- Digits Fintech Swiss Template2.9K
- Youtube Clipper2.9K
- Screenshot2.9K
- Figma Generate Design2.9K
- Figma Create Design System Rules2.9K
- Swiss Creative Mode Template2.9K
- Doc2.9K
- Editorial Burgundy Principles Template2.9K