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

186
skills/fluxwing-screen-scaffolder/templates/dashboard.rendered.md Normal file
View File

@@ -0,0 +1,186 @@
# Dashboard - Rendered Example
This shows the actual dashboard with realistic metrics and activity data.
## Loaded State (Default)
```
╭──────────────────────────────────────────────────────────────────────────────╮
│ Dashboard Sarah Johnson ▼ │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Welcome back, Sarah! Here's what's happening today. │
│ │
│ ╭───────────────────╮ ╭───────────────────╮ ╭──────────────────────╮ │
│ │ Revenue │ │ Active Users │ │ Growth │ │
│ │ ───────────────── │ │ ───────────────── │ │ ─────────────────── │ │
│ │ $24,567 │ │ 1,234 │ │ +12.5% │ │
│ │ +8.3% ↗ │ │ +45 today │ │ MoM │ │
│ ╰───────────────────╯ ╰───────────────────╯ ╰──────────────────────╯ │
│ │
│ Recent Activity │
│ ╭────────────────────────────────────────────────────────────────────────╮ │
│ │ • John Doe signed up 2 minutes ago │ │
│ │ • New order #1234 received 5 minutes ago │ │
│ │ • Sarah Johnson updated profile 8 minutes ago │ │
│ │ • Mike Smith completed onboarding 15 minutes ago │ │
│ │ • System backup completed successfully 22 minutes ago │ │
│ ╰────────────────────────────────────────────────────────────────────────╯ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
```
## Loading State
```
╭──────────────────────────────────────────────────────────────────────────────╮
│ Dashboard Sarah Johnson ▼ │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ ⠋ Loading dashboard... │
│ │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
```
## Data Context
This example demonstrates:
### User Information
- **User**: Sarah Johnson (logged in)
- **Time**: October 11, 2024, 3:45 PM
- **Greeting**: Personalized with name and time-appropriate message
### Metric Cards
**Card 1: Revenue**
- Value: $24,567 (monthly revenue)
- Trend: +8.3% ↗ (positive growth from last month)
- Visual: Green trend indicator
**Card 2: Active Users**
- Value: 1,234 (total active users)
- Change: +45 today (new users today)
- Visual: User count with daily change
**Card 3: Growth**
- Value: +12.5% (percentage growth)
- Period: MoM (month over month)
- Visual: Growth percentage
### Recent Activity
Real activity entries with timestamps:
1. **John Doe signed up** - 2 minutes ago
2. **New order #1234 received** - 5 minutes ago
3. **Sarah Johnson updated profile** - 8 minutes ago
4. **Mike Smith completed onboarding** - 15 minutes ago
5. **System backup completed successfully** - 22 minutes ago
## User Flow Demonstration
### Step 1: Login Complete
User successfully authenticates
→ Dashboard loads
### Step 2: Data Fetch
System retrieves:
- Latest metrics
- Recent activity
- User preferences
### Step 3: Display
Dashboard renders with:
- Personalized greeting
- Current metrics with trends
- Real-time activity feed
### Step 4: Interaction
User can:
- Click metric cards for details
- Click activity items for context
- Access user menu via dropdown
- Navigate to other sections
## Components Breakdown
This screen composition includes:
1. **Top Bar**
- Dashboard title (left)
- User dropdown menu (right): "Sarah Johnson ▼"
2. **Greeting Section**
- Personalized message: "Welcome back, Sarah!"
- Context: "Here's what's happening today."
3. **Metric Cards (3x)** (component: card)
- **Revenue Card**
- Title: "Revenue"
- Value: "$24,567"
- Trend: "+8.3% ↗" (badge with arrow)
- **Users Card**
- Title: "Active Users"
- Value: "1,234"
- Change: "+45 today"
- **Growth Card**
- Title: "Growth"
- Value: "+12.5%"
- Period: "MoM"
4. **Activity Section**
- Header: "Recent Activity"
- List (component: list)
- 5 recent items
- Each with description and timestamp
- Bullet formatting for clarity
## Design Notes
- **Information Hierarchy**: Most important metrics (revenue) comes first
- **Visual Grouping**: Cards use consistent styling and spacing
- **Real-time Feel**: Recent timestamps show system is live
- **Scanability**: Bullet points and clear labels make scanning easy
- **Trend Indicators**: Arrows (↗) and percentages show direction quickly
- **Whitespace**: Generous padding prevents cramped feeling
## Trend Indicators Explained
- **↗** (up-right arrow): Positive trend, growth
- **→** (right arrow): Flat, no change
- **↘** (down-right arrow): Negative trend, decline
- **+X%**: Positive percentage change (green context)
- **-X%**: Negative percentage change (red context)
## Time-based Data
All timestamps are relative:
- "2 minutes ago" - Very recent
- "5 minutes ago" - Recent
- "15 minutes ago" - Somewhat recent
- "22 minutes ago" - Less recent
This creates a sense of real-time activity.
## Accessibility Features
- Clear heading hierarchy (Dashboard → sections)
- Metric values announced with context
- Activity items in semantic list
- Keyboard navigation: Tab through cards and items
- Screen reader: Trends and timestamps properly announced
- High contrast for trend indicators
## State Transitions
1. **Initial Load** → Loading spinner shown
2. **Data Fetched** → Transition to loaded state
3. **Error Occurs** → Show error message, retry button
4. **User Clicks Card** → Navigate to detail view
5. **New Activity** → Update activity list (real-time)
This rendered example shows exactly how a production dashboard appears with real data!