菜单
Specialized skill for creating data-rich, responsive dashboard interfaces with real-time updates
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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.