login-flow

Mobile login and authentication flow screens

Install

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

SKILL.md

---name: login-flowdescription: Mobile login and authentication flow screensod: mode: prototypeplatform: mobiletriggers: ---

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: tel for phone, password for password fields

Related skills

vercel-react-native-skillsvercel-labs224KReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.firebase-crashlyticsfirebase117KComprehensive guide for Firebase Crashlytics, including provisioning and SDK usage. Use this skill when the user needs help setting up Crashlytics, adding crash reporting, or using the Crashlytics SDK in their application.xcode-project-setupfirebase117KSafely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).animate-expoemilkowalski70KBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web a