Specialized skill for creating data-rich, responsive dashboard interfaces with real-time updates
Specialized skill for creating data-rich, responsive dashboard interfaces with real-time updates
npx skills add https://github.com/0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React --skill dashboard-design复制此命令并粘贴到 Claude Code 中以安装该技能
| name | dashboard_design |
| slug | dashboard_design |
| summary | Specialized skill for creating data-rich, responsive dashboard interfaces with real-time updates |
| description | Specialized skill for creating data-rich, responsive dashboard interfaces with real-time updates |
| version | 1.0 |
| author | FF-Terminal |
| priority | high |
| triggers | ["dashboard","admin panel","analytics","monitoring","data visualization","metrics","kpi","charts","data_display","system_monitoring","business_intelligence","create.*dashboard","build.*admin.*panel","design.*analytics","generate.*monitoring.*interface"] |
| category | design |
| dependencies | ["frontend_design"] |
| config | {"max_widgets":50,"supported_charts":["line","bar","pie","area","scatter","heatmap","gauge","progress"],"refresh_intervals":["real_time","5_seconds","30_seconds","1_minute","5_minutes","15_minutes","1_hour"]} |
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 │
├─────┬─────┬───┤ ├─────┬─────┤ ├─────┬───┤
│ KPI │Chart│List│ │ KPI │Chart│ │ KPI │Tab│
│cards│ │ │ │cards │ │ │cards│nav│
├─────┴─────┴───┤ ├─────┴─────┤ ├─────┴───┤
│ Main chart │ │ Main chart │ │Content │
└─────────────────┘ └─────────────┘ └─────────┘
<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>
<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>
{
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
}
}
Remember: Great dashboards tell a clear story with data. Focus on actionable insights, not just displaying numbers.
Comprehensive AppleScript expertise for enterprise-grade macOS automation including multi-display management, URL scheme handling, deep linking, and complex workflow orchestration
The 'Awwwards Singularity' - Transforms websites into breathtaking digital experiences through cinematic motion, 3D graphics, and avant-garde typography. Eradicates boring, template-based web design.
Guides the agent through a short, repeatable debug loop: capture the failure, isolate the scope, draft a patch plan, and log the decision so the next agent can continue without rereading the entire repo.
Create reusable, accessible UI components with modern design patterns and interactions
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.