القائمة
Specialized skill for creating data-rich, responsive dashboard interfaces with real-time updates
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/0-CYBERDYNE-SYSTEMS-0/FarmFriend-Terminal-React --skill dashboard-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
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.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| 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.