Use design system
Skill jcdavis131/cursor-agent-skills/skills/use-design-system
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.From its SKILL.md
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.
One thing to look at
- 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.
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
What ships with it: 1 file
779 B alongside SKILL.md
- reference.md779 B