Login Flow

nexu-io/login-flow

Mobile login and authentication flow screens

3k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

83386

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/nexu-io/open-design --skill login-flow

What comes with it

10 758 bytes besides the instruction

example.html

references/checklist.md

The instruction itself

5 sections, as written by the author

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

How to use it

Copy the folder

Take nexu-io/login-flow from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.