login-flow
Creates login and authentication screens for mobile apps. It ensures a secure and easy sign-in flow for users.
What it does
This tool creates login screens for mobile apps. It can generate options like SMS verification, password login, or social logins (Google, Facebook, etc.).
When to use it
- ✓When you need an entry screen for a new mobile app.
- ✓If your app needs to verify the user's phone number via SMS.
- ✓To add quick login options using existing accounts (Google, Facebook).
Example of what to ask your AI
“Create a login screen for my app that accepts phone and SMS login, with a button for Google login.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool first checks basic requirements. Then, it asks which login method you prefer (SMS, password, or social). Finally, it builds the HTML code for this screen, including error and loading states.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill login-flowOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/login-flow/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
FAQ
What are 'states' on the login screen?
These are the different appearances the screen can have, such as the normal state, the loading state while the password is being verified, or the error state if something goes wrong.
What does 'mobile-first' mean?
It means the screen is designed primarily to work well on mobile phones, with a standard screen width of 375 pixels, ensuring nothing is cut off or requires horizontal scrolling.
What are 'touch targets'?
These are the clickable areas on the screen (buttons, text fields). 'Touch targets' of 44px ensure they are easy to tap with a finger on mobile screens.
Details
Original description by the author
Mobile login and authentication flow screens
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #738
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC