Agent skill · design visual · borghei
design-system
Design tokens, light/dark theming, and WCAG contrast validation for HTML documents and decks, compiled into one inlinable CSS bundle. Use when theming a report or deck, auditing contrast, or fixing dark-mode color drift.
Why this skill is useful
Adds specific workflows and scripts for generating themed CSS bundles and validating WCAG contrast that the AI wouldn't reliably generate on its own.
What it needs
Requires python3 installed locally. About 7k tokens when loaded. Last updated 2026-07-21. 462 stars on the source repository.
What this skill does
Document Design System The visual layer for HTML documents and slide decks: a token file in, a single self-contained CSS bundle out, with every color pairing checked against WCAG before it ships. This is the theming layer for documents — type scales, reading measure, print roles, light/dark surfaces. It is not a product UI component library; there are no buttons, form states, or component variants here. When to use this skill Theming a report or whitepaper that must render as one self-contained HTML file Building a deck theme where type must stay legible at projection distance Auditing an existing palette before a public or regulated publication Diagnosing dark-mode drift — text that reads fine in light mode and fails in dark Standardizing across documents so a series of reports looks like one series Answering "does this pass AA?" with a number instead of an opinion Inputs the skill expects A design-token JSON file (or the intent to generate one from assets/sampletokens.json) Brand colors, if any exist — a hex value and where it came from Typeface choices plus their fallback stacks (self-contained HTML cannot fetch web fonts) The conformance target: AA (default) or AAA Which artifacts consume the theme: document, deck, or both Whether the output will be printed or exported to PDF Clarify First Before generating a theme, confirm these inputs. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills borghei/design-system