Nextwind Prototyping Boilerplate

Nextwind Prototyping Boilerplate is a starter kit for frontend prototyping that pairs Next.js, TypeScript, and Tailwind CSS with Storybook and scaffdog-based code generation.

What is Nextwind Prototyping Boilerplate?

This boilerplate packages Next.js, TypeScript, Tailwind CSS, Storybook, husky with lint-staged, and scaffdog into a single project scaffold. Its input is a new project idea; its output is a working Next.js codebase with mock data, typed models, and Storybook stories in a folder structure organized around OOUI (Object-Oriented UI) thinking. It was assembled by HajimexxxNakagawa and is published on GitHub as a public repository.

Key Features

• Pre-configured Tailwind & Storybook — Tailwind CSS for styling and Storybook for component development are installed and wired up, so you can start writing components without setup.
• OOUI-oriented folder structure — src/components/model, src/components/page, src/components/ui, src/mocks, and src/types separate model-bound components, page-level components, and UI primitives.
• ESLint plugins — Tailwind className sorting, import ordering, and automatic unused import deletion are enabled through preconfigured rules.
• Pre-commit hook — husky and lint-staged run linting on staged files before every commit.
• Scaffdog code generator — commands generate models, model components, page components, and UI components, each producing index files, TypeScript files, and .stories.tsx files with consistent templates.
• Spacer component — a reusable layout Spacer component is included for spacing prototypes quickly.
• Demo sites — a live app at Vercel and a Storybook at Chromatic show the boilerplate in action.

Who is it for?

• Frontend developers prototyping interfaces — use the preconfigured Next.js and Tailwind setup to spin up a new idea in minutes instead of wiring tools manually.
• Teams practicing OOUI design — the folder layout and scaffdog commands produce model types, mock data, and components in the shape OOUI projects expect.
• Developers using Storybook — every generated component comes with a stories file, and yarn sb starts the Storybook server.
• Prototypers who want code generation — scaffdog's generate m, mcs, mcl, pc, and uc commands create all boilerplate files from a few prompts.

What can you do with it?

• Prototype a new app quickly — run yarn then yarn dev to get a local Next.js server; yarn sb starts Storybook side by side.
• Create a typed model — run npx scaffdog generate m, enter a model name like "student", and get src/types/Student.ts and src/mocks/Student.ts.
• Generate model-bound components — the mcs command creates single-item components and mcl creates list components, each with index, TSX, and stories files under src/components/model.
• Generate UI and page components — uc creates UI components under src/components/ui and pc creates page components under src/components/page, both with stories files.

How does it work?

The workflow starts by defining a model's type in src/types, creating mock data in src/mocks, and building components under src/components/model. Scaffdog asks you for an output directory, model name, and component name, then generates the matching files from templates you can edit in the .scaffdog folder.

FAQ

What commands does scaffdog provide?

Scaffdog provides five generators: m for a model, mcs for a model component describing a single item, mcl for a model component describing a list, pc for a page component, and uc for a UI component. Each is run with npx scaffdog generate and the generator's letter.

Do I need to set up Storybook myself?

No. Storybook is already configured in the .storybook folder, and generated components include .stories.tsx files. Running yarn sb starts the Storybook server.

Can I customize the generated templates?

Yes. The scaffdog templates live in the .scaffdog directory as model.md, model-component.md, page-component.md, and ui-component.md. You can edit these files to change what scaffdog generates.

Does the boilerplate include a pre-commit hook?

Yes. The repository includes a .husky folder and uses lint-staged, so staged files are linted automatically before each commit.