Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
Verify codebase quality — architecture consistency, convention compliance, gap analysis.
$ npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ww-w-ai/bkit-claude-code phase-8-review --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/ww-w-ai/bkit-claude-code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/phase-8-review .claude/skills/phase-8-review && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "phase-8-review" agent skill from https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-review into .claude/skills/phase-8-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phase-8-review", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-reviewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ww-w-ai/bkit-claude-code phase-8-review --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ww-w-ai/bkit-claude-code.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/phase-8-review .agents/skills/phase-8-review && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "phase-8-review" agent skill from https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-review into .agents/skills/phase-8-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phase-8-review", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ww-w-ai/bkit-claude-code phase-8-review --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ww-w-ai/bkit-claude-code.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/phase-8-review .cursor/skills/phase-8-review && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "phase-8-review" agent skill from https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-review into .cursor/skills/phase-8-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phase-8-review", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/ww-w-ai/bkit-claude-code.git --path skills/phase-8-review--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ww-w-ai/bkit-claude-code phase-8-review --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ww-w-ai/bkit-claude-code.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/phase-8-review .gemini/skills/phase-8-review && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "phase-8-review" agent skill from https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-review into .gemini/skills/phase-8-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phase-8-review", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install ww-w-ai/bkit-claude-code phase-8-reviewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ww-w-ai/bkit-claude-code.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/phase-8-review .github/skills/phase-8-review && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "phase-8-review" agent skill from https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-review into .github/skills/phase-8-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phase-8-review", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ww-w-ai/bkit-claude-code phase-8-review --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ww-w-ai/bkit-claude-code.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/phase-8-review .opencode/skills/phase-8-review && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "phase-8-review" agent skill from https://github.com/ww-w-ai/bkit-claude-code/tree/main/skills/phase-8-review into .opencode/skills/phase-8-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "phase-8-review", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
phase-8-reviewVerify codebase quality — architecture consistency, convention compliance, gap analysis.
Phase 8 Review is an agent skill from ww-w-ai/bkit-claude-code. Verify codebase quality — architecture consistency, convention compliance, gap analysis. Triggers: code review, architecture check, quality, gap analysis default: bkit:code-analyzer validate: bkit:design-validator gap: bkit:gap-detector qa: bkit:qa-strategist team: bkit:cto-lead
Its SKILL.md is about 3.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development. The repository describes itself as: bkit Vibecoding Kit - PDCA methodology + Claude Code mastery for AI-native development. The licence is Apache-2.0.
Read from SKILL.md and the folder at commit 85b4913. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadGlobGrepLSPTaskFrom allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript, markdown and bash).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Phase 8 Review loads about 3.7k tokens when it runs. Until then it costs about 74 tokens; SKILL.md has 474 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from ww-w-ai/bkit-claude-code at commit 85b4913, republished under its Apache-2.0 licence (© ww-w-ai). 474 words, ~3,674 tokens.
.claude/skills/phase-8-review/SKILL.md (or your agent's skills folder).Overall codebase quality verification
Review the entire codebase before deployment. Identify architecture consistency, convention compliance, and potential issues.
docs/03-analysis/
├── architecture-review.md # Architecture review
├── convention-review.md # Convention review
└── refactoring-plan.md # Refactoring plan| Level | Application Method |
|---|---|
| Starter | Can be skipped (simple projects) |
| Dynamic | Required |
| Enterprise | Required + security review |
Phase 8 verifies that all Phase outputs and rules are consistently applied.
┌─────────────────────────────────────────────────────────────────┐
│ Cross-Phase Dependency Flow │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Phase 1 (Schema/Terminology) │
│ ↓ Glossary, entity definitions │
│ Phase 2 (Coding Convention) │
│ ↓ Naming rules, environment variable conventions │
│ Phase 3 (Mockup) │
│ ↓ Component structure, Props design │
│ Phase 4 (API) │
│ ↓ RESTful principles, response format, error codes │
│ Phase 5 (Design System) │
│ ↓ Design tokens, component variants │
│ Phase 6 (UI Implementation) │
│ ↓ API client, type sharing, error handling │
│ Phase 7 (SEO/Security) │
│ ↓ Security rules, metadata │
│ Phase 8 (Review) ← Current stage: Full verification │
│ ↓ │
│ Phase 9 (Deployment) │
│ │
└─────────────────────────────────────────────────────────────────┘□ Are glossary.md terms consistently used in code?
- Business terms → Code naming matching
- Global standard terms → API response field names matching
□ Do entity definitions match actual types?
□ Do relationship definitions match actual implementation?□ Naming rule compliance (PascalCase, camelCase, UPPER_SNAKE_CASE)
□ Folder structure rule compliance
□ Environment variable naming rule compliance (NEXT_PUBLIC_*, DB_*, API_*, etc.)
□ .env.example template completion
□ Environment variable validation logic (lib/env.ts) exists□ RESTful principle compliance
- Resource-based URLs (nouns, plural)
- Correct HTTP method usage
- Status code consistency
□ Response format consistency
- Success: { data, meta? }
- Error: { error: { code, message, details? } }
- Pagination: { data, pagination }
□ Error code standardization (matches ERROR_CODES constant)□ Are design tokens defined? (CSS Variables / ThemeData)
□ Do components use tokens? (no hardcoded colors)
□ Are component variants consistent?
□ Dark mode support (if defined)□ API client layer structure compliance
- Components → hooks → services → apiClient
- No direct fetch calls
□ Type consistency
- Phase 4 API spec types = Phase 6 client types
□ Error handling consistency
- Global error handler usage
- Error code-specific handling logic
□ State management pattern consistency□ Authentication/authorization middleware applied
□ Input validation (server-side)
□ XSS, CSRF defense
□ No sensitive info exposed to client
□ SEO meta tags applied□ Environment variable Secrets registered (based on Phase 2 list)
□ Environment separation (dev/staging/prod)
□ Build successful
□ Environment variable validation script passes┌─────────────────────────────────────────────────────────────┐
│ Presentation Layer │
│ (pages, components, hooks - UI concerns) │
├─────────────────────────────────────────────────────────────┤
│ Application Layer │
│ (services, use-cases - business logic) │
├─────────────────────────────────────────────────────────────┤
│ Domain Layer │
│ (entities, types - core domain models) │
├─────────────────────────────────────────────────────────────┤
│ Infrastructure Layer │
│ (api client, db, external services) │
└─────────────────────────────────────────────────────────────┘
Dependency direction: Outside → Inside (Presentation → Domain)
Inner layers must not know about outer layers□ Is there business logic in components?
□ Are there direct API calls? (should go through hooks)
□ Is state management properly separated?
□ Do components have single responsibility?□ Are domain logic and infrastructure logic separated?
□ Are external dependencies abstracted?
□ Is the structure testable?
□ Are use cases clearly defined?□ Are there no external library dependencies?
□ Does it contain only pure business rules?
□ Do types match Phase 1 schema?□ Are external service calls abstracted?
□ Is error handling consistent?
□ Is configuration managed via environment variables?Request code review from Claude:
"Review this project's code.
- Does it follow CONVENTIONS.md rules
- Is there architecture consistency
- Are there potential bugs or improvements"See templates/pipeline/phase-8-review.template.md
Phase 9: Deployment → After review completion, deploy to production
# 1. Search for similar function names
grep -r "function.*format" src/
grep -r "function.*calculate" src/
grep -r "function.*get.*By" src/
# 2. Search for similar patterns
grep -rn "reduce.*sum" src/
grep -rn "filter.*map" src/
grep -rn "useState.*useEffect" src/| Type | Example | Solution |
|---|---|---|
| Exact duplicate | Same code copy-paste | Extract to function |
| Structural similarity | Same logic, different data | Parameterize |
| Conceptual similarity | Different implementations for similar purpose | Integrate or interface |
□ Is the same logic in 2+ places?
□ Are there multiple functions with similar names?
□ Is the same data transformation repeated?
□ Are similar UI patterns repeated?
□ Is the same API call pattern repeated?
□ Is similar error handling repeated?| Score | Criteria | Description |
|---|---|---|
| ⭐⭐⭐ | High | Can be used in other projects |
| ⭐⭐ | Medium | Can be used in multiple places within same project |
| ⭐ | Low | Used only for specific feature |
Check for each function/component:
□ Is it tied to a specific domain?
□ Does it depend on external state?
□ Are parameters generic?
□ Is the return value predictable?
□ Are there side effects?When new requirements come:
□ Can it be added without modifying existing code?
□ Can behavior be changed by configuration only?
□ Is adding new types/cases easy?
□ Can it be extended without adding conditionals?// ❌ Requires modification for each extension
function process(type: string) {
if (type === 'a') { /* ... */ }
else if (type === 'b') { /* ... */ }
// Add else if for each new type...
}
// ❌ Hardcoded list
const ALLOWED_TYPES = ['a', 'b', 'c']
// ❌ Enumerated switch statements
switch (action.type) {
case 'ADD': // ...
case 'REMOVE': // ...
// Add case for each new action...
}// ✅ Registry pattern
const handlers: Record<string, Handler> = {}
function register(type: string, handler: Handler) {
handlers[type] = handler
}
function process(type: string, data: unknown) {
return handlers[type]?.(data)
}
// ✅ Configuration-based
const CONFIG = {
types: ['a', 'b', 'c'],
handlers: { ... }
}
// ✅ Plugin structure
interface Plugin { execute(data): Result }
const plugins: Plugin[] = []S - Single Responsibility (SRP)
□ Does the class/function change for only one reason?
□ Does the name clearly explain the role?
□ Is "and" in the name? → Needs separationO - Open/Closed (OCP)
□ Is it open for extension? (new features can be added)
□ Is it closed for modification? (no existing code changes needed)
□ Are interfaces/abstractions used?L - Liskov Substitution (LSP)
□ Can subtypes replace parent types?
□ Do overridden methods keep the contract?I - Interface Segregation (ISP)
□ Is the interface too large?
□ Must unused methods be implemented?
□ Can the interface be split smaller?D - Dependency Inversion (DIP)
□ Does it depend on abstractions instead of concrete classes?
□ Are dependencies injected? (DI)
□ Is the structure testable?Urgent (Required before deployment):
1. Duplication that can cause bugs
2. Security vulnerabilities
3. Performance bottlenecks
High (As soon as possible):
4. Same logic duplicated in 3+ places
5. Files over 200 lines
6. Nesting deeper than 5 levels
Medium (Next sprint):
7. Structure lacking extensibility
8. Naming inconsistencies
9. Structure difficult to test
Low (Backlog):
10. Style inconsistencies
11. Excessive comments
12. Unused codePlease review the code from these perspectives:
1. Duplicate Code
- Are there similar functions/components?
- Is there common logic that can be extracted?
2. Reusability
- Can it be used generically?
- Is it tied to a specific domain?
3. Extensibility
- Can it flexibly respond to new requirements?
- Are there hardcoded parts?
4. SOLID Principles
- Does it follow single responsibility?
- Is it open for extension and closed for modification?
5. Convention Compliance
- Does it follow CONVENTIONS.md rules?
- Is naming consistent?
Please identify parts that need refactoring and their priority.# Gap Analysis Report
## Analysis Target
- Design document: docs/02-design/{feature}.design.md
- Implementation path: src/features/{feature}/
## Results by Category
### API Endpoints
| Design | Implementation | Status |
|--------|----------------|--------|
| POST /api/users | POST /api/users | ✅ Match |
| GET /api/users/:id | - | ❌ Not implemented |
| - | DELETE /api/users/:id | ⚠️ Missing from design |
### Data Model
| Design Entity | Implementation | Status |
|---------------|----------------|--------|
| User | types/user.ts | ✅ Match |
| UserRole | - | ❌ Not implemented |
### Match Rate
- Total items: 10
- Matches: 7
- Not implemented: 2
- Missing from design: 1
- **Match Rate: 70%**| Gap Type | Meaning | Action |
|---|---|---|
| ✅ Match | Design = Implementation | None |
| ❌ Not implemented | In design, not in code | Implement or update design |
| ⚠️ Missing from design | In code, not in design | Add to design document |
| 🔄 Different | Exists but different | Align (code is truth) |
© ww-w-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/phase-8-review of ww-w-ai/bkit-claude-code.
Open the folder on GitHubat commit 85b4913
Phase 8 Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Phase 8 Review this skillww-w-ai/bkit-claude-code | 601 | — | ~3.7k | Automated safety check: Pass | Apache-2.0 | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | MIT | |
| Finishing a Development Branchobra/superpowers | 297k | 5 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Typescript Advanced Typesrolling-scopes/rsschool-app | 10k | 25 repos | ~4.2k | Automated safety check: Pass | MPL-2.0 | |
| PR Babysitteropeninterpreter/openinterpreter | 69k | 3 repos | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Code Review ChecklistshareAI-lab/learn-claude-code | 78k | 4 repos | ~1.1k | Automated safety check: Pass | MIT |
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
obra/superpowers
Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
openinterpreter/openinterpreter
Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
onyx-dot-app/onyx
Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.
ww-w-ai/bkit-claude-code
View audit logs, decision traces, and session history for AI transparency.
ww-w-ai/bkit-claude-code
bkend.ai authentication — email/social login, JWT tokens, RBAC, session management.
ww-w-ai/bkit-claude-code
bkend.ai project tutorials (todo to SaaS) and common error troubleshooting.
ww-w-ai/bkit-claude-code
bkend.ai onboarding — MCP setup, resource hierarchy, tenant/user model, first project.
ww-w-ai/bkit-claude-code
bkend.ai file storage — upload (presigned URL), download (CDN), visibility levels, buckets.
ww-w-ai/bkit-claude-code
bkit plugin help - list available functions including /pdca (9-phase feature cycle), /sprint (8-phase feature container, v2.1.13), /control (Trust L0-L4 + SPRINTAUTORUNSCOPE), /bkit-explore, and 40+…
Categories
Verify codebase quality — architecture consistency, convention compliance, gap analysis. Phase 8 Review is an agent skill from ww-w-ai/bkit-claude-code. Verify codebase quality — architecture consistency, convention compliance, gap analysis.
Phase 8 Review fits situations like: development work in your project.
Run `npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a claude-code`. Or copy the skill folder (skills/phase-8-review in ww-w-ai/bkit-claude-code) into .claude/skills/phase-8-review in your project. Claude Code loads it when a task matches its description.
Run `npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a codex`. Or copy the skill folder (skills/phase-8-review in ww-w-ai/bkit-claude-code) into .agents/skills/phase-8-review in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ww-w-ai/bkit-claude-code --skill phase-8-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/phase-8-review, .gemini/skills/phase-8-review, .github/skills/phase-8-review and .opencode/skills/phase-8-review in your project.
SKILL.md names no scripts, command-line tools or credentials: Phase 8 Review is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Glob, Grep, LSP, Task.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Phase 8 Review is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.7k tokens (SKILL.md is roughly 15k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Phase 8 Review: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 297k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
ww-w-ai (a GitHub organization) maintains it in ww-w-ai/bkit-claude-code, which has 601 GitHub stars. The repository holds 44 skills in this directory. The repository was last updated on September 27, 2026.
Source: ww-w-ai/bkit-claude-code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.