Frontend
Visual design taste for web UI, distilled from a stronger model's aesthetic - invoke when about to BUILD or STYLE any web page, component, artifact, or UI; picking a visual direction; writing CSS; reviewing how a design looks; or when a design works but feels generic or boring. Named style directions with exact tokens, concrete craft numbers, and a catalog of garbage design to refuse.From its SKILL.md
npx -y skills add telagod/code-abyss --skill frontendAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
2.0 KB, 381 tokens by cl100k_base, as published. Nobody here has run it
Frontend — taste, styles, craft, and what to refuse
Rule content lives in the five files below; this SKILL.md only routes (duplicating rule
text here is drift — doctrine/04-maintenance.md governs edits to this bundle too).
Route by moment
| You are about to… | Read (in this folder) |
|---|---|
| Start any page/component/artifact — brief to shipped | process.md first; it routes onward |
| Pick a visual direction, or choose between styles | styles.md |
| Understand what makes a design striking vs mediocre; make a boring design memorable | taste.md |
| Write actual CSS values — type, space, color, depth, motion, dark mode | craft.md |
| Judge a design (yours or anyone's); name precisely why something feels cheap | garbage.md |
Start with the ONE file that matches and follow its cross-references — they are required
inputs, not optional reading. Starting from scratch usually means process.md + the two
files it points you to.
Scope and neighbors
This bundle is the visual/aesthetic layer only. Server-side design (stack, APIs,
data) → the backend bundle; whether to delegate → doctrine; how to think → methods. If the environment provides an artifact-design skill
(harness-side), it calibrates how much to invest per request; THIS bundle governs
direction and craft once you're building.
The stance
Left unguided, every model produces the same page (garbage.md §A names it precisely).
What taste means here — and why a clean-but-forgettable page counts as a failure — is
taste.md's opening; read it before judging any design.
What ships with it: 5 files
29.9 KB alongside SKILL.md
- craft.md7.1 KB
- garbage.md5.1 KB
- process.md4.7 KB
- styles.md6.9 KB
- taste.md6.1 KB
Gives 0 of the 12 instructions most design frontend skills give in 381 tokens
Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06
- Commit to a bold aesthetic directionin 31 of 1179, across 24 files
- Prefer component composition over inheritancein 28 of 1179, across 14 files
- Animate only transform and opacity propertiesin 27 of 1179, across 22 files
- Memoize expensive computations with useMemoin 26 of 1179, across 13 files
- Use semantic HTML elementsin 24 of 1179, across 23 files
- Virtualize long lists for performancein 21 of 1179, across 10 files
- Use CSS variables for design tokensin 20 of 1179, across 14 files
- Implement loading, empty, and error statesin 20 of 1179
- Lazy load heavy components with Suspensein 19 of 1179, across 8 files
- Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
- Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
- Use compound components for related UI elementsin 18 of 1179, across 7 files
Said here and by no other author read
- Read process.md first for any new component
- Consult styles.md to pick a visual direction
- Read taste.md to understand striking design
- Use craft.md for CSS values
- Use garbage.md to judge design quality
- Follow all cross-references in the files
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.