ui-craft-minimal

Name: ui-craft-minimal
Author: educlopez

206stars8forks

How to install ui-craft-minimal?

educlopez/ui-craft/ui-craft-minimal

$npx -y skills add educlopez/ui-craft --skill ui-craft-minimal

Installs into the current project.

Summary

Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like, Notion-like, Vercel-like, whitespace-heavy.

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	# UI Craft — Minimal
4
5	Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.
6
7	## Knobs (locked)
8
9	- CRAFT_LEVEL = 8 — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
10	- MOTION_INTENSITY = 3 — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
11	- VISUAL_DENSITY = 2 — whitespace-heavy, 1-2 items per row, generous gutters.
12
13	Do not re-ask these in Discovery. Skip straight to accent + font confirmation if ambiguous.
14
15	## Style anchors
16
17	- Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
18	- Inter / Geist for body — never a display font.
19	- Section padding 120-200px vertical, 40-80px gutters.
20	- Hairline borders `1px solid oklch(92% 0.005 250)` in place of shadows.
21	- Typography is the hierarchy. No decorative gradients, patterns, or glass.
22	- Single-column hero default. Asymmetry via one supporting element, not layout tricks.
23	- Motion is punctuation, not spectacle.
24	- Every pixel deliberate. When in doubt, cut it.
25
26	## Base rules (inherited)
27
28	All rules in `../ui-craft/SKILL.md` apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.
29
30	## Style-specific overrides
31
32	Typography
33
34	- Body: Inter or Geist, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
35	- `system-ui, -apple-system` as fallback stack.
36	- Headings: `tracking-tight` / `-0.02em` above 24px, 500 or 600 max.
37	- `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs.
38	- No display serifs. No geometric display sans. No mixing two sans families.
39
40	Color
41
42	- Surface: `oklch(99% 0 0)` (light) / `oklch(14% 0.005 250)` (dark).
43	- Text: `oklch(18% 0.01 250)` primary, `oklch(46% 0.01 250)` secondary.
44	- Accent reserved for: primary CTA, active nav item, one key metric. That is it.
45	- Borders: `oklch(92% 0.005 250)` light / `oklch(24% 0.008 250)` dark. No colored borders.
46
47	Spacing & layout
48
49	- Section vertical: `py-24 md:py-32 lg:py-40` (96 / 128 / 160px) minimum; 200px for hero on large screens.
50	- Container: `max-w-5xl` typical; `max-w-3xl` for reading content.
51	- One accent placement per viewport preferred; two max.
52	- No card grids with more than 2 columns on desktop.
53
54	Borders & elevation
55
56	- Default chrome = 1px hairline border, no shadow.
57	- Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
58	- Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.
59
60	Motion
61
62	- Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
63	- Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
64	- Any animation must honor `prefers-reduced-motion`.
65
66	Composition
67
68	- Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
69	- Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
70	- Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.
71
72	## Reference files to read first
73
74	Keep the reading list tight. Load only these from `../ui-craft/references/`:
75
76	- `layout.md` — spacing, hierarchy, composition
77	- `typography.md` — scale, readability, weight
78	- `color.md` — monochrome scales, OKLCH, dark mode
79	- `accessibility.md` — focus, contrast, keyboard
80
81	Skip `dashboard.md`, `stack.md`, `sound.md` unless explicitly relevant.
82
83	## Anti-patterns for THIS style
84
85	- Multiple accent colors. One accent, period.
86	- Display serifs, geometric display sans, or mixing two sans families.
87	- Decorative gradients, mesh backgrounds, noise overlays, glass panels.
88	- Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
89	- Uniform 3-column icon-heading-text feature grids.
90	- Colored shadows or glows as affordances.
91	- Dense layouts. If density feels right, this is the wrong variant — switch to `ui-craft-dense-dashboard`.
92	- Pill backgrounds on nav links or buttons by default; prefer text + underline.
93	- Section padding under 96px on desktop.

People who liked this also viewed

6 picks

Type

ui-craft-minimal

206stars8forks

View on GitHub

How to install ui-craft-minimal?

educlopez/ui-craft/ui-craft-minimal

$npx -y skills add educlopez/ui-craft --skill ui-craft-minimal

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	# UI Craft — Minimal
4
5	Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.
6
7	## Knobs (locked)
8
9	- CRAFT_LEVEL = 8 — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
10	- MOTION_INTENSITY = 3 — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
11	- VISUAL_DENSITY = 2 — whitespace-heavy, 1-2 items per row, generous gutters.
12
13	Do not re-ask these in Discovery. Skip straight to accent + font confirmation if ambiguous.
14
15	## Style anchors
16
17	- Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
18	- Inter / Geist for body — never a display font.
19	- Section padding 120-200px vertical, 40-80px gutters.
20	- Hairline borders `1px solid oklch(92% 0.005 250)` in place of shadows.
21	- Typography is the hierarchy. No decorative gradients, patterns, or glass.
22	- Single-column hero default. Asymmetry via one supporting element, not layout tricks.
23	- Motion is punctuation, not spectacle.
24	- Every pixel deliberate. When in doubt, cut it.
25
26	## Base rules (inherited)
27
28	All rules in `../ui-craft/SKILL.md` apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.
29
30	## Style-specific overrides
31
32	Typography
33
34	- Body: Inter or Geist, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
35	- `system-ui, -apple-system` as fallback stack.
36	- Headings: `tracking-tight` / `-0.02em` above 24px, 500 or 600 max.
37	- `text-wrap: balance` on headings, `text-wrap: pretty` on paragraphs.
38	- No display serifs. No geometric display sans. No mixing two sans families.
39
40	Color
41
42	- Surface: `oklch(99% 0 0)` (light) / `oklch(14% 0.005 250)` (dark).
43	- Text: `oklch(18% 0.01 250)` primary, `oklch(46% 0.01 250)` secondary.
44	- Accent reserved for: primary CTA, active nav item, one key metric. That is it.
45	- Borders: `oklch(92% 0.005 250)` light / `oklch(24% 0.008 250)` dark. No colored borders.
46
47	Spacing & layout
48
49	- Section vertical: `py-24 md:py-32 lg:py-40` (96 / 128 / 160px) minimum; 200px for hero on large screens.
50	- Container: `max-w-5xl` typical; `max-w-3xl` for reading content.
51	- One accent placement per viewport preferred; two max.
52	- No card grids with more than 2 columns on desktop.
53
54	Borders & elevation
55
56	- Default chrome = 1px hairline border, no shadow.
57	- Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
58	- Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.
59
60	Motion
61
62	- Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
63	- Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
64	- Any animation must honor `prefers-reduced-motion`.
65
66	Composition
67
68	- Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
69	- Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
70	- Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.
71
72	## Reference files to read first
73
74	Keep the reading list tight. Load only these from `../ui-craft/references/`:
75
76	- `layout.md` — spacing, hierarchy, composition
77	- `typography.md` — scale, readability, weight
78	- `color.md` — monochrome scales, OKLCH, dark mode
79	- `accessibility.md` — focus, contrast, keyboard
80
81	Skip `dashboard.md`, `stack.md`, `sound.md` unless explicitly relevant.
82
83	## Anti-patterns for THIS style
84
85	- Multiple accent colors. One accent, period.
86	- Display serifs, geometric display sans, or mixing two sans families.
87	- Decorative gradients, mesh backgrounds, noise overlays, glass panels.
88	- Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
89	- Uniform 3-column icon-heading-text feature grids.
90	- Colored shadows or glows as affordances.
91	- Dense layouts. If density feels right, this is the wrong variant — switch to `ui-craft-dense-dashboard`.
92	- Pill backgrounds on nav links or buttons by default; prefer text + underline.
93	- Section padding under 96px on desktop.

People who liked this also viewed

6 picks

Type