菜单
Scaffold a new web/frontend project boilerplate with a Nix devshell (Bun + Biome by default, plus optional React/Next.js, Panda CSS, Chakra UI, react-hook-form, Vitest, Playwright, and Storybook). Use when starting a new web project or bootstrapping a React/Next.js app from scratch.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create a Notion page via the Notion MCP, defaulting the destination to the user's private space and reviewing the final page from a first-time reader's perspective. Use whenever the user asks to create, draft, or write a Notion page.
Create a git commit with hunk-level staging, diff-scope verification, and sandbox-bypassed signed commit execution. Use whenever the user asks for a commit, especially when the working tree contains a mix of related and unrelated changes.
Update a specific Nix flake input to its latest version. Use when asked to update a flake input, bump a dependency, or upgrade a specific package/input in the flake. Handles the full workflow: verify input exists, update flake.lock, build to verify, and commit the change.
Write or refine Hatena Blog posts in Japanese
| name | initializing-web-project |
| description | Scaffold a new web/frontend project boilerplate with a Nix devshell (Bun + Biome by default, plus optional React/Next.js, Panda CSS, Chakra UI, react-hook-form, Vitest, Playwright, and Storybook). Use when starting a new web project or bootstrapping a React/Next.js app from scratch. |
Scaffold a new web project boilerplate. Default to Bun + React + TypeScript + Biome, layered on top of a Nix devshell. Add other libraries only when the project needs them.
Ask the user (group into one or two short questions):
Defaults: Bun (runtime + package manager), TypeScript, Biome (lint + format). No ESLint, no Prettier.
In an empty project directory, run:
nix flake init -t github:numtide/blueprint#treefmt-and-git-hooks
Then customize:
nix/devshell.nix — add pkgs.bun (and pkgs.nodejs_22 only if a tool requires Node).nix/treefmt.nix — enable biome for JS/TS/JSON; keep nixfmt for Nix files.Example nix/treefmt.nix:
_: {
projectRootFile = "flake.nix";
programs.nixfmt.enable = true;
programs.biome.enable = true;
}
Verify with nix develop.
Run inside the project directory:
bunx --bun create-next-app@latest . --ts --app --src-dir --use-bun --no-tailwind --no-eslint --import-alias "@/*"bun create vite . --template react-ts && bun installDelete any generated ESLint config (.eslintrc*, eslint.config.*) and Prettier config — Biome replaces both.
bun add -D --exact @biomejs/biome
bunx biome init
In biome.json, set vcs.enabled = true and vcs.useIgnoreFile = true. Add lint and format scripts to package.json.
Install only what the user picked.
| Feature | Commands |
|---|---|
| Panda CSS | bun add -D @pandacss/dev && bunx panda init --postcss |
| Chakra UI v3 | bun add @chakra-ui/react @emotion/react @chakra-ui/preset-panda (then configure panda.config.ts with the Chakra preset) |
| react-hook-form | bun add react-hook-form |
| Vitest | bun add -D vitest @vitest/ui happy-dom @testing-library/react @testing-library/jest-dom @testing-library/user-event |
| Playwright | bun add -D @playwright/test && bunx playwright install --with-deps |
| Storybook | bunx storybook@latest init --package-manager bun |
See https://chakra-ui.com/docs/get-started/frameworks/next-app. Key points:
"use client" Provider component (wrapping ChakraProvider + next-themes ThemeProvider) and use it in app/layout.tsx.suppressHydrationWarning on the <html> element — required by next-themes to silence the hydration warning.dev and build scripts to use the --webpack flag.experimental.optimizePackageImports: ['@chakra-ui/react'] in next.config.mjs to shrink the bundle and suppress serialization warnings.pkgs.nodejs_22 in the devshell if any tool needs Node directly).The blueprint template provides pre-commit-check. Add a biome check hook in nix/checks/pre-commit-check.nix so JS/TS files are checked alongside Nix.
nix flake checknix develop: run the build (bun run build or next build) and any test scripts to confirm the project compiles.bun add, bun run, bunx — never npm/yarn/pnpm..gitignore: node_modules/, .next/, dist/, styled-system/ (Panda output), test-results/, playwright-report/, .bun/.