diff --git a/.claude/AGENT-NAMING-GUIDE.md b/.claude/AGENT-NAMING-GUIDE.md deleted file mode 100644 index 8e1f528..0000000 --- a/.claude/AGENT-NAMING-GUIDE.md +++ /dev/null @@ -1,40 +0,0 @@ -# Agent Naming Guide - -**Last Updated:** 2026-03-11 - -## Naming Convention - -All 44 agents use unique, hyphenated names (e.g., `frontend-developer`, `figma-react-converter`). There are no naming conflicts in the current agent set. - -Agent files live in `.claude/agents/` as `.md`. - -## How Agents Are Selected - -Claude Code automatically selects agents based on task context. You do not need to specify which agent to use unless you want to override the default selection. - -**Examples:** - -| Your Request | Agent Selected | -|-------------|---------------| -| "Build a login form component" | frontend-developer | -| "Write tests for the useAuth hook" | test-writer-fixer | -| "Convert this Figma design to React" | figma-react-converter | -| "Check this page for accessibility" | accessibility-auditor | -| "Optimize the bundle size" | performance-benchmarker | -| "Set up the CI pipeline" | devops-automator | -| "Design the component API" | backend-architect | - -## Explicit Selection - -To force a specific agent, name it in your request: - -``` -User: "Use the visual-qa-agent to compare these screenshots" -User: "Have the docusaurus-expert set up the docs site" -``` - -## Agent Categories - -Agents are grouped into 12 categories: Engineering, Design, Design-to-Code, Testing & QA, Product, Marketing, Project Management, Operations, Documentation, Meta, and Bonus. - -See `.claude/CUSTOM-AGENTS-GUIDE.md` for the full catalog with descriptions. diff --git a/.claude/CUSTOM-AGENTS-GUIDE.md b/.claude/CUSTOM-AGENTS-GUIDE.md deleted file mode 100644 index ecc780e..0000000 --- a/.claude/CUSTOM-AGENTS-GUIDE.md +++ /dev/null @@ -1,166 +0,0 @@ -# Custom Agents Guide - -**Last Updated:** 2026-03-11 -**Total Agents:** 44 -**Location:** `.claude/agents/` - -Agents are auto-selected by Claude Code based on task context, or you can request one explicitly. - ---- - -## Engineering - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| frontend-developer | React component implementation, styling, and client-side logic | Building UI components, pages, Tailwind styling, client-side state | -| backend-architect | API design, server architecture, and data modeling | Designing REST/GraphQL APIs, database schemas, server-side patterns | -| ai-engineer | AI/ML integration, prompt engineering, and model pipelines | Adding AI features, LLM integrations, embeddings, inference workflows | -| devops-automator | CI/CD pipelines, Docker, deployment automation | Setting up GitHub Actions, containerization, deployment scripts | -| mobile-app-builder | React Native and mobile-first development | Building cross-platform mobile apps, responsive mobile experiences | -| rapid-prototyper | Quick proof-of-concept implementations | Validating ideas fast, throwaway prototypes, spike solutions | -| test-writer-fixer | Write tests, run them, fix failures iteratively | Unit tests, integration tests, increasing coverage, fixing flaky tests | - -## Design - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| ui-designer | UI component design, layout systems, visual hierarchy | Designing component libraries, page layouts, design system tokens | -| ux-researcher | User experience research, usability analysis | User flow analysis, heuristic evaluation, accessibility reviews | -| brand-guardian | Brand consistency enforcement across assets | Ensuring colors, typography, tone, and imagery match brand guidelines | -| visual-storyteller | Data visualization and narrative-driven UI | Charts, dashboards, infographics, storytelling through design | -| whimsy-injector | Micro-interactions, animations, delightful UI details | Adding loading animations, transitions, easter eggs, playful touches | - -## Design-to-Code - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| figma-react-converter | Figma-to-React conversion pipeline orchestration | Converting Figma designs into React components with Tailwind CSS | -| asset-cataloger | Image/asset semantic mapping and validation | Mapping hash-named exports to meaningful names, validating asset usage | - -## Testing & QA - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| api-tester | API endpoint testing and validation | Testing REST/GraphQL endpoints, response schemas, error handling | -| performance-benchmarker | Performance profiling and optimization | Bundle size analysis, Lighthouse audits, runtime profiling | -| test-results-analyzer | Test suite analysis and trend reporting | Analyzing CI test results, identifying flaky tests, coverage trends | -| tool-evaluator | Evaluate libraries, frameworks, and tools | Comparing NPM packages, assessing dependencies, tech stack decisions | -| workflow-optimizer | Development process improvement | Streamlining build pipelines, reducing dev friction, automation gaps | -| visual-qa-agent | Visual regression testing and cross-browser verification | Comparing rendered output against Figma designs, screenshot diffing | -| accessibility-auditor | WCAG 2.1 AA compliance auditing | Color contrast, ARIA labels, keyboard navigation, Lighthouse a11y | - -## Product - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| sprint-prioritizer | Backlog prioritization and sprint planning | Ordering features by impact, planning sprints, scope management | -| feedback-synthesizer | User feedback analysis and insight extraction | Aggregating survey data, support tickets, feature requests | -| trend-researcher | Market and technology trend analysis | Researching competitors, emerging tech, industry benchmarks | - -## Marketing - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| content-creator | Marketing copy, blog posts, and content strategy | Writing landing pages, blog content, email campaigns | -| growth-hacker | Growth experiments and conversion optimization | A/B test ideas, funnel analysis, user acquisition strategies | -| app-store-optimizer | App store listing optimization (ASO) | Writing app descriptions, keyword research, screenshot strategy | -| instagram-curator | Instagram content strategy and visual planning | Post scheduling, hashtag strategy, visual grid planning | -| reddit-community-builder | Reddit engagement and community growth | Subreddit strategy, authentic engagement, community building | -| tiktok-strategist | TikTok content strategy and trends | Video content ideas, trending sounds, audience targeting | -| twitter-engager | Twitter/X engagement and thought leadership | Tweet threads, engagement strategy, audience growth | - -## Project Management - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| studio-producer | End-to-end project production management | Coordinating multi-phase projects, resource allocation, timelines | -| project-shipper | Getting projects from 90% to shipped | Final polish, launch checklists, shipping blockers, release prep | -| experiment-tracker | A/B test and experiment tracking | Logging experiments, tracking results, statistical significance | - -## Operations - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| analytics-reporter | Metrics dashboards and data reporting | Building analytics views, KPI tracking, report generation | -| finance-tracker | Financial tracking and budget management | Cost tracking, subscription management, budget forecasting | -| infrastructure-maintainer | Server and infrastructure maintenance | Monitoring, uptime, dependency updates, security patches | -| legal-compliance-checker | Legal and regulatory compliance review | Privacy policies, GDPR, terms of service, license compliance | -| support-responder | Customer support response drafting | Drafting support replies, FAQ creation, escalation handling | - -## Documentation - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| docusaurus-expert | Docusaurus documentation site creation | Building docs sites, MDX content, versioned documentation | - -## Meta - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| agent-expert | Agent creation and configuration guidance | Creating new agents, optimizing agent prompts, agent architecture | -| command-expert | Claude Code command and configuration help | Slash commands, settings, hooks, plugin configuration | - -## Bonus - -| Agent | Purpose | When to Use | -|-------|---------|-------------| -| joker | Comic relief and creative brainstorming | When you need a laugh or creative lateral thinking | -| studio-coach | Development coaching and mentorship | Code review mentoring, learning paths, skill development | - ---- - -## How Agents Work - -Agents are invoked through Claude Code's Task tool. They are automatically selected based on task context: - -``` -User: "Help me optimize this component's rendering" -Claude: [Uses performance-benchmarker agent] - -User: "Convert this Figma design to React" -Claude: [Uses figma-react-converter agent] - -User: "Write tests for the auth hook" -Claude: [Uses test-writer-fixer agent] -``` - -You can also request a specific agent: -``` -User: "Use the accessibility-auditor agent to check this page" -``` - ---- - -## Agent + Skill Integration - -Agents work alongside the 6 custom skills in `.claude/skills/`: - -| Agent | Complementary Skill | -|-------|-------------------| -| figma-react-converter | figma-to-react-workflow | -| frontend-developer | react-component-development | -| test-writer-fixer | react-testing-workflows | -| performance-benchmarker | react-performance-optimization | -| accessibility-auditor | react-accessibility | -| visual-qa-agent | visual-qa-verification | - -**Skills Documentation:** `.claude/skills/README.md` - ---- - -## Quick Reference - -| Task | Best Agent | -|------|-----------| -| Build a React component | frontend-developer | -| Convert Figma to React | figma-react-converter | -| Write unit tests | test-writer-fixer | -| Optimize bundle size | performance-benchmarker | -| WCAG compliance audit | accessibility-auditor | -| Visual regression check | visual-qa-agent | -| Map exported assets | asset-cataloger | -| Design a component | ui-designer | -| Set up CI/CD | devops-automator | -| API endpoint testing | api-tester | -| Create documentation site | docusaurus-expert | -| Ship a release | project-shipper | diff --git a/.claude/PLUGINS-REFERENCE.md b/.claude/PLUGINS-REFERENCE.md deleted file mode 100644 index 07cb5b1..0000000 --- a/.claude/PLUGINS-REFERENCE.md +++ /dev/null @@ -1,134 +0,0 @@ -# Claude Code Plugins Reference - -**Last Updated:** 2026-03-11 -**Installed Plugins:** 4 user plugins + 1 local plugin - ---- - -## episodic-memory - -Semantic search and persistent memory across Claude Code sessions. - -**What it does:** -- Archives conversations automatically -- Provides semantic search over past sessions -- Maintains context across the 30-day conversation deletion window - -**Commands:** -```bash -/search-conversations [query] # Search previous conversations -/remember [context] # Store important context -``` - -**Technical notes:** -- Uses SQLite with vector search -- Archives stored in `~/.config/superpowers/conversations-archive` - ---- - -## commit-commands - -Git workflow automation with structured commits and PR helpers. - -**Commands:** - -| Command | What it Does | -|---------|-------------| -| `/commit` | Analyzes staged changes, suggests a structured commit message, creates the commit | -| `/commit-push-pr` | Commits, pushes to remote, and opens a GitHub PR in one step | -| `/clean_gone` | Removes local branches already deleted on remote | - -**Commit message conventions:** -``` -feat: Add new component or feature -fix: Bug fix -refactor: Code restructuring without behavior change -test: Adding or updating tests -docs: Documentation changes -style: Formatting, linting (no logic change) -chore: Build process, dependencies -``` - ---- - -## github (gh CLI) - -GitHub integration for repos, PRs, issues, and actions. - -**Prerequisites:** GitHub CLI (`gh`) installed and authenticated (`gh auth login`). - -**Common commands:** -```bash -gh repo list # List repositories -gh pr create --title "Title" --body "Description" # Create PR -gh pr list # List open PRs -gh pr view 123 # View PR details -gh issue create --title "Bug" --body "Details" # Create issue -gh issue list # List issues -gh run list # List CI workflow runs -gh run view 12345 # View workflow run details -``` - ---- - -## superpowers - -Advanced development workflows and best practices enforcement. - -**Capabilities:** -- Brainstorming and ideation workflows -- Code review with confidence-rated findings -- Systematic debugging approaches -- Test-driven development guidance -- Implementation planning and plan verification - -**Usage:** Activated automatically based on task context, or through `/` commands. - ---- - -## ai-taskmaster (Local) - -Task management and development planning. - -**What it does:** -- Project task tracking and prioritization -- Development milestone planning -- Task dependency management - -**Note:** Local plugin, not published to registry. - ---- - -## Security - -- Never commit GitHub PATs or API keys -- Store secrets in environment variables or a credential manager -- Rotate tokens every 90 days -- Use fine-grained tokens with minimal scopes -- Check `.claude/settings.local.json` for configured permissions - ---- - -## Quick Commands Cheat Sheet - -```bash -# Memory -/search-conversations [query] # Search past sessions -/remember [context] # Save context - -# Git -/commit # Structured commit -/commit-push-pr # Commit + push + PR -/clean_gone # Clean merged branches - -# GitHub -gh pr create # Create pull request -gh pr list # List PRs -gh issue create # Create issue -gh auth status # Check auth - -# Plugins -/plugin list # List installed plugins -/plugin install # Install plugin -/plugin uninstall # Remove plugin -``` diff --git a/.claude/agents/accessibility-auditor.md b/.claude/agents/accessibility-auditor.md deleted file mode 100644 index 19fb067..0000000 --- a/.claude/agents/accessibility-auditor.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -name: accessibility-auditor -description: WCAG 2.1 AA compliance auditor for web applications. Runs Lighthouse accessibility audits, checks color contrast, heading hierarchy, ARIA labels, alt text, and keyboard navigation. -tools: Read, Write, Bash, Grep, Glob, TodoWrite, TaskOutput, AskUserQuestion, mcp__chrome-devtools__navigate_page, mcp__chrome-devtools__take_screenshot, mcp__chrome-devtools__lighthouse_audit, mcp__chrome-devtools__evaluate_script, mcp__chrome-devtools__list_pages, mcp__chrome-devtools__new_page, mcp__chrome-devtools__select_page, mcp__chrome-devtools__press_key -model: opus -permissionMode: bypassPermissions ---- - -You are a WCAG 2.1 AA accessibility compliance specialist for web applications. You audit apps for accessibility violations using both automated tools and manual code review. - -## Primary Responsibilities - -### 1. Automated Accessibility Audit (Lighthouse) - -Run Lighthouse accessibility audits on every page: -- Navigate to page via Chrome DevTools MCP -- Run `lighthouse_audit` with category: "accessibility" -- Capture score and individual audit results -- Record failures with element selectors - -**Target score:** 95+ on every page - -### 2. Color Contrast Validation - -**Check all text/background combinations:** -- Normal text: Must meet WCAG AA (4.5:1) -- Large text (>=18px or >=14px bold): Must meet 3:1 -- Button text on button backgrounds -- Link colors on backgrounds - -**Extract from design tokens / Tailwind config and validate programmatically.** - -### 3. Heading Hierarchy Audit - -**Per-page heading structure:** -- Exactly one h1 per page -- No skipped levels (h1 → h3 without h2) -- Headings in logical order -- Navigation should NOT use heading elements for menu items - -### 4. Image Alt Text Audit - -**Scan all components for image alt text:** -- Every `` and `` must have an `alt` attribute -- Alt text must be descriptive (not "image", "photo", "img_123") -- Decorative images should use `alt=""` -- Background images: Check for alternative text content - -### 5. Keyboard Navigation Audit - -**Test via Chrome DevTools MCP:** -- Tab through the entire page -- Verify all interactive elements are reachable -- Check focus indicators are visible -- Verify skip-to-content link exists -- Test dropdown/mobile menu keyboard access -- Verify modal/dialog focus trapping (if any) - -### 6. ARIA & Semantic HTML Audit - -**Landmark roles:** -- `
` or `role="banner"` present -- `