Dashboard from research

Skill sarveshsea/design-skills/skills/dashboard-from-research

Practical design judgment for AI coding agents: 78 installable skills for craft, research, generation, Figma, and Memoire.

Install

npx -y skills add sarveshsea/design-skills --skill dashboard-from-research

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Transform research data (Excel, CSV, stickies) into structured insights and interactive dashboards

SKILL.md

4.4 KB, as published. Nobody here has run it

Dashboard from Research — Research Data to Interactive Dashboard

Transform research data (Excel, CSV, FigJam stickies, markdown) into structured insights and interactive dashboards with dataviz components. Chains research pipeline → specs → code generation → preview.

Freedom Level: High

Full autonomy over data interpretation, visualization choices, and dashboard layout. Must back every design decision with the research data.

When to Use

User has research data (Excel, CSV, survey results, interview notes)
FigJam board has stickies from workshops or brainstorming
Need to create a dashboard that visualizes research findings
Turning qualitative/quantitative data into actionable UI

Workflow

Step 1: Ingest 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.

Step 2: Analyze & Categorize

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

Step 3: Create Specs (Atomic Design)

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]

Step 4: Generate Code

memi generate                      → all specs → React + Tailwind
memi preview                       → localhost preview server

Step 5: Design in Figma (Optional)

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

Dashboard Layout Pattern

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 → Chart Type Decision

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>`

Anti-Patterns

Creating charts without understanding the data first
Using complex visualizations when a simple KPI card suffices
Not including data source attribution
Hardcoding sample data instead of connecting to research output
Skipping the research synthesis step (going straight to UI)
Not generating specs before code (violates spec-first)