agentleFS
Gonadotrophic-tangent41Gonadotrophic-tangent41/ux-ui-skills/dashboard-redesign/SKILL.md

dashboard-redesign

Skill0 starsChanged 3 months agoMITView on GitHub

Redesign dashboards, reporting surfaces, KPI views, operational consoles, and analytical workspaces around real decisions. Use when asked to improve dashboard hierarchy, metric cards, charts, tables, filters, density, drilldowns, comparison, data trust, responsiveness, or accessibility. Diagnose the dashboard type and decision model before changing visuals; produce an information architecture, metric and visualization rationale, interaction behavior, state coverage, and testable redesign specification. Do not use for isolated chart styling with no product context or for inventing metrics without data ownership.

1 other project uses a version of this, 1 of them edited.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 0

    None found.

    Edited · 1

    1. aditya-ariosity/ux-ui-skills★ 262% same

    Wrote their own version · 0

    None found.

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repository5 other files it gives its agents.

The file

We split this skill into the rules it gives an agent

11 rules. About 0 are common, 11 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈11

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    If these are unknown, state assumptions and mark metric semantics for owner validation.

    line 22
  2. Distinctive:

    Do not invent viewport baselines, breakpoints, refresh thresholds, metric cutoffs, targets, card counts, or density values.

    line 24
  3. Distinctive:

    Remove or demote data that does not support a scoped decision, diagnosis, or required reporting obligation.

    line 34
  4. Distinctive:

    Use stable regions and consistent reading order.

    line 46
  5. Distinctive:

    Do not turn every measure into a card.

    line 48
  6. Distinctive:

    Read references/visualization-and-metrics.md.

    line 52
  7. Distinctive:

    Prefer position and length for precise comparison.

    line 61
  8. Distinctive:

    Treat numerical layout values and styling directions as proposals only when the user asks for visual specification and the product system …

    line 63
  9. Distinctive:

    Read references/interaction-accessibility-qa.md.

    line 77
  10. Distinctive:

    Write observable criteria for comprehension, data correctness, interaction, accessibility, responsiveness, and performance.

    line 114
  11. Distinctive:

    every visible element supports a decision, diagnosis, action, or obligation.

    line 122

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Dashboard Redesign

Design a decision instrument, not a wall of metrics. Preserve useful density, expose the comparisons that matter, and make data quality and scope legible.

1. Establish the decision model

Identify:

  • primary role, expertise, frequency, and environment;
  • decisions and actions the dashboard must support;
  • monitoring cadence and acceptable time to notice;
  • metric definitions, owners, source, freshness, and latency;
  • required comparisons, targets, thresholds, and segments;
  • downstream workflow from signal to investigation to action;
  • devices, display duration, accessibility needs, and export requirements.

If these are unknown, state assumptions and mark metric semantics for owner validation. Never infer that a visible number is a KPI.

Do not invent viewport baselines, breakpoints, refresh thresholds, metric cutoffs, targets, card counts, or density values. Define the decision or content condition first; map it to an existing product constraint only when supplied or inspected.

Classify the surface using references/dashboard-models.md. A monitoring board, executive scorecard, operational queue, and analytical workspace need different density and interaction.

2. Inventory decisions before widgets

Build a compact matrix:

Decision | Signal | Comparison | Grain | Freshness | Action | Failure cost

Remove or demote data that does not support a scoped decision, diagnosis, or required reporting obligation. Identify missing context before selecting chart types.

3. Create the information architecture

Organize the page in this order when it matches the task:

  1. scope and data state;
  2. conditions requiring attention;
  3. core outcome and comparison;
  4. causes or contributing dimensions;
  5. records, evidence, and actions.

Use stable regions and consistent reading order. Keep controls near the data they affect. Make global and local filters visually distinct. Preserve active filters, time zone, time range, currency, units, and comparison basis across drilldown.

Do not turn every measure into a card. A compact table or sentence can outperform a chart; a chart can outperform a single number when pattern or comparison matters.

4. Select representations

Read references/visualization-and-metrics.md. For each element, state:

  • the question it answers;
  • why this representation is faster or safer than the alternatives;
  • the comparison and baseline;
  • encoding, units, precision, labels, and ordering;
  • accessible equivalent or data access;
  • behavior for missing, partial, stale, or delayed data.

Prefer position and length for precise comparison. Avoid 3D, decorative gauges, unbounded color ramps, and charts whose meaning depends on hover. Use direct labels when practical; do not rely on color alone.

Treat numerical layout values and styling directions as proposals only when the user asks for visual specification and the product system supports them. Otherwise specify hierarchy, constraints, and behavior without arbitrary radii, spacing, or canvas sizes.

5. Design interactions and drilldown

Define the path:

overview -> notice -> compare -> isolate -> inspect -> act -> confirm -> return

Specify filtering, cross-filtering, sorting, pagination or virtualization, selection, zoom, annotations, saved views, sharing, export, and reset only when the user needs them. Keep the transition from aggregate to record-level evidence reversible and context-preserving.

For operational dashboards, expose ownership, status, age, urgency, and next action. For analytical workspaces, support comparison and hypothesis testing without hiding definitions or silently changing denominators.

6. Cover states and constraints

Read references/interaction-accessibility-qa.md. Define:

  • loading, streaming, stale, partial, empty, no-result, error, permission, and offline states;
  • responsive priorities and table/chart adaptation;
  • keyboard and screen-reader behavior;
  • reduced motion and non-color signals;
  • latency feedback and expensive-query behavior;
  • data lineage, freshness, and definition access.

7. Produce the redesign brief

Return:

Diagnosis

Name the dashboard type, primary decisions, dominant failure modes, and evidence confidence in no more than five bullets.

Decision architecture

Provide the decision matrix and proposed section order.

Component specification

For each region use:

Purpose | Content | Representation | Interaction | States | Responsive rule | Accessibility

Metric and chart rationale

Explain additions, removals, merges, and representation changes. Separate definition questions from visual design.

Drilldown contract

Describe scope persistence, transition, detail, actions, and return behavior.

Acceptance criteria

Write observable criteria for comprehension, data correctness, interaction, accessibility, responsiveness, and performance.

Validation plan

Recommend task-based testing with representative users and real or realistic data. Include success signals such as time to detect, interpretation accuracy, decision confidence, error rate, and action completion. Do not use generic satisfaction as the sole measure.

Quality bar

  • every visible element supports a decision, diagnosis, action, or obligation;
  • metrics expose definition, units, scope, comparison, and freshness where material;
  • hierarchy follows urgency and task, not visual novelty;
  • density reflects expertise and frequency;
  • chart choice matches the analytical question;
  • filters and drilldowns preserve context;
  • missing and stale data cannot masquerade as zero or current;
  • accessibility does not depend on a separate simplified dashboard.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.