educlopez/ui-craft
29 skills · 5,752 total installs
$npx skills add educlopez/ui-craftSkillInstalls
ui-craftUse for UI design and implementation work to avoid generic AI-looking interfaces.ui-craft-dense-dashboardDense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9.auditTechnical UI audit — a11y, performance, responsive. Produces a prioritized findings table.colorizeColor strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral.ui-craft-minimalMinimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2.shapeWireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code.heuristicProduce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs.ui-craft-editorialEditorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3.briefWrite or update the project's durable design brief at .ui-craft/brief.md.tokensAudit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend…finalizePre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy.rememberRecord a learned design constraint from a correction into the project brief.sddesignFull spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run. Writes `.ui-craft/spec.md`.startFront door. Reads the current project (framework, tokens, brief, spec, harness) and reports what ui-craft can do right now, then routes you to the right next…critiqueDesign lens critique covering visual hierarchy, clarity, and anti-slop patterns — produces a findings table, no code edits unless asked.typesetTypography pass covering font choice, modular scale, tracking, leading, weight hierarchy, and micro-typography details.adaptResponsive layout pass covering breakpoints, touch targets, safe areas, and fluid type.clarifyUX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request.animateMotion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack.delightDelight pass — adds one or two memorable micro-interactions (copy specificity, hover choreography, state transitions, one signature detail) without decoration…extractRefactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens.hardenProduction-readiness pass — audits and implements the full non-happy-path matrix: loading skeletons, empty states, error messages, partial data, i18n, offline,…distillReduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL.unhappyState-first design pass — inventories and implements all non-happy states (loading, empty, error, partial, conflict, offline) before the happy path, and…bolderAmplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop.quieterTone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear.craftOne-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar.polishFinal craft pass applying the compound details from the polish checklist — micro-typography, spacing rhythm, hover states, and a signature detail — directly to…redesignRedesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content),…