zhongwei/gh-trabian-fluxwing-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 09:02:33 +08:00
commit 0c40192593
82 changed files with 18699 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
skills/fluxwing-screen-scaffolder/templates/login-screen.rendered.md Normal file
View File

@@ -0,0 +1,185 @@
# Login Screen - Rendered Example
This shows the actual login screen with realistic example data.
## Default State (Idle)
```
╭──────────────────────────────────────────╮
│ │
│ Welcome Back │
│ Sign in to continue │
│ │
│ Email │
│ ┌────────────────────────────────────┐ │
│ │ sarah.johnson@example.com │ │
│ └────────────────────────────────────┘ │
│ │
│ Password │
│ ┌────────────────────────────────────┐ │
│ │ •••••••• │👁│
│ └────────────────────────────────────┘ │
│ │
│ │
│ ╭──────────────────────────────────╮ │
│ │ Sign In │ │
│ ╰──────────────────────────────────╯ │
│ │
│ Forgot password? │ Create account │
│ │
╰──────────────────────────────────────────╯
```
## Loading State
```
╭──────────────────────────────────────────╮
│ │
│ Welcome Back │
│ Sign in to continue │
│ │
│ Email │
│ ┌────────────────────────────────────┐ │
│ │ sarah.johnson@example.com │ │
│ └────────────────────────────────────┘ │
│ │
│ Password │
│ ┌────────────────────────────────────┐ │
│ │ •••••••• │👁│
│ └────────────────────────────────────┘ │
│ │
│ │
│ ╭──────────────────────────────────╮ │
│ │ ⠋ Signing in... │ │
│ ╰──────────────────────────────────╯ │
│ │
│ Forgot password? │ Create account │
│ │
╰──────────────────────────────────────────╯
```
## Error State
```
╭──────────────────────────────────────────╮
│ │
│ Welcome Back │
│ Sign in to continue │
│ │
│ Email │
│ ┌────────────────────────────────────┐ │
│ │ sarah.johnson@example.com │ │
│ └────────────────────────────────────┘ │
│ │
│ Password │
│ ┌────────────────────────────────────┐ │
│ │ •••••••• │👁│
│ └────────────────────────────────────┘ │
│ │
│ ╭────────────────────────────────────╮ │
│ │ ❌ Invalid email or password │ │
│ ╰────────────────────────────────────╯ │
│ │
│ ╭──────────────────────────────────╮ │
│ │ Sign In │ │
│ ╰──────────────────────────────────╯ │
│ │
│ Forgot password? │ Create account │
│ │
╰──────────────────────────────────────────╯
```
## Data Context
This example demonstrates:
### User Input
- **Email**: sarah.johnson@example.com (valid format)
- **Password**: ******** (8 characters, masked for security)
### Screen Elements
- **Title**: "Welcome Back"
- **Subtitle**: "Sign in to continue"
- **Submit Button**: "Sign In" (primary action)
- **Password Toggle**: 👁 icon to show/hide password
- **Footer Links**: "Forgot password?" and "Create account"
### States Shown
1. **Idle**: Clean form ready for input
2. **Loading**: Spinner animation while authenticating
3. **Error**: Red error message showing failed authentication
## User Flow Demonstration
### Step 1: Initial State
User sees empty form with placeholder text
### Step 2: Input Data
User enters:
- Email: sarah.johnson@example.com
- Password: ••••••••
### Step 3: Submit
User clicks "Sign In" button
→ Form enters loading state
→ Shows spinner: "⠋ Signing in..."
### Step 4a: Success Path
✓ Credentials valid
→ Navigate to dashboard
### Step 4b: Error Path
✗ Credentials invalid
→ Show error: "❌ Invalid email or password"
→ Keep form populated for retry
→ Focus returns to password field
## Components Breakdown
This screen composition includes:
1. **Container** (outer box)
- Rounded corners for friendly feel
- Centered layout with padding
2. **Email Input** (component: email-input)
- Text field with email validation
- Shows user input: sarah.johnson@example.com
3. **Password Input** (adapted from email-input)
- Masked text field
- Show/hide toggle (👁 icon)
- Input: ••••••••
4. **Submit Button** (component: primary-button)
- Primary action styling
- Text: "Sign In"
- Loading state with spinner
5. **Error Alert** (conditional)
- Only visible in error state
- Red styling with ❌ icon
- Message: "Invalid email or password"
6. **Footer Links** (text elements)
- "Forgot password?" (clickable)
- "Create account" (clickable)
## Design Notes
- Clean, minimal design reduces cognitive load
- Clear visual hierarchy (title → inputs → action)
- Helpful error messaging guides user to fix issues
- Password masking with optional reveal improves security
- Footer links provide escape hatches for common scenarios
## Accessibility Features
- Proper heading hierarchy (h1 for title)
- Form labels associated with inputs
- Error messages announced to screen readers
- Keyboard navigation: Tab between fields, Enter to submit
- Focus indicators visible on all interactive elements
- High contrast text for readability
This rendered example shows exactly how the login screen appears and behaves in practice!