fabius-decorlisted

fabius's ship-grade design layer — gives the agent a token vocabulary, the universal laws that separate amateur UI from shipped UI, and a quality checklist. Use when building or reviewing any UI — a landing page (visual execution; the message and copy are fabius-mercatus), a component, a screen, an email, a slide, a brand surface, a chart, a diagram, a data visualization — when the user references a brand look, or asks to make something "look good", "more polished", "production quality", "chart this", "graph this", or "visualize this data". Also covers generating images (for image models) and explanatory diagrams that teach a system: "generate an image", "diagram this", "explain this codebase visually". Also owns responsive/mobile-first layout and a finished design's accessibility — focus states, contrast, ARIA-only — plus icon choice, motion libraries, design assets (illustrations · 3D · textures · fonts · color · HuggingFace) and right-to-left / bidirectional layout (RTL, Hebrew/Arabic).
shear559/fabius · ★ 2 · AI & Automation · score 64

Install: claude install-skill shear559/fabius

# Fabius Decor — what good actually looks like *Decor* — what is fitting, what becomes the thing. Good design is fitness to purpose, not decoration. Across dozens of teardowns of shipped brands, the same short list of laws holds. Amateur UI breaks them; shipped UI obeys them. Pick one brand as a concrete target from the 69-brand library in `references/design/` (one `DESIGN-<brand>.md` each), then enforce the laws below. ## Define the tokens before you style anything Never inline a raw hex or px. Name a token once, reference it everywhere: - **Color** — `primary` (the ONE interactive accent — usually exactly one), `ink`/`body` (near-black, not `#000` — e.g. `#1d1d1f`, which reads photographic), `canvas`/`surface` (white plus one off-white for rhythm), `muted` (secondary text), `hairline` (1px borders). - **Type scale** — a fixed ladder of sizes and weights (e.g. 300/400/600/700; skip 500 if the brand does). Display sizes carry **negative letter-spacing** for the tight modern feel; body runs 16–17px with generous line-height (~1.5). Set the ragging too — `text-wrap: balance` on headings, never a `<br>`. - **Spacing** — one base unit (8px); every structural step snaps to it (8 / 12 / 16 / 24 / 32 / 48 / 80). Section padding runs large (64–80px). - **Radius** — a small fixed set (e.g. sm / md / lg / pill). One grammar per element