ui-craft

Featured

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.

Web & Frontend 324 stars 18 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%
84
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# UI Craft You are a design engineer. Every decision below is one you make deliberately and can defend — never a default you inherited. ## The Ladder (use this when explaining ui-craft to the user) One progression, four rungs. Never describe ui-craft as "layers" or "modes" — use these rung names, and name the rung the user is on before suggesting a command. | Rung | User wants | They do | They get | Effort | |------|-----------|---------|----------|--------| | **0 · Ask** | better UI, zero effort | ask for UI as always | taste by default: real hierarchy, system tokens, no slop | none | | **1 · Direct** | control one pass | `/craft`, `/critique`, `/polish`, `/animate`, … | a focused pass on one surface | one command | | **2 · Persist** | consistency across sessions | `/brief`, `/tokens`, `/remember` | durable design context every future session reads | write once | | **3 · Enforce** | it can't regress | `/finalize`, review agents, MCP gates, score, `ui-craft-detect` | gates in review/CI + a 0-100 number | wire once | `/sddesign` is **not** a rung — it is the express lane that walks rungs 1 to 3 for one big surface. When a pass finishes, name the natural next step (`/craft` → `/finalize`, `/brief` → `/tokens`, `/audit` → `/harden`). ## Knobs (ask during Discovery, 1-10) Knobs are **fallback defaults applied only when the user declines to specify**. When the user gives explicit guidance during Discovery — "make it dense", "minimal motion", "ship-fast" — those override the...

Details

Author
educlopez
Repository
educlopez/ui-craft
Created
5 months ago
Last Updated
1 weeks ago
Language
JavaScript
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

craft-ux

The Craftsman standard for UI/UX — design tokens, component patterns, pixel-perfect standards, Tailwind/React implementation, motion craft, an AI-tells anti-pattern catalog, and a two-pass review protocol (static review + live browser audit). Use this whenever designing, building, reviewing, auditing, redesigning, or polishing UI — a component, page, dashboard, landing page, modal, form, or layout; standing up or hardening a design system; checking spacing, typography, color, motion, or accessibility; or hunting AI-generated "tells". Trigger even on "make this look better", "fix the styling", "audit my design tokens", or "test it in the browser" without naming a tool or framework. App architecture (state, data fetching, bundles, routing) → craft-frontend. Does NOT fire on backend, database, CI/CD, or infra requests, or UI-free code-quality asks.

1 Updated 4 days ago
atifgul99
Web & Frontend Listed

craft-ux

The Craftsman standard for UI/UX — design tokens, component patterns, pixel-perfect standards, Tailwind/React implementation, motion craft, an AI-tells anti-pattern catalog, and a two-pass review protocol (static review + live browser audit). Use this whenever designing, building, reviewing, auditing, redesigning, or polishing UI — a component, page, dashboard, landing page, modal, form, or layout; standing up or hardening a design system; checking spacing, typography, color, motion, or accessibility; or hunting AI-generated "tells". Trigger even on "make this look better", "fix the styling", "audit my design tokens", or "test it in the browser" without naming a tool or framework. App architecture (state, data fetching, bundles, routing) → craft-frontend. Does NOT fire on backend, database, CI/CD, or infra requests, or UI-free code-quality asks.

1 Updated 4 days ago
gul-labs
Web & Frontend Featured

ui-craft-minimal

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.

324 Updated 1 weeks ago
educlopez