What it does
You tell Claude which pieces you want and describe your brand. Sitewright writes a complete Next.js 15 project: pages, API routes, database schema, file storage, middleware and a README. Your colours, your words, your data. It then builds the project and drives it in Chromium at desktop and phone sizes, and tells you exactly what passed.
you Use Sitewright to make a landing page, a dashboard and a connect page
for my coffee roastery, Bean & Barrel.
claude Which modules do you want?
[x] Landing page [ ] Publishing page [x] Dashboard
[x] Connect to phone [x] Sign in [ ] MFA accounts
...
The output is an ordinary project that you own. It has no runtime dependency on this skill.
What it makes
Everything below was generated from a short JSON config, built, and exercised in a browser. The brands, names, prices and photos are fictional demo data.
On a phone
Every page is checked at 390 px and 360 px wide: no sideways scrolling, tables that scroll inside their card, filters in one swipeable row, controls at least 44 px tall on touch screens.
Light and dark
Give it a primary and an accent colour. It derives the washes, the text colours (contrast-checked) and a lighter dark-mode variant. Dark follows the device, with a toggle in every header.
One kit, any brand
Design themes
Generated sites speak one of two design languages, set with design.theme in site.json. Colours, words and modules are yours either way.
| studio (the default) | classic |
|---|
| Surfaces | warm paper and ink neutrals that do not take your brand's hue, so your two colours are the only colour on the page | pale, cool surfaces tinted by the primary |
| Depth | hairline borders, nearly flat | soft brand-tinted shadows |
| Type | a display face for headlines (Bricolage Grotesque), Inter for text, JetBrains Mono | Montserrat throughout |
| Logo default | a letter mark | a hexagon |
"design": { "theme": "studio" } // or "classic"
"brand": { "font": { "display": "Fraunces" } } // optional: any Google Font; leave out to take the theme's
The palette for both themes is derived from your two brand colours and every text colour is contrast-checked, in light and dark. The studio rules are one block of CSS (skill/sitewright/templates/design/studio.css).
Modules
Pick any combination. Dependencies are added for you (publishing brings mfa; dashboard and connect bring signin and the ingest API).
| Module | What you get | Needs |
|---|
landing | Public home page: animated mark, scroll story with phone mock-ups, proof numbers, features, FAQ, download card with QR code and team code, release list | none |
signin | Shared-password gate in front of private pages: signed cookie, constant-time compare, safe ?next= redirect, edge middleware | none |
mfa | Named accounts with password and authenticator-app codes (TOTP), first-run setup, single-use invites, lockout, activity log | none |
publishing | Upload versions, rich release notes, stable/testing channels, testers with codes, update-check endpoint, public download. Real APK parsing, or any file types you list | mfa |
dashboard | Stat cards, filters, search, record cards, detail page with files, line items and status actions | signin, api |
connect | A page with the link (address + key) to paste into your app, a copy button and a curl example | signin, api |
fxgallery | A public /effects page: every animated effect live on a sample hero, a colour picker, and the config to copy | none |
Internally there are two more: base (design system, database, storage) and api (ingest, signed uploads, file serving, health), added automatically when needed.
Effects (optional)
Add motion without adding a library. Ask for one in plain words ("use aurora behind the hero") and Claude builds it into the site; or let Claude pick a fitting preset. scaffold.mjs --list-effects prints the whole menu, and the generated site gets only what was chosen. Change your mind later and it takes a second, without touching anything you edited: scaffold.mjs --apply-effects ./my-site --hero-bg stars. 10 animated hero backgrounds, 8 headline text animations, 4 button and 4 card micro-interactions, 5 scroll-reveal styles and 4 extras (cursor glow, scroll progress, click sparks, count-up numbers). Seven presets bundle sensible combinations: calm, aurora-glass, tech-grid, playful, cosmic, editorial, minimal.
Try every effect live: pick a combination, change the brand colours, and copy the exact config. The same page can be generated for your own site with the fxgallery module.
"effects": {
"preset": "aurora-glass",
"heroBackground": "aurora",
"headline": "split-words",
"buttons": "glow-border",
"cards": "spotlight",
"reveal": "blur",
"extras": ["cursor-glow", "count-up"]
}
The backgrounds, headline animations and micro-interactions are original, dependency-free code (no GSAP or Three.js). It honours prefers-reduced-motion, skips pointer-follow effects on touch screens, pauses canvases that are off screen, and keeps the real headline text for screen readers. See reference/effects.md for the full catalogue.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
