Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
A skill your agent uses to generate or audit design systems, check visual consistency, and review PRs that touch styling.
Install Design System
$ npx skills add templetongroup/radiant --skill design-system -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install templetongroup/radiant design-system --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/templetongroup/radiant.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-system .claude/skills/design-system && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-system" agent skill from https://github.com/templetongroup/radiant/tree/master/skills/design-system into .claude/skills/design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/templetongroup/radiant/tree/master/skills/design-systemType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add templetongroup/radiant --skill design-system -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install templetongroup/radiant design-system --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/templetongroup/radiant.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-system .agents/skills/design-system && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-system" agent skill from https://github.com/templetongroup/radiant/tree/master/skills/design-system into .agents/skills/design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add templetongroup/radiant --skill design-system -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install templetongroup/radiant design-system --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/templetongroup/radiant.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-system .cursor/skills/design-system && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-system" agent skill from https://github.com/templetongroup/radiant/tree/master/skills/design-system into .cursor/skills/design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/templetongroup/radiant.git --path skills/design-system--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add templetongroup/radiant --skill design-system -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install templetongroup/radiant design-system --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/templetongroup/radiant.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-system .gemini/skills/design-system && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-system" agent skill from https://github.com/templetongroup/radiant/tree/master/skills/design-system into .gemini/skills/design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install templetongroup/radiant design-systemInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add templetongroup/radiant --skill design-system -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/templetongroup/radiant.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-system .github/skills/design-system && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-system" agent skill from https://github.com/templetongroup/radiant/tree/master/skills/design-system into .github/skills/design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add templetongroup/radiant --skill design-system -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install templetongroup/radiant design-system --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/templetongroup/radiant.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-system .opencode/skills/design-system && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-system" agent skill from https://github.com/templetongroup/radiant/tree/master/skills/design-system into .opencode/skills/design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-system- GitHub stars
- 113
- Token cost
- ~775 tokens
- SKILL.md length
- 116 words
- Files
- 2 (incl. references)
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses to generate or audit design systems, check visual consistency, and review PRs that touch styling.
- Audit design systems
- SKILL.md covers When to Use, How It Works and Examples
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Check visual consistency
What it does
Design System is an agent skill from templetongroup/radiant. Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when generating or auditing a design system, checking visual consistency, or reviewing a PR that touches styling.
Its SKILL.md is about 780 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/palette-generation.md`).
It sits in Frontend & Design, covering Design systems. The repository describes itself as: A local coding harness for Mac. Chat with coding agents across cloud and local models, watch every tool call in a live activity feed, and drive a real terminal — in one window… The licence is MIT.
When your agent uses it
- Audit design systems
- Check visual consistency
- Review PRs that touch styling
- Auditing a design system
Example prompts
- “/design-system”
What it can do on your machine
Read from SKILL.md and the folder at commit 94838ca. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design System loads about 775 tokens when it runs, and up to ~3k if it reads all its reference files. Until then it costs about 61 tokens; SKILL.md has 116 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from templetongroup/radiant at commit 94838ca, republished under its MIT licence (© templetongroup). 116 words, ~775 tokens.
Download SKILL.mdSave it as
.claude/skills/design-system/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- design-system
- description
- Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when generating or auditing a design system, checking visual consistency, or reviewing a PR that touches styling.
- metadata.origin
- ECC
Design System — Generate & Audit Visual Systems
When to Use
- Starting a new project that needs a design system
- Auditing an existing codebase for visual consistency
- Before a redesign — understand what you have
- When the UI looks "off" but you can't pinpoint why
- Reviewing PRs that touch styling
How It Works
Mode 1: Generate Design System
Analyzes your codebase and generates a cohesive design system:
1. Scan CSS/Tailwind/styled-components for existing patterns
2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints
3. Research 3 competitor sites for inspiration (via browser MCP)
4. Propose a design token set (JSON + CSS custom properties)
→ see `references/palette-generation.md` — derive in OKLCH not HSL, emit a
12-step ramp, and never let one token be both the brand fill and the text
5. Generate DESIGN.md with rationale for each decision
6. Create an interactive HTML preview page (self-contained, no deps)Output: DESIGN.md + design-tokens.json + design-preview.html
Mode 2: Visual Audit
Scores your UI across 10 dimensions (0-10 each):
1. Color consistency — are you using your palette or random hex values?
2. Typography hierarchy — clear h1 > h2 > h3 > body > caption?
3. Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?
4. Component consistency — do similar elements look similar?
5. Responsive behavior — fluid or broken at breakpoints?
6. Dark mode — complete or half-done? (a ramp inverted from the light theme is
half-done by construction — `references/palette-generation.md` §6)
7. Animation — purposeful or gratuitous?
8. Accessibility — contrast ratios, focus states, touch targets
(compute contrast, don't eyeball it — `references/palette-generation.md` §8)
9. Information density — cluttered or clean?
10. Polish — hover states, transitions, loading states, empty statesEach dimension gets a score, specific examples, and a fix with exact file:line.
Mode 3: AI Slop Detection
Identifies generic AI-generated design patterns:
- Gratuitous gradients on everything
- Purple-to-blue defaults
- "Glass morphism" cards with no purpose
- Rounded corners on things that shouldn't be rounded
- Excessive animations on scroll
- Generic hero with centered text over stock gradient
- Sans-serif font stack with no personality
- Brand colour wired straight to `--accent` and used for text, unmeasured — the
single most common generated-palette defect (`references/palette-generation.md` §1)Examples
Generate for a SaaS app:
/design-system generate --style minimal --palette earth-tonesAudit existing UI:
/design-system audit --url http://localhost:3000 --pages / /pricing /docsCheck for AI slop:
/design-system slop-check© templetongroup, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in skills/design-system of templetongroup/radiant.
- SKILL.md
- references/palette-generation.md
Open the folder on GitHubat commit 94838ca
Compare with similar skills
Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design System this skilltempletongroup/radiant | 113 | — | ~775 | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 26 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Shadcnsupabase/evals | 145 | 43 repos | ~4.5k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
- Official
Shadcn
supabase/evals
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
More from templetongroup/radiant
All 9 skills in this repoMaster Design
templetongroup/radiant
Design, redesign, build, audit, polish, and production-verify exceptional interfaces across web, mobile, and native apps.
Tinystruct Patterns
templetongroup/radiant
Expert guidance for developing with the tinystruct Java framework.
Agent Payment X402
templetongroup/radiant
Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets.
Motion UI
templetongroup/radiant
Production-ready UI motion system for React/Next.js. An agent skill from templetongroup/radiant.
Plan Orchestrate
templetongroup/radiant
Read a plan document, decompose it into steps, design a per-step agent chain from the ECC catalogue, and emit ready-to-paste /orchestrate custom prompts.
Star System
templetongroup/radiant
Ask the user to rate the code/output just produced on a 1-5 star scale, then ask rating-appropriate follow-up questions, log the rating, and iterate until the work reaches 4+ stars.
Related
Categories
Questions about Design System
What does Design System do?
A skill your agent uses to generate or audit design systems, check visual consistency, and review PRs that touch styling. Design System is an agent skill from templetongroup/radiant. Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
When should I use Design System?
Design System fits situations like: audit design systems; check visual consistency; review PRs that touch styling; auditing a design system.
How do I install Design System in Claude Code?
Run `npx skills add templetongroup/radiant --skill design-system -a claude-code`. Or copy the skill folder (skills/design-system in templetongroup/radiant) into .claude/skills/design-system in your project. Claude Code loads it when a task matches its description.
How do I install Design System in Codex?
Run `npx skills add templetongroup/radiant --skill design-system -a codex`. Or copy the skill folder (skills/design-system in templetongroup/radiant) into .agents/skills/design-system in your project. Codex loads it when a task matches its description.
Can I use Design System in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add templetongroup/radiant --skill design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system, .gemini/skills/design-system, .github/skills/design-system and .opencode/skills/design-system in your project.
What does Design System need to run?
SKILL.md names no scripts, command-line tools or credentials: Design System is instructions for the agent only.
Does Design System access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design System safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design System use?
Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design System use?
About 775 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.3k tokens, read only when the agent opens those files.
What are the alternatives to Design System?
Skills that share tags, products or a category with Design System: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design System?
templetongroup (a GitHub user) maintains it in templetongroup/radiant, which has 113 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 6, 2026.
Source: templetongroup/radiant on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.