Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

login-flow — Claude Code skill for mobile login screens

Builds a standalone HTML prototype for a mobile app sign-in flow. Use it to shape phone, password, or social login screens with loading and error states.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill login-flow -a claude-code
Open on GitHub

What login-flow does

The skill asks which sign-in method the screen needs: phone with SMS verification, a password, or social SSO. It reads references/checklist.md, checks required items, then creates a standalone HTML file with loading and error states.

The form uses labels above inputs, a password visibility toggle, SVG icons on SSO buttons, and a loading spinner in the primary action. Phone fields use tel; password fields use password. The prototype targets a 375px-wide viewport, accounts for device safe areas, and avoids horizontal scrolling.

What it helps with

  • Build a mobile phone sign-in screen with SMS verification
  • Add password entry with a visibility toggle
  • Show loading and error states in an authentication form
  • Create social SSO buttons for a login prototype

Example prompts for the agent

  • Build a mobile sign-in screen with phone number and SMS verification.
  • Create a password login screen with a show and hide control.
  • Make an authentication prototype with social SSO buttons.

How to install login-flow

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill login-flow -a claude-code

2Manually: put the files in place

~/.claude/skills/login-flow/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/login-flow/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

expo-data-fetching expo Configures data fetching, caching, and screen states in Expo apps. Guides network calls with expo/fetch and TanStack Query. Claude Code CX Codex Cursor +1 27,200installs expo-examples expo Adapts official integration patterns from the expo/examples repository or scaffolds fresh projects with npx create-expo. Claude Code CX Codex Cursor +1 26,200installs google-mobile-ads-validate official google Audits Google Mobile Ads SDK integrations in iOS, Android, and Unity projects. Run a full pre-launch check or ask it to inspect one specific area. Claude Code Gemini CLI CX Codex 3,300installs argent-lens software-mansion Visual variant staging for UI elements in a native preview window. Stages design options on a simulator so you can pick the winner. Claude Code CX Codex Cursor +1 22,400installs vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. Claude Code CX Codex Cursor +1 253,900installs animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. Claude Code CX Codex Cursor +1 135,900installs mobile-native emilkowalski Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. Claude Code CX Codex Cursor +1 84,500installs aso coreyhaines31 Audits App Store and Google Play listings against store optimization standards. Helps uncover gaps in metadata, visual assets, and conversion. Claude Code CX Codex Cursor +1 74,900installs

Questions about login-flow

How do I install login-flow in Claude Code?

Run npx skills add nexu-io/open-design --skill login-flow -a claude-code. The installed file path is ~/.claude/skills/login-flow/SKILL.md.

What does login-flow do?

It creates a standalone HTML prototype for a mobile sign-in screen. The flow can use SMS, a password, or social SSO, with loading and error states.

Which checklist does login-flow use?

Before building the prototype, the skill reads references/checklist.md and checks its required criteria.

Source text

SKILL.md · Apache-2.0 
---
name: login-flow
description: Mobile login and authentication flow screens
od:
  mode: prototype
  platform: mobile
triggers:
  - login
  - sign in
  - 注册登录
  - 登录注册
  - 手机号登录
  - 验证码登录
  - 密码登录
---

# 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

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor