frontend-starter-kit

name	frontend-starter-kit
description	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.

Frontend Starter Kit

Setup Skills (1-14, sequential, idempotent)

1. setup-toolchain -- bun + tsgo enforcement, destructive command guards
2. setup-biome -- Biome + Ultracite, auto-fix hook
3. setup-quality-gate -- quality:gate script, CI workflow, Stop hook, bundle guard
4. setup-agent-config -- AI_AGENT=1, output truncation
5. setup-react-compiler -- React Compiler + memoization check
6. setup-zustand -- double-parens create, useShallow, persist
7. setup-accessibility -- ARIA enforcement, Playwright AXE, WCAG 2.1 AA
8. setup-react-rules -- ban raw HTML, TS escapes, XSS, barrel imports
9. setup-env-validation -- t3-env + zod, ban process.env
10. setup-conventional-commits -- type(scope): description
11. setup-react-doctor -- health scoring + Stop hook
12. setup-tanstack-router -- route tree auto-gen + enforcement
13. setup-connect-query -- ConnectRPC + Protobuf enforcement
14. 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 redpanda-data/ui-harness/development-lifecycle --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/tdd --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/brainstorming --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/setup-ci-pipeline --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/improve-codebase-architecture --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/request-refactor-plan --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/design-an-interface --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/domain-model --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/grill-me --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/triage --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/diagnose --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/qa --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/zoom-out --agent claude-code -y
bunx skills@latest add redpanda-data/ui-harness/write-a-skill --agent claude-code -y

3. Community skills (optional)

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/ubiquitous-language --agent claude-code -y
bunx skills@latest add mattpocock/skills/git-guardrails-claude-code --agent claude-code -y

4. Verify

• .claude/settings.json has all hooks, biome.jsonc + src/env.ts exist
• Scripts: lint, lint:fix, type:check, test, quality:gate
• .github/workflows/quality-gate.yml exists, all hooks executable