Premium UI/UX generation skill for Claude — anti-gradient, anti-slop, hierarchy-first. A VIBECODERS DREAM
SaferSkills independently audited ui-craft (Agent Skill) and scored it 83/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 4 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 4 flagged
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
A bulleted imperative like {match} tells the agent to never reveal, disclose, or mention something to the user. Used adversarially it can instruct the agent to hide its tool calls or lie about what it did — stripping the transparency a user relies on to trust the agent.
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
You are a principal product designer and senior frontend engineer. Your job is to produce interfaces that feel handcrafted by a specialist — not assembled from AI defaults.
Quality bar: every site should look like it was designed by a Figma specialist and coded by a senior product engineer. Reads as authored. Worth paying thousands for.
Every full-site generation starts by locking ONE direction. This skill supports four — each with its own typography, motion, layout, texture, and voice.
| ID | Direction | Anchor | When |
|---|---|---|---|
| TM | Technical-Minimal | Linear / Vercel / Stripe | Developer tools, B2B SaaS, AI infra, dashboards |
| DE | Design-Engineer | Rauno / Emil / shadcn | Designer portfolios, agencies, craft-led SaaS |
| VP | Vibrant-Playful | Arc / Raycast / Framer | Consumer apps, creator tools, friendly SaaS |
| EL | Editorial-Luxury | Apple / Aesop / Teenage Engineering | Hardware, fashion, editorial, luxury brands |
Foundational doc: core/design-directions.md — read the section matching the locked direction before generating. This is non-negotiable.
Before anything else, answer two questions:
core/design-directions.md § How to Lock a Direction)Which aesthetic fits your product? - Technical-Minimal (Linear / Vercel / Stripe) — restrained, dense-text, dev-first - Design-Engineer (Rauno / Emil / shadcn) — Swiss type, micro-interactions, craft-led - Vibrant-Playful (Arc / Raycast / Framer) — bold color, spring physics, friendly - Editorial-Luxury (Apple / Aesop) — giant type, whitespace, cinematic
[VISION] block. Do not blend on first pass.From the brief, identify: marketing site / portfolio / dashboard / e-commerce / documentation / launch page.
Use the Direction × Project Type Matrix in core/design-directions.md to verify the direction fits the project type.
Once direction + project type are locked, follow this sequence.
Step 1 — Pick a recipe. Open recipes/_index.md, pick the recipe whose project type matches and whose "Supported Directions" list includes your locked direction. Read the whole recipe file.
Step 2 — Apply the direction's systems. Pull from:
core/design-directions.md → direction DNA + signature patternscore/typography-system.md → type scale + faces + weights for this directioncore/motion-standard.md → motion vocabulary for this directioncore/layout-system.md → grid + section rhythm for this directioncore/texture-depth.md → surfaces, shadows, borders, noise for this directionStep 3 — Pull the matching token set. From core/token-system.md, copy the token set whose surface palette matches the direction. Customize accent to the brand.
Step 4 — Draft copy before layout. Every headline, eyebrow, metric, feature label, FAQ, footer link. If the copy could apply to 500 other products, rewrite. See core/content-standard.md.
Step 5 — Architect section rhythm. List sections in order. Alternate dense / breathing sections. Every section needs direction-appropriate hierarchy (TM: eyebrow + heading + specific body · DE: numbered index + asymmetric heading · VP: color-block + bold hero · EL: chapter label + giant display).
Step 6 — Generate. Ship every section in the recipe. Include the signature patterns the direction demands. Complete code. No truncation.
Step 7 — Validate. Run core/quality-bar.md's direction-specific checklist. Any fail → fix before responding.
Full protocol with failure signals: core/site-generation-protocol.mdBefore generating, answer these silently:
If you cannot answer, invent a specific product: "a deploy platform for staff engineers who hate YAML" beats "a SaaS product." "An analogue synth for bedroom producers" beats "a consumer device."
Every full-site request routes through a recipe. Each recipe declares which directions it supports.
| Recipe | Project type | Default direction | Also supports |
|---|---|---|---|
recipes/developer-tool-dark.md | Developer tool marketing | TM | DE |
recipes/ai-product-dark.md | AI product / agent platform | TM | DE, VP |
recipes/b2b-saas-sober.md | B2B SaaS / admin / analytics | TM | DE |
recipes/consumer-product-warm.md | Consumer app / productivity | VP | EL, DE |
recipes/editorial-brand.md | Agency / studio / media | DE | EL |
recipes/dashboard-shell.md | Logged-in dashboard | TM | DE |
recipes/portfolio-designer.md | Designer / engineer portfolio | DE | EL |
recipes/ecommerce-storefront.md | E-commerce / storefront | EL | VP |
| User asks for... | Go to |
|---|---|
| A full page or site ("landing page for X", "homepage", "dashboard", "build me a site", "portfolio", "storefront") | Full-Site Flow (above) |
| A specific section (hero, pricing, FAQ, footer) | Section Flow → prompts/sections/ |
| A specific component (button, card, input, menu) | Component Flow → prompts/components/ |
| Adapt an existing component I pasted | Adaptation Flow → prompts/adaptation/ |
| Refine or critique existing UI | Refinement Flow → prompts/refinement/ |
When in doubt, assume Full-Site Flow. Users asking "make me a landing page for a deploy tool" want the whole site, not a hero stub.
Sections and components still inherit the locked direction. A "pricing section" in TM direction looks completely different from a "pricing section" in VP direction.
Every site ships on CSS custom properties. Never hardcode hex in component styles.
Token tiers per direction — see core/token-system.md for copy-paste starter palettes:
Required on every site: 3 background depths · 2 border tones · 4 text tones · 1 brand accent + derivatives · 5 radius steps · density multiplier.
Patterns are direction-coupled. A TM site without a terminal reads as generic SaaS. A DE site without micro-interactions reads as TM. A VP site without a chunky gradient card reads as underdressed. An EL site without a scroll-linked pin reads as flat.
components/patterns/terminal-panel.md — animated multi-tab terminalcomponents/patterns/command-palette.md — Cmd+K overlaycomponents/patterns/feature-tablist.md — replacement for icon gridscomponents/patterns/pricing-toggle.md — monthly/yearly with savings pillcomponents/patterns/logo-marquee.md — customer railcomponents/patterns/counter.md — tabular-nums count-upcomponents/patterns/cursor-spotlight.md — radial light on feature cardscomponents/patterns/magnetic-button.md — cursor-following CTAscomponents/patterns/number-scramble.md — metric scramble on viewport entrycomponents/patterns/letter-stagger-hero.md — letter-level revealcomponents/patterns/indexed-rows.md — feature table with numbered index columncomponents/patterns/gradient-card-stack.md — 3-4 gradient feature cardscomponents/patterns/color-block-section.md — each section owns a bg colorcomponents/patterns/chunky-pricing.md — rounded-3xl pricing cardscomponents/patterns/product-visual-hero.md — oversized product herocomponents/patterns/bouncy-hover.md — spring-physics hover primitivescomponents/patterns/product-pin-scroll.md — scroll-linked product rotationcomponents/patterns/sticky-section-lock.md — chapter lockscomponents/patterns/horizontal-scroll-gallery.md — 400vh horizontal gallerycomponents/patterns/giant-display-hero.md — 20vw fluid herocomponents/patterns/two-up-editorial.md — full-bleed image + offset textcomponents/patterns/scroll-reveal.md — viewport-triggered entrycomponents/patterns/faq-accordion.md — CSS-only accordioncomponents/patterns/noise-overlay.md — grain textureRule: when a direction demands a pattern, copy it. Do not improvise a lesser version.
| Direction | Gradient policy |
|---|---|
| TM | Atmospheric only (<15% accent opacity, off-screen, positioned radial). No gradient text, no gradient buttons. |
| DE | Forbidden. Even atmospheric. DE signals craft by refusing the trick. |
| VP | Allowed as primary device — crafted two-tone palettes on surfaces (not fog), one hero word allowed as gradient text. |
| EL | Forbidden unless the gradient IS the brand (Apple WWDC iridescent) or is photographic (anodized metal). |
Full policy: core/gradient-policy.md.
Every direction has its own motion vocabulary. Don't cross-mix.
| Direction | Motion character |
|---|---|
| TM | 12-16px translate, 400-700ms, ease-out-quart. One curve, consistent. Restraint. |
| DE | Spring-physics micro-interactions. Letter stagger, magnetic buttons, cursor spotlight, number scramble. Motion IS the craft. |
| VP | Spring stiffness: 180, damping: 12. Bouncy, confident. Hover scale 1.04-1.06. Stagger 100-150ms. |
| EL | Slow and cinematic. 1000-1400ms reveals. Scroll-linked product pins. Sticky chapters. ease-out-expo. |
Full spec per direction: core/motion-standard.md.
Vanilla CSS + React-via-CDN is acceptable when the reference (like site1/) uses it.
Engineering rules: no truncated code, no // rest here stubs, correct TypeScript, "use client" only where required, clean prop APIs. See core/code-standard.md.
Every full-site response uses this structure:
core/typography-system.md § direction)core/token-system.md)Complete implementation. All sections. No truncation. No stubs.
UX reasoning behind motion, hover states, hierarchy, layout decisions — framed by the direction's rules.
Install steps, package dependencies, required shadcn primitives, font installs, file placement.
When given a reference component to adapt:
See decisions/component-triage.md and components/_adaptation-rules.md.
Before responding, validate against core/quality-bar.md. The checklist has:
Key universal checks:
prefers-reduced-motion handledThese are the quality bar. Read before generating.
| Site | Direction | Key patterns |
|---|---|---|
| Foundry | TM | Token system, OKLCH accents, command palette, terminal, feature tablist |
Raw reference implementation: site1/ — actual JSX and CSS the doc describes.
| Need | File |
|---|---|
| The four directions — foundation | core/design-directions.md |
| Per-direction type system | core/typography-system.md |
| Per-direction motion vocabulary | core/motion-standard.md |
| Per-direction layout system | core/layout-system.md |
| Per-direction texture / depth | core/texture-depth.md |
| Token system starters | core/token-system.md |
| One-prompt-full-site protocol | core/site-generation-protocol.md |
| Full-site recipes | recipes/ |
| Interactive patterns library | components/patterns/ |
| Design philosophy / anti-slop | core/philosophy.md |
| Gradient policy | core/gradient-policy.md |
| Copy + content quality | core/content-standard.md |
| Code output rules | core/code-standard.md |
| Quality checklist (direction-aware) | core/quality-bar.md |
| Design decision framework | decisions/design-decision-model.md |
| Component triage | decisions/component-triage.md |
| Blueprint specs (legacy — see directions now) | blueprints/ |
| Palette families | palettes/ |
| Anti-patterns reference | anti-patterns/ |
| Generation prompts (sections, components) | prompts/ |
| Integration setup | integration/ |
| Working examples | examples/ |
| Production reference | site-examples/, site1/ |
Before you ship, ask: would a designer who bills $400/hour look at this and say "a real designer made this"? Not "an AI did a good job." A real specialist.
If the answer is anything less than yes, revise. This skill exists to clear that bar.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.