What is the ui-craft-minimal skill?
The ui-craft-minimal skill is a single SKILL.md in the educlopez/ui-craft repository. It sets CRAFT 8, MOTION 3 and DENSITY 2, then tells your agent to use monochrome with one accent, hairline borders instead of shadows, and 120 to 200px vertical section padding.
The ui-craft-minimal skill is one of three style variants in the UI Craft system. It triggers on words such as minimal, clean, Linear-like, Notion-like, Vercel-like and whitespace-heavy, then locks the system's knobs to a fixed setting.
Its folder holds only a SKILL.md. Base rules and references stay in the main ui-craft skill, and the variant reads its layout, typography, color and accessibility files rather than duplicating them.
The look it enforces
- Monochrome with one accent, using Inter or Geist body text at weight 400 and 500 for emphasis.
- Hairline borders written as 1px solid oklch(92% 0.005 250) in place of shadows.
- Vertical section padding of 120 to 200px, a max-w-5xl container, and max-w-3xl for reading.
- Radius of 6px, 8px and 12px.
Layout and motion limits
The hero is a single column and navigation is text links only. Card grids with more than two columns, three-up icon grids, gradients, glass and noise are all ruled out.
Motion is limited to hover at 120 to 150ms, modal enter and exit at 180 to 220ms, and the focus ring.
Who the ui-craft-minimal skill is for
Best for
- Interfaces in the quiet style of Linear, Notion and Vercel, which the skill names as its anchors.
- Projects already using UI Craft that need a locked, repeatable style.
Not for
- Data-heavy screens. When the density feels right, the skill itself points to ui-craft-dense-dashboard.
- Magazine-style long reads, which suit the editorial variant better.
- Playful or expressive brands that need gradients, glass or heavy motion.
How to install UI Craft Minimal Skill: Whitespace-Heavy Interfaces
curl -fsSL https://skills.smoothui.dev/install | bash
ui-craft installnpx skills add educlopez/ui-craft, which installs the skill only.Run the installer
On macOS or Linux run the curl command above. On Windows run
irm https://skills.smoothui.dev/install.ps1 | iex. The script downloads the ui-craft binary and verifies its checksum.Run ui-craft install
The installer detects Claude Code, Cursor, Codex, Gemini and OpenCode, and lets you pick components, either in an interactive TUI or with --yes.
Or use the Claude Code plugin
In Claude Code run
/plugin marketplace add educlopez/ui-craftand then/plugin install ui-craft, per the README.Trigger the variant
Ask for a minimal, clean, Linear-like, Notion-like, Vercel-like or whitespace-heavy interface.
Check that it loaded
Ask for a minimal landing page. The result should be monochrome with one accent, a single-column hero, hairline borders and no gradients.
Key features
- Locked knobsCRAFT is fixed at 8, MOTION at 3 and DENSITY at 2, so every minimal build starts from the same calm baseline.
- Monochrome plus one accentColor stays neutral, with a single accent used sparingly across the interface.
- Inter or Geist typographyBody text uses Inter or Geist at weight 400, with 500 reserved for emphasis.
- Hairline borders over shadowsSeparation comes from a 1px border in a very light OKLCH gray rather than drop shadows.
- Generous spacingVertical section padding runs 120 to 200px, with a max-w-5xl container and max-w-3xl for reading columns.
- Restrained radiusCorners use 6px, 8px and 12px values, which keeps the shape language consistent.
- Limited motionHover transitions run 120 to 150ms and modals enter and exit in 180 to 220ms, alongside the focus ring.
- Explicit exclusionsNo card grids beyond two columns, no three-up icon grids, no gradients, glass or noise, and text-only nav links.
- Shared referencesThe variant reads layout.md, typography.md, color.md and accessibility.md from the main ui-craft skill, and skips dashboard.md, stack.md and sound.md unless relevant.
Frequently asked questions
What is the ui-craft-minimal skill?
It is a style variant inside the educlopez/ui-craft repository. It locks CRAFT at 8, MOTION at 3 and DENSITY at 2, and steers an AI agent toward monochrome, whitespace-heavy interfaces with hairline borders, restrained motion and a single accent color.
How do I install ui-craft-minimal?
Use the ui-craft installer from the README: run the curl or PowerShell install script, then run ui-craft install and pick your components. In Claude Code you can instead run /plugin marketplace add educlopez/ui-craft followed by /plugin install ui-craft. The variant defers to the base skill.
What triggers ui-craft-minimal?
The skill description lists the trigger words minimal, clean, Linear-like, Notion-like, Vercel-like and whitespace-heavy. Asking your agent for any of those styles should load this variant instead of the base ui-craft skill, which stays the home of the shared rules.
What fonts and colors does ui-craft-minimal use?
Inter or Geist body text at weight 400, with 500 for emphasis, and a monochrome palette with one accent. Borders are 1px solid oklch(92% 0.005 250) instead of shadows. Gradients, glass effects and noise are excluded, which keeps the interface quiet.
Does ui-craft-minimal include animations?
Only three kinds are allowed: hover transitions at 120 to 150ms, modal and dialog enter and exit at 180 to 220ms, and the focus ring. Scroll reveals, stagger, page transitions and parallax are forbidden. That is deliberate, because the MOTION knob is locked at 3 for this variant.
What if minimal is too sparse for my data?
The skill points to ui-craft-dense-dashboard when density feels right for the content. That sibling locks DENSITY at 9 and targets dashboards and admin panels, so you can switch rather than force a sparse layout onto dense data. Use it for tables.
Does ui-craft-minimal work with Claude Code?
Yes. The UI Craft installer detects Claude Code, Cursor, Codex, Gemini and OpenCode, and a Claude Code plugin bundles the skill. Add the plugin with /plugin marketplace add educlopez/ui-craft, then /plugin install ui-craft. It also registers the deterministic gates through a bundled .mcp.json.