Run any Skill in Manus with one click

ui-craft-minimal

Stars207

Forks8

UpdatedApril 19, 2026 at 13:58

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

educlopez

educlopez/ui-craft

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	ui-craft-minimal
description	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.
argument-hint	[action: build\|review\|polish] [target]

UI Craft — Minimal

Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.

Knobs (locked)

CRAFT_LEVEL = 8 — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
MOTION_INTENSITY = 3 — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
VISUAL_DENSITY = 2 — whitespace-heavy, 1-2 items per row, generous gutters.

Do not re-ask these in Discovery. Skip straight to accent + font confirmation if ambiguous.

Style anchors

Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
Inter / Geist for body — never a display font.
Section padding 120-200px vertical, 40-80px gutters.
Hairline borders 1px solid oklch(92% 0.005 250) in place of shadows.
Typography is the hierarchy. No decorative gradients, patterns, or glass.
Single-column hero default. Asymmetry via one supporting element, not layout tricks.
Motion is punctuation, not spectacle.
Every pixel deliberate. When in doubt, cut it.

Base rules (inherited)

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.

Style-specific overrides

Typography

Body: Inter or Geist, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
system-ui, -apple-system as fallback stack.
Headings: tracking-tight / -0.02em above 24px, 500 or 600 max.
text-wrap: balance on headings, text-wrap: pretty on paragraphs.
No display serifs. No geometric display sans. No mixing two sans families.

Color

Surface: oklch(99% 0 0) (light) / oklch(14% 0.005 250) (dark).
Text: oklch(18% 0.01 250) primary, oklch(46% 0.01 250) secondary.
Accent reserved for: primary CTA, active nav item, one key metric. That is it.
Borders: oklch(92% 0.005 250) light / oklch(24% 0.008 250) dark. No colored borders.

Spacing & layout

Section vertical: py-24 md:py-32 lg:py-40 (96 / 128 / 160px) minimum; 200px for hero on large screens.
Container: max-w-5xl typical; max-w-3xl for reading content.
One accent placement per viewport preferred; two max.
No card grids with more than 2 columns on desktop.

Borders & elevation

Default chrome = 1px hairline border, no shadow.
Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.

Motion

Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
Any animation must honor prefers-reduced-motion.

Composition

Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.

Reference files to read first

Keep the reading list tight. Load only these from ../ui-craft/references/:

layout.md — spacing, hierarchy, composition
typography.md — scale, readability, weight
color.md — monochrome scales, OKLCH, dark mode
accessibility.md — focus, contrast, keyboard

Skip dashboard.md, stack.md, sound.md unless explicitly relevant.

Anti-patterns for THIS style

Multiple accent colors. One accent, period.
Display serifs, geometric display sans, or mixing two sans families.
Decorative gradients, mesh backgrounds, noise overlays, glass panels.
Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
Uniform 3-column icon-heading-text feature grids.
Colored shadows or glows as affordances.
Dense layouts. If density feels right, this is the wrong variant — switch to ui-craft-dense-dashboard.
Pill backgrounds on nav links or buttons by default; prefer text + underline.
Section padding under 96px on desktop.

More from this repository

same repository

ui-craft

educlopez/ui-craft

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.

2026-07-15207

bolder

educlopez/ui-craft

"Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work."

2026-07-05207

brief

educlopez/ui-craft

Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.

2026-07-05207

craft

educlopez/ui-craft

"One-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar. Use when the user asks for a whole surface ("build me a dashboard", "hazme un dashboard") and expects a shippable result, not component-level help. Invoke when the user asks for craft on their UI, or mentions 'craft' alongside design / UI / frontend work."

2026-07-05207

finalize

educlopez/ui-craft

Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy. Use when the user wants to ship, merge, or finalize a surface and needs a verdict (READY / NOT READY / BLOCKED) before committing. Invoke when the user asks for finalize on their UI, or mentions 'finalize' alongside design / UI / frontend work.

2026-07-05207

polish

educlopez/ui-craft

"Final craft pass applying the compound details from the polish checklist — micro-typography, spacing rhythm, hover states, and a signature detail — directly to code. Use when the surface is functionally complete but feels unfinished, or when the user says "polish this" / "it looks generic" / "add the final touches". Invoke when the user asks for polish on their UI, or mentions 'polish' alongside design / UI / frontend work."

2026-07-05207

name	ui-craft-minimal
description	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.
argument-hint	[action: build\|review\|polish] [target]

UI Craft — Minimal

Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.

Knobs (locked)

CRAFT_LEVEL = 8 — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
MOTION_INTENSITY = 3 — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
VISUAL_DENSITY = 2 — whitespace-heavy, 1-2 items per row, generous gutters.

Do not re-ask these in Discovery. Skip straight to accent + font confirmation if ambiguous.

Style anchors

Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
Inter / Geist for body — never a display font.
Section padding 120-200px vertical, 40-80px gutters.
Hairline borders 1px solid oklch(92% 0.005 250) in place of shadows.
Typography is the hierarchy. No decorative gradients, patterns, or glass.
Single-column hero default. Asymmetry via one supporting element, not layout tricks.
Motion is punctuation, not spectacle.
Every pixel deliberate. When in doubt, cut it.

Base rules (inherited)

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.

Style-specific overrides

Typography

Body: Inter or Geist, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
system-ui, -apple-system as fallback stack.
Headings: tracking-tight / -0.02em above 24px, 500 or 600 max.
text-wrap: balance on headings, text-wrap: pretty on paragraphs.
No display serifs. No geometric display sans. No mixing two sans families.

Color

Surface: oklch(99% 0 0) (light) / oklch(14% 0.005 250) (dark).
Text: oklch(18% 0.01 250) primary, oklch(46% 0.01 250) secondary.
Accent reserved for: primary CTA, active nav item, one key metric. That is it.
Borders: oklch(92% 0.005 250) light / oklch(24% 0.008 250) dark. No colored borders.

Spacing & layout

Section vertical: py-24 md:py-32 lg:py-40 (96 / 128 / 160px) minimum; 200px for hero on large screens.
Container: max-w-5xl typical; max-w-3xl for reading content.
One accent placement per viewport preferred; two max.
No card grids with more than 2 columns on desktop.

Borders & elevation

Default chrome = 1px hairline border, no shadow.
Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.

Motion

Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
Any animation must honor prefers-reduced-motion.

Composition

Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.

Reference files to read first

Keep the reading list tight. Load only these from ../ui-craft/references/:

layout.md — spacing, hierarchy, composition
typography.md — scale, readability, weight
color.md — monochrome scales, OKLCH, dark mode
accessibility.md — focus, contrast, keyboard

Skip dashboard.md, stack.md, sound.md unless explicitly relevant.

Anti-patterns for THIS style

Multiple accent colors. One accent, period.
Display serifs, geometric display sans, or mixing two sans families.
Decorative gradients, mesh backgrounds, noise overlays, glass panels.
Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
Uniform 3-column icon-heading-text feature grids.
Colored shadows or glows as affordances.
Dense layouts. If density feels right, this is the wrong variant — switch to ui-craft-dense-dashboard.
Pill backgrounds on nav links or buttons by default; prefer text + underline.
Section padding under 96px on desktop.