Enforces precise, minimal design for dashboards and admin interfaces. Use when building SaaS UIs, data-heavy interfaces, or any product needing Jony Ive-level craft.
Enforces precise, minimal design for dashboards and admin interfaces.
/plugin marketplace add rileyhilliard/claude-essentials/plugin install ce@claude-essentialsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/craft-details.mdCore philosophy: Every interface should look designed by a team that obsesses over 1-pixel differences. Not stripped, crafted. And designed for its specific context.
Before writing code, commit to a direction. Don't default. Think about what this specific product needs to feel like.
| Direction | Feel | When to Use |
|---|---|---|
| Precision & Density | Tight spacing, monochrome, info-forward | Power users who live in the tool. Linear, Raycast, terminal aesthetics. |
| Warmth & Approachability | Generous spacing, soft shadows, friendly | Products that want to feel human. Notion, Coda, collaborative tools. |
| Sophistication & Trust | Cool tones, layered depth, gravitas | Products handling money or sensitive data. Stripe, Mercury. |
| Boldness & Clarity | High contrast, dramatic negative space | Modern, decisive products. Vercel, minimal dashboards. |
| Utility & Function | Muted palette, functional density | Work matters more than chrome. GitHub, developer tools. |
| Data & Analysis | Chart-optimized, technical but accessible | Analytics, metrics, business intelligence. |
Pick one. Or blend two. But commit to a direction that fits the product.
Color foundation (don't default to warm):
Light or dark? Dark feels technical, focused, premium. Light feels open, approachable, clean. Choose based on context.
Accent color: ONE that means something. Blue = trust. Green = growth. Orange = energy. Violet = creativity.
All spacing uses 4px base: 4px (micro), 8px (tight), 12px (standard), 16px (comfortable), 24px (generous), 32px (major).
TLBR must match. If top is 16px, all sides are 16px. Exception: when content naturally creates visual balance.
Stick to 4px grid. Pick a system and commit:
Match depth to design direction. Different products need different approaches:
The craft is in the choice, not the complexity. A flat interface with perfect spacing is more polished than shadow-heavy with sloppy details.
Use monospace for numbers, IDs, codes, timestamps. Use tabular-nums for columns.
Font pairing: Display font for headlines (one statement font) + neutral body font. Don't mix two display fonts.
Gray builds structure. Color only appears when it communicates: status, action, error, success. Four-level contrast hierarchy: foreground → secondary → muted → faint.
Internal layouts should vary by content. A metric card doesn't have to look like a plan card doesn't have to look like a settings card. One might have a sparkline, another an avatar stack, another a progress ring.
Surface treatment stays consistent: same border weight, shadow depth, corner radius, padding scale.
Never use native form elements for styled UI. Native <select>, <input type="date"> render OS-native elements that cannot be styled. Build custom components.
Custom select triggers: display: inline-flex with white-space: nowrap to keep text and icons on same row.
Screens need grounding:
When building sidebars, consider using same background as main content. Linear, Vercel use subtle border for separation rather than different backgrounds.
Motion is communication, not decoration. Every animation should have a reason.
ease-out for entrances, ease-in for exits, ease-in-out for state changesAvoid: Spring physics, bouncy overshoots, parallax effects. Keep motion functional.
For products that need visual depth beyond shadows:
backdrop-filter: blur() for elevated surfaces, used sparinglyMatch to personality: Precision products stay flat. Sophisticated products layer depth.
Never:
0 25px 50px...)Different products want different things. A dev tool wants precision and density. A collaborative product wants warmth and space. A financial product wants trust and sophistication.
Same quality bar, context-driven execution.
For CSS values and implementation details, see references/craft-details.md.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.