Skip to content
ultraweb
ultraweb

five rooms, one paper trail

Install

the studio floor

Count them yourself

80 skill directories ship inside the plugin — every one a written procedure with its own triggers, rules and worked example. Enumerable proof beats adjectives, so the whole roster is below and you can filter it.

1 + 79
orchestrator + specialistsone pipeline, seventy-nine procedures
9
tiersplus the orchestrator's own row
3
subagentseach pinned to a named model
7
gatesa build clears all seven or it isn't done

the index

Transcribed, not summarized

One line per skill, transcribed from the plugin's ROSTER.md. Filter as you type — the URL keeps your query, so a filtered view is a link. ⌘K lands here too.

Orchestrator

the root pipeline itself

1

  • ultrawebthe pipeline orchestrator — 12 phases from brief to ship

Core

the design constitution and cross-cutting judgment

5

  • tastethe design constitution: first-grade bar, banned list, required list, heuristics, stack lock
  • iteratetargeted revision pipeline for an existing site: scope the change, touch only affected phases, re-run affected gates
  • award-canonstudy library of 25 named patterns from Awwwards SOTY/SOTD winners 2017-2026; supplies reference and judgment
  • checkpointthe client-review mechanic: six named checkpoints, consolidated-feedback rounds, verdict routing, written approvals
  • statusPROGRESS.md rewritten at phase/checkpoint transitions: current phase, waiting-on-you, next-checkpoint ETA

Discovery

defines the brief, direction, sitemap, and voice

7

  • briefexpands one prompt into a brief: site type, audience, goals, tone words, page list, content inventory, backend needs
  • assetsclient-asset intake: classifies existing material, maps each to its consuming slot, extracts color/type/logo constraints
  • directionchooses ONE aesthetic archetype from 12 named directions plus ONE signature move and an explicit we-will-not list
  • mockupguided-mode round: renders three archetypes as throwaway static HTML previews, runs pick/mix/revise to approval
  • sitemapinformation architecture: pages, routes, nav structure, per-page purpose and conversion goal
  • wireframesection-by-section blueprint per page: section order, which skill builds each, content density, signature-move spot
  • copywritingvoice definition and every string on the site: headlines, microcopy, CTAs, error/empty text; bans dead startup copy

Design system

tokens for color, type, layout, depth, shape, and motion

11

  • tokenscompiles the system into Tailwind v4 @theme tokens: color, font, spacing, radius, shadow, easing, animation
  • colorOKLCH palette construction: tinted neutral ramp, accent selection, semantic roles, dark theme, AA contrast verification
  • typographyfont pairing from a curated library, fluid type scale via clamp(), weight/tracking/leading rules, next/font self-hosting
  • layout-gridpage grid, container widths, spacing rhythm with compression/release, deliberate asymmetry, bento/split/offset layouts
  • depthelevation language: tinted shadow scale, borders vs shadows, layering, glass done right (rare, justified)
  • shape-languageradius scale and shape motifs: corner language consistency, decorative geometry, dividers, clip-paths, SVG accents
  • iconsicon system: lucide-react default, stroke-width consistency, sizing scale, when custom SVG beats a library icon
  • imageryart direction for images: photo treatment, gradient meshes, noise textures, honest generated placeholder strategy
  • motion-languagethe motion vocabulary: duration/easing token set, choreography rules, reduced-motion policy
  • theme-worldsscoped multi-theme worlds beyond light/dark via CSS @scope + data-world/data-mode remapping, each AA-verified
  • identityproduces the brand mark: wordmark in the display face, monogram feeding icons/manifest, OG template, clear-space rules

Components

the UI component library, section by section

18

  • herofirst-viewport sections: variants (typographic, split, full-bleed, product-shot, editorial), headline scale, CTA rank
  • navigationheaders and mobile menus: sticky/scroll behavior, mobile menu as designed moment, active states, mega-menu, skip-link
  • footerfooters as a designed closing statement: variants, sitemap/legal/social organization, newsletter row
  • feature-sectionsthe anti-three-cards skill: alternating splits, bento grids, sticky-scroll showcases, numbered lists, tabbed showcases
  • cardscard design: hierarchy inside the card, hover behavior, image handling, group layouts that avoid uniformity
  • buttonsCTA system: primary/secondary/ghost hierarchy, sizing, icon placement, hover/focus/loading states, one primary per view
  • formsform UX: field design, labels always, inline validation timing, error recovery, multi-step patterns, success states
  • data-displaytables, stat blocks, charts: alignment rules, tabular numerals, responsive table strategy, chart color/tooltip rules
  • pricingpricing sections: tier tables, one featured-plan discipline, billing toggles, comparison rows, honest feature lists
  • social-prooftestimonials, logo walls, stats, case-study teasers: credibility design, avoiding fake-looking proof, marquee dos/don'ts
  • faqFAQ/accordion sections: native details vs JS accordion, typography, schema.org FAQ markup
  • ui-statesempty, loading, error, success, skeleton states: every async surface gets all states; skeletons match real layout
  • component-apithe cross-cutting prop contract: variant/size/tone vocabulary, asChild/Slot composition, cn() merge order
  • overlaysthe native overlay layer: HTML Popover API + CSS Anchor Positioning for menus/tooltips, dialog for true modals
  • cartcart/mini-cart state and UI: add-to-cart moment, slide-drawer vs page, honest totals, designed empty cart
  • product-detailthe Product Detail Page: swatch-driven variant crossfade with URL state, media gallery, one-CTA sticky buy-box
  • command-palettethe cmd-K command-palette / search composite: keyboard trigger, combobox ARIA, focus-trap, ranked/grouped results
  • marginaliaprint-derived furniture for long-form: running folio, reading-progress, sticky TOC rail, Tufte-style sidenotes

Motion & interaction

motion, scroll, transitions, and interactive set pieces

8

  • micro-interactionshover/focus/press feedback, link underline animations, input focus, toggle physics: 150-250ms, transform/opacity only
  • scroll-motionscroll-driven reveals, parallax discipline, sticky sequences, scroll-linked progress; once-only reveals
  • page-transitionsroute transition strategy: View Transitions API, template.tsx animations, shared-element continuity
  • physicsspring-based interaction: drag, magnetic hover, cursor followers, gesture response via motion springs; restraint rules
  • showpiecehero-grade set pieces: canvas/WebGL/R3F, shader gradients, particle systems; gated, 60fps + fallback required
  • set-designsite-scale immersive 3D: one persistent R3F canvas behind scrolling DOM, camera clip scrubbed by route-window journey
  • animejsanime.js v4 SVG-choreography engine: multi-path draw timelines, morphs, motion paths, grid stagger, split-text sequences
  • hidden-craftopt-in last-2% reward layer: console signature, keyboard/view-source egg, playful 404, humans.txt; never gates content

Next.js engineering

App Router structure, routing, data, and SEO

10

  • scaffoldproject init: create-next-app, Tailwind v4 wiring, shadcn init, motion/lucide/zod install, dev-server smoke test
  • app-structureApp Router architecture: RSC-by-default, use-client boundary placement, layout vs template, small client bundles
  • routingroute design: route groups, dynamic segments, parallel/intercepting routes, loading/error/not-found per segment
  • data-fetchingserver-side data: fetch caching semantics, revalidation, streaming with Suspense, parallel fetching, route handlers
  • server-actionsmutations: use-server actions with zod validation, useActionState wiring, optimistic updates, error returns as data
  • media-optimizationnext/image and next/font pipeline, video embedding, asset strategy, LCP protection
  • seoMetadata API per route, generateMetadata, ImageResponse OG images, sitemap.ts/robots.ts, JSON-LD structured data
  • i18ninternationalization when needed: locale routing, dictionary pattern, hreflang, date/number formatting, RTL awareness
  • print-craftthe @media print stylesheet as designed surface: chrome-hiding reset, page-break control, @page margins, DACH PDF angle
  • studiothe dev-only /studio route: phase progress, gate table, checkpoint ledger, screenshot sheet; 404-gated in production

Backend

APIs, database, auth, email, payments, and consent

9

  • api-designroute handlers: REST shape, typed responses, zod-validated input, error envelope convention, status codes, rate limits
  • databaseDrizzle + Postgres: schema design from the brief's nouns, drizzle-kit migrations, Neon/local setup, seed script
  • authBetter Auth setup: server config, providers, proxy.ts route protection, session in RSC, on-brand sign-in page
  • emailtransactional email: Resend + react-email templates matching site branding, contact-form and magic-link flows
  • paymentsStripe: checkout sessions, signed webhook handler, product/price modeling, designed success/cancel pages
  • content-cmscontent layer: MDX pipeline for blogs/docs with typed frontmatter and styled prose, when to use a headless CMS instead
  • storagefile upload/storage: blob storage setup, upload UX (progress, drag-drop, validation), image handling post-upload
  • consentGDPR/TTDSG cookie consent as anti-dark-pattern design: equal-weight accept/reject, consent-state context gating scripts
  • analyticscookieless-first measurement (Plausible/Umami): event taxonomy from per-page conversion goals, one typed track() helper

Quality gates

