gh-trabian-fluxwing-skills/skills/fluxwing-screen-scaffolder/templates/login-screen.md

Login Screen

User authentication screen with email and password inputs.

Layout

╭──────────────────────────────────────────╮
│                                          │
│          {{title}}                       │
│      {{subtitle}}                        │
│                                          │
│  Email                                   │
│  {{emailInput}}                          │
│                                          │
│  Password                                │
│  {{passwordInput}}                       │
│                                          │
│  {{errorMessage}}                        │
│                                          │
│         {{submitButton}}                 │
│                                          │
│  {{forgotPassword}}  │  {{signupLink}}   │
│                                          │
╰──────────────────────────────────────────╯

Components Used

• email-input: Email address field with validation
• password-input: Password field with show/hide toggle (Note: using email-input as placeholder)
• submit-button: Form submission button (using primary-button)
• error-alert: Error message display (optional)

States

Idle State

User has not yet interacted with the form.

Loading State

While authenticating user credentials.

Error State

When authentication fails - shows error message above submit button.

Variables

• title (string): Screen heading text
• subtitle (string): Subheading text
• emailInput (component): Email input component
• passwordInput (component): Password input component
• submitButton (component): Submit button component
• errorMessage (component): Error alert component
• forgotPassword (link): Forgot password link
• signupLink (link): Sign up link

User Flows

1. User enters email address
2. User enters password
3. User clicks "Sign In" button
4. System validates credentials
5. If valid: Navigate to dashboard
6. If invalid: Show error message, allow retry

Accessibility

• Role: main
• ARIA Label: "Login form"
• Keyboard: Tab navigation between fields, Enter to submit
• Screen Reader: All fields properly labeled