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

Dashboard

Main application dashboard with key metrics and recent activity.

Layout

╭──────────────────────────────────────────────────────────────────────────────╮
│ {{title}}                                                     {{userName}} ▼  │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  {{greeting}}                                                                │
│                                                                              │
│  ╭───────────────────╮  ╭───────────────────╮  ╭──────────────────────╮    │
│  │ {{metricCard1}}   │  │ {{metricCard2}}   │  │ {{metricCard3}}      │    │
│  ╰───────────────────╯  ╰───────────────────╯  ╰──────────────────────╯    │
│                                                                              │
│  {{recentActivityTitle}}                                                     │
│  ╭────────────────────────────────────────────────────────────────────────╮ │
│  │ {{activityList}}                                                       │ │
│  ╰────────────────────────────────────────────────────────────────────────╯ │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Components Used

• navigation: Top navigation bar with user menu
• card: Metric cards for key statistics (3x)
• badge: Status indicators and trend arrows
• list: Recent activity feed

States

Loaded State

Dashboard fully loaded with all data displayed.

Loading State

While fetching dashboard data - shows spinner.

Error State

When data fetch fails - shows error message.

Variables

• title (string): Dashboard title
• userName (string): Current user's name
• greeting (string): Personalized greeting
• metricCard1 (component): First metric card (e.g., Revenue)
• metricCard2 (component): Second metric card (e.g., Users)
• metricCard3 (component): Third metric card (e.g., Growth)
• recentActivityTitle (string): Activity section header
• activityList (component): List of recent activities

User Flows

1. User logs in and lands on dashboard
2. Dashboard loads metrics and activity data
3. User can click metric cards for detailed views
4. User can interact with activity items
5. User can access navigation menu via dropdown

Accessibility

• Role: main
• ARIA Label: "Dashboard main content"
• Keyboard: Tab navigation through interactive elements
• Screen Reader: All metrics and activities properly labeled