empirical checks: code, responsive, visual, a11y, perf

7

  • gate-codebuild/type/lint gate: clean build, tsc strict, ESLint, no unused deps, RSC boundary correctness, no console errors
  • gate-responsive375/768/1440 screenshot sweep via Playwright: no overflow, no orphan layouts, touch targets >=44px, mobile nav works
  • gate-visualself-critique loop: screenshot every page, judge against DIRECTION.md + taste with a scored rubric, fix worst issue
  • gate-accessibilityWCAG 2.2 AA: computed contrast check, keyboard-only walkthrough, focus-visible everywhere, landmarks, alt text
  • gate-performanceCore Web Vitals: Lighthouse >=90 perf, LCP element optimized, zero CLS, client bundle audit, font loading
  • gate-antislopsweeps for every banned-list item in taste: grep-able patterns plus visual clichés from screenshots; zero tolerance
  • gate-contentcopy and metadata completeness: real title/description per page, no dead copy patterns, headings tell a story

Ship

preview, deploy, and handoff to production

4

  • previewnon-production review URLs at checkpoints: vercel deploy with no --prod, noindex headers, URL logged in REVIEWS.md
  • shipproduction readiness: env var audit, build+start smoke test incl. /studio 404, deploy, post-deploy live-URL check
  • handoffclosing docs: README with stack map, how to edit content/tokens, design artifacts explained, maintenance notes
  • retrofitentry point for existing sites: audits against the constitution, produces scored gap report and phased upgrade plan

the specialists

Who argues with whom

design-judge

Opus 5

The adversarial critic. It scores screenshots against the committed direction and the taste constitution, and it is under no obligation to be nice about either.

scores screenshots against DIRECTION.md + taste rubric; returns ranked defects · used by gate-visual to judge design quality

pixel-qa

Sonnet 5

Sweeps every breakpoint with a real browser and reports what it actually saw — not what the markup implies.

used by gate-responsive and gate-visual for empirical browser QA

stack-doctor

Opus 5

Repairs a broken toolchain without the classic cowardice of downgrading the stack until the error goes away.

used whenever scaffold or gate-code hits tooling failures

Routing is deliberate: judgment stays on the lead model, specialist builds and critiques run on Opus 5, mechanical sweeps run on Sonnet 5.

The gates they report to

write-time enforcement

A grep between the model and the disk

The plugin registers a PostToolUse hook. hooks/antislop.sh reads every Write and Edit, greps it against the banned list in roughly thirty milliseconds, and blocks the ones that fail — slop never reaches the file. Its sibling studio-log.sh feeds the /studio activity feed.

this session

Not just a capability statement — a receipt. During this build the anti-slop hook fired and blocked a real write (the one licensed surface that quotes the banned list), and studio-log.sh recorded every agent this session launched. The build briefly believed otherwise — its probe had tested a file the hook is scoped to ignore — and the correction is in the paper trail.

the recurring cast

Eight clients who do not exist

Nearly every skill closes with a worked example, and the examples share a cast. Their palettes, routes and signature moves are fixed in CAST.md, so two skills that touch the same client still agree with each other three hours apart. All eight are invented.

  • Kaffeewerk Osta Berlin roastery
  • Tidepoolport-logistics SaaS
  • Studio Norraan Oslo agency
  • Casa Verdea Lisbon restaurant
  • Ledger & Lanea law firm
  • Framewalka game studio
  • Aldermoor Trusta foundation
  • Loop & Threada textiles shop

80 skills, one plugin, two commands

None of them run until the interview and your approvals say so.

esc

Pages

Home/
The session/session
The studio floor/skills
Why it isn't slop/craft
The paper trail/receipts
Install/install

Artifacts

The briefdesign/BRIEF.md
Assets intakedesign/ASSETS.md
The directiondesign/DIRECTION.md
The mockup rounddesign/MOCKUPS.md
The design systemdesign/SYSTEM.md
The identitydesign/IDENTITY.md
Sitemap & blueprintsdesign/SITEMAP.md
Progress ledgerdesign/PROGRESS.md
QA & gatesdesign/QA.md
Checkpoint reviewsdesign/REVIEWS.md
RECEIPTS.jsondesign/RECEIPTS.json

Commands

Copy: /plugin marketplace add blyatiful1/ultraweb
Copy: /plugin install ultraweb@ultraweb

Evidence

Losing mockup A — The Ledgerthrowaway artifact
Losing mockup B — The Dossierthrowaway artifact
Winning mockup C — The Terminalthrowaway artifact
Plugin source on GitHubblyatiful1/ultraweb
This site's source on GitHubblyatiful1/ultraweb-site