How do I install the Design System skill?

Run npx skillmds@latest add skillist-io/design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design System safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design System?

skillist-io (@skillist-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design System by skillist-io — Agent Skill

Name: Design System
Author: skillist-io

Design System

Skillist's visual system ("The Control Surface") and WCAG 2.2 AA rules for any UI work in apps/web or apps/docs. Use when creating/editing components, routes, styles, or tokens, or reviewing UI. Full detail lives in DESIGN.md / PRODUCT.md.

skillist-io Updated Sep 17, 2026

File contents

Design system — "The Control Surface"

An instrument panel: precise, technical, calm. Borrow the composure of Linear/Vercel/Warp, not their palettes. Full spec: DESIGN.md, PRODUCT.md, tokens in DESIGN.json and apps/web/src/index.css.

Visual rules

Squared geometry — 0px radius on buttons, badges, cards, inputs, images. No rounded corners anywhere.
Monochrome ink ramp (OKLCH, chroma 0) for all structure, plus exactly two chromatic voices:
- destructive red = failure/danger
- signal violet oklch(0.52 0.21 293) light / oklch(0.72 0.19 293) dark = "live right now" (≤10% of screen; four surfaces max)
- No other accent colors. Badges are text-only — no colored chips.
Underline inputs, not boxed boxes. Hairline rings, not shadows (flat by default, shadow-sm max).
Uppercase, wide-tracked micro-labels for badges/eyebrows/status; buttons and nav are sentence-case, medium-weight (deliberate hybrid). Machine values in mono; prose never mono. Literal white oklch(1 0 0) light background. Display capped ~3rem (hero up to ~4rem).

Anti-references (do NOT drift toward these)

Generic shadcn/AI-default (grayscale-neutral + Inter + default-purple); playful/consumer/rounded; cluttered enterprise dashboard; loud SaaS marketing.

Accessibility — WCAG 2.2 AA (required)

Body contrast ≥4.5:1 (≥3:1 large/bold); placeholders held to 4.5:1.
Full keyboard nav + visible, high-contrast focus rings.
Light and dark themes must both pass.
prefers-reduced-motion fallback for every animation.
Never encode status by color alone — always pair a word, icon, or shape.

Practice

Use tokens from src/index.css (@theme inline, OKLCH vars, .dark) over literal colors. Compose with cn() (@/lib/utils) and cva, matching the squared/ink/uppercase geometry of existing src/components/ui/*.
For live visual iteration, use the /impeccable skill (live mode configured) rather than eyeballing screenshots.

---name: design-systemdescription: Skillist's visual system ("The Control Surface") and WCAG 2.2 AA rules for any UI work in apps/web or apps/docs. Use when creating/editing components, routes, styles, or tokens, or reviewing UI. Full detail lives in DESIGN.md / PRODUCT.md.---# Design system — "The Control Surface"An instrument panel: precise, technical, calm. Borrow the *composure* of Linear/Vercel/Warp, not their palettes. Full spec: `DESIGN.md`, `PRODUCT.md`, tokens in `DESIGN.json` and `apps/web/src/index.css`.## Visual rules- **Squared geometry** — 0px radius on buttons, badges, cards, inputs, images. No rounded corners anywhere.- **Monochrome ink ramp** (OKLCH, chroma 0) for all structure, plus exactly **two chromatic voices**: - destructive **red** = failure/danger - signal **violet** `oklch(0.52 0.21 293)` light / `oklch(0.72 0.19 293)` dark = "live right now" (≤10% of screen; four surfaces max) - No other accent colors. **Badges are text-only** — no colored chips.- **Underline inputs**, not boxed boxes. **Hairline rings, not shadows** (flat by default, `shadow-sm` max).- Uppercase, wide-tracked micro-labels for badges/eyebrows/status; **buttons and nav are sentence-case, medium-weight** (deliberate hybrid). **Machine values in mono; prose never mono.** Literal white `oklch(1 0 0)` light background. Display capped ~3rem (hero up to ~4rem).## Anti-references (do NOT drift toward these)Generic shadcn/AI-default (grayscale-neutral + Inter + default-purple); playful/consumer/rounded; cluttered enterprise dashboard; loud SaaS marketing.## Accessibility — WCAG 2.2 AA (required)- Body contrast ≥4.5:1 (≥3:1 large/bold); placeholders held to 4.5:1.- Full keyboard nav + visible, high-contrast focus rings.- **Light and dark themes must both pass.**- `prefers-reduced-motion` fallback for every animation.- **Never encode status by color alone** — always pair a word, icon, or shape.## Practice- Use tokens from `src/index.css` (`@theme inline`, OKLCH vars, `.dark`) over literal colors. Compose with `cn()` (`@/lib/utils`) and `cva`, matching the squared/ink/uppercase geometry of existing `src/components/ui/*`.- For live visual iteration, use the `/impeccable` skill (live mode configured) rather than eyeballing screenshots.

Frequently asked questions