القائمة
Transform research data (Excel, CSV, stickies) into structured insights and interactive dashboards
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | dashboard-from-research |
| description | Transform research data (Excel, CSV, stickies) into structured insights and interactive dashboards |
Transform research data (Excel, CSV, FigJam stickies, markdown) into structured insights and interactive dashboards with dataviz components. Chains research pipeline → specs → code generation → preview.
Full autonomy over data interpretation, visualization choices, and dashboard layout. Must back every design decision with the research data.
memi research from-file <path> → Excel/CSV parsing
memi research from-stickies → FigJam sticky notes
memi research synthesize → Combine all sources
Output: research/insights.json with structured findings.
Classify insights into dashboard-friendly categories:
Quantitative → KPI cards, charts, trend lines
- Metrics: numeric values with labels
- Time series: data over time → line/area charts
- Comparisons: A vs B → bar charts
- Distributions: spread → histograms
Qualitative → Text summaries, tag clouds, quotes
- Themes: grouped findings → category cards
- Quotes: user verbatims → quote components
- Sentiment: positive/negative → sentiment indicators
Relational → Flow diagrams, matrices, maps
- User journeys: step sequences → flow components
- Relationships: connections → network graphs
- Hierarchies: nested structures → tree views
For each visualization need, create the right spec type:
KPI metric → memi spec component MetricCard (molecule)
props: { title, value, change, trend, icon }
Trend chart → memi spec dataviz TrendChart
chartType: "area" | "line"
dataShape: { x: "date", y: "value", series: [...] }
Comparison → memi spec dataviz ComparisonChart
chartType: "bar"
dataShape: { category: "string", values: [...] }
The dashboard page → memi spec page ResearchDashboard
layout: "dashboard"
sections: [metrics-row, charts-row, insights-section, quotes]
memi generate → all specs → React + Tailwind
memi preview → localhost preview server
If the dashboard should also exist in Figma:
1. use_figma → create the dashboard layout using components
2. figma_take_screenshot → validate
3. Self-healing loop (max 3 rounds)
4. add_code_connect_map → establish design ↔ code parity
Frame (VERTICAL, fill, 1280×900)
├── Header (HORIZONTAL, hug height, fill width, padding=24)
│ ├── Title: "Research Dashboard"
│ ├── Subtitle: research date range
│ └── Actions: export, filter, refresh
├── Metrics Row (HORIZONTAL, fill, gap=16, padding=24)
│ └── MetricCard × 4-6 (fill, equal width)
├── Charts Section (HORIZONTAL, fill, gap=16, padding=0-24)
│ ├── Primary Chart (2/3 width)
│ └── Secondary Chart (1/3 width)
├── Insights Grid (grid 2-3 col, gap=16, padding=24)
│ └── InsightCard × N
└── Detail Section (VERTICAL, fill, padding=24)
└── DataTable or QuotesList
| Data Pattern | Chart Type | Recharts Component |
|---|---|---|
| Single value + trend | KPI Card | Custom (Card + Badge) |
| Values over time | Area/Line | <AreaChart> / <LineChart> |
| Category comparison | Bar | <BarChart> |
| Part of whole | Pie/Donut | <PieChart> |
| Two dimensions | Scatter | <ScatterChart> |
| Distribution | Histogram | <BarChart> (binned) |
| Multiple metrics | Composed | <ComposedChart> |
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
Design, implement, and verify App Intents, App Entities, App Shortcuts, widgets, Siri, Spotlight, and Apple Intelligence surfaces with stable identity and safe execution.
Diagnose SwiftUI rendering, launch, responsiveness, concurrency, memory, energy, and simulator failures using reproducible traces and before-after evidence.
Mobile-first design mastery — touch targets, gesture patterns, responsive breakpoints, native-feel animations, thumb zones, platform conventions (iOS/Android), and progressive enhancement strategies
Design and review Swift 6 concurrency boundaries using structured tasks, actors, Sendable values, cancellation, and compiler-backed data-race safety.
Build an Apple-platform test strategy with Swift Testing for unit and integration coverage, XCTest for UI automation, deterministic fixtures, and concise agent-readable results.