Live Demo

A Next.js + TypeScript + vanilla-CSS component library from the Internet Development Studio Company. It's a precise wireframe system — every pixel, token, and transition is deliberate — and it's built to be a comfortable place for AI coding agents to work alongside you. See AGENTS.md for the operating manual.

Why use this?

• Readable everything → No SASS, no Tailwind, no CSS-in-JS. Just CSS Modules with native nesting and a small set of theme tokens.
• Three-tier architecture → elements/ (atoms) → components/ (molecules) → patterns/ (organisms), with runtime/ for non-visual infrastructure. Path aliases declare the tier on every import.
• Five themes out of the box → light, dark, daybreak, blue, neon-green, all driven by CSS custom properties on body.
• Agent-friendly → AGENTS.md documents the conventions; public/skills/ holds reusable how-tos (porting components to other repos, building new app pages from scratch).
• Learning friendly → A great starting point for web dev, especially alongside @wwwjim.

The repo is structured so an agent can take a one-line prompt and land a working page on the first pass. Two skills live under public/skills/:

• build-app-page — scaffold a new route under pages/ using the right Page shell, layout, chrome, and modal wiring.
• export-component-to-other-repo — lift a component into a different codebase without losing the design-system precision (theme tokens, type scale, transitions, breakpoints).

For example, the prompt "Take a few of these components and make a stock trading application example for me" runs through build-app-page like this:

1. Pre-flight — the skill asks four questions: purpose (authenticated app screen), session (yes, KeyHeader + Server.setup), modals (yes, confirm-trade), gallery (yes, register in common/constants.ts).
2. Pick a shape — Shape E (ThreeColumnAppLayout: watchlist sidebar | ticker detail | chart canvas), modeled on the existing pages/examples/features/statement-of-work/index.tsx.
3. Pull components by tier — atoms (LineChart / CandlestickChart from @elements/charts/, Input from @elements/controls/, Tag from @elements/marks/), molecules (Button, Table, Select from @components/), patterns (KeyHeader, Page, Navigation from @patterns/chrome/, ModalError from @patterns/modals/).
4. Wire it up — <Page> for chrome and metadata, <GlobalModalManager /> for modals, getServerSideProps for the session, typography from @elements/type and @elements/type/forms, spacing on the multiples-of-4 grid.
5. Register — add an entry to TEMPLATE_EXAMPLES_FEATURES in common/constants.ts so it shows up in the gallery.
6. Verify — npm run dev on port 10000, then npm run build to typecheck.

That's the full loop. Both skills are plain markdown — read them top-to-bottom to see exactly what an agent will do before it writes any code.

npm install
npm run dev

Open http://localhost:10000. We use port 10000 for compatibility with Render.com.

We use Prettier with the config in .prettierrc (single quotes, 2-space, trailing commas, printWidth: 9999 — long lines are intentional).

npm run format         # format all files in place
npm run format:check   # report unformatted files without writing

Ping @wwwjim or @internetxstudio.