Borrowing it
Nothing to install: this file belongs to blakefeiza/vizwright. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/blakefeiza/vizwright/main/.claude/skills/design-standards/SKILL.mdgit clone --depth 1 https://github.com/blakefeiza/vizwrightWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/blakefeiza/vizwright/design-standards)<a href="https://agentmods.dev/skills/blakefeiza/vizwright/design-standards"><img src="https://agentmods.dev/badge/skills/blakefeiza/vizwright/design-standards.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00053 | $0.02135 |
| Opus 5 | $0.00026 | $0.01068 |
| Sonnet 5 | $0.00011 | $0.00427 |
| Haiku 4.5 | $0.00005 | $0.00214 |
Grade A, and why
design-standards scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 150 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Dashboard Design Standards (VOTD-derived)
Derived from 300 cataloged Viz of the Day winners (2025-04 → 2026-07) and
close study of the top-favorited business dashboards
(knowledge/votd/images/*.png). These rules are enforced by the
design-linter agent using the rubric at the bottom.
1. Visual hierarchy — size first
- Exactly ONE dashboard title, the largest text on the page (24–28pt). Subtitle in 11–13pt grey on the same band, often stating the question or date context ("Tracking risk volume, severity, and time to resolution").
- Section/worksheet titles: 11–13pt, medium weight. Body/labels: 8–10pt.
- BAN numbers are the exception: 24–32pt bold — they ARE the message.
- Emphasis within text: bold or color on the key word/number only, never whole sentences. Hierarchy must survive a squint test: title → BANs → charts → detail.
2a. Color redundancy & accessibility (never color alone)
- Color must never be the ONLY channel carrying essential information — a reader who can't discern the hues must still get the message. Pair color with position (sorted order), direct labels, the takeaway title naming the members, or shape. Our standard moves: negative bars are red AND plot left of the zero line AND carry negative labels; focus regions are blue AND named in the title.
- Add visual separation between contiguous areas of color: stacked-bar segments get thin white borders so adjacent fills read as distinct (grammar in chart-xml-library recipe 15).
- Critical information is never interaction-only. Tooltips enrich; the headline, the ranking, and the anomaly must all be visible on the static render. (Our render-based lint enforces this implicitly — the linter only sees the PNG.)
- Written descriptions (captions, alt text, tooltips): objective and unambiguous. Actual values, not interpretations ("+16% vs 2025", never "growing rapidly"); spell out ambiguous formats ("June 2026" not "6/26"); describe what data MEANS, not what it looks like ("West region, the profit leader" — not "the dark blue line").
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 150 lines · 53 tokens per session scan A 212e289bd60f
design-standards is a skill published in the GitHub repository blakefeiza/vizwright (3 stars, last pushed 1mo ago), licensed MIT. It adds 53 tokens to every session and 2,135 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
dashboard-design
Use this skill first when the user wants to design or plan a dashboard, especially Vizro dashboards. Enforces a 3-step workflow (requirements, layout, visualization) before implementation. Activate when the user asks to create, design, or plan a dashboard. For implementation, use the dashboard-build skill after…
designing-vizro-layouts
Use this skill when designing or building Vizro dashboard layouts — grid configuration, component sizing, filter/parameter placement, selector types, or container patterns. Activate when the user is creating wireframes, defining page structure, placing controls, or sizing charts.
chart-designer
Design effective data visualizations and charts. Generate chart configurations for ECharts, Chart.js, and other libraries. Create dashboards and reports.
Explainer
Generate dense, visual-first HTML explainers in a signature dark aesthetic — diagrams carry the design, prose is captions only. Every section has a custom inline-SVG visualization: pipeline DAGs, archetype grids, hub-and-spoke diagrams, decision trees, risk matrices, gantt timelines, layer cakes, palette swatches…
diagram-design
Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, bar, line, Gantt and scatter charts, high-level…
flint-theme-author
Use when: creating, translating, refining, reviewing, or validating a custom Flint ThemeSpec from brand guidelines, websites, slide decks, publication references, design tokens, or an existing visual identity. Produce a reusable ThemeSpec JSON object for Flint Theme Lab without inventing fields or changing chart…