Seventy-two skills. One discipline.

ultraweb

Root orchestrator: runs the full 12-phase pipeline from one prompt to a shippable first-grade site.

reads one user prompt → writes the full pipeline output (all downstream files)

taste

The design constitution: first-grade bar, banned list, required list, heuristics, stack lock.

reads — → writes judgment

iterate

Targeted revision pipeline for an existing site: scope the change, touch only affected phases/gates.

reads design/* → writes changed code + QA.md

award-canon

Study library: 25 named patterns distilled from Awwwards SOTY/SOTD-tier winners, 2017–2026.

reads — → writes judgment + reference

brief

Expand one prompt into a full creative brief: site type, audience, goals, tone, content inventory.

reads user prompt → writes design/BRIEF.md

direction

Choose ONE aesthetic archetype from 12, plus one signature move and a 'we will NOT' list.

reads BRIEF.md → writes design/DIRECTION.md

sitemap

Information architecture: pages, routes, nav structure, per-page purpose and conversion goal.

reads BRIEF.md → writes design/SITEMAP.md part 1

wireframe

Section-by-section blueprint per page: order, which skill builds each, density, signature spot.

reads BRIEF+DIRECTION+SITEMAP → writes design/SITEMAP.md part 2

copywriting

Voice definition and every string on the site: headlines, microcopy, CTAs; bans dead startup copy.

reads BRIEF+DIRECTION → writes copy in code

tokens

The entire system as Tailwind v4 @theme tokens: color, font, spacing, radius, shadow, easing.

reads SYSTEM.md decisions → writes app/globals.css

color

OKLCH palette construction: tinted neutral ramp, accent, semantic roles, dark theme, AA math.

reads DIRECTION.md → writes SYSTEM.md §color

typography

Font pairing per archetype, fluid clamp() type scale, weight/tracking/leading rules, next/font.

reads DIRECTION.md → writes SYSTEM.md §type

layout-grid

Page grid, container widths, spacing rhythm with compression/release, deliberate asymmetry.

reads DIRECTION.md → writes SYSTEM.md §layout

depth

Elevation language: tinted shadow scale, borders vs shadows, layering, glass done right (rare).

reads DIRECTION.md → writes SYSTEM.md §depth

shape-language

Radius scale and shape motifs: corner language, decorative geometry, dividers, clip-paths.

reads DIRECTION.md → writes SYSTEM.md §shape

icons

Icon system: lucide-react default, stroke-width consistency, sizing scale, never emoji.

reads SYSTEM.md → writes icon usage in code

imagery

Art direction for images: photo treatment, gradient meshes, noise textures, honest placeholders.

reads DIRECTION.md → writes SYSTEM.md §imagery + assets

motion-language

Motion vocabulary: duration/easing tokens, choreography rules, reduced-motion policy.

reads DIRECTION.md → writes SYSTEM.md §motion

theme-worlds

Scoped multi-theme worlds via native CSS @scope + data-world token re-mapping, AA-verified.

reads DIRECTION.md → writes scoped @theme overrides

hero

First-viewport sections: 5 variants, headline scale, CTA hierarchy, above-fold performance.

reads DIRECTION+SYSTEM+SITEMAP → writes components/sections/hero.tsx

navigation

Headers and mobile menus: sticky/scroll behavior, mobile menu as designed moment, skip-link.

reads SYSTEM.md → writes components/layout/header.tsx

footer

Footers as a designed closing statement, not a link dump: variants, sitemap/legal organization.

reads SYSTEM.md → writes components/layout/footer.tsx

feature-sections

The anti-three-cards skill: alternating splits, bento grids, sticky-scroll, numbered lists.

reads SITEMAP.md → writes components/sections/*

cards

Card design: internal hierarchy, hover behavior, image handling, group layouts avoiding uniformity.

reads SYSTEM.md → writes components/ui extensions

buttons

CTA system: primary/secondary/ghost hierarchy, sizing, icon placement, states, one primary per view.

reads SYSTEM.md → writes components/ui/button variants

forms

Form UX: field design, labels always, inline validation timing, error recovery, success states.

reads SYSTEM.md → writes form components

data-display

Tables, stat blocks, charts: alignment rules, tabular numerals, responsive table strategies.

reads SYSTEM.md → writes data components

pricing

Pricing sections: tier tables, one-featured-plan discipline, billing toggles, honest features.

reads BRIEF+SYSTEM → writes pricing section

social-proof

Testimonials, logo walls, stats, case-study teasers: credibility design without fake-looking proof.

reads BRIEF+SYSTEM → writes proof sections

faq

FAQ/accordion sections: native details vs JS accordion, typography, schema.org FAQ markup.

reads SYSTEM.md → writes faq section

ui-states

Empty, loading, error, success, skeleton states: every async surface gets all states designed.

reads SYSTEM.md → writes state components

component-api

The cross-cutting contract: variant/size/tone props, asChild/Slot, cn() merge order, data-slot.

reads SYSTEM.md → writes component prop conventions

overlays

Native overlay layer: Popover API + CSS Anchor Positioning for menus/tooltips; <dialog> for modals.

reads SYSTEM.md → writes overlay primitives

cart

Cart/mini-cart state and UI: add-to-cart moment, slide-drawer, honest totals, designed empty cart.

reads BRIEF+SYSTEM → writes cart layer

product-detail

The PDP: swatch-driven variant crossfade with URL state, media gallery, one-CTA buy-box.

reads BRIEF+SYSTEM → writes product page

command-palette

The ⌘K command-palette composite: keyboard trigger, combobox ARIA, focus-trap, ranked results.

reads SYSTEM.md → writes search/command layer

marginalia

Print-derived page furniture: running folio, reading-progress, sticky TOC, Tufte sidenotes.

reads SYSTEM.md → writes long-form furniture

micro-interactions

Hover/focus/press feedback, link underline animations, input focus: 150–250ms, transform/opacity.

reads SYSTEM.md §motion → writes component-level motion

scroll-motion

Scroll-driven reveals, parallax discipline, sticky sequences, scroll-linked progress; once-only.

reads SYSTEM.md §motion → writes section entrance layer

page-transitions

Route transition strategy: View Transitions API, template.tsx animations, when NOT to transition.

reads SYSTEM.md §motion → writes app-level transitions

physics

Spring-based interaction: drag, magnetic hover, cursor followers, gesture response; restraint rules.

reads DIRECTION.md → writes interactive moments

showpiece

Hero-grade set pieces: canvas/WebGL/R3F, shader gradients, particle systems. Gated, 60fps required.

reads DIRECTION.md → writes one signature element

animejs

anime.js v4 SVG-choreography engine: draw timelines, morphs, motion paths, stagger fields. Gated.

reads DIRECTION.md → writes commissioned SVG moments

hidden-craft

The opt-in last-2% reward layer: console signature, one egg, playful 404, humans.txt. Never gates.

reads SYSTEM.md → writes easter-egg layer

scaffold

Project init: create-next-app flags, Tailwind v4 wiring, shadcn init, folder conventions, smoke test.

reads SITEMAP.md → writes running app

app-structure

App Router architecture: RSC-by-default, 'use client' boundary placement in leaves, not layouts.

reads SITEMAP.md → writes app/ structure + SITEMAP.md part 3

routing

Route design: route groups, dynamic/parallel/intercepting routes, every loading/error state designed.

reads SITEMAP.md → writes app/ routes

data-fetching

Server-side data: fetch caching semantics, revalidation, streaming with Suspense, parallel fetching.

reads BRIEF.md → writes data layer

server-actions

Mutations: 'use server' actions with zod validation, useActionState wiring, optimistic updates.

reads forms → writes app/actions/*

media-optimization

next/image sizing/preload, next/font pipeline, video embedding, asset strategy, LCP protection.

reads imagery → writes optimized assets

seo

Metadata API per route, generateMetadata, ImageResponse OG images, sitemap.ts/robots.ts, JSON-LD.

reads BRIEF+copy → writes metadata layer

i18n

Internationalization when needed: locale routing, dictionary pattern, hreflang, RTL awareness.

reads BRIEF.md → writes i18n layer

print-craft

The @media print stylesheet as a designed surface: chrome-hiding reset, page-break control, @page.

reads SYSTEM.md → writes print layer

api-design

Route handlers: REST shape, typed responses, zod-validated input, error envelope, status codes.

reads BRIEF.md → writes app/api/*

database

Drizzle + Postgres: schema design from the brief's nouns, drizzle-kit migrations, seed script.

reads BRIEF.md → writes db/ layer

auth

Better Auth setup: server config, providers, proxy.ts route protection, styled sign-in page.

reads BRIEF.md → writes auth layer

email

Transactional email: Resend + react-email, on-brand templates, contact-form and magic-link flows.

reads BRIEF+SYSTEM → writes emails/

payments

Stripe: checkout sessions, signature-verified webhook handler, product/price modeling, test mode.

reads BRIEF.md → writes payments layer

content-cms

Content layer: MDX pipeline for blogs/docs, typed frontmatter, styled prose matching SYSTEM.md.

reads BRIEF.md → writes content layer

storage

File upload/storage: blob storage setup, upload UX with progress/drag-drop, image post-processing.

reads BRIEF.md → writes storage layer

consent

GDPR/TTDSG §25 cookie consent as an anti-dark-pattern problem: equal-weight Accept/Reject, gating.

reads BRIEF.md → writes consent layer

analytics

Cookieless-first measurement: event taxonomy from conversion goals, one typed track() helper.

reads BRIEF+SITEMAP → writes analytics layer

gate-code

Build/type/lint gate: npm run build clean, tsc strict, ESLint, no unused deps, RSC correctness.

reads code → writes QA.md entry

gate-responsive

375/768/1440 screenshot sweep via Playwright MCP: no overflow, touch targets ≥44px, mobile nav.

reads running app → writes QA.md + screenshots

gate-visual

The self-critique loop: screenshot every page, judge against DIRECTION.md + taste, fix, repeat.

reads running app → writes QA.md

gate-accessibility

WCAG 2.2 AA: computed contrast, keyboard-only walkthrough, focus-visible, landmarks, alt text.

reads running app → writes QA.md

gate-performance

Core Web Vitals: Lighthouse ≥90 perf, LCP element optimized, zero CLS, client bundle audit.

reads running app → writes QA.md

gate-antislop

Sweep for every banned-list item: grep-able patterns plus visual clichés from screenshots.

reads code+screenshots → writes QA.md

gate-content

Copy and metadata completeness: real title/description, no dead copy, headings tell a story.

reads code → writes QA.md

ship

Production readiness: env var audit, build + start smoke test, deploy, post-deploy verification.

reads green QA.md → writes live site

handoff

Closing docs: README with stack map, how to edit content/tokens, design/* artifacts explained.

reads everything → writes README.md

retrofit

Entry point for existing sites: scored gap report, phased upgrade plan mapping gaps to skills.

reads existing code → writes design/RETROFIT.md