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-code

Installs 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

  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

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
1elastic avatarelasticsearch-security-troubleshootingelastic/agent-skillsDiagnose and resolve Elasticsearch security errors: 401/403 failures, TLS problems, expired API keys, role mapping mismatches, and Kibana login issues. Use when2.9Kskills.sh installs
2nvidia avataraiq-researchnvidia/skillsUse when asked to run deep research or AI-Q research through a reachable NVIDIA AI-Q Blueprint backend.2.9Kskills.sh installs
3browserbase avatarfunctionsbrowserbase/skillsDeploy serverless browser automation as cloud functions using Browserbase. Use when the user wants to deploy browser automation to run on a schedule or cron, cr2.9Kskills.sh installs
4dynatrace avatardt-obs-servicesdynatrace/dynatrace-for-aiService performance monitoring with RED metrics (Rate, Errors, Duration) and runtime-specific telemetry for Java, .NET, Node.js, Python, PHP, and Go. Use when a2.9Kskills.sh installs
5nexu-io avatarfigma-usenexu-io/open-designRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.2.9Kskills.sh installs
6antfu avatarnitroantfu/skillsNitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server route2.9Kskills.sh installs