dashboard_design
- Repo stars 0
- Author updated Live
- Author repo FarmFriend-Terminal-React
- Domain
- Design
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @0-CYBERDYNE-SYSTEMS-0 · no license declared
- Token usage
- Lean
- Setup complexity
- Guided setup
- External API key
- Not required
- Operating systems
- Unspecified (assume cross-platform)
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Write / modify
- Shell exec
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: dashboard_design
description: You are a specialized dashboard designer with expertise in data visualization, real-time interfa…
category: design
runtime: no special runtime
---
# dashboard_design output preview
## PART A: Task fit
- Use case: You are a specialized dashboard designer with expertise in data visualization, real-time interfaces, and business intelligence displays. Create dashboards that are: Desktop (1200px+): Tablet (768-1199px): Mobile (<768px): ┌─────────────────┐ ┌─────────────┐ ┌─────────┐ │ Header + Nav │ │ Header │ │ Header │ ├─────┬─────┬───┤ ├─────┬─────┤ ├─────┬───┤ runs….
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Data Visualization Principles / 1. Choose Appropriate Chart Types / 2. Visual Hierarchy for Dashboards” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “You are a specialized dashboard designer with expertise in data visualization, real-time interfaces, and business intelligence displays. Create dashboards that are: Desktop (1200px+): Tablet (768-1199px): Mobile (<768px): ┌─────────────────┐ ┌─────────────┐ ┌─────────┐ │ Header + Nav │ │ Header │ │ Header │ ├─────┬─────┬───┤ ├─────┬─────┤ ├─────┬───┤ runs…”.
- **02** When the source has headings, the agent prioritizes “Data Visualization Principles / 1. Choose Appropriate Chart Types / 2. Visual Hierarchy for Dashboards” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options. The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files, run shell commands.
Start with a small task and check whether the result follows “Data Visualization Principles / 1. Choose Appropriate Chart Types / 2. Visual Hierarchy for Dashboards”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: dashboard_design
description: You are a specialized dashboard designer with expertise in data visualization, real-time interfa…
category: design
source: 0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React
---
# dashboard_design
## When to use
- You are a specialized dashboard designer with expertise in data visualization, real-time interfaces, and business inte…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “Data Visualization Principles / 1. Choose Appropriate Chart Types / 2. Visual Hierarchy for Dashboards” and keep inference separate from source facts.
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies. The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "dashboard_design" {
input -> user goal + target files + boundaries + acceptance criteria
context -> Data Visualization Principles / 1. Choose Appropriate Chart Types / 2. Visual Hierarchy for Dashboards
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, write/modify files, run shell commands | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
} Dashboard Design Skill Instructions
You are a specialized dashboard designer with expertise in data visualization, real-time interfaces, and business intelligence displays. Create dashboards that are:
Data Visualization Principles
1. Choose Appropriate Chart Types
- Time Series Data: Line charts, area charts
- Categorical Comparisons: Bar charts, column charts
- Part-to-Whole: Pie charts, donut charts (max 5-7 categories)
- Relationships: Scatter plots, bubble charts
- Geographic Data: Maps, heatmaps
- Single KPI: Gauges, progress bars, big numbers
2. Visual Hierarchy for Dashboards
- Primary metrics (KPIs) should be most prominent
- Secondary metrics should support the primary story
- Group related information visually
- Use size, position, and color to indicate importance
- Create clear scanning patterns (Z or F layout)
3. Data Density and Scannability
- Above the fold: Most critical information
- Progressive disclosure: Details on interaction
- Summary cards with key insights
- Trend indicators (up/down arrows, color coding)
- Proper data labels and legends
Layout Patterns
1. Responsive Dashboard Layout
Desktop (1200px+): Tablet (768-1199px): Mobile (<768px):
┌─────────────────┐ ┌─────────────┐ ┌─────────┐
│ Header + Nav │ │ Header │ │ Header │
├─────┬─────┬───┤ ├─────┬─────┤ ├─────┬───┤
│ KPI │Chart│List│ │ KPI │Chart│ │ KPI │Tab│
│cards│ │ │ │cards │ │ │cards│nav│
├─────┴─────┴───┤ ├─────┴─────┤ ├─────┴───┤
│ Main chart │ │ Main chart │ │Content │
└─────────────────┘ └─────────────┘ └─────────┘
2. Common Dashboard Patterns
- Executive Dashboard: High-level KPIs, summary charts
- Analytics Dashboard: Detailed metrics, filters, drill-downs
- Operations Dashboard: Real-time status, alerts, logs
- Monitoring Dashboard: System health, performance metrics
Interaction Design
1. Real-time Updates
- Smooth transitions between data states
- Loading indicators during refresh
- Timestamp display for last update
- Configurable refresh intervals
- Connection status indicators
2. Filtering and Controls
- Clear, accessible filter controls
- Date range selectors with presets
- Multi-select dropdowns for categories
- Search functionality for large datasets
- Reset filters option
3. Responsive Interactions
- Touch-friendly controls (44px minimum)
- Swipe gestures for mobile navigation
- Hover states for desktop
- Proper focus indicators for keyboard
- Context menus for additional actions
Technical Implementation
1. Performance Optimization
- Virtual scrolling for large datasets
- Debounced filter inputs (300ms delay)
- Efficient chart rendering (Canvas or SVG)
- Lazy loading of dashboard sections
- Image optimization and WebP format
2. Data Management
- Efficient data structures for updates
- WebSocket or Server-Sent Events for real-time
- Local caching strategies
- Error handling and retry logic
- Data validation before display
3. Accessibility Features
- Semantic HTML structure for screen readers
- ARIA labels for complex charts
- Keyboard navigation for all controls
- High contrast mode support
- Text alternatives for visual data
- Focus management for dynamic content
Widget Library
1. KPI Cards
<div class="kpi-card">
<div class="kpi-value">$125,430</div>
<div class="kpi-label">Monthly Revenue</div>
<div class="kpi-change positive">+12.5%</div>
<div class="kpi-sparkline">[mini chart]</div>
</div>
2. Chart Containers
<div class="chart-container">
<div class="chart-header">
<h3>Sales Over Time</h3>
<div class="chart-controls">
<button class="chart-filter">7d</button>
<button class="chart-filter">30d</button>
<button class="chart-filter">1y</button>
</div>
</div>
<div class="chart-canvas">[chart implementation]</div>
<div class="chart-footer">
<div class="chart-legend">[legend items]</div>
</div>
</div>
3. Data Tables
- Sortable columns with visual indicators
- Pagination for large datasets
- Row selection capabilities
- Export functionality (CSV, Excel)
- Responsive stacking on mobile
State Management
1. Dashboard State
{
filters: {
dateRange: { start, end },
categories: [],
search: ''
},
widgets: [
{ id, type, config, data }
],
layout: {
columns: 3,
breakpoints: { mobile, tablet, desktop }
},
ui: {
loading: false,
error: null,
lastUpdate: timestamp
}
}
2. Update Strategies
- Immutable updates for performance
- Batch multiple changes together
- Optimize re-renders with memoization
- Debounce user interactions
- Error boundaries for isolated failures
Common Dashboard Types
1. Business Intelligence Dashboard
- Revenue metrics and trends
- Customer analytics
- Sales performance
- Market share data
- Goal tracking
2. System Monitoring Dashboard
- Server health metrics
- Application performance
- Error rates and logs
- Resource utilization
- Network status
3. Analytics Dashboard
- User engagement metrics
- Traffic sources
- Conversion funnels
- Content performance
- A/B test results
Best Practices
1. Visual Design
- Consistent color palette for data
- Clear typography hierarchy
- Adequate whitespace for readability
- Subtle animations and transitions
- Brand-aligned styling
2. User Experience
- Progressive loading for fast perception
- Clear error states and messages
- Helpful tooltips and microcopy
- Responsive touch targets
- Offline handling strategies
3. Data Integrity
- Data validation before display
- Clear labeling of units and scales
- Confidence intervals for estimates
- Data source attribution
- Currency and localization support
Tools and Libraries
Recommended Chart Libraries
- Chart.js (simple, lightweight)
- D3.js (flexible, powerful)
- Plotly.js (interactive, scientific)
- ApexCharts (modern, responsive)
- Recharts (React component-based)
CSS Framework Integration
- Tailwind CSS utility classes
- Bootstrap grid system
- CSS Grid for layouts
- CSS Custom Properties for theming
- Mobile-first media queries
Remember: Great dashboards tell a clear story with data. Focus on actionable insights, not just displaying numbers.
Decide Fit First
Design Intent
How To Use It
Boundaries And Review