Web setup
Run the web kit, make it yours, and share it.
The web kit is a Next.js app: the App Router, Tailwind 4 and shadcn/ui, with the
kit's own components on top for app shells, tables, marketing pages and AI product interfaces. It is built
to the same rules as the native kit: a registry, the same tokens.json, the same skills.
Run it
Not yet: copying a single kit
A kit copied out on its own installs @itshendri/kit-tokens from npm, which is not published yet, so
npm install fails. Until it is, clone the whole repo (see Install) and work in apps/mobile or
apps/web.
npx giget@latest gh:itsHendri/protokit/apps/web my-prototype
cd my-prototype && npm install
npm run dev # http://localhost:3100Open Components for every component live, Foundations for the tokens, and the sample apps from the home page. They are the worked examples: Northwind, a made-up invoicing product, as a dashboard, a landing page and an AI assistant; and a shop and a habit tracker, the same apps the Native kit has.
Make it yours
Name it
Set name in package.json, and the title and description in app/layout.tsx.
Re-brand it
Pick a theme on this site (the bar at the bottom, or the theme studio), then apply its code:
npx kit-tokens theme apply pk1-XXXXXXXXXXXXIn the monorepo, run npm run theme:apply -- pk1-… at the root instead: one theme drives both kits. See
Themes. To edit tokens/tokens.json by hand, run npm run tokens:build after: it writes
app/tokens.css (Tailwind 4 and shadcn variables, in oklch) and refuses any palette below WCAG AA.
Remove the samples
npm run eject-samplesDeletes the dashboard, landing page, assistant, shop and habit tracker, their data and the kit home's links to them.
Build your prototype
A prototype lives in its own folder under app/, for example app/acme/, with its own layout.tsx:
AppShell for an app, a plain header and footer for a marketing page. Or hand the agent a brief and let
the transcript-to-prototype skill set it up.
What it is for
- Web apps and dashboards:
AppShell,PageHeader,StatTile,DataTable, charts, forms, settings. - Marketing pages:
Hero,FeatureGrid,PricingCard, FAQ accordions. - AI product interfaces:
ChatMessage,ChatComposer,StreamingText,ThinkingIndicator,ToolCallCard, andApprovalCardso the assistant asks before anything irreversible. - The web version of a mobile prototype, on the same brand from the same token file.
See every one live under Components (filter by Web).
Share it
| To | Run |
|---|---|
| Anyone with a browser | Deploy to Vercel or any Next.js host, or KIT_WEB_EXPORT=1 npm run build for a static out/ folder |
| A teammate's agent | Send them the repo; AGENTS.md and the skills travel with it |
Checks
npm run typecheck, npm run lint, npm run tokens:check and npm run registry:build -- --check are what
CI runs. The qc-pass skill adds guards against hard-coded colours and stray UI libraries, then looks at the
changed pages in a browser at 375px and 1280px, in light and dark.