---
name: login-flow
description: "Mobile login and authentication flow screens"
license: "Apache-2.0"
metadata:
  decimalai-skill-id: "00e13768-ea25-4ffd-b53c-142896cf9844"
  decimalai-version-id: "4a07ba97-4863-46ec-a7a3-1c3aa3ea2592"
  decimalai-version: "1"
  decimalai-body-sha256: "569892ed74787bf046ccb8a5fc4179cdf7062a4d76cb7e30c1d5178c7bffd889"
  decimalai-name: "login-flow"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/login-flow@1/SKILL.md"
---
# 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