Use design system
Skill jcdavis131/cursor-agent-skills/skills/use-design-system
42 agent-discipline skills for Cursor, distilled by watching an autonomous terminal coding agent (Claude Code + Fable 5). Includes the derivation method.
npx -y skills add jcdavis131/cursor-agent-skills --skill use-design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 27 days oldThe repository was created 27 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Uses shared UI package primitives instead of hand-rolled markup, greps the source to verify class and component names, and sets page metadata on every page. Use when authoring UI in a repo with a shared UI package (e.g. @synthaembed/ui-fleet), when adding pages or components, or when unsure of a design token or class name.
SKILL.md
1.5 KB, 281 tokens by cl100k_base, as published. Nobody here has run it
Use Design System
A shared UI package encodes the design system. Primitives give cross-site consistency; hand-rolled markup drifts.
The move
- Find the shared package —
packages/ui-*,@repo/ui,@*/ui-fleet. Read exports. - Use primitives, not raw markup — PageHeader, Card, Button from the package; raw
<div>only when no primitive fits. - Verify names in source — grep before trusting memory:
grep -n "bh-btn\|bh-card" packages/ui-fleet/src/components.css | head -6 - Set page metadata — every page exports
metadata(title for SEO/share cards).
When a primitive doesn't fit
Closest primitive + constraints; add to shared package if 2+ sites need it (lane-discipline); one-off hand-roll with a comment explaining why.
Extended patterns
Shared-vs-local decision, build order, SDK domain imports, barrel exports: reference.md
Anti-patterns
Hand-rolling for speed; trusting memory for class names; bypassing shared package "just once"; site-local instead of shared when reusable.
Pair with
match-conventions·validate-gate·lane-discipline
Gives 0 of the 12 instructions most design systems skills give in 281 tokens
Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06
- create a custom theme if neededin 54 of 528, across 10 files
- read the corresponding theme filein 54 of 528, across 10 files
- ask which theme to applyin 53 of 528, across 9 files
- show the theme showcasein 53 of 528, across 9 files
- maintain visual identity across all slidesin 50 of 528, across 6 files
- apply the specified colors and fontsin 47 of 528, across 3 files
- get explicit confirmationin 45 of 528, across 1 file
- Generate a design system before codingin 19 of 528, across 6 files
- Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
- Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
- Check Python installation and install if missingin 17 of 528, across 4 files
- Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files
Said here and by no other author read
- Find the shared UI package and read its exports
- Use primitives instead of raw markup
- Verify class and component names by grepping source
- Set page metadata on every page
- Use the closest primitive plus constraints when none fit
- Add to the shared package if two or more sites need it
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.