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. Start from the actual content, the task, and the project's identity. Use the original token validator, layout recipes, and deterministic scene kit in `references/design-system.md`; then enforce the rules below. ## Define the tokens before you style anything Never inline a raw hex or px. Name a token once, reference it everywhere: - **Color** — one `accent`, neutral `text` and `muted`, `canvas`/`surface` backgrounds, and `border`/`focus` roles. Keep functional controls monochrome; use accent for emphasis. - **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 type; don't mix radii at random. - **Elevation** — minimal. Many top brands use almost no shadow; depth comes from a surface-color change and backdrop-bl