Ui Craft
Implement polished, accessible, performant UI—from components to landing pages—when you need implementation craft beyond a DESIGN.md spec.
Overview
UI craft is an agent skill for the Build phase that guides accessible, performant implementation of stunning interfaces when DESIGN.md specs need to become real components and pages.
Install
npx skills add https://github.com/juliusbrussee/cavekit --skill ui-craftWhat is this skill?
- Single actionable reference for accessible, performant, high-craft UI implementation
- Synthesizes animation, spatial design, typography, color, and component patterns
- DEFERS to root DESIGN.md tokens and specs when present over skill defaults
- Complements design-system skill (spec writing) with the HOW of building UI
- Includes reference files under references/ for deep dives per topic
- Includes a references/ directory for sectional deep dives beyond the main SKILL.md
Adoption & trust: 16 installs on skills.sh; 1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a rough UI goal or generic agent output that looks fine but not professional, accessible, or intentionally crafted.
Who is it for?
Solo builders shipping SaaS or marketing frontends who want agent-driven UI work to hit production-grade polish and accessibility.
Skip if: Backend-only changes, pure DESIGN.md authoring without implementation, or teams that already enforce a complete design-system skill end-to-end with no build gap.
When should I use this skill?
Invoke for triggers like build UI, create component, landing page, make it look good, frontend, polish UI, implement design, UI implementation, component styling, animation, or accessibility.
What do I get? / Deliverables
You get implementation guidance—motion, type, color, spacing, and a11y—applied to components and pages so the interface matches or exceeds your DESIGN.md when one exists.
- Accessible styled components or pages
- Animation and spatial layout patterns applied to the UI
Recommended Skills
Journey fit
Build/frontend is the canonical shelf because ui-craft is an implementation playbook for interfaces, not for writing design system specs. Frontend subphase matches component styling, motion, typography, color systems, and accessibility execution described in the skill body.
How it compares
Use alongside design-system spec skills—those write DESIGN.md; ui-craft covers how to implement what you specified.
Common Questions / FAQ
Who is ui-craft for?
Indie developers and solo frontend implementers using coding agents who need a consolidated craft guide for components, landing pages, motion, and accessibility—not just generic Tailwind snippets.
When should I use ui-craft?
During Build frontend when you ask to build UI, create components, implement design, polish animations, or make a landing page beautiful—especially when DESIGN.md exists and you need faithful execution.
Is ui-craft safe to install?
It is styling and implementation guidance; review the Security Audits panel on this Prism page and your agent’s file access before letting it modify frontend assets.
SKILL.md
READMESKILL.md - Ui Craft
# UI Craft: Implementation Guide for Exceptional Interfaces > If a DESIGN.md exists at the project root, its tokens and specifications override all defaults in this skill. This skill provides sensible defaults for when no design system exists, and implementation guidance that applies regardless. > For deep dives on any section, see the reference files in this skill's `references/` directory. --- ## 1. Core Philosophy Taste is trained, not innate. Study why great interfaces feel right. Deconstruct apps you admire — the spacing, the timing, the weight of a shadow. The gap between "fine" and "exceptional" is built from hundreds of micro-decisions that users feel but never consciously notice. **Unseen details compound.** A single rounded corner, a single eased transition, a single well-chosen shadow — none of these matter alone. Together they become "a thousand barely audible voices singing in tune." The cumulative effect is what separates craft from output. **Beauty is leverage.** Polish is not vanity. Good defaults, considered typography, and intentional motion are real differentiators. Users trust interfaces that feel cared for. Investors notice. Competitors can't easily replicate taste. **Intentionality over intensity.** Both bold maximalism and refined minimalism work — what fails is the absence of a clear point of view. Every visual decision should trace back to a deliberate conceptual direction. If you can't articulate WHY a choice was made, reconsider it. **Choose a direction and execute with precision.** Don't hedge between styles. A brutalist page committed fully will always outperform a page that's "a little bit of everything." Commit, then refine. **NEVER produce generic "AI slop" aesthetics.** No gratuitous gradients on white backgrounds. No cookie-cutter hero sections with stock illustrations. No safe, forgettable layouts that could belong to any product. Every interface should have a point of view that makes it recognizable. --- ## 2. The Priority Stack When implementing UI, work through these priorities in order. Higher priorities are non-negotiable; lower priorities are polish that compounds quality. | Priority | Level | What It Means | |----------|-------|---------------| | **Accessibility** | CRITICAL | Contrast 4.5:1, keyboard nav, ARIA semantics, visible focus rings. Ship nothing that excludes users. | | **Performance** | HIGH | WebP/AVIF images, lazy loading below fold, CLS < 0.1, transform-only animations on the compositor thread. | | **Typography** | HIGH | Font smoothing, text-wrap balance/pretty, tabular-nums for data, 65ch max line length. | | **Layout & Spatial** | HIGH | 4/8px grid, concentric border radius, optical alignment over geometric. | | **Color & Theme** | MEDIUM | HSL custom properties, semantic tokens, dark mode pairs tested separately. | | **Motion & Interaction** | MEDIUM | Frequency-based animation decisions, 150-300ms durations, ease-out default. | | **Polish & Details** | LOW | Layered shadows over borders, press feedback on buttons, staggered enter animations. | Never skip a CRITICAL/HIGH item to chase a LOW item. A beautifully animated button that fails keyboard navigation is a net negative. --- ## 3. Aesthetic Direction Before writing a single line of CSS, commit to a bold aesthetic direction. The most common failu