nextjs-css-agent-components

NEXTJS-CSS-AGENT-COMPONENTS is an open-source Next.js and TypeScript component library from Internet Development Studio Company that turns one-line prompts into wireframe-precise website pages with the help of AI coding agents.

What is nextjs-css-agent-components?

Next.js and TypeScript component library from Internet Development Studio Company, styled with vanilla CSS Modules and organized as a three-tier wireframe system. It takes either a natural-language prompt or direct component imports and produces pages built from atoms, molecules, and patterns, plus runtime utilities. The repo runs on Next.js, uses port 10000 for Render.com compatibility, and includes an AGENTS.md operating manual plus two machine-readable skills under public/skills/. A live demo is hosted at wireframes.internet.dev.

Key Features

• CSS Modules only — No SASS, Tailwind, or CSS-in-JS; styling uses 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 each import.
• Five themes out of the box — light, dark, daybreak, blue, and neon-green, all switched through CSS custom properties on body.
• Agent-friendly skills — build-app-page scaffolds a new route under pages/; export-component-to-other-repo moves components to other codebases while keeping theme tokens, type scale, transitions, and breakpoints.
• Prettier formatting — Config uses single quotes, two-space indent, trailing commas, and print width 9999; npm run format and npm run format:check are available.
• Gallery registration — Example pages are registered in common/constants.ts under TEMPLATE_EXAMPLES_FEATURES so they appear in the demo gallery.

Who is it for?

• Developers using AI coding agents — Give the agent a one-line prompt like building a stock trading application example and the build-app-page skill handles pre-flight questions, layout selection, component imports, wiring, and verification.
• Web developers learning frontend — The readable, tiered codebase is a good starting point, especially when following @wwwjim.
• Fast-moving website builders — The repo's stated purpose is "how we roll websites the fast way," and the reusable patterns let you assemble authenticated app screens, dashboards, and modals quickly.

What can you do with nextjs-css-agent-components?

• Build a new app page from a prompt: Ask the agent to create an example app; it asks four pre-flight questions, picks a shape such as the ThreeColumnAppLayout, pulls components by tier, and verifies with npm run build.
• Export a component to another repo: Use the export-component-to-other-repo skill to lift a component while preserving design-system precision like theme tokens, type scale, transitions, and breakpoints.
• Create authenticated screens: Use patterns like KeyHeader, Server.setup, and ModalError together with getServerSideProps to wire a session and confirm-trade modals.

How does it work?

Install with npm install, then run npm run dev on port 10000. To have an agent build a page, run the build-app-page skill with a one-line prompt; the skill asks four questions, selects an app shape, imports atoms, molecules, and patterns by tier, wires the Page shell and global modal manager, registers the page in common/constants.ts, and verifies with npm run build.

FAQ

Is nextjs-css-agent-components free?

The repository is a template with no pricing or license restrictions stated on the page; setup is a standard npm install and npm run dev.

Does this template use Tailwind CSS?

No. It intentionally avoids SASS, Tailwind, and CSS-in-JS, using CSS Modules with native nesting and theme tokens instead.

What port does the dev server use?

Port 10000, chosen for compatibility with Render.com.

What themes are included?

Five themes: light, dark, daybreak, blue, and neon-green, all driven by CSS custom properties on body.

How does an AI agent build a page with this template?

The agent follows build-app-page, answers four pre-flight questions, picks an application shape, imports components by tier, wires them, registers the page in common/constants.ts, and verifies with npm run build.