commit 79573df7cbb53ebde16c8591cc2b2ca759aff46f Author: Rohit Ghumare Date: Wed Feb 4 18:55:28 2026 +0000 Initial release: 100-file Claude Code toolkit 20 specialized agents, 10 skills, 17 slash commands, 6 plugins, 12 hooks with scripts, 8 rule sets, 3 CLAUDE.md templates, 14 MCP server configs, and interactive setup installer. diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json new file mode 100644 index 0000000..0c2637b --- /dev/null +++ b/.claude-plugin/marketplace.json @@ -0,0 +1,50 @@ +{ + "marketplace": { + "name": "claude-code-toolkit", + "displayName": "Claude Code Toolkit", + "description": "Complete developer toolkit for Claude Code -- plugins, agents, skills, commands, hooks, rules, templates, and setup guides.", + "author": "Rohit Ghumare", + "repository": "https://github.com/rohitg00/awesome-claude-code-toolkit", + "license": "MIT", + "version": "1.0.0", + "categories": ["plugins", "agents", "skills", "commands", "hooks", "rules", "templates"], + "plugins": [ + { + "name": "smart-commit", + "path": "plugins/smart-commit", + "description": "Analyzes diffs and generates conventional commit messages with scope detection and breaking change flags.", + "version": "1.0.0" + }, + { + "name": "code-guardian", + "path": "plugins/code-guardian", + "description": "Real-time code quality enforcement with linting, complexity analysis, and security checks.", + "version": "1.0.0" + }, + { + "name": "deploy-pilot", + "path": "plugins/deploy-pilot", + "description": "End-to-end deployment orchestration for Docker, Kubernetes, Vercel, AWS, and custom pipelines.", + "version": "1.0.0" + }, + { + "name": "api-architect", + "path": "plugins/api-architect", + "description": "Generates OpenAPI specs, route handlers, validation schemas, and client SDKs from natural language.", + "version": "1.0.0" + }, + { + "name": "perf-profiler", + "path": "plugins/perf-profiler", + "description": "Profiles memory, CPU, bundle size, and database queries with actionable performance recommendations.", + "version": "1.0.0" + }, + { + "name": "doc-forge", + "path": "plugins/doc-forge", + "description": "Generates READMEs, API references, changelogs, and architecture decision records from code.", + "version": "1.0.0" + } + ] + } +} diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..c158728 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,6 @@ +{ + "name": "claude-code-toolkit", + "version": "1.0.0", + "description": "Complete developer toolkit for Claude Code", + "author": "Rohit Ghumare" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c4daf39 --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +node_modules/ +dist/ +build/ +.env +.env.local +.env.*.local +*.log +npm-debug.log* +.DS_Store +Thumbs.db +*.swp +*.swo +*~ +.idea/ +.vscode/ +*.sublime-project +*.sublime-workspace +coverage/ +.nyc_output/ +*.tgz +package-lock.json +yarn.lock +.cache/ +tmp/ +temp/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..4bc6276 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,44 @@ +# Contributing + +Thanks for your interest in contributing to Claude Code Toolkit. + +## How to Contribute + +1. Fork the repository +2. Create a feature branch: `git checkout -b feature/your-feature` +3. Make your changes +4. Test your changes locally +5. Commit with a clear message: `git commit -m "Add new-skill: description"` +6. Push to your fork: `git push origin feature/your-feature` +7. Open a Pull Request + +## What to Contribute + +- **Plugins** -- New plugins go in `plugins//` with a `.claude-plugin/plugin.json` manifest. +- **Agents** -- Agent Markdown files go in the appropriate `agents//` directory. +- **Skills** -- Skill modules go in `skills//` with a `SKILL.md` and optional examples. +- **Commands** -- Slash command Markdown files go in `commands//`. +- **Rules** -- Rule files go in `rules/` as standalone Markdown. +- **Templates** -- CLAUDE.md templates go in `templates/claude-md/`, project starters in `templates/project-starters/`. +- **MCP Configs** -- Configuration files go in `mcp-configs/` as JSON. +- **Hook Scripts** -- Scripts go in `hooks/scripts/` with an update to `hooks/hooks.json`. + +## Guidelines + +- Keep files focused and single-purpose. +- Use clear, descriptive names. +- Remove code comments that are obvious or redundant. +- Test plugins and hooks before submitting. +- Update the README table if adding a new item to any category. +- No generated attribution footers in files. + +## File Naming + +- Agents: `kebab-case.md` (e.g., `code-reviewer.md`) +- Commands: `kebab-case.md` matching the slash command name +- Skills: directory name in `kebab-case` +- Rules: `kebab-case.md` describing the rule + +## Code of Conduct + +Be respectful, constructive, and collaborative. We follow the [Contributor Covenant](https://www.contributor-covenant.org/version/2/1/code_of_conduct/). diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6144216 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Rohit Ghumare + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..f87cfa3 --- /dev/null +++ b/README.md @@ -0,0 +1,470 @@ +# Claude Code Toolkit + +**The complete developer's toolkit for Claude Code -- plugins, agents, skills, commands, hooks, rules, templates, and setup guides.** + +[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) +[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md) +[![Last Updated](https://img.shields.io/badge/Last%20Updated-Feb%202026-orange.svg)](#) + +--- + +## Quick Install + +**Plugin marketplace** (recommended): + +```bash +/plugin marketplace add rohitg00/awesome-claude-code-toolkit +``` + +**Manual clone:** + +```bash +git clone https://github.com/rohitg00/awesome-claude-code-toolkit.git ~/.claude/plugins/claude-code-toolkit +``` + +**One-liner:** + +```bash +curl -fsSL https://raw.githubusercontent.com/rohitg00/awesome-claude-code-toolkit/main/setup/install.sh | bash +``` + +--- + +## Table of Contents + +- [Plugins](#plugins) +- [Agents](#agents) +- [Skills](#skills) +- [Commands](#commands) +- [Hooks](#hooks) +- [Rules](#rules) +- [Templates](#templates) +- [MCP Configs](#mcp-configs) +- [Setup](#setup) +- [Contributing](#contributing) +- [License](#license) + +--- + +## Plugins + +Six production-ready plugins that extend Claude Code with domain-specific capabilities. + +| Plugin | Description | +|--------|-------------| +| [smart-commit](plugins/smart-commit/) | Analyzes diffs and generates conventional commit messages with scope detection, breaking change flags, and co-author attribution. | +| [code-guardian](plugins/code-guardian/) | Real-time code quality enforcement. Runs linting, complexity analysis, and security checks before every commit. | +| [deploy-pilot](plugins/deploy-pilot/) | End-to-end deployment orchestration. Supports Docker, Kubernetes, Vercel, AWS, and custom pipelines. | +| [api-architect](plugins/api-architect/) | Generates OpenAPI specs, route handlers, validation schemas, and client SDKs from natural language descriptions. | +| [perf-profiler](plugins/perf-profiler/) | Identifies performance bottlenecks. Profiles memory, CPU, bundle size, and database queries with actionable recommendations. | +| [doc-forge](plugins/doc-forge/) | Generates documentation from code. Produces READMEs, API references, changelogs, and architecture decision records. | + +### Installing a Plugin + +```bash +/plugin install claude-code-toolkit@smart-commit +``` + +Or install all plugins at once: + +```bash +/plugin install claude-code-toolkit +``` + +--- + +## Agents + +Twenty-two specialized agents organized into five categories. Each agent is a Markdown file that defines a persona, system instructions, and tool access patterns for Claude Code. + +### Core Development + +| Agent | File | Purpose | +|-------|------|---------| +| Architect | `agents/core-development/architect.md` | System design, component boundaries, dependency decisions | +| Implementer | `agents/core-development/implementer.md` | Feature implementation with best practices and error handling | +| Debugger | `agents/core-development/debugger.md` | Root cause analysis, step-through debugging, fix verification | +| Refactorer | `agents/core-development/refactorer.md` | Code restructuring while preserving behavior and test coverage | + +### Language Experts + +| Agent | File | Purpose | +|-------|------|---------| +| TypeScript | `agents/language-experts/typescript.md` | Type-safe patterns, generics, module design, build config | +| Python | `agents/language-experts/python.md` | Pythonic patterns, packaging, type hints, async patterns | +| Rust | `agents/language-experts/rust.md` | Ownership, lifetimes, trait design, unsafe boundaries | +| Go | `agents/language-experts/go.md` | Interfaces, goroutines, error handling, module structure | + +### Infrastructure + +| Agent | File | Purpose | +|-------|------|---------| +| Docker | `agents/infrastructure/docker.md` | Multi-stage builds, compose files, image optimization | +| Kubernetes | `agents/infrastructure/kubernetes.md` | Manifests, Helm charts, operators, cluster troubleshooting | +| CI/CD | `agents/infrastructure/cicd.md` | Pipeline design for GitHub Actions, GitLab CI, CircleCI | +| Cloud | `agents/infrastructure/cloud.md` | AWS, GCP, Azure resource provisioning and IaC patterns | + +### Quality Assurance + +| Agent | File | Purpose | +|-------|------|---------| +| Test Writer | `agents/quality-assurance/test-writer.md` | Unit, integration, and E2E test generation with high coverage | +| Code Reviewer | `agents/quality-assurance/code-reviewer.md` | PR review with security, performance, and maintainability focus | +| Security Auditor | `agents/quality-assurance/security-auditor.md` | Vulnerability scanning, dependency audit, OWASP compliance | +| Accessibility | `agents/quality-assurance/accessibility.md` | WCAG compliance, screen reader testing, ARIA patterns | + +### Orchestration + +| Agent | File | Purpose | +|-------|------|---------| +| Planner | `agents/orchestration/planner.md` | Breaks down tasks into subtasks with dependency ordering | +| Reviewer | `agents/orchestration/reviewer.md` | Reviews agent outputs, ensures consistency across deliverables | +| Coordinator | `agents/orchestration/coordinator.md` | Routes work between agents and manages handoffs | +| Summarizer | `agents/orchestration/summarizer.md` | Compresses context, generates session summaries, extracts learnings | + +### Using Agents + +Reference an agent in your `CLAUDE.md`: + +```markdown +## Agents +- Use `agents/core-development/architect.md` for system design tasks +- Use `agents/quality-assurance/code-reviewer.md` for PR reviews +``` + +Or invoke directly: + +``` +/agent architect "Design a notification system with email, SMS, and push channels" +``` + +--- + +## Skills + +Ten skill modules that teach Claude Code domain-specific patterns and best practices. Each skill includes rules, examples, and anti-patterns. + +| Skill | Directory | What It Teaches | +|-------|-----------|-----------------| +| TDD Mastery | `skills/tdd-mastery/` | Red-green-refactor, test-first design, mocking strategies, coverage targets | +| API Design Patterns | `skills/api-design-patterns/` | RESTful conventions, versioning, pagination, error responses, HATEOAS | +| Database Optimization | `skills/database-optimization/` | Query planning, indexing strategies, N+1 prevention, connection pooling | +| Frontend Excellence | `skills/frontend-excellence/` | Component architecture, state management, accessibility, performance budgets | +| Security Hardening | `skills/security-hardening/` | Input validation, auth patterns, secrets management, CSP headers | +| DevOps Automation | `skills/devops-automation/` | Infrastructure as code, GitOps, monitoring, incident response | +| Continuous Learning | `skills/continuous-learning/` | Session summaries, learning logs, pattern extraction, memory management | +| React Patterns | `skills/react-patterns/` | Hooks, server components, suspense, error boundaries, render optimization | +| Python Best Practices | `skills/python-best-practices/` | Type hints, dataclasses, async/await, packaging, virtual environments | +| Go Idioms | `skills/golang-idioms/` | Error handling, interfaces, concurrency patterns, project layout | + +### Installing a Skill + +```bash +npx skillkit install claude-code-toolkit/tdd-mastery +``` + +--- + +## Commands + +Twenty-one slash commands organized into seven categories. Drop these into your project's `.claude/commands/` directory. + +### Git Commands + +| Command | File | Description | +|---------|------|-------------| +| `/commit` | `commands/git/commit.md` | Generate conventional commit from staged changes | +| `/pr` | `commands/git/pr.md` | Create a pull request with summary, test plan, and labels | +| `/changelog` | `commands/git/changelog.md` | Generate changelog from commit history | + +### Testing Commands + +| Command | File | Description | +|---------|------|-------------| +| `/test` | `commands/testing/test.md` | Generate tests for the current file or function | +| `/coverage` | `commands/testing/coverage.md` | Analyze test coverage and suggest missing tests | +| `/e2e` | `commands/testing/e2e.md` | Generate end-to-end test scenarios | + +### Architecture Commands + +| Command | File | Description | +|---------|------|-------------| +| `/design` | `commands/architecture/design.md` | Create a system design document | +| `/adr` | `commands/architecture/adr.md` | Write an Architecture Decision Record | +| `/diagram` | `commands/architecture/diagram.md` | Generate Mermaid diagrams from code structure | + +### Documentation Commands + +| Command | File | Description | +|---------|------|-------------| +| `/readme` | `commands/documentation/readme.md` | Generate or update README from project analysis | +| `/api-docs` | `commands/documentation/api-docs.md` | Generate API documentation from route handlers | +| `/onboard` | `commands/documentation/onboard.md` | Create onboarding guide for new contributors | + +### Security Commands + +| Command | File | Description | +|---------|------|-------------| +| `/audit` | `commands/security/audit.md` | Run security audit on dependencies and code | +| `/secrets` | `commands/security/secrets.md` | Scan for leaked secrets and credentials | +| `/csp` | `commands/security/csp.md` | Generate Content Security Policy headers | + +### Refactoring Commands + +| Command | File | Description | +|---------|------|-------------| +| `/simplify` | `commands/refactoring/simplify.md` | Reduce complexity of the current file | +| `/extract` | `commands/refactoring/extract.md` | Extract function, component, or module | +| `/rename` | `commands/refactoring/rename.md` | Rename symbol across the codebase | + +### DevOps Commands + +| Command | File | Description | +|---------|------|-------------| +| `/dockerize` | `commands/devops/dockerize.md` | Generate Dockerfile and compose files | +| `/deploy` | `commands/devops/deploy.md` | Deploy to configured environment | +| `/monitor` | `commands/devops/monitor.md` | Set up monitoring and alerting | + +### Using Commands + +Copy to your project: + +```bash +cp -r commands/ .claude/commands/ +``` + +Then invoke in Claude Code: + +``` +/commit +/test src/utils/parser.ts +/audit +``` + +--- + +## Hooks + +Production-ready hooks configuration with companion scripts. Hooks run automatically at specific points in the Claude Code lifecycle. + +### hooks.json + +Place in your project's `.claude/` directory: + +```json +{ + "hooks": { + "PreToolUse": [ + { + "matcher": "Write|Edit", + "command": "node hooks/scripts/quality-gate.js" + } + ], + "PostToolUse": [ + { + "matcher": "Write|Edit", + "command": "node hooks/scripts/post-edit-check.js" + } + ], + "SessionStart": [ + { + "matcher": "", + "command": "node hooks/scripts/session-start.js" + } + ], + "SessionEnd": [ + { + "matcher": "", + "command": "node hooks/scripts/session-end.js" + } + ], + "Stop": [ + { + "matcher": "", + "command": "node hooks/scripts/wrap-up.js" + } + ] + } +} +``` + +### Hook Scripts + +| Script | Trigger | Purpose | +|--------|---------|---------| +| `quality-gate.js` | PreToolUse (Write/Edit) | Validates code before file writes -- checks syntax, lint rules, complexity | +| `post-edit-check.js` | PostToolUse (Write/Edit) | Runs tests related to modified files, verifies no regressions | +| `session-start.js` | SessionStart | Loads project context, checks for pending tasks, sets up environment | +| `session-end.js` | SessionEnd | Saves session summary, updates learning log, cleans temp files | +| `wrap-up.js` | Stop | Captures learnings, suggests next steps, generates session report | + +### Installing Hooks + +```bash +cp hooks/hooks.json .claude/hooks.json +cp -r hooks/scripts/ .claude/hooks/scripts/ +``` + +--- + +## Rules + +Eight coding rules that enforce consistent patterns across your codebase. Add these to your `.claude/rules/` directory or reference them in `CLAUDE.md`. + +| Rule | File | What It Enforces | +|------|------|-----------------| +| No Dead Code | `rules/no-dead-code.md` | Remove unused imports, variables, functions, and unreachable code | +| Error Handling | `rules/error-handling.md` | Always handle errors explicitly, no empty catch blocks, typed errors | +| Naming Conventions | `rules/naming-conventions.md` | Consistent naming: camelCase functions, PascalCase types, UPPER_SNAKE constants | +| File Organization | `rules/file-organization.md` | One component per file, consistent directory structure, barrel exports | +| Type Safety | `rules/type-safety.md` | No `any` types, strict null checks, exhaustive switch statements | +| Testing Standards | `rules/testing-standards.md` | Test file co-location, descriptive test names, arrange-act-assert pattern | +| Documentation | `rules/documentation.md` | JSDoc for public APIs, inline comments for complex logic only | +| Security Defaults | `rules/security-defaults.md` | Parameterized queries, input sanitization, no secrets in code | + +### Using Rules + +```bash +cp -r rules/ .claude/rules/ +``` + +Or reference in `CLAUDE.md`: + +```markdown +## Rules +- Follow all rules in `.claude/rules/` +``` + +--- + +## Templates + +Starter templates for `CLAUDE.md` configuration and project scaffolding. + +### CLAUDE.md Templates + +| Template | File | Use Case | +|----------|------|----------| +| Minimal | `templates/claude-md/minimal.md` | Small projects, scripts, quick prototypes | +| Standard | `templates/claude-md/standard.md` | Most projects -- covers preferences, rules, workflows | +| Enterprise | `templates/claude-md/enterprise.md` | Large codebases with team standards, compliance, multi-repo setup | +| Monorepo | `templates/claude-md/monorepo.md` | Monorepo with multiple packages, shared configs, workspace conventions | + +### Project Starters + +| Starter | Directory | Stack | +|---------|-----------|-------| +| TypeScript API | `templates/project-starters/ts-api/` | Node.js + Express + TypeScript + Prisma + Jest | +| React App | `templates/project-starters/react-app/` | Vite + React + TypeScript + Tailwind + Vitest | +| Python Service | `templates/project-starters/python-service/` | FastAPI + SQLAlchemy + Pytest + Docker | +| CLI Tool | `templates/project-starters/cli-tool/` | Node.js + Commander + TypeScript + ESBuild | + +### Using Templates + +```bash +cp templates/claude-md/standard.md CLAUDE.md +``` + +--- + +## MCP Configs + +Curated Model Context Protocol server configurations ready to drop into your `claude_desktop_config.json` or project settings. + +| Config | File | Servers Included | +|--------|------|-----------------| +| Full Stack | `mcp-configs/fullstack.json` | Filesystem, GitHub, Postgres, Redis, Browser | +| Kubernetes | `mcp-configs/kubernetes.json` | kubectl-mcp-server, Helm, Docker | +| Data Science | `mcp-configs/data-science.json` | Jupyter, SQLite, Filesystem, Python REPL | +| Frontend | `mcp-configs/frontend.json` | Browser, Filesystem, Figma, Storybook | +| DevOps | `mcp-configs/devops.json` | AWS, Docker, GitHub, Terraform, Monitoring | + +### Using MCP Configs + +Copy the relevant config into your Claude Desktop settings: + +```bash +cat mcp-configs/fullstack.json +``` + +Then merge into `~/.claude/claude_desktop_config.json`. + +--- + +## Setup + +Onboarding scripts for setting up Claude Code on a new machine or project. + +| Script | File | Purpose | +|--------|------|---------| +| Install | `setup/install.sh` | Full toolkit installation -- clones repo, symlinks configs, installs plugins | +| Project Init | `setup/project-init.sh` | Initialize Claude Code in an existing project -- generates CLAUDE.md, hooks, rules | +| Doctor | `setup/doctor.sh` | Diagnose Claude Code setup issues -- checks paths, permissions, versions | + +### Running Setup + +```bash +bash setup/install.sh # install everything +bash setup/project-init.sh # set up current project +bash setup/doctor.sh # check your setup +``` + +--- + +## Project Structure + +``` +claude-code-toolkit/ + plugins/ + smart-commit/ # Conventional commit generator + code-guardian/ # Code quality enforcement + deploy-pilot/ # Deployment orchestration + api-architect/ # API design and generation + perf-profiler/ # Performance analysis + doc-forge/ # Documentation generator + agents/ + core-development/ # Architect, Implementer, Debugger, Refactorer + language-experts/ # TypeScript, Python, Rust, Go + infrastructure/ # Docker, Kubernetes, CI/CD, Cloud + quality-assurance/ # Test Writer, Code Reviewer, Security, A11y + orchestration/ # Planner, Reviewer, Coordinator, Summarizer + skills/ + tdd-mastery/ # Test-driven development + api-design-patterns/ # REST and GraphQL patterns + database-optimization/ # Query and schema optimization + frontend-excellence/ # UI component patterns + security-hardening/ # Application security + devops-automation/ # Infrastructure automation + continuous-learning/ # Session memory management + react-patterns/ # React-specific patterns + python-best-practices/ # Python-specific patterns + golang-idioms/ # Go-specific patterns + commands/ + git/ # commit, pr, changelog + testing/ # test, coverage, e2e + architecture/ # design, adr, diagram + documentation/ # readme, api-docs, onboard + security/ # audit, secrets, csp + refactoring/ # simplify, extract, rename + devops/ # dockerize, deploy, monitor + hooks/ + hooks.json # Hook configuration + scripts/ # Hook handler scripts + rules/ # 8 coding rules + templates/ + claude-md/ # CLAUDE.md templates + project-starters/ # Project scaffolding + mcp-configs/ # MCP server configurations + setup/ # Installation and onboarding scripts +``` + +--- + +## Contributing + +Contributions are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines. + +## License + +[MIT](LICENSE) diff --git a/agents/core-development/api-designer.md b/agents/core-development/api-designer.md new file mode 100644 index 0000000..7a6ac31 --- /dev/null +++ b/agents/core-development/api-designer.md @@ -0,0 +1,85 @@ +--- +name: api-designer +description: REST and GraphQL API design with OpenAPI specs, versioning, and pagination patterns +tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep"] +model: sonnet +--- + +# API Designer Agent + +You are a senior API architect who designs APIs that are intuitive, consistent, and built to evolve without breaking consumers. + +## Design Philosophy + +- APIs are contracts. Treat every public endpoint as a promise you must keep. +- Optimize for developer experience. If a consumer needs to read documentation to use a basic endpoint, the design failed. +- Be consistent above all else. One pattern applied everywhere beats three "perfect" patterns applied inconsistently. + +## REST API Standards + +- Use plural nouns for resources: `/users`, `/orders`, `/products`. +- Map HTTP methods to operations: GET (read), POST (create), PUT (full replace), PATCH (partial update), DELETE (remove). +- Nest resources only one level deep: `/users/{id}/orders` is fine, `/users/{id}/orders/{id}/items/{id}` is not. Use top-level routes for deeply nested resources. +- Use query parameters for filtering, sorting, and pagination: `?status=active&sort=-created_at&limit=20&cursor=abc123`. +- Return `201 Created` with a `Location` header for POST requests. Return `204 No Content` for DELETE. + +## Response Envelope + +Every response follows this shape: + +```json +{ + "data": {}, + "meta": { "requestId": "uuid", "timestamp": "ISO8601" }, + "pagination": { "cursor": "next_token", "hasMore": true }, + "errors": [{ "code": "VALIDATION_ERROR", "field": "email", "message": "Invalid format" }] +} +``` + +## Versioning Strategy + +- Use URL path versioning (`/v1/`, `/v2/`) for major breaking changes. +- Use additive changes (new optional fields, new endpoints) without version bumps. +- Deprecate endpoints with a `Sunset` header and a minimum 6-month migration window. +- Document breaking vs non-breaking changes in a changelog. + +## OpenAPI Specification + +- Write OpenAPI 3.1 specs as the source of truth. Generate code from specs, not the reverse. +- Define reusable schemas in `#/components/schemas`. Do not duplicate type definitions. +- Include request/response examples for every endpoint. +- Add `description` fields to every parameter, schema property, and operation. + +## GraphQL Guidelines + +- Use Relay-style connections for paginated lists: `edges`, `node`, `pageInfo`, `cursor`. +- Design mutations to return the modified object plus any user-facing errors. +- Use DataLoader for batching and deduplication of database queries in resolvers. +- Keep resolvers thin. Business logic belongs in service layer functions. + +## Rate Limiting + +- Return `429 Too Many Requests` with `Retry-After` header when limits are hit. +- Use sliding window counters per API key or authenticated user. +- Document rate limits in response headers: `X-RateLimit-Limit`, `X-RateLimit-Remaining`, `X-RateLimit-Reset`. + +## Pagination + +- Use cursor-based pagination for real-time data or large datasets. +- Use offset-based pagination only for static, rarely-changing data. +- Always return `hasMore` or `hasNextPage` to tell consumers when to stop. +- Default page size to 20, max to 100. Reject requests exceeding the max. + +## Error Handling + +- Use standard HTTP status codes. Do not invent custom ones. +- Include machine-readable error codes (e.g., `INSUFFICIENT_FUNDS`) alongside human-readable messages. +- Validate all input at the API boundary. Return `400` with field-level errors for validation failures. +- Never expose internal implementation details in error responses. + +## Security + +- Require authentication on all endpoints unless explicitly public. +- Use scoped API keys or OAuth 2.0 with granular permissions. +- Validate and sanitize all input. Reject unexpected fields with `400`. +- Set CORS headers explicitly. Never use `*` in production. diff --git a/agents/core-development/frontend-architect.md b/agents/core-development/frontend-architect.md new file mode 100644 index 0000000..a0693a2 --- /dev/null +++ b/agents/core-development/frontend-architect.md @@ -0,0 +1,79 @@ +--- +name: frontend-architect +description: React/Next.js specialist with performance optimization, SSR/SSG, and accessibility +tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep"] +model: sonnet +--- + +# Frontend Architect Agent + +You are a senior frontend architect who builds fast, accessible, and maintainable user interfaces. You make architectural decisions that scale across teams and features. + +## Core Stack + +- **Framework**: Next.js 14+ with App Router, React 18+ with Server Components +- **Styling**: Tailwind CSS with design tokens, CSS Modules for complex animations +- **State**: TanStack Query for server state, Zustand for client state +- **Forms**: React Hook Form with Zod validation schemas +- **Testing**: Vitest for units, Playwright for e2e, Testing Library for integration + +## Component Architecture + +- Default to Server Components. Only add `'use client'` when the component needs hooks, event handlers, or browser APIs. +- Structure components as: page > layout > feature > UI primitive. Each layer only imports from layers below it. +- Co-locate component files: `ComponentName/index.tsx`, `ComponentName.test.tsx`, `types.ts`. +- Extract shared UI primitives (Button, Input, Modal, Toast) into a `components/ui/` directory. +- Keep components under 150 lines. If a component grows beyond that, split it. + +## Performance Standards + +- Target Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1. +- Use `next/image` for all images. Set explicit `width` and `height` to prevent layout shift. +- Lazy load below-the-fold components with `dynamic(() => import(...), { ssr: false })`. +- Use `React.memo` only on components that receive stable primitive props and render expensively. Do not wrap everything. +- Prefetch routes the user is likely to navigate to using ``. +- Bundle analyze with `@next/bundle-analyzer` before major releases. No single JS chunk should exceed 200KB gzipped. + +## Rendering Strategy + +- Use SSG (`generateStaticParams`) for content that changes less than once per hour. +- Use SSR for personalized content or data that must be fresh on every request. +- Use ISR (`revalidate`) for content that changes periodically. Set revalidation intervals based on data freshness requirements. +- Use client-side fetching only for real-time data (chat, notifications, live dashboards). + +## Data Fetching + +- Fetch data in Server Components using `async/await` directly. No useEffect for initial data loads. +- Use TanStack Query for client-side data that needs caching, refetching, or optimistic updates. +- Implement loading states with Suspense boundaries and `loading.tsx` files. +- Handle errors with `error.tsx` boundary files at the route level. + +## Accessibility Requirements + +- Every interactive element must be keyboard accessible. Test with Tab, Enter, Space, Escape. +- Use semantic HTML elements: `; +} +``` + +Wrap components that use `use()` with a Promise in a `` boundary. + +## Server Components + +```tsx +// app/users/page.tsx - Server Component (default, no directive needed) +import { UserList } from './UserList'; + +export default async function UsersPage() { + const users = await fetch('https://api.example.com/users', { + next: { revalidate: 60 }, + }).then(r => r.json()); + + return ; +} + +// app/users/UserList.tsx - Still a Server Component +export function UserList({ users }: { users: User[] }) { + return ( +
    + {users.map(u => ( +
  • + {u.name} + +
  • + ))} +
+ ); +} +``` + +Push `'use client'` as deep as possible. Only leaves that need interactivity should be Client Components. + +## Server Actions + +```tsx +// app/actions.ts +'use server'; + +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; + +export async function createPost(formData: FormData) { + const title = formData.get('title') as string; + const body = formData.get('body') as string; + + await db.insert(posts).values({ title, body }); + + revalidatePath('/posts'); + redirect('/posts'); +} +``` + +```tsx +// app/posts/new/page.tsx +import { createPost } from '../actions'; + +export default function NewPostPage() { + return ( +
+ +