Frontend Starter Kit
Setup Skills (1-14, sequential, idempotent)
- setup-toolchain -- bun + tsgo enforcement, destructive command guards
- setup-biome -- Biome + Ultracite, auto-fix hook
- setup-quality-gate -- quality:gate script, CI workflow, Stop hook, bundle guard
- setup-agent-config -- AI_AGENT=1, output truncation
- setup-react-compiler -- React Compiler + memoization check
- setup-zustand -- double-parens create, useShallow, persist
- setup-accessibility -- ARIA enforcement, Playwright AXE, WCAG 2.1 AA
- setup-react-rules -- ban raw HTML, TS escapes, XSS, barrel imports
- setup-env-validation -- t3-env + zod, ban process.env
- setup-conventional-commits -- type(scope): description
- setup-react-doctor -- health scoring + Stop hook
- setup-tanstack-router -- route tree auto-gen + enforcement
- setup-connect-query -- ConnectRPC + Protobuf enforcement
- setup-e2e-testing -- Playwright + Testcontainers + axe-core
Workflow Skills (15-28)
development-lifecycle, tdd, brainstorming, setup-ci-pipeline, improve-codebase-architecture, request-refactor-plan, design-an-interface, domain-model, grill-me, triage, diagnose, qa, zoom-out, write-a-skill
Steps
1. Run setup skills 1-14 sequentially
Each skill SETUP.md has install steps. Set REACT_RULES_BAN_USEEFFECT=1 in session-env.sh.
2. Install workflow skills
bunx skills@latest add malinskibeniamin/skills/development-lifecycle --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/tdd --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/brainstorming --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/setup-ci-pipeline --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/improve-codebase-architecture --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/request-refactor-plan --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/design-an-interface --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/domain-model --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/grill-me --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/triage --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/diagnose --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/qa --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/zoom-out --agent claude-code -y
bunx skills@latest add malinskibeniamin/skills/write-a-skill --agent claude-code -y
3. Community skills (optional)
bunx skills@latest add mattpocock/skills/grill-with-docs --agent claude-code -y
bunx skills@latest add mattpocock/skills/prototype --agent claude-code -y
bunx skills@latest add mattpocock/skills/to-prd --agent claude-code -y
bunx skills@latest add mattpocock/skills/to-issues --agent claude-code -y
bunx skills@latest add mattpocock/skills/handoff --agent claude-code -y
bunx skills@latest add mattpocock/skills/ubiquitous-language --agent claude-code -y
bunx skills@latest add mattpocock/skills/git-guardrails-claude-code --agent claude-code -y
4. Verify
1---2name: frontend-starter-kit3description: Complete frontend stack -- 14 setup skills + 14 owned workflow skills + 4 optional community skills in one command. Use when starting new frontend project or bootstrapping frontend best practices from scratch.4---56# Frontend Starter Kit78## Setup Skills (1-14, sequential, idempotent)9101. **setup-toolchain** -- bun + tsgo enforcement, destructive command guards112. **setup-biome** -- Biome + Ultracite, auto-fix hook123. **setup-quality-gate** -- quality:gate script, CI workflow, Stop hook, bundle guard134. **setup-agent-config** -- AI_AGENT=1, output truncation145. **setup-react-compiler** -- React Compiler + memoization check156. **setup-zustand** -- double-parens create, useShallow, persist167. **setup-accessibility** -- ARIA enforcement, Playwright AXE, WCAG 2.1 AA178. **setup-react-rules** -- ban raw HTML, TS escapes, XSS, barrel imports189. **setup-env-validation** -- t3-env + zod, ban process.env1910. **setup-conventional-commits** -- type(scope): description2011. **setup-react-doctor** -- health scoring + Stop hook2112. **setup-tanstack-router** -- route tree auto-gen + enforcement2213. **setup-connect-query** -- ConnectRPC + Protobuf enforcement2314. **setup-e2e-testing** -- Playwright + Testcontainers + axe-core2425## Workflow Skills (15-28)2627development-lifecycle, tdd, brainstorming, setup-ci-pipeline, improve-codebase-architecture, request-refactor-plan, design-an-interface, domain-model, grill-me, triage, diagnose, qa, zoom-out, write-a-skill2829## Steps3031### 1. Run setup skills 1-14 sequentially32Each skill `SETUP.md` has install steps. Set `REACT_RULES_BAN_USEEFFECT=1` in session-env.sh.3334### 2. Install workflow skills35```bash36bunx skills@latest add malinskibeniamin/skills/development-lifecycle --agent claude-code -y37bunx skills@latest add malinskibeniamin/skills/tdd --agent claude-code -y38bunx skills@latest add malinskibeniamin/skills/brainstorming --agent claude-code -y39bunx skills@latest add malinskibeniamin/skills/setup-ci-pipeline --agent claude-code -y40bunx skills@latest add malinskibeniamin/skills/improve-codebase-architecture --agent claude-code -y41bunx skills@latest add malinskibeniamin/skills/request-refactor-plan --agent claude-code -y42bunx skills@latest add malinskibeniamin/skills/design-an-interface --agent claude-code -y43bunx skills@latest add malinskibeniamin/skills/domain-model --agent claude-code -y44bunx skills@latest add malinskibeniamin/skills/grill-me --agent claude-code -y45bunx skills@latest add malinskibeniamin/skills/triage --agent claude-code -y46bunx skills@latest add malinskibeniamin/skills/diagnose --agent claude-code -y47bunx skills@latest add malinskibeniamin/skills/qa --agent claude-code -y48bunx skills@latest add malinskibeniamin/skills/zoom-out --agent claude-code -y49bunx skills@latest add malinskibeniamin/skills/write-a-skill --agent claude-code -y50```5152### 3. Community skills (optional)53```bash54bunx skills@latest add mattpocock/skills/grill-with-docs --agent claude-code -y55bunx skills@latest add mattpocock/skills/prototype --agent claude-code -y56bunx skills@latest add mattpocock/skills/to-prd --agent claude-code -y57bunx skills@latest add mattpocock/skills/to-issues --agent claude-code -y58bunx skills@latest add mattpocock/skills/handoff --agent claude-code -y59bunx skills@latest add mattpocock/skills/ubiquitous-language --agent claude-code -y60bunx skills@latest add mattpocock/skills/git-guardrails-claude-code --agent claude-code -y61```6263### 4. Verify64- [ ] `.claude/settings.json` has all hooks, `biome.jsonc` + `src/env.ts` exist65- [ ] Scripts: lint, lint:fix, type:check, test, quality:gate66- [ ] `.github/workflows/quality-gate.yml` exists, all hooks executable
redpanda-data