Sitewright generates a complete Next.js site, backend included, from six modules you pick — landing page, sign-in, authenticator MFA, records dashboard, release publishing and a connect-your-phone page. Your colours, your words, your data. Then it tests the result in a real browser, at desktop and phone sizes.
$ git clone https://github.com/raj742133/sitewright && cd sitewright && ./install.sh
Each module is a self-contained slice of the site with its own pages, API routes, database tables and settings. Choose one or all six; dependencies are added for you.
landingA public home page with an animated mark, a scroll-driven story with phone mock-ups, proof numbers, features, FAQ and a download card with a QR code.
signinA shared-password gate in front of the private pages: signed cookie, constant-time compare, safe ?next= redirect, edge middleware.
mfaNamed accounts with password and authenticator-app codes. First-run setup, single-use invite links, lockout and an activity log.
publishingUpload a version, write notes in a rich editor, choose stable or testing, show it on the home page. Real APK parsing, or any file types you list.
dashboardStat cards, status chips, search and facet filters over a card grid of records, plus a detail page with files, line items and one-click status changes.
connectOne page that shows the link (address plus key) to paste into your app, a copy button and a ready-made curl example.
You describe the site; Claude does the rest and shows its work. The panel on the right is real output from a run of the kit.
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 [x] Dashboard [x] Connect to phone [x] Sign in [ ] Publishing page [ ] MFA accounts you All the ticked ones. Brown and amber, a drop logo. We call them orders, and the device is a tablet. claude Got it. Statuses for an order? (new, roasting, shipped, issue) And one number to total up? (order total, in £)
// site.json (shortened) { "brand": { "name": "Bean & Barrel", "logo": { "style": "drop" }, "colors": { "primary": "#7a4a21", "signal": "#e8a33d" } }, "vocab": { "record": "order", "records": "orders", "device": "tablet" }, "modules": ["landing", "signin", "dashboard", "connect"], "dashboard": { "statuses": [ new, roasting, shipped, issue ], "metrics": [{ "key": "total", "unit": "£" }] } }
$ node scaffold.mjs --config site.json --out ./bean-and-barrel sitewright: wrote 56 files to ./bean-and-barrel brand Bean & Barrel (bean-and-barrel), logo drop, primary #7a4a21, signal #e8a33d modules api, signin, landing, dashboard, connect (added as dependencies: api) sign-in password (development only; stored in .env.local) api key (Bearer token for /api/ingest) next: cd bean-and-barrel && npm install && npm run dev
$ node verify.mjs --site ./bean-and-barrel ok landing · mobile: no horizontal scroll after scrolling ok sign-in · an open redirect in ?next is ignored ok api · ingest stores a record with its file, and is idempotent ok dashboard · mobile: a status chip filters ok dashboard · mobile: dashboard controls are finger-sized ok connect · mobile: shows the link with the key and copies it ok hydration · /dashboard hydrates cleanly 6 times ok console · no browser console errors All checks passed (screenshots + report.json saved)
Same code, different config. Each of these was generated from a short JSON file, built, and driven in a browser. The names, numbers and photos are fictional demo data.
An optional style layer: animated hero backgrounds, headline animations and button and card micro-interactions, picked from a menu. Original, dependency-free code (no GSAP or Three.js), so a site only carries the effects it chose.
The real text always stays for screen readers and search engines; the animation only changes how it appears.
They act on every card and primary button the site already has, so nothing needs rewiring.
Reduced-motion is honoured, touch screens skip pointer-follow effects, and canvases pause when off screen. Each rule is checked by the verifier.
Small isometric drawings, placed where they mean something: a padlock on the sign-in card, a scanner on the connect page, a box that opens beside the releases, a bar chart where a dashboard is empty, a dish on the 404 page. Say figures: auto and each place gets its fitting figure, or choose them one by one. They wear your brand colours, and you can swap one later in a second. Nineteen come from Hairline by Lucas Marques (MIT); Bars, Scanner and Parcel are new.
Write <Icon name="rocket" /> anywhere in your pages and it just works: the project finds it and brings the icon in by itself, as you save and before every build. No list to keep, no command to run. Describe it instead (<Icon for="Shipped orders" />) and the fitting one is chosen, from your own vocabulary first. Say icons: auto and the navigation, stat cards and chips get theirs; better-icons finds the names. Inline SVG in the colour of the text, only the icons you use, no library and no request at run time. Each set keeps its licence in a notice file, and every icon is checked for anything that is not a plain drawing before it is written.
icons: auto. The icon takes the card's tone.
Interface, Arrows, Status and feedback, Devices and tech, Commerce and delivery, Food and drink, People and security, Communication and media, Files and data, Charts and time, Places and travel, Work, health and nature. Behind them: Lucide's 1,866, Tabler's 6,220, and the rest of Iconify's 200,000+.
Pick a background, headline, button and card style, change the brand colours, then copy the config. This is the same /effects page the skill can generate for your own site.
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, and controls at least 44 px tall on touch screens.
Give it a primary and an accent colour. It derives the washes, the text colours (checked for contrast) and a lighter dark-mode variant. Dark follows the device, with a toggle in every header.
Nothing to register. Use an icon or figure and the project wires it up as you work.
npm run dev picks it up on save<Icon name="rocket" />
<Icon name={ok ? 'check' : 'x'} />
<Icon for="Shipped orders" /> // icon from the words
<Figure place="connect" /> // pointer-reactive drawingMissing icons are fetched while npm run dev runs and before every build. Typos come back with a “did you mean”.
Attribution goes into a NOTICE file for you; a set you cannot use is refused.
npm run dev no longer 500s on database pages, and every test run starts it to be sure.
Sign-in-only sites get a proper home page instead of a redirect loop.
The output is an ordinary Next.js 15 / React 19 / TypeScript project that you own. No runtime dependency on this skill.
Shared-password cookie, named MFA accounts, a bearer ingest token and per-tester codes — four separate layers, never merged.
Clients get short-lived signed URLs and PUT files straight to storage; the app only sees small JSON. Local, S3/R2 or Azure Blob.
Re-sending the same record id updates it instead of duplicating it, so a phone that retries after losing signal does no harm.
Runs on embedded Postgres (PGlite) out of the box and switches to your DATABASE_URL in production. Schema is created for you.
Scrypt password hashes, HMAC-signed cookies, constant-time compares, escaped config text, replay-proof authenticator codes.
Tell it a record is an “order”, a “matter” or a “loaf” and every label, heading and empty state follows.
A skill is a folder Claude Code reads at the start of a session. Installing Sitewright means copying one folder into ~/.claude/skills/.
# personal install: available in every project
git clone https://github.com/raj742133/sitewright
cd sitewright
./install.shcd your-project
/path/to/sitewright/install.sh --project# personal install: available in every project
git clone https://github.com/raj742133/sitewright
cd sitewright
.\install.ps1cd your-project
C:\path\to\sitewright\install.ps1 -ProjectIf PowerShell blocks the script: powershell -ExecutionPolicy Bypass -File .\install.ps1
git clone https://github.com/raj742133/sitewright
mkdir -p ~/.claude/skills
cp -R sitewright/skill/sitewright ~/.claude/skills/On Windows the target is %USERPROFILE%\.claude\skills\sitewright. For a single project, copy it to .claude/skills/sitewright inside that project instead.
npm i playwright
npx playwright install chromiumUse Sitewright to make a landing page and a dashboard for my business.
/sitewright
I need a publishing page where my team uploads releases, with MFA sign-in.
Give the landing page an aurora background and a split-words headline.
Every example below was scaffolded from its config, type-checked, built for production and exercised with Playwright in Chromium. Results are checks passed out of checks run on the final templates.
| Site | What it exercises | Result |
|---|---|---|
| Bean & Barrel | all six modules, PDF/ZIP publishing, testers | 88 / 88 |
| PulseFit | all six modules; real-APK checks need the APK files, not run in the latest pass | 65 / 65 |
| Halden Legal | landing, sign-in, dashboard, connect; monogram logo, navy and gold | 61 / 61 |
| Pixel Studio | landing and MFA only | 35 / 35 |
| Sunny Side Bakery | near-white brand colours (contrast adjustment) | 76 / 76 |
| Midnight Courier | near-black brand colours, other fonts, PDF/CSV publishing | 76 / 76 |
| Quotes, tags, braces | a brand name full of ", <b>, {x}, backticks and a backslash | 76 / 76 |
| Orbit Labs | a single module: landing only | 13 / 13 |
| Field Notes Press | a single module: publishing only (brings MFA and the API) | 25 / 25 |
| Acme Co | just a brand name, everything else defaulted | 76 / 76 |
| Bean & Barrel + effects | aurora-glass preset, beams behind the sign-in card, cursor glow, scroll progress, count-up | 113 / 113 |
| Play House | particles, split letters, ripple buttons, tilt cards, click sparks, stars on sign-in | 70 / 70 |
| Ripple Works | waves, rotating headline word, magnetic buttons, glow-border cards, slide reveal | 60 / 60 |
| Grid Labs | tech-grid preset: perspective grid, decode headline, spotlight cards | 65 / 65 |
| Effect Lab | the live effects gallery: every background, headline, button, card, reveal and extra | 11 / 11 |
next dev: it crashed with PGlite on the Node versions tried here; production builds are what is testedNo. You get a normal Next.js project in a folder of your choice. Delete the skill and the site keeps working.
Yes. Choose only landing and you get just that, with no database or sign-in. Dependencies are added only when a module needs them.
In your own database and storage. In development it is an embedded Postgres in a folder inside the project plus local files. For production you point DATABASE_URL at Postgres and choose local, S3/R2 or Azure Blob storage.
No. Sections that need facts (proof numbers, feature lists, compatibility) are off until you give real content. The demo screenshots here use clearly fictional data.
It follows common practice: scrypt hashes, signed cookies, authenticator codes that cannot be reused, lockout after repeated failures. It has not had an independent security audit, so review it before putting anything sensitive behind it.
No. Libraries like React Bits show what animated, copy-paste components can do, but their licence (MIT with the Commons Clause) does not allow redistributing them inside another package. These effects are written fresh for this kit, need no animation library, and are MIT licensed like the rest. The line figures are the exception: nineteen of them are Hairline by Lucas Marques, also MIT, included with its licence notice; three more are new here. Icons come from the open sets behind Iconify, found with better-icons (MIT), each under its own licence, which the generated site records.
They are built to avoid both: canvases pause off screen and in background tabs, pixel density is capped, pointer-follow effects are skipped on touch screens, and prefers-reduced-motion shows the final state at once. Headline animations keep the real text for screen readers. The verifier measures the pausing and checks the text.
Because a page that builds is not necessarily a page that works. The verifier signs in, enrols an authenticator, publishes a file and filters a list in a real browser, at phone width, and reports exactly what failed.
Yes. The colours are CSS variables at the top of globals.css, the logo is one file, and everything else is ordinary React you can edit. Re-running the generator into a fresh folder gives you a clean baseline to compare against.