diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index bfb2b57..6c98eb6 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -11,8 +11,8 @@ "plugins": [ { "name": "compounding-engineering", - "description": "AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last. Includes 17 specialized agents, 6 commands, and 1 skill.", - "version": "1.1.0", + "description": "AI-powered development tools that get smarter with every use. Make each unit of engineering work easier than the last. Includes 23 specialized agents, 16 commands, and 11 skills.", + "version": "2.6.0", "author": { "name": "Kieran Klaassen", "url": "https://github.com/kieranklaassen", diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml new file mode 100644 index 0000000..4b7b090 --- /dev/null +++ b/.github/workflows/deploy-docs.yml @@ -0,0 +1,39 @@ +name: Deploy Documentation to GitHub Pages + +on: + push: + branches: [main] + paths: + - 'plugins/compounding-engineering/docs/**' + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: 'plugins/compounding-engineering/docs' + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/CLAUDE.md b/CLAUDE.md index 6066b41..2eee544 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,9 +12,15 @@ every-marketplace/ └── compounding-engineering/ # The actual plugin ├── .claude-plugin/ │ └── plugin.json # Plugin metadata - ├── agents/ # 17 specialized AI agents - ├── commands/ # 6 slash commands - ├── skills/ # 1 skill (gemini-imagegen) + ├── agents/ # 24 specialized AI agents + ├── commands/ # 13 slash commands (including /release-docs) + ├── skills/ # 11 skills + ├── mcp-servers/ # 2 MCP servers (playwright, context7) + ├── docs/ # Documentation site (static HTML/CSS/JS) + │ ├── index.html # Landing page + │ ├── css/ # Stylesheets (style.css, docs.css) + │ ├── js/ # JavaScript (main.js) + │ └── pages/ # Reference pages (agents, commands, skills, mcp-servers) ├── README.md # Plugin documentation └── CHANGELOG.md # Version history ``` @@ -86,7 +92,21 @@ When adding new functionality, bump the version in: - [ ] `plugins/compounding-engineering/CHANGELOG.md` → document changes - [ ] `CLAUDE.md` → update structure diagram if needed -#### 5. Validate JSON files +#### 5. Rebuild documentation site + +Run the release-docs command to update all documentation pages: + +```bash +claude /release-docs +``` + +This will: +- Update stats on the landing page +- Regenerate reference pages (agents, commands, skills, MCP servers) +- Update the changelog page +- Validate all counts match actual files + +#### 6. Validate JSON files ```bash cat .claude-plugin/marketplace.json | jq . @@ -167,6 +187,73 @@ Each plugin has its own plugin.json with detailed metadata: } ``` +## Documentation Site + +The plugin includes a static documentation site at `plugins/compounding-engineering/docs/`. This site is built with plain HTML/CSS/JS (based on Evil Martians' LaunchKit template) and requires no build step to view. + +### Documentation Structure + +``` +docs/ +├── index.html # Landing page with stats and philosophy +├── css/ +│ ├── style.css # Main styles (LaunchKit-based) +│ └── docs.css # Documentation-specific styles +├── js/ +│ └── main.js # Interactivity (theme toggle, mobile nav) +└── pages/ + ├── getting-started.html # Installation and quick start + ├── agents.html # All 24 agents reference + ├── commands.html # All 13 commands reference + ├── skills.html # All 11 skills reference + ├── mcp-servers.html # MCP servers reference + └── changelog.html # Version history +``` + +### Keeping Docs Up-to-Date + +**IMPORTANT:** After ANY change to agents, commands, skills, or MCP servers, run: + +```bash +claude /release-docs +``` + +This command: +1. Counts all current components +2. Reads all agent/command/skill/MCP files +3. Regenerates all reference pages +4. Updates stats on the landing page +5. Updates the changelog from CHANGELOG.md +6. Validates counts match across all files + +### Manual Updates + +If you need to update docs manually: + +1. **Landing page stats** - Update the numbers in `docs/index.html`: + ```html + 24 + 13 + ``` + +2. **Reference pages** - Each page in `docs/pages/` documents all components in that category + +3. **Changelog** - `docs/pages/changelog.html` mirrors `CHANGELOG.md` in HTML format + +### Viewing Docs Locally + +Since the docs are static HTML, you can view them directly: + +```bash +# Open in browser +open plugins/compounding-engineering/docs/index.html + +# Or start a local server +cd plugins/compounding-engineering/docs +python -m http.server 8000 +# Then visit http://localhost:8000 +``` + ## Testing Changes ### Test Locally diff --git a/plugins/compounding-engineering/.claude-plugin/plugin.json b/plugins/compounding-engineering/.claude-plugin/plugin.json index 7b50cd0..ebcf315 100644 --- a/plugins/compounding-engineering/.claude-plugin/plugin.json +++ b/plugins/compounding-engineering/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "compounding-engineering", - "version": "2.5.0", - "description": "AI-powered development tools. 24 agents, 16 commands, 11 skills, 2 MCP servers for code review, research, design, and workflow automation.", + "version": "2.6.0", + "description": "AI-powered development tools. 23 agents, 16 commands, 11 skills, 2 MCP servers for code review, research, design, and workflow automation.", "author": { "name": "Kieran Klaassen", "email": "kieran@every.to", diff --git a/plugins/compounding-engineering/CHANGELOG.md b/plugins/compounding-engineering/CHANGELOG.md index d749760..b2f2885 100644 --- a/plugins/compounding-engineering/CHANGELOG.md +++ b/plugins/compounding-engineering/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to the compounding-engineering plugin will be documented in The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.6.0] - 2024-11-26 + +### Removed + +- **`feedback-codifier` agent** - Removed from workflow agents. Agent count reduced from 24 to 23. + ## [2.5.0] - 2024-11-25 ### Added diff --git a/plugins/compounding-engineering/README.md b/plugins/compounding-engineering/README.md index 9e7e323..d53b110 100644 --- a/plugins/compounding-engineering/README.md +++ b/plugins/compounding-engineering/README.md @@ -6,7 +6,7 @@ AI-powered development tools that get smarter with every use. Make each unit of | Component | Count | |-----------|-------| -| Agents | 24 | +| Agents | 23 | | Commands | 16 | | Skills | 11 | | MCP Servers | 2 | @@ -47,13 +47,12 @@ Agents are organized into categories for easier discovery. | `design-iterator` | Iteratively refine UI through systematic design iterations | | `figma-design-sync` | Synchronize web implementations with Figma designs | -### Workflow (6) +### Workflow (5) | Agent | Description | |-------|-------------| | `bug-reproduction-validator` | Systematically reproduce and validate bug reports | | `every-style-editor` | Edit content to conform to Every's style guide | -| `feedback-codifier` | Codify feedback patterns into reviewer agents | | `lint` | Run linting and code quality checks on Ruby and ERB files | | `pr-comment-resolver` | Address PR comments and implement fixes | | `spec-flow-analyzer` | Analyze user flows and identify gaps in specifications | diff --git a/plugins/compounding-engineering/agents/workflow/feedback-codifier.md b/plugins/compounding-engineering/agents/workflow/feedback-codifier.md deleted file mode 100644 index 74e1286..0000000 --- a/plugins/compounding-engineering/agents/workflow/feedback-codifier.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -name: feedback-codifier -description: Use this agent when you need to analyze and codify feedback patterns from code reviews or technical discussions to improve existing reviewer agents. Examples: Context: User has provided detailed feedback on a Rails implementation and wants to capture those insights. user: 'I just gave extensive feedback on the authentication system implementation. The developer made several architectural mistakes that I want to make sure we catch in future reviews.' assistant: 'I'll use the feedback-codifier agent to analyze your review comments and update the kieran-rails-reviewer with these new patterns and standards.' Since the user wants to codify their feedback patterns, use the feedback-codifier agent to extract insights and update reviewer configurations. Context: After a thorough code review session with multiple improvement suggestions. user: 'That was a great review session. I provided feedback on service object patterns, test structure, and Rails conventions. Let's capture this knowledge.' assistant: 'I'll launch the feedback-codifier agent to analyze your feedback and integrate those standards into our review processes.' The user wants to preserve and systematize their review insights, so use the feedback-codifier agent. -model: opus -color: cyan ---- - -You are an expert feedback analyst and knowledge codification specialist. Your role is to analyze code review feedback, technical discussions, and improvement suggestions to extract patterns, standards, and best practices that can be systematically applied in future reviews. - -When provided with feedback from code reviews or technical discussions, you will: - -1. **Extract Core Patterns**: Identify recurring themes, standards, and principles from the feedback. Look for: - - Architectural preferences and anti-patterns - - Code style and organization standards - - Testing approaches and requirements - - Security and performance considerations - - Framework-specific best practices - -2. **Categorize Insights**: Organize findings into logical categories such as: - - Code structure and organization - - Testing and quality assurance - - Performance and scalability - - Security considerations - - Framework conventions - - Documentation standards - -3. **Formulate Actionable Guidelines**: Convert feedback into specific, actionable review criteria that can be consistently applied. Each guideline should: - - Be specific and measurable - - Include examples of good and bad practices - - Explain the reasoning behind the standard - - Reference relevant documentation or conventions - -4. **Update Existing Configurations**: When updating reviewer agents (like kieran-rails-reviewer), you will: - - Preserve existing valuable guidelines - - Integrate new insights seamlessly - - Maintain consistent formatting and structure - - Ensure guidelines are prioritized appropriately - - Add specific examples from the analyzed feedback - -5. **Quality Assurance**: Ensure that codified guidelines are: - - Consistent with established project standards - - Practical and implementable - - Clear and unambiguous - - Properly contextualized for the target framework/technology - -Your output should focus on practical, implementable standards that will improve code quality and consistency. Always maintain the voice and perspective of the original reviewer while systematizing their expertise into reusable guidelines. - -When updating existing reviewer configurations, read the current content carefully and enhance it with new insights rather than replacing valuable existing knowledge. diff --git a/plugins/compounding-engineering/commands/deploy-docs.md b/plugins/compounding-engineering/commands/deploy-docs.md new file mode 100644 index 0000000..d527956 --- /dev/null +++ b/plugins/compounding-engineering/commands/deploy-docs.md @@ -0,0 +1,112 @@ +--- +name: deploy-docs +description: Validate and prepare documentation for GitHub Pages deployment +--- + +# Deploy Documentation Command + +Validate the documentation site and prepare it for GitHub Pages deployment. + +## Step 1: Validate Documentation + +Run these checks: + +```bash +# Count components +echo "Agents: $(ls plugins/compounding-engineering/agents/*.md | wc -l)" +echo "Commands: $(ls plugins/compounding-engineering/commands/*.md | wc -l)" +echo "Skills: $(ls -d plugins/compounding-engineering/skills/*/ 2>/dev/null | wc -l)" + +# Validate JSON +cat .claude-plugin/marketplace.json | jq . > /dev/null && echo "✓ marketplace.json valid" +cat plugins/compounding-engineering/.claude-plugin/plugin.json | jq . > /dev/null && echo "✓ plugin.json valid" + +# Check all HTML files exist +for page in index agents commands skills mcp-servers changelog getting-started; do + if [ -f "plugins/compounding-engineering/docs/pages/${page}.html" ] || [ -f "plugins/compounding-engineering/docs/${page}.html" ]; then + echo "✓ ${page}.html exists" + else + echo "✗ ${page}.html MISSING" + fi +done +``` + +## Step 2: Check for Uncommitted Changes + +```bash +git status --porcelain plugins/compounding-engineering/docs/ +``` + +If there are uncommitted changes, warn the user to commit first. + +## Step 3: Deployment Instructions + +Since GitHub Pages deployment requires a workflow file with special permissions, provide these instructions: + +### First-time Setup + +1. Create `.github/workflows/deploy-docs.yml` with the GitHub Pages workflow +2. Go to repository Settings > Pages +3. Set Source to "GitHub Actions" + +### Deploying + +After merging to `main`, the docs will auto-deploy. Or: + +1. Go to Actions tab +2. Select "Deploy Documentation to GitHub Pages" +3. Click "Run workflow" + +### Workflow File Content + +```yaml +name: Deploy Documentation to GitHub Pages + +on: + push: + branches: [main] + paths: + - 'plugins/compounding-engineering/docs/**' + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/configure-pages@v4 + - uses: actions/upload-pages-artifact@v3 + with: + path: 'plugins/compounding-engineering/docs' + - uses: actions/deploy-pages@v4 +``` + +## Step 4: Report Status + +Provide a summary: + +``` +## Deployment Readiness + +✓ All HTML pages present +✓ JSON files valid +✓ Component counts match + +### Next Steps +- [ ] Commit any pending changes +- [ ] Push to main branch +- [ ] Verify GitHub Pages workflow exists +- [ ] Check deployment at https://everyinc.github.io/every-marketplace/ +``` diff --git a/plugins/compounding-engineering/commands/release-docs.md b/plugins/compounding-engineering/commands/release-docs.md new file mode 100644 index 0000000..38215c9 --- /dev/null +++ b/plugins/compounding-engineering/commands/release-docs.md @@ -0,0 +1,211 @@ +--- +name: release-docs +description: Build and update the documentation site with current plugin components +argument-hint: "[optional: --dry-run to preview changes without writing]" +--- + +# Release Documentation Command + +You are a documentation generator for the compounding-engineering plugin. Your job is to ensure the documentation site at `plugins/compounding-engineering/docs/` is always up-to-date with the actual plugin components. + +## Overview + +The documentation site is a static HTML/CSS/JS site based on the Evil Martians LaunchKit template. It needs to be regenerated whenever: + +- Agents are added, removed, or modified +- Commands are added, removed, or modified +- Skills are added, removed, or modified +- MCP servers are added, removed, or modified + +## Step 1: Inventory Current Components + +First, count and list all current components: + +```bash +# Count agents +ls plugins/compounding-engineering/agents/*.md | wc -l + +# Count commands +ls plugins/compounding-engineering/commands/*.md | wc -l + +# Count skills +ls -d plugins/compounding-engineering/skills/*/ 2>/dev/null | wc -l + +# Count MCP servers +ls -d plugins/compounding-engineering/mcp-servers/*/ 2>/dev/null | wc -l +``` + +Read all component files to get their metadata: + +### Agents +For each agent file in `plugins/compounding-engineering/agents/*.md`: +- Extract the frontmatter (name, description) +- Note the category (Review, Research, Workflow, Design, Docs) +- Get key responsibilities from the content + +### Commands +For each command file in `plugins/compounding-engineering/commands/*.md`: +- Extract the frontmatter (name, description, argument-hint) +- Categorize as Workflow or Utility command + +### Skills +For each skill directory in `plugins/compounding-engineering/skills/*/`: +- Read the SKILL.md file for frontmatter (name, description) +- Note any scripts or supporting files + +### MCP Servers +For each MCP server in `plugins/compounding-engineering/mcp-servers/*/`: +- Read the configuration and README +- List the tools provided + +## Step 2: Update Documentation Pages + +### 2a. Update `docs/index.html` + +Update the stats section with accurate counts: +```html +
+
+ [AGENT_COUNT] + Specialized Agents +
+ +
+``` + +Ensure the component summary sections list key components accurately. + +### 2b. Update `docs/pages/agents.html` + +Regenerate the complete agents reference page: +- Group agents by category (Review, Research, Workflow, Design, Docs) +- Include for each agent: + - Name and description + - Key responsibilities (bullet list) + - Usage example: `claude agent [agent-name] "your message"` + - Use cases + +### 2c. Update `docs/pages/commands.html` + +Regenerate the complete commands reference page: +- Group commands by type (Workflow, Utility) +- Include for each command: + - Name and description + - Arguments (if any) + - Process/workflow steps + - Example usage + +### 2d. Update `docs/pages/skills.html` + +Regenerate the complete skills reference page: +- Group skills by category (Development Tools, Content & Workflow, Image Generation) +- Include for each skill: + - Name and description + - Usage: `claude skill [skill-name]` + - Features and capabilities + +### 2e. Update `docs/pages/mcp-servers.html` + +Regenerate the MCP servers reference page: +- For each server: + - Name and purpose + - Tools provided + - Configuration details + - Supported frameworks/services + +## Step 3: Update Metadata Files + +Ensure counts are consistent across: + +1. **`plugins/compounding-engineering/.claude-plugin/plugin.json`** + - Update `description` with correct counts + - Update `components` object with counts + - Update `agents`, `commands` arrays with current items + +2. **`.claude-plugin/marketplace.json`** + - Update plugin `description` with correct counts + +3. **`plugins/compounding-engineering/README.md`** + - Update intro paragraph with counts + - Update component lists + +## Step 4: Validate + +Run validation checks: + +```bash +# Validate JSON files +cat .claude-plugin/marketplace.json | jq . +cat plugins/compounding-engineering/.claude-plugin/plugin.json | jq . + +# Verify counts match +echo "Agents in files: $(ls plugins/compounding-engineering/agents/*.md | wc -l)" +grep -o "[0-9]* specialized agents" plugins/compounding-engineering/docs/index.html + +echo "Commands in files: $(ls plugins/compounding-engineering/commands/*.md | wc -l)" +grep -o "[0-9]* slash commands" plugins/compounding-engineering/docs/index.html +``` + +## Step 5: Report Changes + +Provide a summary of what was updated: + +``` +## Documentation Release Summary + +### Component Counts +- Agents: X (previously Y) +- Commands: X (previously Y) +- Skills: X (previously Y) +- MCP Servers: X (previously Y) + +### Files Updated +- docs/index.html - Updated stats and component summaries +- docs/pages/agents.html - Regenerated with X agents +- docs/pages/commands.html - Regenerated with X commands +- docs/pages/skills.html - Regenerated with X skills +- docs/pages/mcp-servers.html - Regenerated with X servers +- plugin.json - Updated counts and component lists +- marketplace.json - Updated description +- README.md - Updated component lists + +### New Components Added +- [List any new agents/commands/skills] + +### Components Removed +- [List any removed agents/commands/skills] +``` + +## Dry Run Mode + +If `--dry-run` is specified: +- Perform all inventory and validation steps +- Report what WOULD be updated +- Do NOT write any files +- Show diff previews of proposed changes + +## Error Handling + +- If component files have invalid frontmatter, report the error and skip +- If JSON validation fails, report and abort +- Always maintain a valid state - don't partially update + +## Post-Release + +After successful release: +1. Suggest updating CHANGELOG.md with documentation changes +2. Remind to commit with message: `docs: Update documentation site to match plugin components` +3. Remind to push changes + +## Usage Examples + +```bash +# Full documentation release +claude /release-docs + +# Preview changes without writing +claude /release-docs --dry-run + +# After adding new agents +claude /release-docs +``` diff --git a/plugins/compounding-engineering/docs/css/docs.css b/plugins/compounding-engineering/docs/css/docs.css new file mode 100644 index 0000000..2e89ca5 --- /dev/null +++ b/plugins/compounding-engineering/docs/css/docs.css @@ -0,0 +1,675 @@ +/* Documentation-specific styles */ + +/* ============================================ + Documentation Layout + ============================================ */ + +.docs-layout { + display: grid; + grid-template-columns: 1fr; + min-height: 100vh; +} + +@media (min-width: 1024px) { + .docs-layout { + grid-template-columns: 280px 1fr; + } +} + +/* ============================================ + Sidebar + ============================================ */ + +.docs-sidebar { + position: fixed; + top: 0; + left: -300px; + width: 280px; + height: 100vh; + background-color: var(--color-background); + border-right: 1px solid var(--color-border); + overflow-y: auto; + transition: left 0.3s ease; + z-index: 100; +} + +.docs-sidebar.open { + left: 0; +} + +@media (min-width: 1024px) { + .docs-sidebar { + position: sticky; + left: 0; + } +} + +.sidebar-header { + padding: var(--space-l); + border-bottom: 1px solid var(--color-border); +} + +.sidebar-header .nav-brand { + display: flex; + align-items: center; + gap: var(--space-s); + text-decoration: none; + color: var(--color-text-primary); + font-weight: 600; +} + +.sidebar-header .logo-icon { + color: var(--color-accent); + font-size: var(--font-size-l); +} + +.sidebar-header .logo-text { + display: inline; +} + +.sidebar-nav { + padding: var(--space-l); +} + +.nav-section { + margin-bottom: var(--space-xl); +} + +.nav-section h3 { + font-size: var(--font-size-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-text-tertiary); + margin: 0 0 var(--space-m) 0; +} + +.nav-section ul { + list-style: none; + margin: 0; + padding: 0; +} + +.nav-section li { + margin: 0; +} + +.nav-section a { + display: block; + padding: var(--space-s) var(--space-m); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--font-size-s); + border-radius: var(--radius-s); + transition: all 0.2s ease; +} + +.nav-section a:hover { + color: var(--color-text-primary); + background-color: var(--color-surface); +} + +.nav-section a.active { + color: var(--color-accent); + background-color: var(--color-accent-light); +} + +/* ============================================ + Main Content + ============================================ */ + +.docs-content { + padding: var(--space-xl); + max-width: 900px; +} + +@media (min-width: 1024px) { + .docs-content { + padding: var(--space-xxl); + } +} + +.docs-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-xl); +} + +.breadcrumb { + display: flex; + align-items: center; + gap: var(--space-s); + font-size: var(--font-size-s); + color: var(--color-text-tertiary); +} + +.breadcrumb a { + color: var(--color-text-secondary); + text-decoration: none; +} + +.breadcrumb a:hover { + color: var(--color-accent); +} + +.mobile-menu-toggle { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-s); + color: var(--color-text-secondary); + cursor: pointer; +} + +@media (min-width: 1024px) { + .mobile-menu-toggle { + display: none; + } +} + +/* ============================================ + Article Styles + ============================================ */ + +.docs-article { + line-height: 1.7; +} + +.docs-article h1 { + font-size: var(--font-size-xl); + margin-bottom: var(--space-l); +} + +.docs-article h2 { + font-size: var(--font-size-l); + margin-top: var(--space-xxl); + margin-bottom: var(--space-l); + padding-bottom: var(--space-s); + border-bottom: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-s); +} + +.docs-article h2 i { + color: var(--color-accent); +} + +.docs-article h3 { + font-size: var(--font-size-m); + margin-top: var(--space-xl); + margin-bottom: var(--space-m); +} + +.docs-article h4 { + font-size: var(--font-size-s); + margin-top: var(--space-l); + margin-bottom: var(--space-s); +} + +.docs-article p { + margin-bottom: var(--space-l); +} + +.docs-article .lead { + font-size: var(--font-size-l); + color: var(--color-text-secondary); + margin-bottom: var(--space-xl); +} + +.docs-article ul, +.docs-article ol { + margin-bottom: var(--space-l); + padding-left: var(--space-xl); +} + +.docs-article li { + margin-bottom: var(--space-s); +} + +/* ============================================ + Code Blocks in Docs + ============================================ */ + +.docs-article .card-code-block { + margin: var(--space-l) 0; +} + +.docs-article code { + font-family: var(--font-mono); + font-size: 0.9em; + background-color: var(--color-surface); + padding: 2px 6px; + border-radius: var(--radius-xs); + color: var(--color-accent); +} + +.docs-article pre code { + background: none; + padding: 0; + color: var(--color-code-text); +} + +/* ============================================ + Tables + ============================================ */ + +.docs-table { + width: 100%; + border-collapse: collapse; + margin: var(--space-l) 0; + font-size: var(--font-size-s); +} + +.docs-table th, +.docs-table td { + padding: var(--space-m); + text-align: left; + border-bottom: 1px solid var(--color-border); +} + +.docs-table th { + font-weight: 600; + color: var(--color-text-primary); + background-color: var(--color-surface); +} + +.docs-table td { + color: var(--color-text-secondary); +} + +.docs-table code { + font-size: 0.85em; +} + +/* ============================================ + Callouts + ============================================ */ + +.callout { + display: flex; + gap: var(--space-m); + padding: var(--space-l); + border-radius: var(--radius-m); + margin: var(--space-l) 0; +} + +.callout-icon { + font-size: var(--font-size-l); + flex-shrink: 0; +} + +.callout-content h4 { + margin: 0 0 var(--space-s) 0; + font-size: var(--font-size-s); +} + +.callout-content p { + margin: 0; + font-size: var(--font-size-s); +} + +.callout-info { + background-color: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(99, 102, 241, 0.2); +} + +.callout-info .callout-icon { + color: var(--color-accent); +} + +.callout-info .callout-content h4 { + color: var(--color-accent); +} + +.callout-tip { + background-color: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.2); +} + +.callout-tip .callout-icon { + color: var(--color-success); +} + +.callout-tip .callout-content h4 { + color: var(--color-success); +} + +.callout-warning { + background-color: rgba(245, 158, 11, 0.1); + border: 1px solid rgba(245, 158, 11, 0.2); +} + +.callout-warning .callout-icon { + color: var(--color-warning); +} + +.callout-warning .callout-content h4 { + color: var(--color-warning); +} + +/* ============================================ + Badges + ============================================ */ + +.badge { + display: inline-block; + padding: 2px 8px; + font-size: var(--font-size-xs); + font-weight: 600; + border-radius: var(--radius-s); + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.badge-critical { + background-color: rgba(239, 68, 68, 0.15); + color: var(--color-error); +} + +.badge-important { + background-color: rgba(245, 158, 11, 0.15); + color: var(--color-warning); +} + +.badge-nice { + background-color: rgba(99, 102, 241, 0.15); + color: var(--color-accent); +} + +/* ============================================ + Philosophy Grid + ============================================ */ + +.philosophy-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: var(--space-l); + margin: var(--space-xl) 0; +} + +@media (min-width: 640px) { + .philosophy-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.philosophy-card { + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-m); + border: 1px solid var(--color-border); +} + +.philosophy-icon { + font-size: var(--font-size-xl); + color: var(--color-accent); + margin-bottom: var(--space-m); +} + +.philosophy-card h4 { + margin: 0 0 var(--space-s) 0; + color: var(--color-text-primary); +} + +.philosophy-card p { + margin: 0; + font-size: var(--font-size-s); + color: var(--color-text-secondary); +} + +/* ============================================ + Blockquotes + ============================================ */ + +.highlight-quote { + font-size: var(--font-size-l); + font-style: italic; + color: var(--color-accent); + padding: var(--space-xl); + margin: var(--space-xl) 0; + background: linear-gradient(135deg, var(--color-accent-lighter), transparent); + border-left: 4px solid var(--color-accent); + border-radius: var(--radius-m); +} + +/* ============================================ + Navigation Footer + ============================================ */ + +.docs-nav-footer { + display: flex; + justify-content: space-between; + gap: var(--space-l); + margin-top: var(--space-xxl); + padding-top: var(--space-xl); + border-top: 1px solid var(--color-border); +} + +.nav-prev, +.nav-next { + display: flex; + flex-direction: column; + gap: var(--space-xs); + padding: var(--space-l); + background-color: var(--color-surface); + border-radius: var(--radius-m); + text-decoration: none; + transition: all 0.2s ease; + flex: 1; + max-width: 300px; +} + +.nav-prev:hover, +.nav-next:hover { + background-color: var(--color-surface-hover); + border-color: var(--color-accent); +} + +.nav-next { + text-align: right; + margin-left: auto; +} + +.nav-label { + font-size: var(--font-size-xs); + color: var(--color-text-tertiary); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.nav-title { + font-weight: 600; + color: var(--color-accent); + display: flex; + align-items: center; + gap: var(--space-s); +} + +.nav-next .nav-title { + justify-content: flex-end; +} + +/* ============================================ + Mobile Sidebar Overlay + ============================================ */ + +@media (max-width: 1023px) { + .docs-sidebar.open::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: -1; + } +} + +/* ============================================ + Changelog Styles + ============================================ */ + +.version-section { + margin-bottom: var(--space-xxl); + padding-bottom: var(--space-xl); + border-bottom: 1px solid var(--color-border); +} + +.version-section:last-child { + border-bottom: none; +} + +.version-header { + display: flex; + align-items: center; + gap: var(--space-m); + margin-bottom: var(--space-l); + flex-wrap: wrap; +} + +.version-header h2 { + margin: 0; + padding: 0; + border: none; + font-size: var(--font-size-xl); + color: var(--color-text-primary); +} + +.version-date { + font-size: var(--font-size-s); + color: var(--color-text-tertiary); + background-color: var(--color-surface); + padding: var(--space-xs) var(--space-m); + border-radius: var(--radius-s); +} + +.version-badge { + font-size: var(--font-size-xs); + font-weight: 600; + padding: var(--space-xs) var(--space-m); + border-radius: var(--radius-s); + background-color: var(--color-accent); + color: white; +} + +.version-badge.major { + background-color: var(--color-warning); +} + +.version-description { + font-size: var(--font-size-m); + color: var(--color-text-secondary); + margin-bottom: var(--space-l); + font-style: italic; +} + +.changelog-category { + margin-bottom: var(--space-l); + padding: var(--space-l); + background-color: var(--color-surface); + border-radius: var(--radius-m); + border-left: 4px solid var(--color-border); +} + +.changelog-category h3 { + margin: 0 0 var(--space-m) 0; + font-size: var(--font-size-m); + display: flex; + align-items: center; + gap: var(--space-s); +} + +.changelog-category h3 i { + font-size: var(--font-size-s); +} + +.changelog-category h4 { + margin: var(--space-l) 0 var(--space-s) 0; + font-size: var(--font-size-s); + color: var(--color-text-secondary); +} + +.changelog-category ul { + margin: 0; + padding-left: var(--space-xl); +} + +.changelog-category li { + margin-bottom: var(--space-s); +} + +.changelog-category.added { + border-left-color: var(--color-success); +} + +.changelog-category.added h3 { + color: var(--color-success); +} + +.changelog-category.improved { + border-left-color: var(--color-accent); +} + +.changelog-category.improved h3 { + color: var(--color-accent); +} + +.changelog-category.changed { + border-left-color: var(--color-warning); +} + +.changelog-category.changed h3 { + color: var(--color-warning); +} + +.changelog-category.fixed { + border-left-color: var(--color-error); +} + +.changelog-category.fixed h3 { + color: var(--color-error); +} + +.version-summary { + margin-top: var(--space-l); +} + +.version-summary h4 { + margin-bottom: var(--space-m); +} + +.version-summary table { + width: 100%; + max-width: 400px; + border-collapse: collapse; + font-size: var(--font-size-s); +} + +.version-summary th, +.version-summary td { + padding: var(--space-s) var(--space-m); + text-align: left; + border-bottom: 1px solid var(--color-border); +} + +.version-summary th { + font-weight: 600; + background-color: var(--color-surface); +} + +.version-summary .positive { + color: var(--color-success); + font-weight: 600; +} + +.version-summary .negative { + color: var(--color-error); + font-weight: 600; +} diff --git a/plugins/compounding-engineering/docs/css/style.css b/plugins/compounding-engineering/docs/css/style.css new file mode 100644 index 0000000..3bc9074 --- /dev/null +++ b/plugins/compounding-engineering/docs/css/style.css @@ -0,0 +1,2886 @@ +/* Compounding Engineering Documentation Styles */ +/* Based on LaunchKit template by Evil Martians */ + +/* ============================================ + CSS Variables & Theme Configuration + ============================================ */ + +:root { + /* Theme configuration */ + --theme-hue: 243; + --theme-saturation: 1; + --theme-contrast: 0.71; + + /* Fonts */ + --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; + --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace; + + /* Font sizes */ + --font-size-xs: 12px; + --font-size-s: 14px; + --font-size-m: 16px; + --font-size-l: 20px; + --font-size-xl: 32px; + --font-size-xxl: 48px; + + /* Line heights */ + --line-height-paragraph-s: 20px; + --line-height-paragraph-m: 24px; + --line-height-paragraph-l: 28px; + --line-height-h1: 56px; + --line-height-h2: 40px; + --line-height-h3: 28px; + --line-height-ui-s: 16px; + --line-height-ui-m: 22px; + + /* Spacing */ + --space-xs: 4px; + --space-s: 8px; + --space-m: 12px; + --space-l: 16px; + --space-xl: 24px; + --space-xxl: 48px; + --space-section: 80px; + --space-card: 20px; + + /* Border radii */ + --radius-xs: 4px; + --radius-s: 8px; + --radius-m: 12px; + --radius-l: 16px; + --radius-xl: 24px; + + /* UI */ + --header-font-weight: 600; + --ui-button-font-weight: 500; +} + +/* Light Theme */ +.theme-light { + --color-background: #ffffff; + --color-background-blur: rgba(255, 255, 255, 0.9); + --color-surface: rgba(0, 0, 0, 0.03); + --color-surface-hover: rgba(0, 0, 0, 0.06); + --color-text-primary: #1a1a2e; + --color-text-secondary: #64748b; + --color-text-tertiary: #94a3b8; + --color-accent: #6366f1; + --color-accent-hover: #4f46e5; + --color-accent-light: rgba(99, 102, 241, 0.1); + --color-accent-lighter: rgba(99, 102, 241, 0.05); + --color-on-accent: #ffffff; + --color-border: rgba(0, 0, 0, 0.08); + --color-border-strong: rgba(0, 0, 0, 0.15); + --color-gradient-start: rgba(99, 102, 241, 0.15); + --color-gradient-end: rgba(99, 102, 241, 0); + --color-promo-start: #a855f7; + --color-promo-end: #6366f1; + --color-success: #10b981; + --color-warning: #f59e0b; + --color-error: #ef4444; + --color-code-bg: #1e1e2e; + --color-code-text: #cdd6f4; +} + +/* Dark Theme */ +.theme-dark { + color-scheme: dark; + --color-background: #0f0f1a; + --color-background-blur: rgba(15, 15, 26, 0.9); + --color-surface: rgba(255, 255, 255, 0.04); + --color-surface-hover: rgba(255, 255, 255, 0.08); + --color-text-primary: #f1f5f9; + --color-text-secondary: #94a3b8; + --color-text-tertiary: #64748b; + --color-accent: #818cf8; + --color-accent-hover: #a5b4fc; + --color-accent-light: rgba(129, 140, 248, 0.15); + --color-accent-lighter: rgba(129, 140, 248, 0.08); + --color-on-accent: #0f0f1a; + --color-border: rgba(255, 255, 255, 0.08); + --color-border-strong: rgba(255, 255, 255, 0.15); + --color-gradient-start: rgba(129, 140, 248, 0.2); + --color-gradient-end: rgba(129, 140, 248, 0); + --color-promo-start: #c084fc; + --color-promo-end: #818cf8; + --color-success: #34d399; + --color-warning: #fbbf24; + --color-error: #f87171; + --color-code-bg: #1e1e2e; + --color-code-text: #cdd6f4; +} + +/* ============================================ + Base Styles + ============================================ */ + +*, *::before, *::after { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + background-color: var(--color-background); + font-family: var(--font-text); + color: var(--color-text-primary); + font-size: var(--font-size-m); + line-height: var(--line-height-paragraph-m); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ============================================ + Typography + ============================================ */ + +h1, h2, h3, h4, h5, h6 { + font-weight: var(--header-font-weight); + margin: var(--space-m) 0; + letter-spacing: -0.02em; +} + +h1 { + font-size: 64px; + line-height: 1.1; + letter-spacing: -0.045em; + font-weight: 750; + background: linear-gradient(135deg, var(--color-text-primary), var(--color-text-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +h2 { + font-size: var(--font-size-xl); + line-height: var(--line-height-h2); +} + +h3 { + font-size: var(--font-size-l); + line-height: var(--line-height-h3); +} + +p { + margin: var(--space-m) 0; +} + +a { + color: var(--color-accent); + text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: var(--color-accent-hover); +} + +ul, ol { + margin: var(--space-l) 0; + padding-left: 24px; +} + +li { + margin: var(--space-s) 0; +} + +code { + font-family: var(--font-mono); + font-size: 0.9em; + background-color: var(--color-surface); + padding: 2px 6px; + border-radius: var(--radius-xs); + color: var(--color-accent); +} + +img { + max-width: 100%; + vertical-align: middle; +} + +/* Text utilities */ +.paragraph { + margin: var(--space-m) 0; +} +.paragraph.s { font-size: var(--font-size-s); line-height: var(--line-height-paragraph-s); } +.paragraph.m { font-size: 19px; line-height: 30px; opacity: 0.9; } +.paragraph.l { font-size: var(--font-size-l); line-height: var(--line-height-paragraph-l); } +.paragraph.bold { font-weight: 600; } + +.secondary { color: var(--color-text-secondary); } +.tertiary { color: var(--color-text-tertiary); } +.color-accent { color: var(--color-accent); } + +.no-top-margin { margin-top: 0; } +.balanced { text-wrap: balance; } + +/* ============================================ + Layout + ============================================ */ + +.page-container { + max-width: 1200px; + min-height: 100vh; + margin: 0 auto; + padding: 0 var(--space-xl); + display: flex; + flex-direction: column; +} + +section { + padding: var(--space-section) 0; +} + +.background-gradient { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100vh; + background: linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 50%); + z-index: -10; + pointer-events: none; +} + +/* ============================================ + Navigation + ============================================ */ + +.nav-container { + position: sticky; + top: var(--space-l); + margin-top: var(--space-l); + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--color-background-blur); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--color-border); + border-radius: var(--radius-l); + padding: var(--space-m) var(--space-l); + z-index: 1000; +} + +.nav-brand { + display: flex; + align-items: center; + gap: var(--space-s); + text-decoration: none; + color: var(--color-text-primary); + font-weight: 600; + font-size: var(--font-size-m); +} + +.logo-icon { + color: var(--color-accent); + font-size: var(--font-size-l); +} + +.logo-text { + display: none; +} + +@media (min-width: 768px) { + .logo-text { + display: inline; + } +} + +.nav-menu { + display: none; + gap: var(--space-xs); +} + +@media (min-width: 1024px) { + .nav-menu { + display: flex; + } +} + +.nav-link { + color: var(--color-text-secondary); + font-size: var(--font-size-s); + font-weight: var(--ui-button-font-weight); + padding: var(--space-s) var(--space-m); + border-radius: var(--radius-s); + text-decoration: none; + transition: all 0.2s ease; +} + +.nav-link:hover { + color: var(--color-text-primary); + background-color: var(--color-surface); +} + +.nav-hamburger { + display: flex; +} + +@media (min-width: 1024px) { + .nav-hamburger { + display: none; + } +} + +/* Mobile nav */ +.nav-menu.open { + display: flex; + flex-direction: column; + position: absolute; + top: calc(100% + var(--space-s)); + left: 0; + right: 0; + background-color: var(--color-background); + border: 1px solid var(--color-border); + border-radius: var(--radius-l); + padding: var(--space-l); +} + +/* ============================================ + Buttons + ============================================ */ + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-s); + padding: 14px 28px; + font-size: var(--font-size-m); + font-weight: 600; + font-family: inherit; + text-decoration: none; + border: none; + border-radius: var(--radius-m); + cursor: pointer; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); +} + +.button.compact { + padding: var(--space-s) var(--space-m); + font-size: var(--font-size-s); + border-radius: var(--radius-s); +} + +.button.primary { + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + color: var(--color-on-accent); + box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1); + position: relative; + overflow: hidden; +} + +.button.primary:hover { + background: linear-gradient(135deg, var(--color-accent-hover), var(--color-accent)); + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35); +} + +.button.secondary { + background-color: var(--color-accent-light); + color: var(--color-accent); +} + +.button.secondary:hover { + background-color: var(--color-accent-lighter); +} + +.button.tertiary { + background-color: transparent; + color: var(--color-text-primary); + border: 1.5px solid var(--color-border-strong); +} + +.button.tertiary:hover { + background-color: var(--color-surface); + border-color: var(--color-accent); + color: var(--color-accent); + transform: translateY(-1px); +} + +.button.ghost { + background-color: transparent; + color: var(--color-text-secondary); +} + +.button.ghost:hover { + background-color: var(--color-surface); + color: var(--color-text-primary); +} + +.button-group { + display: flex; + flex-wrap: wrap; + gap: var(--space-m); + align-items: center; +} + +.button-group.centered { + justify-content: center; +} + +.button-group.stacked { + flex-direction: column; +} + +.button-group.margin-paragraph { + margin: var(--space-l) 0; +} + +/* ============================================ + Headings & Sections + ============================================ */ + +.heading { + max-width: 720px; + margin-bottom: var(--space-xl); +} + +.heading.centered { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.heading.hero { + padding: 64px 0 80px 0; +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 8px 20px; + background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); + color: var(--color-accent); + font-size: 14px; + font-weight: 600; + border-radius: 100px; + margin-bottom: 28px; + text-decoration: none; + border: 1px solid rgba(129, 140, 248, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(129, 140, 248, 0.15); +} + +.eyebrow:hover { + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(129, 140, 248, 0.25); + border-color: var(--color-accent); +} + +/* Hero Section Enhancements */ +.hero-section { + position: relative; + overflow: hidden; +} + +.hero-decoration { + position: absolute; + top: -200px; + left: 50%; + transform: translateX(-50%); + width: 800px; + height: 800px; + background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); + opacity: 0.15; + pointer-events: none; + z-index: -1; +} + +/* ============================================ + Stats Section + ============================================ */ + +.stats-section { + padding: 64px 0; + position: relative; +} + +.stats-section::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + height: 600px; + background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); + opacity: 0.1; + pointer-events: none; + z-index: -1; +} + +.stats-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + max-width: 1000px; + margin: 0 auto; +} + +@media (min-width: 768px) { + .stats-container { + grid-template-columns: repeat(4, 1fr); + gap: 24px; + } +} + +.stat-card { + text-align: center; + padding: 36px 24px; + background: var(--color-background); + border-radius: var(--radius-l); + border: 1.5px solid transparent; + background-image: + linear-gradient(var(--color-background), var(--color-background)), + linear-gradient(135deg, var(--color-accent-light), var(--color-border)); + background-origin: border-box; + background-clip: padding-box, border-box; + position: relative; + overflow: hidden; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + cursor: default; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.stat-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--color-accent), transparent); + opacity: 0; + transition: opacity 0.35s ease; +} + +.stat-card:hover { + transform: translateY(-2px); + border-color: var(--color-accent); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); +} + +.stat-card:hover::before { + opacity: 1; +} + +.stat-card:hover .stat-icon { + transform: scale(1.15) translateY(-2px); + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + color: var(--color-on-accent); + box-shadow: 0 8px 16px rgba(129, 140, 248, 0.3); +} + +.stat-card:hover .stat-number { + transform: scale(1.08); + filter: brightness(1.1); +} + +.stat-icon { + width: 56px; + height: 56px; + margin: 0 auto 20px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); + border-radius: 14px; + font-size: 24px; + color: var(--color-accent); + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); +} + +.stat-number { + font-size: 64px; + font-weight: 800; + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; + margin-bottom: 8px; + letter-spacing: -0.03em; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + font-variant-numeric: tabular-nums; +} + +.stat-label { + font-size: 14px; + color: var(--color-text-secondary); + font-weight: 600; + letter-spacing: 0.02em; + line-height: 1.5; + text-transform: capitalize; +} + +/* ============================================ + Cards with Icons + ============================================ */ + +.cards-with-icons-container { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: var(--space-xl); + margin-top: var(--space-xl); +} + +@media (min-width: 640px) { + .cards-with-icons-container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .cards-with-icons-container { + grid-template-columns: repeat(4, 1fr); + } +} + +.card-with-icon { + display: flex; + flex-direction: column; + gap: var(--space-m); + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + transition: all 0.2s ease; +} + +.card-with-icon:hover { + border-color: var(--color-accent); + transform: translateY(-2px); +} + +.card-with-icon .icon { + font-size: var(--font-size-xl); + color: var(--color-accent); +} + +.feature-heading { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.feature-heading p { + margin: 0; +} + +/* ============================================ + Grid System + ============================================ */ + +.grid { + display: grid; + gap: 24px; + margin: var(--space-xl) 0; +} + +.grid.columns-2 { + grid-template-columns: repeat(1, 1fr); +} + +.grid.columns-3 { + grid-template-columns: repeat(1, 1fr); +} + +@media (min-width: 768px) { + .grid.columns-2 { + grid-template-columns: repeat(2, 1fr); + gap: 28px; + } + .grid.columns-3 { + grid-template-columns: repeat(2, 1fr); + gap: 24px; + } +} + +@media (min-width: 1024px) { + .grid.columns-3 { + grid-template-columns: repeat(3, 1fr); + } + .grid.columns-2 { + gap: 32px; + } +} + +.full-width { + grid-column: 1 / -1; +} + +/* ============================================ + Agent Cards + ============================================ */ + +.agent-category { + margin-bottom: 64px; + position: relative; +} + +.agent-category::before { + content: ''; + position: absolute; + top: 0; + left: -20px; + width: 3px; + height: 100%; + background: linear-gradient(180deg, var(--color-accent), transparent); + opacity: 0.2; + border-radius: 2px; +} + +.agent-category h3 { + display: flex; + align-items: center; + gap: var(--space-m); + margin-bottom: var(--space-xl); + padding: var(--space-l) var(--space-xl); + background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface)); + border-left: 4px solid var(--color-accent); + border-radius: var(--radius-m); + color: var(--color-text-primary); + font-size: 24px; + font-weight: 700; + letter-spacing: -0.02em; + box-shadow: 0 2px 8px rgba(129, 140, 248, 0.08); + position: relative; + overflow: hidden; +} + +.agent-category h3::after { + content: ''; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 100px; + background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.05)); + pointer-events: none; +} + +.agent-category h3 i { + color: var(--color-accent); + font-size: 28px; + flex-shrink: 0; + filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3)); +} + +.agent-card { + padding: var(--space-xl); + background-color: var(--color-surface); + border-radius: var(--radius-l); + border: 1px solid var(--color-border); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.agent-card::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--color-accent-lighter), transparent); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +.agent-card:hover { + border-color: var(--color-accent); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(129, 140, 248, 0.15); +} + +.agent-card:hover::before { + opacity: 0.5; +} + +.agent-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + margin-bottom: var(--space-m); +} + +.agent-name { + font-family: var(--font-mono); + font-size: 15px; + font-weight: 700; + color: var(--color-text-primary); + letter-spacing: -0.01em; + position: relative; + z-index: 1; +} + +.agent-badge { + padding: 6px 12px; + font-size: 11px; + font-weight: 700; + background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); + color: var(--color-accent); + border-radius: 6px; + text-transform: uppercase; + letter-spacing: 0.08em; + box-shadow: 0 2px 4px rgba(129, 140, 248, 0.2); + border: 1px solid rgba(129, 140, 248, 0.3); + white-space: nowrap; + transition: all 0.2s ease; +} + +.agent-badge.critical { + background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1)); + color: var(--color-error); + box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25); + border-color: rgba(239, 68, 68, 0.4); +} + +.agent-card:hover .agent-badge { + transform: scale(1.05); + box-shadow: 0 4px 8px rgba(129, 140, 248, 0.3); +} + +.agent-card:hover .agent-badge.critical { + box-shadow: 0 4px 8px rgba(239, 68, 68, 0.35); +} + +.agent-card:hover .agent-name { + color: var(--color-accent); +} + +.agent-description { + font-size: 14px; + color: var(--color-text-secondary); + margin: 0 0 var(--space-m) 0; + line-height: 1.65; + position: relative; + z-index: 1; +} + +.agent-usage { + display: block; + font-family: var(--font-mono); + font-size: 13px; + color: #a6adc8; + background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%); + padding: 12px 16px; + border-radius: var(--radius-m); + border: 1px solid rgba(129, 140, 248, 0.1); + position: relative; + z-index: 1; + transition: all 0.2s ease; +} + +.agent-usage:hover { + border-color: rgba(129, 140, 248, 0.3); + background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%); +} + +/* ============================================ + Command Cards + ============================================ */ + +.command-category { + margin-bottom: var(--space-xxl); +} + +.command-category h3 { + display: flex; + align-items: center; + gap: var(--space-m); + margin-bottom: var(--space-xl); + padding: var(--space-m) var(--space-l); + background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.02)); + border-left: 3px solid var(--color-accent); + border-radius: var(--radius-s); + color: var(--color-text-primary); + font-family: var(--font-mono); + font-size: 18px; + font-weight: 600; + letter-spacing: -0.01em; + position: relative; +} + +.command-category h3::before { + content: '//'; + color: rgba(129, 140, 248, 0.4); + font-weight: 400; + margin-right: var(--space-xs); +} + +.command-category h3 i { + color: var(--color-accent); + filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.4)); +} + +.command-card { + padding: var(--space-xl); + background: linear-gradient(135deg, rgba(30, 30, 46, 0.6), rgba(24, 24, 37, 0.5)); + border-radius: var(--radius-l); + border: 1.5px solid rgba(129, 140, 248, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + inset 0 -1px 0 rgba(0, 0, 0, 0.2), + 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.command-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--color-accent), transparent); + opacity: 0.4; +} + +.command-card:hover { + border-color: var(--color-accent); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(129, 140, 248, 0.2); +} + +.command-card:hover .command-name { + color: rgba(129, 140, 248, 1); + text-shadow: 0 0 24px rgba(129, 140, 248, 0.5); +} + +.command-card:hover .command-type-badge { + background: linear-gradient(135deg, var(--color-accent), rgba(129, 140, 248, 0.6)); + color: var(--color-on-accent); + border-color: var(--color-accent); + box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4); +} + +.command-card:hover::after { + opacity: 0.15; +} + +.command-header { + margin-bottom: var(--space-m); + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-m); +} + +.command-name { + font-family: var(--font-mono); + font-size: 15px; + font-weight: 600; + color: var(--color-accent); + background: none; + padding: 0; + letter-spacing: -0.01em; + text-shadow: 0 0 20px rgba(129, 140, 248, 0.3); + display: flex; + align-items: center; + gap: 8px; + flex: 1; +} + +.command-name::before { + content: '$'; + color: rgba(129, 140, 248, 0.5); + font-weight: 400; + font-size: 14px; +} + +.command-type-badge { + padding: 3px 8px; + font-family: var(--font-mono); + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + border-radius: 3px; + background: linear-gradient(135deg, rgba(129, 140, 248, 0.15), rgba(129, 140, 248, 0.08)); + color: rgba(129, 140, 248, 0.8); + border: 1px solid rgba(129, 140, 248, 0.25); + white-space: nowrap; + flex-shrink: 0; +} + +.command-description { + font-size: 14px; + color: rgba(203, 213, 225, 0.85); + margin: 0; + line-height: 1.7; + letter-spacing: 0.01em; +} + +/* ============================================ + Skill Cards + ============================================ */ + +.skill-category { + margin-bottom: 72px; + position: relative; + padding: 24px; + background: linear-gradient(135deg, + rgba(129, 140, 248, 0.02) 0%, + transparent 50%); + border-radius: var(--radius-l); + border: 1px solid transparent; + transition: all 0.3s ease; +} + +.skill-category::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: linear-gradient(180deg, var(--color-accent), transparent); + opacity: 0.3; + border-radius: 2px; + transition: opacity 0.3s ease; +} + +.skill-category:hover::before { + opacity: 0.6; +} + +.skill-category h3 { + display: flex; + align-items: center; + gap: var(--space-m); + margin-bottom: var(--space-xl); + padding: var(--space-l) var(--space-xl); + background: linear-gradient(135deg, + rgba(129, 140, 248, 0.1) 0%, + rgba(129, 140, 248, 0.05) 50%, + var(--color-surface) 100%); + border-left: 4px solid var(--color-accent); + border-radius: var(--radius-m); + color: var(--color-text-primary); + font-size: 22px; + font-weight: 700; + letter-spacing: -0.02em; + box-shadow: + 0 2px 8px rgba(129, 140, 248, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: all 0.3s ease; + cursor: default; +} + +.skill-category h3:hover { + background: linear-gradient(135deg, + rgba(129, 140, 248, 0.15) 0%, + rgba(129, 140, 248, 0.08) 50%, + var(--color-surface) 100%); + box-shadow: + 0 4px 12px rgba(129, 140, 248, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.skill-category h3 i { + color: var(--color-accent); + font-size: 24px; +} + +.skill-card { + padding: 28px; + background: linear-gradient(135deg, var(--color-surface), var(--color-background)); + border-radius: var(--radius-l); + border: 1.5px solid var(--color-border); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); +} + +.skill-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-accent), transparent); + opacity: 0; + transition: opacity 0.3s ease; +} + +.skill-card::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 40px; + height: 40px; + background: linear-gradient(135deg, transparent 50%, var(--color-accent) 50%); + opacity: 0.1; + pointer-events: none; + transition: opacity 0.3s ease; +} + +.skill-card:hover { + border-color: var(--color-accent); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(129, 140, 248, 0.15); +} + +.skill-card:hover::before { + opacity: 1; +} + +.skill-card:hover::after { + opacity: 0.3; +} + +.skill-card.featured { + background: linear-gradient(135deg, + rgba(129, 140, 248, 0.12) 0%, + rgba(129, 140, 248, 0.06) 50%, + var(--color-surface) 100%); + border-color: var(--color-accent); + box-shadow: + 0 4px 16px rgba(129, 140, 248, 0.25), + 0 0 60px rgba(129, 140, 248, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + position: relative; + overflow: hidden; +} + +.skill-card.featured::before { + background: linear-gradient(90deg, + var(--color-accent) 0%, + rgba(129, 140, 248, 0.6) 100%); + opacity: 1; + height: 4px; +} + +.skill-card.featured:hover { + box-shadow: 0 10px 28px rgba(129, 140, 248, 0.2); + transform: translateY(-2px); +} + +.skill-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + margin-bottom: var(--space-l); + padding-bottom: var(--space-m); + border-bottom: 1px solid rgba(129, 140, 248, 0.1); + position: relative; +} + +.skill-header::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + width: 60px; + height: 2px; + background: linear-gradient(90deg, var(--color-accent), transparent); + opacity: 0; + transition: all 0.3s ease; +} + +.skill-card:hover .skill-header::after { + opacity: 1; + width: 120px; +} + +.skill-name { + font-family: var(--font-mono); + font-size: 16px; + font-weight: 700; + color: var(--color-text-primary); + letter-spacing: -0.01em; + display: flex; + align-items: center; + gap: 8px; + position: relative; + z-index: 1; +} + +.skill-name::before { + content: '◆'; + color: var(--color-accent); + font-size: 10px; + opacity: 0.6; + transition: all 0.3s ease; +} + +.skill-card:hover .skill-name { + color: var(--color-accent); +} + +.skill-card:hover .skill-name::before { + opacity: 1; + transform: scale(1.2); +} + +.skill-badge { + padding: 6px 12px; + font-size: 11px; + font-weight: 600; + background: var(--color-accent-light); + color: var(--color-accent); + border-radius: 6px; + text-transform: uppercase; + letter-spacing: 0.05em; + white-space: nowrap; + transition: all 0.2s ease; +} + +.skill-badge.highlight { + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + color: var(--color-on-accent); + box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4); + border-color: var(--color-accent); +} + +.skill-card:hover .skill-badge { + background: var(--color-accent); + color: var(--color-on-accent); +} + +.skill-description { + font-size: 14px; + color: var(--color-text-secondary); + margin: 0 0 var(--space-l) 0; + line-height: 1.65; + position: relative; + z-index: 1; + letter-spacing: 0.01em; +} + +.skill-features { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: var(--space-l); + position: relative; + z-index: 1; +} + +.feature-item { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 600; + color: var(--color-success); + background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08)); + padding: 8px 14px; + border-radius: 20px; + border: 1px solid rgba(16, 185, 129, 0.3); + transition: all 0.2s ease; + letter-spacing: 0.01em; +} + +.feature-item i { + font-size: 11px; + filter: drop-shadow(0 1px 2px rgba(16, 185, 129, 0.3)); +} + +.feature-item:hover { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.15)); + border-color: rgba(16, 185, 129, 0.5); + transform: translateY(-1px); + box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2); +} + +.skill-usage { + display: block; + font-family: var(--font-mono); + font-size: 13px; + color: #a6adc8; + background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%); + padding: 14px 18px; + border-radius: var(--radius-m); + margin-bottom: var(--space-s); + border: 1px solid rgba(129, 140, 248, 0.15); + position: relative; + z-index: 1; + transition: all 0.2s ease; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.skill-usage:hover { + border-color: rgba(129, 140, 248, 0.3); + background: linear-gradient(135deg, #242438 0%, #1e1e2e 100%); + transform: translateX(2px); +} + +.skill-note { + font-size: 12px; + color: var(--color-text-tertiary); + margin: 0; + font-style: italic; + position: relative; + z-index: 1; + padding: 8px 12px; + background: rgba(255, 165, 0, 0.08); + border-left: 3px solid rgba(255, 165, 0, 0.4); + border-radius: 4px; +} + +.skill-note::before { + content: '⚠'; + margin-right: 6px; + color: rgba(255, 165, 0, 0.8); +} + +/* ============================================ + MCP Cards + ============================================ */ + +.mcp-card { + padding: 36px; + background: linear-gradient(135deg, var(--color-surface), var(--color-background)); + border-radius: var(--radius-l); + border: 1.5px solid transparent; + background-image: + linear-gradient(135deg, var(--color-surface), var(--color-background)), + linear-gradient(135deg, var(--color-accent-light), var(--color-border)); + background-origin: border-box; + background-clip: padding-box, border-box; + box-shadow: + 0 1px 3px rgba(0, 0, 0, 0.12), + 0 4px 8px rgba(0, 0, 0, 0.08), + 0 8px 24px rgba(0, 0, 0, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.mcp-card::after { + content: '● ACTIVE'; + position: absolute; + top: 16px; + right: 16px; + font-size: 9px; + font-weight: 600; + letter-spacing: 0.08em; + padding: 5px 10px; + background: rgba(16, 185, 129, 0.15); + color: var(--color-success); + border: 1px solid rgba(16, 185, 129, 0.3); + border-radius: 12px; + z-index: 2; +} + +.mcp-card:hover { + transform: translateY(-2px); + border-color: var(--color-accent); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); +} + +.mcp-card:hover::after { + background: var(--color-success); + color: white; + border-color: var(--color-success); +} + +.mcp-header { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 24px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(129, 140, 248, 0.1); + position: relative; +} + +.mcp-header::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + width: 80px; + height: 2px; + background: linear-gradient(90deg, var(--color-accent), transparent); + opacity: 0; + transition: all 0.3s ease; +} + +.mcp-card:hover .mcp-header::after { + opacity: 1; + width: 150px; +} + +.mcp-icon { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent-lighter)); + color: var(--color-accent); + border-radius: 14px; + flex-shrink: 0; + box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + z-index: 1; +} + +.mcp-card:hover .mcp-icon { + transform: scale(1.1) translateY(-2px); + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + color: var(--color-on-accent); + box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3); +} + +.mcp-name { + font-size: 24px; + font-weight: 700; + color: var(--color-text-primary); + letter-spacing: -0.02em; + position: relative; + z-index: 1; + transition: all 0.3s ease; +} + +.mcp-card:hover .mcp-name { + transform: translateX(4px); + background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.mcp-description { + font-size: 15px; + color: var(--color-text-secondary); + margin-bottom: 28px; + line-height: 1.7; + position: relative; + z-index: 1; + letter-spacing: 0.01em; +} + +.mcp-description::before { + content: ''; + position: absolute; + bottom: -12px; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent, + rgba(129, 140, 248, 0.1) 20%, + rgba(129, 140, 248, 0.3) 40%, + rgba(129, 140, 248, 0.3) 60%, + rgba(129, 140, 248, 0.1) 80%, + transparent + ); + transition: all 0.4s ease; +} + +.mcp-card:hover .mcp-description::before { + box-shadow: 0 0 12px rgba(129, 140, 248, 0.6); + height: 2px; +} + +.mcp-tools h4 { + font-size: 13px; + font-weight: 700; + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px; + position: relative; + z-index: 1; +} + +.mcp-tools h4::before { + content: '▸'; + color: var(--color-accent); + font-size: 14px; +} + +.tools-count { + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + padding: 4px 10px; + background: rgba(129, 140, 248, 0.15); + color: var(--color-accent); + border-radius: 12px; + margin-left: 8px; + border: 1px solid rgba(129, 140, 248, 0.25); + display: inline-flex; + align-items: center; + gap: 4px; + box-shadow: 0 1px 3px rgba(129, 140, 248, 0.1); +} + +.mcp-card-browser .tools-count { + background: var(--server-color-lighter); + color: var(--server-color); + border-color: var(--server-color-light); +} + +.mcp-card-docs .tools-count { + background: var(--server-color-lighter); + color: var(--server-color); + border-color: var(--server-color-light); +} + +.mcp-tools ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 8px; + position: relative; + z-index: 1; +} + +.mcp-tools li { + font-size: 14px; + color: var(--color-text-secondary); + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + background: rgba(129, 140, 248, 0.04); + border-left: 2px solid rgba(129, 140, 248, 0.2); + border-radius: 6px; + transition: all 0.2s ease; + line-height: 1.5; +} + +.mcp-tools li::before { + content: '◆'; + color: var(--color-accent); + font-size: 8px; + flex-shrink: 0; + opacity: 0.6; +} + +.mcp-tools li:hover { + background: rgba(129, 140, 248, 0.08); + border-left-color: var(--color-accent); + transform: translateX(4px); +} + +.mcp-tools li:hover::before { + opacity: 1; +} + +.mcp-tools code { + color: var(--color-accent); + background: rgba(129, 140, 248, 0.1); + padding: 3px 8px; + border-radius: 4px; + font-weight: 600; + font-size: 13px; + font-family: var(--font-mono); + transition: all 0.2s ease; +} + +.mcp-tools li:hover code { + background: rgba(129, 140, 248, 0.2); +} + +.mcp-note { + font-size: 12px; + color: var(--color-text-secondary); + margin-top: 16px; + padding: 12px 16px; + background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0.04)); + border-left: 3px solid var(--color-accent); + border-radius: 8px; + line-height: 1.6; + position: relative; + z-index: 1; + font-weight: 500; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); +} + +.mcp-note::before { + content: '→'; + color: var(--color-accent); + margin-right: 8px; + font-weight: 700; + font-size: 14px; +} + +/* Browser Server Theme (Teal/Cyan) */ +.mcp-card-browser { + --server-color: #14b8a6; + --server-color-light: rgba(20, 184, 166, 0.15); + --server-color-lighter: rgba(20, 184, 166, 0.08); + --server-color-hover: #0d9488; +} + +.mcp-card-browser .mcp-icon { + background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); + color: var(--server-color); +} + +.mcp-card-browser:hover .mcp-icon { + background: linear-gradient(135deg, var(--server-color), var(--server-color-hover)); + color: white; + box-shadow: 0 8px 20px rgba(20, 184, 166, 0.4); +} + +.mcp-card-browser .mcp-header::after { + background: linear-gradient(90deg, var(--server-color), transparent); +} + +.mcp-card-browser .mcp-tools li::before { + color: var(--server-color); +} + +.mcp-card-browser .mcp-tools li:hover { + border-left-color: var(--server-color); +} + +.mcp-card-browser .mcp-tools code { + color: var(--server-color); + background: var(--server-color-lighter); +} + +.mcp-card-browser .mcp-tools h4::before { + color: var(--server-color); +} + +/* Docs Server Theme (Amber/Orange) */ +.mcp-card-docs { + --server-color: #f59e0b; + --server-color-light: rgba(245, 158, 11, 0.15); + --server-color-lighter: rgba(245, 158, 11, 0.08); + --server-color-hover: #d97706; +} + +.mcp-card-docs .mcp-icon { + background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); + color: var(--server-color); +} + +.mcp-card-docs:hover .mcp-icon { + background: linear-gradient(135deg, var(--server-color), var(--server-color-hover)); + color: white; + box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); +} + +.mcp-card-docs .mcp-header::after { + background: linear-gradient(90deg, var(--server-color), transparent); +} + +.mcp-card-docs .mcp-tools li::before { + color: var(--server-color); +} + +.mcp-card-docs .mcp-tools li:hover { + border-left-color: var(--server-color); +} + +.mcp-card-docs .mcp-tools code { + color: var(--server-color); + background: var(--server-color-lighter); +} + +.mcp-card-docs .mcp-tools h4::before { + color: var(--server-color); +} + +.mcp-card-docs .mcp-note { + background: linear-gradient(135deg, var(--server-color-light), var(--server-color-lighter)); + border-left-color: var(--server-color); +} + +.mcp-card-docs .mcp-note::before { + color: var(--server-color); +} + +/* ============================================ + Installation Section + ============================================ */ + +.install-section { + background: linear-gradient(135deg, var(--color-surface), var(--color-background)); + border-radius: var(--radius-xl); + margin: var(--space-xxl) 0; + padding: var(--space-xxl); + border: 1.5px solid var(--color-border); + position: relative; + overflow: hidden; +} + +.install-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-accent), var(--color-promo-start), var(--color-accent)); + opacity: 0.6; +} + +.install-steps { + max-width: 750px; + margin: 0 auto; + position: relative; +} + +.install-steps::before { + content: ''; + position: absolute; + left: 26px; + top: 52px; + bottom: 52px; + width: 2px; + background: linear-gradient(180deg, + var(--color-accent) 0%, + var(--color-accent) 33%, + var(--color-accent) 66%, + var(--color-success) 100% + ); + opacity: 0.3; + z-index: 0; +} + +.install-step { + display: flex; + gap: var(--space-xl); + margin-bottom: var(--space-xxl); + padding: var(--space-xl); + background: var(--color-background); + border-radius: var(--radius-l); + border: 1.5px solid var(--color-border); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; +} + +.install-step::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--color-accent-lighter), transparent); + opacity: 0; + transition: opacity 0.3s ease; + border-radius: var(--radius-l); + pointer-events: none; +} + +.install-step:hover { + border-color: var(--color-accent); + transform: translateX(4px); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.15); +} + +.install-step:hover::before { + opacity: 0.4; +} + +.install-step:last-child { + margin-bottom: 0; + background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--color-background)); + border-color: rgba(16, 185, 129, 0.3); +} + +.install-step:last-child .step-number { + background: linear-gradient(135deg, var(--color-success), #0d9488); + box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4); +} + +.step-number { + flex-shrink: 0; + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + color: var(--color-on-accent); + font-weight: 700; + font-size: 24px; + border-radius: 50%; + box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + z-index: 1; +} + +.install-step:hover .step-number { + transform: scale(1.1) rotate(5deg); + box-shadow: 0 6px 20px rgba(129, 140, 248, 0.5); +} + +.step-content { + flex: 1; + position: relative; + z-index: 1; +} + +.step-content h3 { + margin-top: 8px; + margin-bottom: var(--space-m); + font-size: 22px; + color: var(--color-text-primary); +} + +/* ============================================ + Code Blocks + ============================================ */ + +.card-code-block { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + border-radius: var(--radius-m); + padding: 18px 20px; + overflow-x: auto; + border: 1px solid rgba(129, 140, 248, 0.2); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 4px 12px rgba(0, 0, 0, 0.4); + position: relative; +} + +.card-code-block::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: repeating-linear-gradient( + 0deg, + rgba(255, 255, 255, 0.03) 0px, + rgba(255, 255, 255, 0.03) 1px, + transparent 1px, + transparent 2px + ); + pointer-events: none; + opacity: 0.3; +} + +.card-code-block pre { + margin: 0; + position: relative; + z-index: 1; +} + +.card-code-block code { + font-family: var(--font-mono); + font-size: 14px; + color: #cdd6f4; + background: none; + padding: 0; + line-height: 1.8; + white-space: pre; + text-shadow: 0 0 8px rgba(205, 214, 244, 0.3); +} + +/* ============================================ + Accordion / FAQ + ============================================ */ +.accordion-container { + display: flex; + flex-direction: column; + gap: var(--space-m); + max-width: 900px; + margin: 0 auto; +} + +.accordion-item { + background: var(--color-surface); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-l); + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + position: relative; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); +} + +.accordion-item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover)); + opacity: 0; + transition: opacity 0.35s ease; + z-index: 2; +} + +.accordion-item[open]::before { + opacity: 1; +} + +.accordion-item:hover { + border-color: var(--color-accent); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); + transform: translateY(-2px); +} + +.accordion-item[open] { + background: linear-gradient(135deg, rgba(129, 140, 248, 0.08), var(--color-surface)); + border-color: var(--color-accent); + box-shadow: 0 12px 32px rgba(129, 140, 248, 0.25); +} + +.accordion-toggle { + display: flex; + align-items: center; +/* ============================================ + Promo CTA Section - Final Polish + ============================================ */ + +.promo-cta { + background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); + border-radius: var(--radius-xl); + padding: 96px var(--space-xxl); + margin-bottom: var(--space-xxl); + position: relative; + overflow: hidden; + box-shadow: + 0 20px 60px rgba(129, 140, 248, 0.5), + 0 8px 24px rgba(0, 0, 0, 0.2); +} + +.promo-cta::before { + content: ''; + position: absolute; + inset: 0; + background: + repeating-linear-gradient( + 45deg, + transparent, + transparent 20px, + rgba(255, 255, 255, 0.04) 20px, + rgba(255, 255, 255, 0.04) 40px + ); + pointer-events: none; +} + +.promo-cta::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); + pointer-events: none; + animation: glow-pulse 6s ease-in-out infinite; +} + +@keyframes glow-pulse { + 0%, 100% { + opacity: 0.4; + transform: translate(-50%, -50%) scale(0.95); + } + 50% { + opacity: 0.7; + transform: translate(-50%, -50%) scale(1.05); + } +} + +.cta-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 22px; + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(12px); + border: 1.5px solid rgba(255, 255, 255, 0.4); + border-radius: 50px; + color: white; + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 28px; + position: relative; + z-index: 1; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.cta-badge i { + font-size: 16px; + animation: bolt-flash 2.5s ease-in-out infinite; + filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)); +} + +@keyframes bolt-flash { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; transform: scale(1.15); } +} + +.promo-cta h2 { + color: white; + font-size: 52px; + font-weight: 850; + line-height: 1.1; + margin-bottom: 28px; + position: relative; + z-index: 1; + text-shadow: + 0 2px 4px rgba(0, 0, 0, 0.2), + 0 4px 20px rgba(0, 0, 0, 0.15); + letter-spacing: -0.03em; +} + +.cta-subheading { + color: rgba(255, 255, 255, 0.98); + font-size: 20px; + line-height: 1.65; + max-width: 720px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 1; +} + +.cta-subheading strong { + color: white; + font-weight: 700; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.promo-cta .button { + position: relative; + z-index: 1; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.promo-cta .button.primary { + background: white; + color: var(--color-promo-end); + font-size: 19px; + font-weight: 700; + padding: 20px 42px; + box-shadow: + 0 8px 28px rgba(0, 0, 0, 0.3), + 0 4px 12px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.4); +} + +.promo-cta .button.primary:hover { + background: rgba(255, 255, 255, 0.98); + transform: translateY(-2px); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); +} + +.promo-cta .button.primary i { + font-size: 20px; + margin-right: 4px; +} + +.button-arrow { + display: inline-block; + margin-left: 8px; + transition: transform 0.3s ease; + font-weight: 700; + font-size: 20px; +} + +.promo-cta .button.primary:hover .button-arrow { + transform: translateX(4px); +} + +.promo-cta .button.tertiary { + border: 2px solid rgba(255, 255, 255, 0.5); + color: white; + font-size: 18px; + padding: 18px 36px; + background: rgba(255, 255, 255, 0.08); + backdrop-filter: blur(8px); +} + +.promo-cta .button.tertiary:hover { + background: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.8); + transform: translateY(-2px); +} + +.cta-trust { + margin-top: 32px; + margin-bottom: 0; + font-size: 15px; + color: rgba(255, 255, 255, 0.85); + font-weight: 500; + letter-spacing: 0.01em; + position: relative; + z-index: 1; +} + +.cta-trust::before { + content: '✓'; + display: inline-block; + margin-right: 8px; + color: rgba(255, 255, 255, 0.9); + font-weight: 700; + font-size: 18px; +} + +@media (max-width: 767px) { + .promo-cta { + padding: 64px var(--space-xl); + } + + .promo-cta h2 { + font-size: 38px; + } + + .cta-subheading { + font-size: 18px; + } + + .promo-cta .button.primary { + font-size: 17px; + padding: 18px 32px; + } + + .button-group { + flex-direction: column; + width: 100%; + } + + .button-group .button { + width: 100%; + } +} +/* Add subtle numbers */ +.accordion-item:nth-child(1) .accordion-toggle::after { content: '01'; } +.accordion-item:nth-child(2) .accordion-toggle::after { content: '02'; } +.accordion-item:nth-child(3) .accordion-toggle::after { content: '03'; } +.accordion-item:nth-child(4) .accordion-toggle::after { content: '04'; } +.accordion-item:nth-child(5) .accordion-toggle::after { content: '05'; } + +.accordion-toggle::after { + position: absolute; + right: 70px; + font-size: 10px; + font-weight: 700; + color: var(--color-text-tertiary); + opacity: 0.4; + font-family: var(--font-mono); + letter-spacing: 0.05em; + transition: all 0.3s ease; +} + +.accordion-item:hover .accordion-toggle::after { + opacity: 0.7; + color: var(--color-accent); +} + +.accordion-item[open] .accordion-toggle::after { + opacity: 0; +} + +/* ============================================ + Promo CTA Section + ============================================ */ + +.promo-cta { + background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); + border-radius: var(--radius-xl); + padding: 80px var(--space-xxl); + margin-bottom: var(--space-xxl); + position: relative; + overflow: hidden; + box-shadow: 0 20px 60px rgba(129, 140, 248, 0.4); +} + +.promo-cta::before { + content: ''; + position: absolute; + inset: 0; + background: + repeating-linear-gradient( + 45deg, + transparent, + transparent 20px, + rgba(255, 255, 255, 0.03) 20px, + rgba(255, 255, 255, 0.03) 40px + ); + pointer-events: none; +} + +.promo-cta::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); + pointer-events: none; + animation: glow-pulse 4s ease-in-out infinite; +} + +@keyframes glow-pulse { + 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } + 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } +} + +.cta-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 1.5px solid rgba(255, 255, 255, 0.3); + border-radius: 50px; + color: white; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 24px; + position: relative; + z-index: 1; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.cta-badge i { + font-size: 16px; +} + +.promo-cta h2 { + color: white; + font-size: 48px; + font-weight: 800; + line-height: 1.15; + margin-bottom: 24px; + position: relative; + z-index: 1; + text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); +} + +.promo-cta p { + color: rgba(255, 255, 255, 0.95); + font-size: 21px; + line-height: 1.6; + max-width: 700px; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 1; +} + +.promo-cta .button { + position: relative; + z-index: 1; +} + +.promo-cta .button.primary { + background-color: white; + color: var(--color-promo-end); + font-size: 18px; + padding: 18px 36px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); +} + +.promo-cta .button.primary:hover { + background-color: rgba(255, 255, 255, 0.95); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); +} + +.promo-cta .button.primary i { + font-size: 20px; +} + +.promo-cta .button.tertiary { + border-color: rgba(255, 255, 255, 0.4); + color: white; + font-size: 18px; + padding: 18px 36px; +} + +.promo-cta .button.tertiary:hover { + background-color: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.6); +} + +.accordion-content code { + background: rgba(129, 140, 248, 0.15); + color: var(--color-accent); + padding: 3px 8px; + border-radius: 4px; + font-weight: 600; +} + +.accordion-content strong { + color: var(--color-text-primary); + font-weight: 600; +} + +/* ============================================ + Promo CTA Section + ============================================ */ + +.promo-cta { + background: linear-gradient(135deg, var(--color-promo-start), var(--color-promo-end)); + border-radius: var(--radius-xl); + padding: var(--space-xxl); + margin-bottom: var(--space-xxl); +} + +.promo-cta h2 { + color: white; +} + +.promo-cta p { + color: rgba(255, 255, 255, 0.9); +} + +.promo-cta .button.primary { + background-color: white; + color: var(--color-promo-end); +} + +.promo-cta .button.primary:hover { + background-color: rgba(255, 255, 255, 0.9); +} + +.promo-cta .button.tertiary { + border-color: rgba(255, 255, 255, 0.3); + color: white; +} + +.promo-cta .button.tertiary:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +/* ============================================ + Footer + ============================================ */ + +.footer { + border-top: 1px solid var(--color-border); + margin-top: auto; + padding: var(--space-xxl) 0 var(--space-xl); +} + +.footer-menu { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); + margin-bottom: var(--space-xl); +} + +@media (min-width: 768px) { + .footer-menu { + grid-template-columns: 2fr 1fr 1fr; + } +} + +.footer p { + margin: 0; + color: var(--color-text-secondary); +} + +.link-list { + display: flex; + flex-direction: column; + gap: var(--space-m); +} + +.link-list a { + color: var(--color-text-secondary); + font-size: var(--font-size-s); + text-decoration: none; +} + +.link-list a:hover { + color: var(--color-accent); +} + +.icon-link { + display: flex; + align-items: center; + gap: var(--space-s); +} + +.icon-link .icon { + color: var(--color-accent); +} + +.pseudo-link { + text-decoration: underline; + text-decoration-color: var(--color-border); + text-underline-offset: 2px; +} + +.link-list-horizontal { + display: flex; + flex-wrap: wrap; + gap: var(--space-l); +} + +.link-list-horizontal a { + color: var(--color-text-tertiary); + font-size: var(--font-size-s); +} + +.link-list-horizontal a:hover { + color: var(--color-text-secondary); +} + +/* ============================================ + Utility Classes + ============================================ */ + +.hide-on-mobile { + display: none; +} + +@media (min-width: 768px) { + .hide-on-mobile { + display: flex; + } +} + +.mobile-only { + display: flex; +} + +@media (min-width: 1024px) { + .mobile-only { + display: none; + } +} + +.margin-top-l { + margin-top: var(--space-l); +} + +.ui.s { + font-size: var(--font-size-s); + line-height: var(--line-height-ui-s); +} + +.icon { + display: inline-flex !important; + align-items: center; +} + +.icon.m { font-size: var(--font-size-m); } +.icon.l { font-size: var(--font-size-l); } +.icon.xl { font-size: var(--font-size-xl); } + +/* ============================================ + Responsive Adjustments + ============================================ */ + +@media (max-width: 767px) { + :root { + --font-size-xxl: 36px; + --font-size-xl: 28px; + --line-height-h1: 44px; + --line-height-h2: 36px; + --space-section: 48px; + } + + .page-container { + padding: 0 var(--space-l); + } + + .hero-section .heading.hero { + padding: var(--space-xl) 0; + } + + .install-section { + padding: var(--space-xl); + } + + .install-step { + flex-direction: column; + gap: var(--space-m); + } + + .promo-cta { + padding: var(--space-xl); + } +} + +/* ============================================ + Philosophy Section (Enhanced) + ============================================ */ + +.philosophy-section { + padding: var(--space-section) 0; + position: relative; +} + +.philosophy-section::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 400px; + height: 400px; + background: radial-gradient(circle, var(--color-accent-lighter) 0%, transparent 70%); + opacity: 0.08; + pointer-events: none; + z-index: 0; +} + +.philosophy-section > * { + position: relative; + z-index: 1; +} + +.philosophy-quote { + max-width: 900px; + margin: 0 auto var(--space-xxl); + text-align: center; + position: relative; +} + +.philosophy-quote::before { + content: '"'; + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + font-size: 120px; + font-weight: 700; + color: var(--color-accent); + opacity: 0.1; + line-height: 1; + font-family: Georgia, serif; + z-index: 0; +} + +.philosophy-quote blockquote { + font-size: 22px; + font-style: italic; + color: var(--color-text-secondary); + line-height: 1.7; + margin: 0; + padding: var(--space-xxl); + background: linear-gradient(135deg, var(--color-accent-lighter) 0%, transparent 50%); + border-left: 5px solid var(--color-accent); + border-radius: var(--radius-l); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.12); + position: relative; + z-index: 1; + font-weight: 400; +} + +/* Philosophy Pillars */ +.philosophy-pillars { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xl); + margin-bottom: var(--space-xxl); +} + +@media (min-width: 768px) { + .philosophy-pillars { + grid-template-columns: repeat(2, 1fr); + } +} + +.pillar { + display: flex; + gap: var(--space-l); + padding: var(--space-xl); + background: var(--color-background); + border-radius: var(--radius-l); + border: 1.5px solid transparent; + background-image: + linear-gradient(var(--color-background), var(--color-background)), + linear-gradient(135deg, var(--color-accent-light), var(--color-border)); + background-origin: border-box; + background-clip: padding-box, border-box; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.pillar::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--color-accent-lighter), transparent); + opacity: 0; + transition: opacity 0.35s ease; + z-index: 0; +} + +.pillar:hover { + transform: translateY(-2px); + border-color: var(--color-accent); + box-shadow: 0 8px 24px rgba(129, 140, 248, 0.2); +} + +.pillar:hover::before { + opacity: 0.3; +} + +.pillar > * { + position: relative; + z-index: 1; +} + +.pillar-icon { + flex-shrink: 0; + width: 72px; + height: 72px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + border-radius: var(--radius-l); + font-size: 36px; + color: var(--color-on-accent); + box-shadow: 0 8px 20px rgba(129, 140, 248, 0.3); + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); +} + +.pillar:hover .pillar-icon { + transform: scale(1.1) rotateY(10deg); + box-shadow: 0 12px 30px rgba(129, 140, 248, 0.5); +} + +.pillar-content h3 { + margin: 0 0 var(--space-xs) 0; + font-size: 28px; + font-weight: 700; + color: var(--color-text-primary); + letter-spacing: -0.02em; +} + +.pillar-tagline { + margin: 0 0 var(--space-m) 0; + font-size: 16px; + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 600; + font-style: italic; +} + +.pillar-description { + margin: 0 0 var(--space-l) 0; + font-size: 15px; + color: var(--color-text-secondary); + line-height: 1.7; + letter-spacing: 0.01em; +} + +.pillar-tools { + display: flex; + flex-wrap: wrap; + gap: var(--space-s); +} + +.tool-tag { + font-family: var(--font-mono); + font-size: 11px; + padding: 6px 12px; + background-color: var(--color-surface-hover); + color: var(--color-text-secondary); + border-radius: var(--radius-s); + border: 1px solid var(--color-border); + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + cursor: default; + font-weight: 500; +} + +.tool-tag:hover { + background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-surface-hover)); + border-color: var(--color-accent); + color: var(--color-accent); + transform: translateY(-1px) scale(1.05); + box-shadow: 0 4px 8px rgba(129, 140, 248, 0.15); +} + +/* Compound Effect Timeline */ +.compound-effect { + background: linear-gradient(135deg, var(--color-surface), var(--color-background)); + border-radius: var(--radius-xl); + padding: var(--space-xxl); + border: 1.5px solid transparent; + background-image: + linear-gradient(135deg, var(--color-surface), var(--color-background)), + linear-gradient(135deg, var(--color-accent-light), var(--color-border)); + background-origin: border-box; + background-clip: padding-box, border-box; + position: relative; + overflow: hidden; +} + +.compound-effect::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at 50% 0%, var(--color-accent-lighter), transparent 60%); + opacity: 0.3; + pointer-events: none; +} + +.compound-effect h3 { + text-align: center; + margin: 0 0 var(--space-xxl) 0; + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-s); + font-size: 28px; + position: relative; + z-index: 1; +} + +.compound-effect h3 i { + font-size: 32px; + animation: chart-pulse 2s ease-in-out infinite; +} + +@keyframes chart-pulse { + 0%, 100% { transform: scale(1) translateY(0); } + 50% { transform: scale(1.15) translateY(-2px); } +} + +.compound-grid { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: var(--space-l); + position: relative; + z-index: 1; +} + +.compound-item { + text-align: center; + padding: var(--space-xl); + background: var(--color-background); + border-radius: var(--radius-l); + border: 1.5px solid var(--color-border); + min-width: 160px; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.compound-item::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, var(--color-accent-lighter), transparent); + opacity: 0; + border-radius: var(--radius-l); + transition: opacity 0.35s ease; +} + +.compound-item:hover { + transform: translateY(-2px); + border-color: var(--color-accent); + box-shadow: 0 8px 20px rgba(129, 140, 248, 0.2); +} + +.compound-item:hover::before { + opacity: 0.2; +} + +.compound-item.highlight { + background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); + border-color: var(--color-accent); + box-shadow: 0 12px 32px rgba(129, 140, 248, 0.4); + transform: scale(1.08); +} + +.compound-item.highlight .compound-number, +.compound-item.highlight .compound-text { + color: var(--color-on-accent); +} + +.compound-item.highlight:hover { + transform: translateY(-2px); + box-shadow: 0 10px 28px rgba(129, 140, 248, 0.4); +} + +.compound-number { + font-size: 18px; + font-weight: 700; + color: var(--color-accent); + margin-bottom: var(--space-s); + text-transform: uppercase; + letter-spacing: 0.05em; + position: relative; + z-index: 1; +} + +.compound-text { + font-size: 14px; + color: var(--color-text-secondary); + line-height: 1.5; + position: relative; + z-index: 1; +} + +.compound-arrow { + color: var(--color-accent); + font-size: 24px; + opacity: 0.6; + animation: arrow-slide 2s ease-in-out infinite; +} + +@keyframes arrow-slide { + 0%, 100% { transform: translateX(0); opacity: 0.6; } + 50% { transform: translateX(4px); opacity: 1; } +} + +@media (max-width: 767px) { + .pillar { + flex-direction: column; + text-align: center; + } + + .pillar-icon { + margin: 0 auto; + } + + .pillar-tools { + justify-content: center; + } + + .compound-arrow { + transform: rotate(90deg); + } + + .compound-grid { + flex-direction: column; + } +} diff --git a/plugins/compounding-engineering/docs/index.html b/plugins/compounding-engineering/docs/index.html new file mode 100644 index 0000000..9d6e4e9 --- /dev/null +++ b/plugins/compounding-engineering/docs/index.html @@ -0,0 +1,948 @@ + + + + + + Compounding Engineering - AI-Powered Development Tools for Claude Code + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + Compounding Engineering + + +
+ +
+ + Install + +
+
+ +
+ +
+
+
+ + Version 2.6.0 released! + +

+ AI-Powered Development Tools That Get Smarter With Every Use +

+

+ Make each unit of engineering work easier than the last. 23 specialized agents, 16 powerful commands, + 11 intelligent skills, and two MCP servers for code review, research, design, and workflow automation. +

+
+ + Install Plugin + + + Read the Docs + +
+
+
+ + +
+
+
+
+
23
+
Specialized Agents
+
+
+
+
16
+
Slash Commands
+
+
+
+
11
+
Intelligent Skills
+
+
+
+
2
+
MCP Servers
+
+
+
+ + +
+
+

The Compounding Engineering Philosophy

+

+ Every unit of engineering work should make subsequent units of work easier—not harder. +

+
+ + +
+
+ "Most engineering creates linear value: you build a feature, it works, done. + Compounding engineering creates exponential value: each solved problem teaches the system, + each pattern becomes reusable, each review strengthens future reviews." +
+
+ + +
+
+
+
+

Plan

+

Understand before you build

+

+ Before writing a single line of code, gather context. Research agents explore + documentation, analyze git history, and find best practices. The /workflows:plan + command orchestrates three research agents in parallel to create comprehensive implementation plans. +

+
+ framework-docs-researcher + best-practices-researcher + repo-research-analyst + git-history-analyzer +
+
+
+ +
+
+
+

Delegate

+

Leverage specialized expertise

+

+ Each agent brings deep domain knowledge. The kieran-rails-reviewer knows Rails + conventions like an expert. The security-sentinel catches OWASP vulnerabilities. + The /workflows:work command executes plans while maintaining quality gates. +

+
+ 24 specialized agents + /workflows:work + dhh-ruby-style skill + git-worktree skill +
+
+
+ +
+
+
+

Assess

+

Multiple perspectives, comprehensive coverage

+

+ The /workflows:review command launches 12 or more review agents in parallel: security, + performance, architecture, data integrity, patterns, and more. Findings are categorized by + severity (P1/P2/P3) and stored as actionable todo files. +

+
+ security-sentinel + performance-oracle + architecture-strategist + data-integrity-guardian +
+
+
+ +
+
+
+

Codify

+

Turn solutions into knowledge

+

+ Every solved problem should teach the system. The /workflows:codify command + captures solutions as searchable documentation with YAML frontmatter for fast lookup. +

+
+ /workflows:codify + codify-docs skill + file-todos skill +
+
+
+
+ +
+ + +
+
+

+ 23 Specialized Agents +

+

+ Each agent brings deep expertise in a specific domain. Run them individually or orchestrate + multiple agents in parallel for comprehensive analysis. +

+
+ + +
+

Review Agents (10)

+
+
+
+ kieran-rails-reviewer + Rails +
+

Super senior Rails developer with impeccable taste. Applies strict conventions for Turbo Streams, namespacing, and the "duplication over complexity" philosophy.

+ claude agent kieran-rails-reviewer +
+
+
+ dhh-rails-reviewer + Rails +
+

Reviews code from DHH's perspective. Focus on Rails conventions, simplicity, and avoiding over-engineering.

+ claude agent dhh-rails-reviewer +
+
+
+ kieran-python-reviewer + Python +
+

Python code review with strict conventions. PEP 8 compliance, type hints, and Pythonic patterns.

+ claude agent kieran-python-reviewer +
+
+
+ kieran-typescript-reviewer + TypeScript +
+

TypeScript review with focus on type safety, modern patterns, and clean architecture.

+ claude agent kieran-typescript-reviewer +
+
+
+ security-sentinel + Security +
+

Security audits and vulnerability assessments. OWASP top 10, injection attacks, authentication flaws.

+ claude agent security-sentinel +
+
+
+ performance-oracle + Performance +
+

Performance analysis and optimization recommendations. N+1 queries, caching strategies, bottleneck identification.

+ claude agent performance-oracle +
+
+
+ architecture-strategist + Architecture +
+

Analyze architectural decisions, compliance, and system design patterns.

+ claude agent architecture-strategist +
+
+
+ data-integrity-guardian + Data +
+

Database migrations and data integrity review. Schema changes, foreign keys, data consistency.

+ claude agent data-integrity-guardian +
+
+
+ pattern-recognition-specialist + Patterns +
+

Analyze code for patterns and anti-patterns. Design patterns, code smells, refactoring opportunities.

+ claude agent pattern-recognition-specialist +
+
+
+ code-simplicity-reviewer + Quality +
+

Final pass for simplicity and minimalism. Remove unnecessary complexity, improve readability.

+ claude agent code-simplicity-reviewer +
+
+
+ + +
+

Research Agents (four)

+
+
+
+ framework-docs-researcher + Research +
+

Research framework documentation and best practices. Find official guidance and community patterns.

+ claude agent framework-docs-researcher +
+
+
+ best-practices-researcher + Research +
+

Gather external best practices and examples from the community and industry standards.

+ claude agent best-practices-researcher +
+
+
+ git-history-analyzer + Git +
+

Analyze git history and code evolution. Understand how code has changed and why.

+ claude agent git-history-analyzer +
+
+
+ repo-research-analyst + Research +
+

Research repository structure and conventions. Understand project patterns and organization.

+ claude agent repo-research-analyst +
+
+
+ + +
+

Design Agents (three)

+
+
+
+ design-iterator + Design +
+

Iteratively refine UI through systematic design iterations with screenshots and feedback loops.

+ claude agent design-iterator +
+
+
+ figma-design-sync + Figma +
+

Synchronize web implementations with Figma designs. Pixel-perfect matching.

+ claude agent figma-design-sync +
+
+
+ design-implementation-reviewer + Review +
+

Verify UI implementations match Figma designs. Catch visual regressions.

+ claude agent design-implementation-reviewer +
+
+
+ + +
+

Workflow Agents (five)

+
+
+
+ bug-reproduction-validator + Bugs +
+

Systematically reproduce and validate bug reports. Create minimal reproduction cases.

+ claude agent bug-reproduction-validator +
+
+
+ pr-comment-resolver + PR +
+

Address PR comments and implement fixes. Batch process review feedback.

+ claude agent pr-comment-resolver +
+
+
+ lint + Quality +
+

Run linting and code quality checks on Ruby and ERB files.

+ claude agent lint +
+
+
+ spec-flow-analyzer + Testing +
+

Analyze user flows and identify gaps in specifications.

+ claude agent spec-flow-analyzer +
+
+
+ every-style-editor + Content +
+

Edit content to conform to Every's style guide.

+ claude agent every-style-editor +
+
+
+ + +
+

Documentation Agent (one)

+
+
+
+ ankane-readme-writer + Docs +
+

Create READMEs following Ankane-style template for Ruby gems. Clean, concise, comprehensive documentation that gets straight to the point.

+ claude agent ankane-readme-writer +
+
+
+
+ + +
+
+

+ 16 Powerful Commands +

+

+ Slash commands for common workflows. From code review to bug triage, + these commands automate complex multi-step processes. +

+
+ + +
+

Workflow Commands

+
+
+
+ /workflows:plan + core +
+

Create comprehensive implementation plans with research agents and stakeholder analysis.

+
+
+
+ /workflows:review + core +
+

Run exhaustive code reviews using 12 or more parallel agents, ultra-thinking, and worktrees.

+
+
+
+ /workflows:work + core +
+

Execute work items systematically with progress tracking and validation.

+
+
+
+ /workflows:codify + core +
+

Document solved problems for the knowledge base. Turn learnings into reusable patterns.

+
+
+
+ + +
+

Utility Commands

+
+
+
+ /changelog + util +
+

Create engaging changelogs for recent merges.

+
+
+
+ /create-agent-skill + util +
+

Create or edit Claude Code skills with expert guidance.

+
+
+
+ /generate_command + util +
+

Generate new slash commands from templates.

+
+
+
+ /heal-skill + util +
+

Fix skill documentation issues automatically.

+
+
+
+ /plan_review + util +
+

Multi-agent plan review in parallel.

+
+
+
+ /prime + util +
+

Prime/setup command for project initialization.

+
+
+
+ /report-bug + util +
+

Report bugs in the plugin with structured templates.

+
+
+
+ /reproduce-bug + util +
+

Reproduce bugs using logs and console output.

+
+
+
+ /triage + util +
+

Triage and prioritize issues interactively.

+
+
+
+ /resolve_parallel + util +
+

Resolve TODO comments in parallel.

+
+
+
+ /resolve_pr_parallel + util +
+

Resolve PR comments in parallel.

+
+
+
+ /resolve_todo_parallel + util +
+

Resolve file-based todos in parallel.

+
+
+
+
+ + +
+
+

+ 11 Intelligent Skills +

+

+ Skills provide deep domain expertise that Claude Code can invoke on-demand. + From Ruby gem patterns to image generation. +

+
+ + +
+

Development Tools

+
+
+
+ andrew-kane-gem-writer + Ruby +
+

Write Ruby gems following Andrew Kane's patterns. Clean APIs, smart defaults, comprehensive testing.

+ skill: andrew-kane-gem-writer +
+
+
+ dhh-ruby-style + Rails +
+

Write Ruby/Rails code in DHH's 37signals style. Convention over configuration, beautiful code.

+ skill: dhh-ruby-style +
+
+
+ dspy-ruby + AI +
+

Build type-safe LLM applications with DSPy.rb. Structured prompting, optimization, providers.

+ skill: dspy-ruby +
+
+
+ frontend-design + Design +
+

Create production-grade frontend interfaces with modern CSS, responsive design, accessibility.

+ skill: frontend-design +
+
+
+ create-agent-skills + Meta +
+

Expert guidance for creating Claude Code skills. Templates, best practices, validation.

+ skill: create-agent-skills +
+
+
+ skill-creator + Meta +
+

Guide for creating effective Claude Code skills with structured workflows.

+ skill: skill-creator +
+
+
+ codify-docs + Docs +
+

Capture solved problems as categorized documentation with YAML schema.

+ skill: codify-docs +
+
+
+ + +
+

Content & Workflow

+
+
+
+ every-style-editor + Content +
+

Review copy for Every's style guide compliance.

+ skill: every-style-editor +
+
+
+ file-todos + Workflow +
+

File-based todo tracking system with priorities and status.

+ skill: file-todos +
+
+
+ git-worktree + Git +
+

Manage Git worktrees for parallel development on multiple branches.

+ skill: git-worktree +
+
+
+ + +
+

Image Generation

+
+
+
+ gemini-imagegen + AI Images +
+

+ Generate and edit images using Google's Gemini API. Text-to-image, image editing, + multi-turn refinement, and composition from up to 14 reference images. +

+
+
+ Text-to-image generation +
+
+ Image editing & manipulation +
+
+ Multi-turn refinement +
+
+ Multiple reference images (up to 14) +
+
+ Google Search grounding (Pro) +
+
+ skill: gemini-imagegen +

Requires: GEMINI_API_KEY environment variable

+
+
+
+
+ + +
+
+

+ Two MCP Servers +

+

+ Model Context Protocol servers extend Claude Code's capabilities with + browser automation and framework documentation lookup. +

+
+ +
+
+
+ + Playwright +
+

Browser automation for testing, screenshots, and web interactions.

+
+

Tools Provided: 6 tools

+
    +
  • browser_navigate - Navigate to URLs
    • +
  • browser_take_screenshot - Take screenshots
    • +
  • browser_click - Click elements
    • +
  • browser_fill_form - Fill form fields
    • +
  • browser_snapshot - Get accessibility snapshot
    • +
  • browser_evaluate - Execute JavaScript
    • +
+
+
+
+
+ + Context7 +
+

Framework documentation lookup for more than 100 frameworks.

+
+

Tools Provided: 2 tools

+
    +
  • resolve-library-id - Find library ID
    • +
  • get-library-docs - Get documentation
    • +
+

Supports: Rails, React, Next.js, Vue, Django, Laravel, and more than 100 others

+
+
+
+
+ + +
+
+

Get Started in Seconds

+

+ Install the plugin and start using AI-powered development tools immediately. +

+
+ +
+
+
1
+
+

Add the Marketplace

+
+ 
claude /plugin marketplace add https://github.com/EveryInc/every-marketplace
+
+
+
+
+
2
+
+

Install the Plugin

+
+ 
claude /plugin install compounding-engineering
+
+
+
+
+
3
+
+

Start Using

+
+ 
# Run a code review
+/workflows:review PR#123
+
+# Use an agent
+claude agent kieran-rails-reviewer
+
+# Invoke a skill
+skill: gemini-imagegen
+
+
+
+
+
+ + +
+
+

Frequently Asked Questions

+
+
+
+ +

What is Compounding Engineering?

+ + +
+

+ Compounding Engineering is a philosophy that every unit of engineering work should make subsequent + units easier—not harder. This plugin embodies that philosophy with tools that learn from patterns, + automate repetitive tasks, and build institutional knowledge. +

+
+
+
+ +

How do agents differ from skills?

+ + +
+

+ Agents are specialized personas that can be invoked to perform specific tasks + (e.g., code review, research). They're called with claude agent [name]. +

+

+ Skills provide domain expertise that Claude Code can use on-demand. They include + reference materials, templates, and workflows. They're invoked with skill: [name]. +

+
+
+
+ +

Why aren't MCP servers loading automatically?

+ + +
+

+ This is a known issue. As a workaround, manually add the MCP servers to your + .claude/settings.json file. See the README for the exact configuration. +

+
+
+
+ +

Can I use this with languages other than Ruby/Rails?

+ + +
+

+ Yes! While many agents are specialized for Rails, we also have Python and TypeScript reviewers. + The workflow commands, research agents, and skills like gemini-imagegen work with any language. +

+
+
+
+ +

How do I create my own agents or skills?

+ + +
+

+ Use the /create-agent-skill command or the create-agent-skills skill + for expert guidance. The skill includes templates, best practices, and validation workflows. +

+
+
+
+
+ + +
+
+ Free & Open Source +

Transform Your Development Workflow in Minutes

+

+ Install once. Compound forever. Get 23 expert agents, 16 workflow commands, and 11 specialized skills working for you—starting now. +

+
+ + Install Plugin Now + → + + + View on GitHub + +
+

Join 1,000+ developers building smarter with AI-powered workflows

+
+
+
+ + +
+ + + diff --git a/plugins/compounding-engineering/docs/js/main.js b/plugins/compounding-engineering/docs/js/main.js new file mode 100644 index 0000000..bc71913 --- /dev/null +++ b/plugins/compounding-engineering/docs/js/main.js @@ -0,0 +1,225 @@ +/** + * Compounding Engineering Documentation + * Main JavaScript functionality + */ + +document.addEventListener('DOMContentLoaded', () => { + initMobileNav(); + initSmoothScroll(); + initCopyCode(); + initThemeToggle(); +}); + +/** + * Mobile Navigation Toggle + */ +function initMobileNav() { + const mobileToggle = document.querySelector('[data-mobile-toggle]'); + const navigation = document.querySelector('[data-navigation]'); + + if (!mobileToggle || !navigation) return; + + mobileToggle.addEventListener('click', () => { + navigation.classList.toggle('open'); + mobileToggle.classList.toggle('active'); + + // Update aria-expanded + const isOpen = navigation.classList.contains('open'); + mobileToggle.setAttribute('aria-expanded', isOpen); + }); + + // Close menu when clicking outside + document.addEventListener('click', (event) => { + if (!mobileToggle.contains(event.target) && !navigation.contains(event.target)) { + navigation.classList.remove('open'); + mobileToggle.classList.remove('active'); + mobileToggle.setAttribute('aria-expanded', 'false'); + } + }); + + // Close menu when clicking a nav link + navigation.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', () => { + navigation.classList.remove('open'); + mobileToggle.classList.remove('active'); + mobileToggle.setAttribute('aria-expanded', 'false'); + }); + }); +} + +/** + * Smooth Scroll for Anchor Links + */ +function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (!targetElement) return; + + e.preventDefault(); + + const navHeight = document.querySelector('.nav-container')?.offsetHeight || 0; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 24; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + + // Update URL without jumping + history.pushState(null, null, targetId); + }); + }); +} + +/** + * Copy Code Functionality + */ +function initCopyCode() { + document.querySelectorAll('.card-code-block').forEach(block => { + // Create copy button + const copyBtn = document.createElement('button'); + copyBtn.className = 'copy-btn'; + copyBtn.innerHTML = ''; + copyBtn.setAttribute('aria-label', 'Copy code'); + copyBtn.setAttribute('title', 'Copy to clipboard'); + + // Style the button + copyBtn.style.cssText = ` + position: absolute; + top: 8px; + right: 8px; + padding: 6px 10px; + background: rgba(255, 255, 255, 0.1); + border: none; + border-radius: 6px; + color: #94a3b8; + cursor: pointer; + opacity: 0; + transition: all 0.2s ease; + font-size: 14px; + `; + + // Make parent relative for positioning + block.style.position = 'relative'; + block.appendChild(copyBtn); + + // Show/hide on hover + block.addEventListener('mouseenter', () => { + copyBtn.style.opacity = '1'; + }); + + block.addEventListener('mouseleave', () => { + copyBtn.style.opacity = '0'; + }); + + // Copy functionality + copyBtn.addEventListener('click', async () => { + const code = block.querySelector('code'); + if (!code) return; + + try { + await navigator.clipboard.writeText(code.textContent); + copyBtn.innerHTML = ''; + copyBtn.style.color = '#34d399'; + + setTimeout(() => { + copyBtn.innerHTML = ''; + copyBtn.style.color = '#94a3b8'; + }, 2000); + } catch (err) { + console.error('Failed to copy:', err); + copyBtn.innerHTML = ''; + copyBtn.style.color = '#f87171'; + + setTimeout(() => { + copyBtn.innerHTML = ''; + copyBtn.style.color = '#94a3b8'; + }, 2000); + } + }); + }); +} + +/** + * Theme Toggle (Light/Dark) + */ +function initThemeToggle() { + // Check for saved theme preference or default to dark + const savedTheme = localStorage.getItem('theme') || 'dark'; + document.documentElement.className = `theme-${savedTheme}`; + + // Create theme toggle button if it doesn't exist + const existingToggle = document.querySelector('[data-theme-toggle]'); + if (existingToggle) { + existingToggle.addEventListener('click', toggleTheme); + updateThemeToggleIcon(existingToggle, savedTheme); + } +} + +function toggleTheme() { + const html = document.documentElement; + const currentTheme = html.classList.contains('theme-dark') ? 'dark' : 'light'; + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + + html.className = `theme-${newTheme}`; + localStorage.setItem('theme', newTheme); + + const toggle = document.querySelector('[data-theme-toggle]'); + if (toggle) { + updateThemeToggleIcon(toggle, newTheme); + } +} + +function updateThemeToggleIcon(toggle, theme) { + const icon = toggle.querySelector('i'); + if (icon) { + icon.className = theme === 'dark' ? 'fa-solid fa-sun' : 'fa-solid fa-moon'; + } +} + +/** + * Intersection Observer for Animation on Scroll + */ +function initScrollAnimations() { + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + document.querySelectorAll('.agent-card, .command-card, .skill-card, .mcp-card, .stat-card').forEach(card => { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; + observer.observe(card); + }); +} + +// Add visible class styles +const style = document.createElement('style'); +style.textContent = ` + .agent-card.visible, + .command-card.visible, + .skill-card.visible, + .mcp-card.visible, + .stat-card.visible { + opacity: 1 !important; + transform: translateY(0) !important; + } +`; +document.head.appendChild(style); + +// Initialize scroll animations after a short delay +setTimeout(initScrollAnimations, 100); diff --git a/plugins/compounding-engineering/docs/pages/agents.html b/plugins/compounding-engineering/docs/pages/agents.html new file mode 100644 index 0000000..ea79663 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/agents.html @@ -0,0 +1,667 @@ + + + + + + Agent Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Agent Reference

+

+ Complete documentation for all 23 specialized AI agents. Each agent brings deep expertise + in a specific domain and can be invoked individually or orchestrated together. +

+ +
+

How to Use Agents

+
+ 
# Basic invocation
+claude agent [agent-name]
+
+# With a specific message
+claude agent [agent-name] "Your message here"
+
+# Examples
+claude agent kieran-rails-reviewer
+claude agent security-sentinel "Audit the payment flow"
+
+
+ + +
+

Review Agents (10)

+

Code review agents that examine changes from multiple perspectives: conventions, security, performance, architecture, and quality.

+ +
+
+

kieran-rails-reviewer

+ Rails +
+

+ Super senior Rails developer with impeccable taste and an exceptionally high bar for Rails code quality. + Reviews with strict conventions while being pragmatic on new isolated code. +

+

Key Principles

+
    +
  • Existing Code Modifications - Very strict. Added complexity needs strong justification.
    • +
  • New Code - Pragmatic. If it's isolated and works, it's acceptable.
    • +
  • Turbo Streams - Simple turbo streams MUST be inline arrays in controllers.
    • +
  • Testing as Quality - Hard-to-test code = poor structure that needs refactoring.
    • +
  • Naming (5-Second Rule) - Must understand what a view/component does in 5 seconds from its name.
    • +
  • Namespacing - Always use class Module::ClassName pattern.
    • +
  • Duplication > Complexity - Simple duplicated code is better than complex DRY abstractions.
    • +
+
+ 
claude agent kieran-rails-reviewer "Review the UserController"
+
+
+ +
+
+

dhh-rails-reviewer

+ Rails +
+

+ Brutally honest Rails code review from David Heinemeier Hansson's perspective. + Focuses on Rails conventions, simplicity, and avoiding over-engineering. +

+

Key Focus Areas

+
    +
  • Identifies deviations from Rails conventions
    • +
  • Spots JavaScript framework patterns infiltrating Rails
    • +
  • Tears apart unnecessary abstractions
    • +
  • Challenges overengineering and microservices mentality
    • +
+
+ 
claude agent dhh-rails-reviewer
+
+
+ +
+
+

kieran-python-reviewer

+ Python +
+

+ Reviews Python code with an exceptionally high quality bar. Enforces type hints, Pythonic patterns, + and modern Python 3.10+ syntax. +

+

Key Focus Areas

+
    +
  • Type hints for all functions
    • +
  • Pythonic patterns and idioms
    • +
  • Modern Python syntax
    • +
  • Import organization
    • +
  • Module extraction signals
    • +
+
+ 
claude agent kieran-python-reviewer
+
+
+ +
+
+

kieran-typescript-reviewer

+ TypeScript +
+

+ Reviews TypeScript code with an exceptionally high quality bar. Enforces type safety, + modern patterns, and clean architecture. +

+

Key Focus Areas

+
    +
  • No any without justification
    • +
  • Component/module extraction signals
    • +
  • Import organization
    • +
  • Modern TypeScript patterns
    • +
  • Testability assessment
    • +
+
+ 
claude agent kieran-typescript-reviewer
+
+
+ +
+
+

security-sentinel

+ Security +
+

+ Performs security audits, vulnerability assessments, and OWASP compliance checks. + Essential for any code handling authentication, payments, or sensitive data. +

+

Security Checks

+
    +
  • Input validation analysis
    • +
  • SQL injection risk assessment
    • +
  • XSS vulnerability detection
    • +
  • Authentication/authorization audit
    • +
  • Sensitive data exposure scanning
    • +
  • OWASP Top 10 compliance
    • +
  • Hardcoded secrets search
    • +
+
+ 
claude agent security-sentinel "Audit the payment flow"
+
+
+ +
+
+

performance-oracle

+ Performance +
+

+ Analyzes code for performance issues, bottlenecks, and scalability concerns. + Projects performance at 10x, 100x, and 1000x scale. +

+

Analysis Areas

+
    +
  • Algorithmic complexity (Big O notation)
    • +
  • N+1 query pattern detection
    • +
  • Proper index usage verification
    • +
  • Memory management review
    • +
  • Caching opportunity identification
    • +
  • Network usage optimization
    • +
  • Frontend bundle impact
    • +
+
+ 
claude agent performance-oracle
+
+
+ +
+
+

architecture-strategist

+ Architecture +
+

+ Analyzes code changes from an architectural perspective. Evaluates system structure, + SOLID principles, and API contracts. +

+

Analysis Areas

+
    +
  • Overall system structure understanding
    • +
  • Change context within architecture
    • +
  • Architectural violation identification
    • +
  • SOLID principles compliance
    • +
  • Microservice boundary assessment
    • +
  • API contract evaluation
    • +
+
+ 
claude agent architecture-strategist
+
+
+ +
+
+

data-integrity-guardian

+ Data +
+

+ Reviews database migrations, data models, and data persistence code. + Ensures data safety and privacy compliance. +

+

Review Areas

+
    +
  • Migration safety and reversibility
    • +
  • Data constraint validation
    • +
  • Transaction boundary review
    • +
  • Referential integrity preservation
    • +
  • Privacy compliance (GDPR, CCPA)
    • +
  • Data corruption scenario checking
    • +
+
+ 
claude agent data-integrity-guardian
+
+
+ +
+
+

pattern-recognition-specialist

+ Patterns +
+

+ Analyzes code for design patterns, anti-patterns, naming conventions, and duplication. + Uses tools like jscpd for duplication detection. +

+

Detection Areas

+
    +
  • Design patterns (Factory, Singleton, Observer, etc.)
    • +
  • Anti-patterns and code smells
    • +
  • TODO/FIXME comments
    • +
  • God objects and circular dependencies
    • +
  • Naming consistency
    • +
  • Code duplication
    • +
+
+ 
claude agent pattern-recognition-specialist
+
+
+ +
+
+

code-simplicity-reviewer

+ Quality +
+

+ Ensures code is as simple and minimal as possible. Applies YAGNI rigorously + and challenges unnecessary abstractions. +

+

Simplification Checks

+
    +
  • Analyze every line for necessity
    • +
  • Simplify complex logic
    • +
  • Remove redundancy and duplication
    • +
  • Challenge abstractions
    • +
  • Optimize for readability
    • +
  • Eliminate premature generalization
    • +
+
+ 
claude agent code-simplicity-reviewer
+
+
+
+ + +
+

Research Agents (4)

+

Research agents that gather information from documentation, repositories, and git history to inform development decisions.

+ +
+
+

framework-docs-researcher

+ Research +
+

+ Gathers comprehensive documentation and best practices for frameworks, libraries, or dependencies. +

+

Capabilities

+
    +
  • Fetch official framework and library documentation
    • +
  • Identify version-specific constraints and deprecations
    • +
  • Search GitHub for real-world usage examples
    • +
  • Analyze gem/library source code using bundle show
    • +
  • Synthesize findings with practical examples
    • +
+
+ 
claude agent framework-docs-researcher "Research Hotwire Turbo patterns"
+
+
+ +
+
+

best-practices-researcher

+ Research +
+

+ Researches and gathers external best practices, documentation, and examples for any technology. +

+

Capabilities

+
    +
  • Leverage multiple sources (Context7 MCP, web search, GitHub)
    • +
  • Evaluate information quality and recency
    • +
  • Synthesize into actionable guidance
    • +
  • Provide code examples and templates
    • +
  • Research issue templates and community engagement
    • +
+
+ 
claude agent best-practices-researcher "Find pagination patterns"
+
+
+ +
+
+

git-history-analyzer

+ Git +
+

+ Archaeological analysis of code repositories to understand evolution and patterns. +

+

Analysis Techniques

+
    +
  • Trace file evolution using git log --follow
    • +
  • Determine code origins using git blame -w -C -C -C
    • +
  • Identify patterns from commit history
    • +
  • Map key contributors and expertise areas
    • +
  • Extract historical patterns of issues and fixes
    • +
+
+ 
claude agent git-history-analyzer "Analyze changes to User model"
+
+
+ +
+
+

repo-research-analyst

+ Research +
+

+ Conducts thorough research on repository structure, documentation, and patterns. +

+

Analysis Areas

+
    +
  • Architecture and documentation files (ARCHITECTURE.md, README.md, CLAUDE.md)
    • +
  • GitHub issues for patterns and conventions
    • +
  • Issue/PR templates and guidelines
    • +
  • Implementation patterns using ast-grep or rg
    • +
  • Project-specific conventions
    • +
+
+ 
claude agent repo-research-analyst
+
+
+
+ + +
+

Workflow Agents (5)

+

Workflow agents that automate common development tasks like bug reproduction, PR resolution, and linting.

+ +
+
+

bug-reproduction-validator

+ Bugs +
+

+ Verifies whether bug reports are actual bugs through systematic reproduction. + Classifies bugs and provides severity assessment. +

+

Classification Types

+
    +
  • Confirmed - Bug reproduced successfully
    • +
  • Cannot Reproduce - Unable to reproduce
    • +
  • Not a Bug - Expected behavior
    • +
  • Environmental - Environment-specific issue
    • +
  • Data - Data-related issue
    • +
  • User Error - User misunderstanding
    • +
+
+ 
claude agent bug-reproduction-validator
+
+
+ +
+
+

pr-comment-resolver

+ PR +
+

+ Addresses code review comments by implementing requested changes and reporting resolutions. +

+

Workflow

+
    +
  • Analyze code review comments
    • +
  • Plan the resolution before implementation
    • +
  • Implement requested modifications
    • +
  • Verify resolution doesn't break functionality
    • +
  • Provide clear resolution reports
    • +
+
+ 
claude agent pr-comment-resolver
+
+
+ +
+
+

lint

+ Quality +
+

+ Runs linting and code quality checks on Ruby and ERB files. + Uses Haiku model for efficiency. +

+

Tools Run

+
    +
  • bundle exec standardrb - Ruby file checking/fixing
    • +
  • bundle exec erblint --lint-all - ERB templates
    • +
  • bin/brakeman - Security scanning
    • +
+
+ 
claude agent lint
+
+
+ +
+
+

spec-flow-analyzer

+ Testing +
+

+ Analyzes specifications and plans for user flows and gap identification. + Uses Sonnet model for analysis. +

+

Analysis Areas

+
    +
  • Map all possible user flows and permutations
    • +
  • Identify gaps, ambiguities, and missing specifications
    • +
  • Consider different user types, roles, permissions
    • +
  • Analyze error states and edge cases
    • +
  • Generate critical questions requiring clarification
    • +
+
+ 
claude agent spec-flow-analyzer
+
+
+ +
+
+

every-style-editor

+ Content +
+

+ Reviews and edits text content to conform to Every's specific style guide. +

+

Style Checks

+
    +
  • Title case in headlines, sentence case elsewhere
    • +
  • Company singular/plural usage
    • +
  • Remove overused words (actually, very, just)
    • +
  • Enforce active voice
    • +
  • Apply formatting rules (Oxford commas, em dashes)
    • +
+
+ 
claude agent every-style-editor
+
+
+
+ + +
+

Design Agents (3)

+

Design agents that help with UI implementation, Figma synchronization, and iterative design refinement.

+ +
+
+

design-iterator

+ Design +
+

+ Systematic UI/UX design refinement through iterative improvements. + Takes screenshots, analyzes, implements changes, and repeats. +

+

Process

+
    +
  • Take focused screenshots of target elements
    • +
  • Analyze current state and identify 3-5 improvements
    • +
  • Implement targeted CSS/design changes
    • +
  • Document changes made
    • +
  • Repeat for specified iterations (default 10)
    • +
+
+ 
claude agent design-iterator
+
+
+ +
+
+

figma-design-sync

+ Figma +
+

+ Automatically detects and fixes visual differences between Figma designs and web implementations. + Uses Sonnet model. +

+

Workflow

+
    +
  • Extract design specifications from Figma
    • +
  • Capture implementation screenshots
    • +
  • Conduct systematic visual comparison
    • +
  • Make precise code changes to fix discrepancies
    • +
  • Verify implementation matches design
    • +
+
+ 
claude agent figma-design-sync
+
+
+ +
+
+

design-implementation-reviewer

+ Review +
+

+ Verifies UI implementations match Figma design specifications. + Uses Opus model for detailed analysis. +

+

Comparison Areas

+
    +
  • Layouts and structure
    • +
  • Typography (fonts, sizes, weights)
    • +
  • Colors and themes
    • +
  • Spacing and alignment
    • +
  • Different viewport sizes
    • +
+
+ 
claude agent design-implementation-reviewer
+
+
+
+ + +
+

Documentation Agent (1)

+ +
+
+

ankane-readme-writer

+ Docs +
+

+ Creates/updates README files following Ankane-style template for Ruby gems. + Optimized for conciseness with every sentence kept to 15 words or less. +

+

Section Order

+
    +
  1. Header (title + description)
    2. +
  2. Installation
    3. +
  3. Quick Start
    4. +
  4. Usage
    5. +
  5. Options
    6. +
  6. Upgrading
    7. +
  7. Contributing
    8. +
  8. License
    9. +
+

Style Guidelines

+
    +
  • Imperative voice throughout
    • +
  • 15 words max per sentence
    • +
  • Single-purpose code fences
    • +
  • Up to 4 badges maximum
    • +
  • No HTML comments
    • +
+
+ 
claude agent ankane-readme-writer
+
+
+
+ + + +
+
+
+ + + + + diff --git a/plugins/compounding-engineering/docs/pages/changelog.html b/plugins/compounding-engineering/docs/pages/changelog.html new file mode 100644 index 0000000..b102d63 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/changelog.html @@ -0,0 +1,495 @@ + + + + + + Changelog - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Changelog

+

+ All notable changes to the compounding-engineering plugin. This project follows + Semantic Versioning and + Keep a Changelog conventions. +

+ + +
+
+

v2.6.0

+ 2024-11-26 +
+ +
+

Removed

+
    +
  • + feedback-codifier agent - Removed from workflow agents. + Agent count reduced from 24 to 23. +
    • +
+
+
+ + +
+
+

v2.5.0

+ 2024-11-25 +
+ +
+

Added

+
    +
  • + /report-bug command - New slash command for reporting bugs in the + compounding-engineering plugin. Provides a structured workflow that gathers bug information + through guided questions, collects environment details automatically, and creates a GitHub + issue in the EveryInc/every-marketplace repository. +
    • +
+
+
+ + +
+
+

v2.4.1

+ 2024-11-24 +
+ +
+

Improved

+
    +
  • + design-iterator agent - Added focused screenshot guidance: always capture + only the target element/area instead of full page screenshots. Includes browser_resize + recommendations, element-targeted screenshot workflow using browser_snapshot refs, and + explicit instruction to never use fullPage mode. +
    • +
+
+
+ + +
+
+

v2.4.0

+ 2024-11-24 +
+ +
+

Fixed

+
    +
  • + MCP Configuration - Moved MCP servers back to plugin.json + following working examples from anthropics/life-sciences plugins. +
    • +
  • + Context7 URL - Updated to use HTTP type with correct endpoint URL. +
    • +
+
+
+ + +
+
+

v2.3.0

+ 2024-11-24 +
+ +
+

Changed

+
    +
  • + MCP Configuration - Moved MCP servers from inline plugin.json + to separate .mcp.json file per Claude Code best practices. +
    • +
+
+
+ + +
+
+

v2.2.1

+ 2024-11-24 +
+ +
+

Fixed

+
    +
  • + Playwright MCP Server - Added missing "type": "stdio" field + required for MCP server configuration to load properly. +
    • +
+
+
+ + +
+
+

v2.2.0

+ 2024-11-24 +
+ +
+

Added

+
    +
  • + Context7 MCP Server - Bundled Context7 for instant framework documentation + lookup. Provides up-to-date docs for Rails, React, Next.js, and more than 100 other frameworks. +
    • +
+
+
+ + +
+
+

v2.1.0

+ 2024-11-24 +
+ +
+

Added

+
    +
  • + Playwright MCP Server - Bundled @playwright/mcp for browser + automation across all projects. Provides screenshot, navigation, click, fill, and evaluate tools. +
    • +
+
+ +
+

Changed

+
    +
  • Replaced all Puppeteer references with Playwright across agents and commands: +
      +
    • bug-reproduction-validator agent
      • +
    • design-iterator agent
      • +
    • design-implementation-reviewer agent
      • +
    • figma-design-sync agent
      • +
    • generate_command command
      • +
    +
    • +
+
+
+ + +
+
+

v2.0.2

+ 2024-11-24 +
+ +
+

Changed

+
    +
  • + design-iterator agent - Updated description to emphasize proactive usage + when design work isn't coming together on first attempt. +
    • +
+
+
+ + +
+
+

v2.0.1

+ 2024-11-24 +
+ +
+

Added

+
    +
  • CLAUDE.md - Project instructions with versioning requirements
    • +
  • docs/solutions/plugin-versioning-requirements.md - Workflow documentation
    • +
+
+
+ + +
+
+

v2.0.0

+ 2024-11-24 + Major Release +
+ +

+ Major reorganization consolidating agents, commands, and skills from multiple sources into + a single, well-organized plugin. +

+ +
+

Added

+ +

New Agents (seven)

+
    +
  • design-iterator - Iteratively refine UI components through systematic design iterations
    • +
  • design-implementation-reviewer - Verify UI implementations match Figma design specifications
    • +
  • figma-design-sync - Synchronize web implementations with Figma designs
    • +
  • bug-reproduction-validator - Systematically reproduce and validate bug reports
    • +
  • spec-flow-analyzer - Analyze user flows and identify gaps in specifications
    • +
  • lint - Run linting and code quality checks on Ruby and ERB files
    • +
  • ankane-readme-writer - Create READMEs following Ankane-style template for Ruby gems
    • +
+ +

New Commands (nine)

+
    +
  • /changelog - Create engaging changelogs for recent merges
    • +
  • /plan_review - Multi-agent plan review in parallel
    • +
  • /resolve_parallel - Resolve TODO comments in parallel
    • +
  • /resolve_pr_parallel - Resolve PR comments in parallel
    • +
  • /reproduce-bug - Reproduce bugs using logs and console
    • +
  • /prime - Prime/setup command
    • +
  • /create-agent-skill - Create or edit Claude Code skills
    • +
  • /heal-skill - Fix skill documentation issues
    • +
  • /workflows:codify - Document solved problems for knowledge base
    • +
+ +

New Skills (10)

+
    +
  • andrew-kane-gem-writer - Write Ruby gems following Andrew Kane's patterns
    • +
  • codify-docs - Capture solved problems as categorized documentation
    • +
  • create-agent-skills - Expert guidance for creating Claude Code skills
    • +
  • dhh-ruby-style - Write Ruby/Rails code in DHH's 37signals style
    • +
  • dspy-ruby - Build type-safe LLM applications with DSPy.rb
    • +
  • every-style-editor - Review copy for Every's style guide compliance
    • +
  • file-todos - File-based todo tracking system
    • +
  • frontend-design - Create production-grade frontend interfaces
    • +
  • git-worktree - Manage Git worktrees for parallel development
    • +
  • skill-creator - Guide for creating effective Claude Code skills
    • +
+
+ +
+

Changed

+

Agents Reorganized by Category

+
    +
  • review/ (10 agents) - Code quality, security, performance reviewers
    • +
  • research/ (four agents) - Documentation, patterns, history analysis
    • +
  • design/ (three agents) - UI/design review and iteration
    • +
  • workflow/ (six agents) - PR resolution, bug validation, linting
    • +
  • docs/ (one agent) - README generation
    • +
+
+ +
+

Summary

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Componentv1.1.0v2.0.0Change
Agents1724+7
Commands615+9
Skills111+10
+
+
+ + +
+
+

v1.1.0

+ 2024-11-22 +
+ +
+

Added

+
    +
  • + gemini-imagegen Skill +
      +
    • Text-to-image generation with Google's Gemini API
      • +
    • Image editing and manipulation
      • +
    • Multi-turn refinement via chat interface
      • +
    • Multiple reference image composition (up to 14 images)
      • +
    • Model support: gemini-2.5-flash-image and gemini-3-pro-image-preview
      • +
    +
    • +
+
+ +
+

Fixed

+
    +
  • Corrected component counts in documentation (17 agents, not 15)
    • +
+
+
+ + +
+
+

v1.0.0

+ 2024-10-09 + Initial Release +
+ +

+ Initial release of the compounding-engineering plugin. +

+ +
+

Added

+ +

17 Specialized Agents

+ +

Code Review (five)

+
    +
  • kieran-rails-reviewer - Rails code review with strict conventions
    • +
  • kieran-python-reviewer - Python code review with quality standards
    • +
  • kieran-typescript-reviewer - TypeScript code review
    • +
  • dhh-rails-reviewer - Rails review from DHH's perspective
    • +
  • code-simplicity-reviewer - Final pass for simplicity and minimalism
    • +
+ +

Analysis & Architecture (four)

+
    +
  • architecture-strategist - Architectural decisions and compliance
    • +
  • pattern-recognition-specialist - Design pattern analysis
    • +
  • security-sentinel - Security audits and vulnerability assessments
    • +
  • performance-oracle - Performance analysis and optimization
    • +
+ +

Research (four)

+
    +
  • framework-docs-researcher - Framework documentation research
    • +
  • best-practices-researcher - External best practices gathering
    • +
  • git-history-analyzer - Git history and code evolution analysis
    • +
  • repo-research-analyst - Repository structure and conventions
    • +
+ +

Workflow (three)

+
    +
  • every-style-editor - Every's style guide compliance
    • +
  • pr-comment-resolver - PR comment resolution
    • +
  • feedback-codifier - Feedback pattern codification
    • +
+ +

Six Slash Commands

+
    +
  • /plan - Create implementation plans
    • +
  • /review - Comprehensive code reviews
    • +
  • /work - Execute work items systematically
    • +
  • /triage - Triage and prioritize issues
    • +
  • /resolve_todo_parallel - Resolve TODOs in parallel
    • +
  • /generate_command - Generate new slash commands
    • +
+ +

Infrastructure

+
    +
  • MIT license
    • +
  • Plugin manifest (plugin.json)
    • +
  • Pre-configured permissions for Rails development
    • +
+
+
+ +
+
+
+ + + diff --git a/plugins/compounding-engineering/docs/pages/commands.html b/plugins/compounding-engineering/docs/pages/commands.html new file mode 100644 index 0000000..38a0404 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/commands.html @@ -0,0 +1,524 @@ + + + + + + Command Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Command Reference

+

+ Complete documentation for all 16 slash commands. Commands automate complex multi-step workflows + by orchestrating multiple agents, tools, and processes. +

+ + +
+

Workflow Commands (four)

+

Core workflow commands that embody the Plan-Delegate-Assess-Codify philosophy.

+ +
+
+ /workflows:plan +
+

+ Transform feature descriptions into well-structured project plans following conventions. +

+

Arguments

+

[feature description, bug report, or improvement idea]

+

Workflow

+
    +
  1. Repository Research (Parallel) - Launch three agents simultaneously: +
      +
    • repo-research-analyst - Project patterns
      • +
    • best-practices-researcher - Industry standards
      • +
    • framework-docs-researcher - Framework documentation
      • +
    +
    2. +
  2. SpecFlow Analysis - Run spec-flow-analyzer for user flows
    3. +
  3. Choose Detail Level: +
      +
    • MINIMAL - Simple bugs/small improvements
      • +
    • MORE - Standard features
      • +
    • A LOT - Major features with phases
      • +
    +
    4. +
  4. Write Plan - Save as plans/<issue_title>.md
    5. +
  5. Review - Call /plan_review for multi-agent feedback
    6. +
+
+
+
+

This command does NOT write code. It only researches and creates the plan.

+
+
+
+ 
/workflows:plan Add OAuth integration for third-party auth
+/workflows:plan Fix N+1 query in user dashboard
+
+
+ +
+
+ /workflows:review +
+

+ Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and worktrees. +

+

Arguments

+

[PR number, GitHub URL, branch name, or "latest"]

+

Workflow

+
    +
  1. Setup - Detect review target, optionally use git-worktree for isolation
    2. +
  2. Launch 12 Parallel Review Agents: +
      +
    • kieran-rails-reviewer, dhh-rails-reviewer
      • +
    • security-sentinel, performance-oracle
      • +
    • architecture-strategist, data-integrity-guardian
      • +
    • pattern-recognition-specialist, git-history-analyzer
      • +
    • And more...
      • +
    +
    3. +
  3. Ultra-Thinking Analysis - Stakeholder perspectives, scenario exploration
    4. +
  4. Simplification Review - Run code-simplicity-reviewer
    5. +
  5. Synthesize Findings - Categorize by severity (P1/P2/P3)
    6. +
  6. Create Todo Files - Using file-todos skill for all findings
    7. +
+
+
+
+

P1 (Critical) findings BLOCK MERGE. Address these before merging.

+
+
+
+ 
/workflows:review 42
+/workflows:review https://github.com/owner/repo/pull/42
+/workflows:review feature-branch-name
+/workflows:review latest
+
+
+ +
+
+ /workflows:work +
+

+ Execute work plans efficiently while maintaining quality and finishing features. +

+

Arguments

+

[plan file, specification, or todo file path]

+

Phases

+
    +
  1. Quick Start +
      +
    • Read plan & clarify requirements
      • +
    • Setup environment (live or worktree)
      • +
    • Create TodoWrite task list
      • +
    +
    2. +
  2. Execute +
      +
    • Task execution loop with progress tracking
      • +
    • Follow existing patterns
      • +
    • Test continuously
      • +
    • Figma sync if applicable
      • +
    +
    3. +
  3. Quality Check +
      +
    • Run test suite
      • +
    • Run linting
      • +
    • Optional reviewer agents for complex changes
      • +
    +
    4. +
  4. Ship It +
      +
    • Create commit with conventional format
      • +
    • Create pull request
      • +
    • Notify with summary
      • +
    +
    5. +
+
+ 
/workflows:work plans/user-authentication.md
+/workflows:work todos/042-ready-p1-performance-issue.md
+
+
+ +
+
+ /workflows:codify +
+

+ Document a recently solved problem for the knowledge base. +

+

Arguments

+

[optional: brief context about the fix]

+

Workflow

+
    +
  1. Preconditions - Verify problem is solved and verified working
    2. +
  2. Launch seven parallel subagents: +
      +
    • Context Analyzer - Extract YAML frontmatter skeleton
      • +
    • Solution Extractor - Identify root cause and solution
      • +
    • Related Docs Finder - Find cross-references
      • +
    • Prevention Strategist - Develop prevention strategies
      • +
    • Category Classifier - Determine docs category
      • +
    • Documentation Writer - Create the file
      • +
    • Optional Specialized Agent - Based on problem type
      • +
    +
    3. +
  3. Create Documentation - File in docs/solutions/[category]/
    4. +
+

Auto-Triggers

+

Phrases: "that worked", "it's fixed", "working now", "problem solved"

+
+ 
/workflows:codify
+/workflows:codify N+1 query optimization
+
+
+
+ + +
+

Utility Commands (12)

+

Specialized commands for specific tasks like changelog generation, bug reporting, and parallel resolution.

+ +
+
+ /changelog +
+

+ Create engaging changelogs for recent merges to main branch. +

+

Arguments

+

[optional: daily|weekly, or time period in days]

+

Output Sections

+
    +
  • Breaking Changes (top priority)
    • +
  • New Features
    • +
  • Bug Fixes
    • +
  • Other Improvements
    • +
  • Shoutouts
    • +
  • Fun Fact
    • +
+
+ 
/changelog daily
+/changelog weekly
+/changelog 7
+
+
+ +
+
+ /create-agent-skill +
+

+ Create or edit Claude Code skills with expert guidance on structure and best practices. +

+

Arguments

+

[skill description or requirements]

+
+ 
/create-agent-skill PDF processing for document analysis
+/create-agent-skill Web scraping with error handling
+
+
+ +
+
+ /generate_command +
+

+ Create a new custom slash command following conventions and best practices. +

+

Arguments

+

[command purpose and requirements]

+
+ 
/generate_command Security audit for codebase
+/generate_command Automated performance testing
+
+
+ +
+
+ /heal-skill +
+

+ Heal skill documentation by applying corrections discovered during execution. +

+

Arguments

+

[optional: specific issue to fix]

+

Approval Options

+
    +
  1. Apply and commit
    2. +
  2. Apply without commit
    3. +
  3. Revise changes
    4. +
  4. Cancel
    5. +
+
+ 
/heal-skill API endpoint URL changed
+/heal-skill parameter validation error
+
+
+ +
+
+ /plan_review +
+

+ Have multiple specialized agents review a plan in parallel. +

+

Arguments

+

[plan file path or plan content]

+

Review Agents

+
    +
  • dhh-rails-reviewer - Rails conventions
    • +
  • kieran-rails-reviewer - Rails best practices
    • +
  • code-simplicity-reviewer - Simplicity and clarity
    • +
+
+ 
/plan_review plans/user-authentication.md
+
+
+ +
+
+ /report-bug +
+

+ Report a bug in the compounding-engineering plugin. +

+

Arguments

+

[optional: brief description of the bug]

+

Information Collected

+
    +
  • Bug category (Agent/Command/Skill/MCP/Installation)
    • +
  • Specific component name
    • +
  • Actual vs expected behavior
    • +
  • Steps to reproduce
    • +
  • Error messages
    • +
  • Environment info (auto-gathered)
    • +
+
+ 
/report-bug Agent not working
+/report-bug Command failing with timeout
+
+
+ +
+
+ /reproduce-bug +
+

+ Reproduce and investigate a bug using logs and console inspection. +

+

Arguments

+

[GitHub issue number]

+

Investigation Process

+
    +
  1. Read GitHub issue details
    2. +
  2. Launch parallel investigation agents
    3. +
  3. Analyze code for failure points
    4. +
  4. Iterate until root cause found
    5. +
  5. Post findings to GitHub issue
    6. +
+
+ 
/reproduce-bug 142
+
+
+ +
+
+ /triage +
+

+ Triage and categorize findings for the CLI todo system. +

+

Arguments

+

[findings list or source type]

+

User Decisions

+
    +
  • "yes" - Create/update todo file, change status to ready
    • +
  • "next" - Skip and delete from todos
    • +
  • "custom" - Modify and re-present
    • +
+
+
+
+

This command does NOT write code. It only categorizes and creates todo files.

+
+
+
+ 
/triage code-review-findings.txt
+/triage security-audit-results
+
+
+ +
+
+ /resolve_parallel +
+

+ Resolve all TODO comments using parallel processing. +

+

Arguments

+

[optional: specific TODO pattern or file]

+

Process

+
    +
  1. Analyze TODO comments from codebase
    2. +
  2. Create dependency graph (mermaid diagram)
    3. +
  3. Spawn parallel pr-comment-resolver agents
    4. +
  4. Commit and push after completion
    5. +
+
+ 
/resolve_parallel
+/resolve_parallel authentication
+/resolve_parallel src/auth/
+
+
+ +
+
+ /resolve_pr_parallel +
+

+ Resolve all PR comments using parallel processing. +

+

Arguments

+

[optional: PR number or current PR]

+

Process

+
    +
  1. Get all unresolved PR comments
    2. +
  2. Create TodoWrite list
    3. +
  3. Launch parallel pr-comment-resolver agents
    4. +
  4. Commit, resolve threads, and push
    5. +
+
+ 
/resolve_pr_parallel
+/resolve_pr_parallel 123
+
+
+ +
+
+ /resolve_todo_parallel +
+

+ Resolve all pending CLI todos using parallel processing. +

+

Arguments

+

[optional: specific todo ID or pattern]

+

Process

+
    +
  1. Get unresolved TODOs from /todos/*.md
    2. +
  2. Analyze dependencies
    3. +
  3. Spawn parallel agents
    4. +
  4. Commit, mark as resolved, push
    5. +
+
+ 
/resolve_todo_parallel
+/resolve_todo_parallel 042
+/resolve_todo_parallel p1
+
+
+ +
+
+ /prime +
+

+ Prime/setup command for project initialization. +

+
+ 
/prime
+
+
+
+ + + +
+
+
+ + + + + diff --git a/plugins/compounding-engineering/docs/pages/getting-started.html b/plugins/compounding-engineering/docs/pages/getting-started.html new file mode 100644 index 0000000..5451afd --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/getting-started.html @@ -0,0 +1,598 @@ + + + + + + Getting Started - Compounding Engineering + + + + + + + + + + + +
+
+ + + + +
+
+ + +
+ +
+

Getting Started with Compounding Engineering

+

+ This guide will help you install, configure, and start using the Compounding Engineering plugin + for Claude Code. In about five minutes, you'll have access to 23 specialized agents, 16 commands, + 11 skills, and two MCP servers. +

+ + +
+

Installation

+ +

Prerequisites

+
    +
  • Claude Code installed and configured
    • +
  • A GitHub account (for marketplace access)
    • +
  • Node.js 18+ (for MCP servers)
    • +
+ +

Step 1: Add the Marketplace

+

First, add the Every Marketplace to your Claude Code installation:

+
+ 
claude /plugin marketplace add https://github.com/EveryInc/every-marketplace
+
+ +

Step 2: Install the Plugin

+

Install the compounding-engineering plugin from the marketplace:

+
+ 
claude /plugin install compounding-engineering
+
+ +

Step 3: Verify Installation

+

Verify the plugin is installed correctly:

+
+ 
claude /plugin list
+
+

You should see compounding-engineering in the list of installed plugins.

+ +
+
+
+

Known Issue: MCP Servers

+

+ The bundled MCP servers (Playwright and Context7) may not load automatically. + See the MCP Configuration section for the workaround. +

+
+
+
+ + +
+

Quick Start

+ +

Here are the most common ways to use the plugin:

+ +

Run a Code Review

+

The /workflows:review command runs a comprehensive code review using multiple agents in parallel:

+
+ 
# Review a PR by number
+/workflows:review 123
+
+# Review the current branch
+/workflows:review
+
+# Review a specific branch
+/workflows:review feature/my-feature
+
+ +

Use a Specialized Agent

+

Invoke agents directly for specific tasks:

+
+ 
# Rails code review with Kieran's conventions
+claude agent kieran-rails-reviewer "Review the UserController"
+
+# Security audit
+claude agent security-sentinel "Audit authentication flow"
+
+# Research best practices
+claude agent best-practices-researcher "Find pagination patterns for Rails"
+
+ +

Invoke a Skill

+

Skills provide domain expertise on demand:

+
+ 
# Generate images with Gemini
+skill: gemini-imagegen
+
+# Write Ruby in DHH's style
+skill: dhh-ruby-style
+
+# Create a new Claude Code skill
+skill: create-agent-skills
+
+
+ + +
+

Configuration

+ +

MCP Server Configuration

+

+ If MCP servers don't auto-load, add them manually to your .claude/settings.json: +

+
+ 
{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}
+
+ +

Environment Variables

+

Some skills require environment variables:

+ + + + + + + + + + + + + + + +
VariableRequired ForDescription
GEMINI_API_KEYgemini-imagegenGoogle Gemini API key for image generation
+
+ + +
+

The Compounding Engineering Philosophy

+ +
+ Every unit of engineering work should make subsequent units of work easier—not harder. +
+ +

This philosophy manifests in four key practices:

+ +
+
+
+

Plan

+

+ Understand the change needed and its impact before writing code. + Use research agents to gather context, best practices, and examples. +

+
+
+
+

Delegate

+

+ Use specialized AI agents to help with implementation. + Each agent brings deep expertise in its domain. +

+
+
+
+

Assess

+

+ Run comprehensive reviews with multiple perspectives. + Security, performance, architecture—all covered by specialized agents. +

+
+
+
+

Codify

+

+ Document learnings and patterns for future use. + Each solved problem becomes reusable knowledge. +

+
+
+
+ + +
+

Using Agents

+ +

+ Agents are specialized personas that can be invoked to perform specific tasks. + They're designed to bring deep expertise in their domain. +

+ +

Invoking Agents

+
+ 
# Basic syntax
+claude agent [agent-name] "[optional message]"
+
+# Examples
+claude agent kieran-rails-reviewer
+claude agent security-sentinel "Audit the payment flow"
+claude agent git-history-analyzer "Show changes to user model"
+
+ +

Agent Categories

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCountPurpose
Review10Code review, security audits, performance analysis
ResearchfourBest practices, documentation, git history
DesignthreeUI iteration, Figma sync, design review
WorkflowfiveBug reproduction, PR resolution, linting
DocsoneREADME generation
+ +

+ + View All Agents + +

+
+ + +
+

Using Commands

+ +

+ Slash commands automate complex multi-step workflows. They orchestrate + multiple agents, tools, and processes into a single command. +

+ +

Running Commands

+
+ 
# Workflow commands (prefix: /workflows:)
+/workflows:plan
+/workflows:review 123
+/workflows:work
+/workflows:codify
+
+# Utility commands
+/changelog
+/triage
+/reproduce-bug
+
+ +

The Review Workflow

+

The /workflows:review command is the most comprehensive. It:

+
    +
  1. Detects the review target (PR, branch, or current changes)
    2. +
  2. Sets up a git worktree for isolated analysis
    3. +
  3. Runs 10 or more review agents in parallel
    4. +
  4. Synthesizes findings by severity (P1/P2/P3)
    5. +
  5. Creates structured todo files for each finding
    6. +
  6. Generates a summary report
    7. +
+ +

+ + View All Commands + +

+
+ + +
+

Using Skills

+ +

+ Skills provide domain expertise that Claude Code can invoke on-demand. + Unlike agents (which are personas), skills are bodies of knowledge with + templates, references, and workflows. +

+ +

Invoking Skills

+
+ 
# In your prompt, reference the skill
+skill: gemini-imagegen
+
+# Or ask Claude to use it
+"Use the dhh-ruby-style skill to refactor this code"
+
+ +

Skill Structure

+

Skills typically contain:

+
    +
  • SKILL.md - Main documentation and instructions
    • +
  • references/ - Supporting documentation
    • +
  • templates/ - Code templates and patterns
    • +
  • workflows/ - Step-by-step procedures
    • +
  • scripts/ - Executable scripts (if needed)
    • +
+ +

+ + View All Skills + +

+
+ + +
+

Code Review Workflow Guide

+ +

+ The code review workflow is the heart of Compounding Engineering. + Here's how to get the most out of it. +

+ +

Basic Review

+
+ 
# Review a PR
+/workflows:review 123
+
+# Review current branch
+/workflows:review
+
+ +

Understanding Findings

+

Findings are categorized by severity:

+
    +
  • P1 Critical - Blocks merge. Security vulnerabilities, data corruption risks, breaking changes.
    • +
  • P2 Important - Should fix. Performance issues, architectural concerns, reliability problems.
    • +
  • P3 Nice-to-Have - Enhancements. Minor improvements, cleanup, documentation.
    • +
+ +

Working with Todo Files

+

Review findings are stored as todo files in the todos/ directory:

+
+ 
# List all pending todos
+ls todos/*-pending-*.md
+
+# Triage findings
+/triage
+
+# Resolve todos in parallel
+/resolve_todo_parallel
+
+
+ + +
+

Creating Custom Agents

+ +

+ You can create custom agents tailored to your team's needs. + Agents are defined as markdown files with YAML frontmatter. +

+ +

Agent File Structure

+
+ 
---
+name: my-custom-agent
+description: Brief description of what this agent does
+---
+
+# Agent Instructions
+
+You are [role description].
+
+## Your Responsibilities
+1. First responsibility
+2. Second responsibility
+
+## Guidelines
+- Guideline one
+- Guideline two
+
+ +

Agent Location

+

Place custom agents in:

+
    +
  • .claude/agents/ - Project-specific agents
    • +
  • ~/.claude/agents/ - User-wide agents
    • +
+ +
+
+
+

Use the Command

+

+ The easiest way to create agents is with the /create-agent-skill command + or the create-agent-skills skill. +

+
+
+
+ + +
+

Creating Custom Skills

+ +

+ Skills are more complex than agents. They can include references, + templates, workflows, and scripts. +

+ +

Skill Directory Structure

+
+ 
my-skill/
+  SKILL.md           # Main skill file (required)
+  references/        # Supporting documentation
+    concept-one.md
+    concept-two.md
+  templates/         # Code templates
+    basic-template.md
+  workflows/         # Step-by-step procedures
+    workflow-one.md
+  scripts/           # Executable scripts
+    helper.py
+
+ +

SKILL.md Format

+
+ 
---
+name: my-skill
+description: Brief description shown when skill is invoked
+---
+
+# Skill Title
+
+Detailed instructions for using this skill.
+
+## Quick Start
+...
+
+## Reference Materials
+The skill includes references in the `references/` directory.
+
+## Templates
+Use templates from the `templates/` directory.
+
+ +
+
+
+

Expert Guidance

+

+ Use skill: create-agent-skills for comprehensive guidance + on creating effective skills, including best practices and validation. +

+
+
+
+ + + +
+
+
+ + + + + diff --git a/plugins/compounding-engineering/docs/pages/mcp-servers.html b/plugins/compounding-engineering/docs/pages/mcp-servers.html new file mode 100644 index 0000000..94b5a11 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/mcp-servers.html @@ -0,0 +1,406 @@ + + + + + + MCP Servers Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

MCP Servers Reference

+

+ Model Context Protocol (MCP) servers extend Claude Code's capabilities with + browser automation and framework documentation lookup. The plugin bundles + two MCP servers that start automatically when enabled. +

+ +
+
+
+

Known Issue: Auto-Loading

+

+ MCP servers may not load automatically when the plugin is installed. + See Manual Configuration for the workaround. +

+
+
+ + +
+

Playwright

+

+ Browser automation via @playwright/mcp. Enables taking screenshots, + clicking elements, filling forms, and executing JavaScript in a real browser. +

+ +

Tools Provided

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ToolDescription
browser_navigateNavigate to a URL in the browser
browser_take_screenshotCapture a screenshot of the current page or element
browser_clickClick on an element using CSS selector or text
browser_fill_formFill form fields with values
browser_snapshotGet an accessibility tree snapshot of the page
browser_evaluateExecute JavaScript code in the browser context
+ +

Use Cases

+
    +
  • Design Iteration - Take screenshots for UI comparison
    • +
  • Testing - Automate browser interactions
    • +
  • Debugging - Inspect page state and DOM
    • +
  • Data Extraction - Scrape content from web pages
    • +
+ +

Example Usage

+
+ 
# The tools are available when the MCP server is running
+# Claude Code will use them automatically when appropriate
+
+# Example: Taking a screenshot for design review
+"Take a screenshot of the login page"
+
+# Example: Testing a form
+"Navigate to /signup and fill in the email field with test@example.com"
+
+ +

Configuration

+
+ 
{
+  "playwright": {
+    "type": "stdio",
+    "command": "npx",
+    "args": ["-y", "@playwright/mcp@latest"],
+    "env": {}
+  }
+}
+
+
+ + +
+

Context7

+

+ Framework documentation lookup via Context7 MCP. Provides access to + documentation for more than 100 frameworks and libraries. +

+ +

Tools Provided

+ + + + + + + + + + + + + + + + + +
ToolDescription
resolve-library-idFind the library ID for a framework or package
get-library-docsGet documentation for a specific library
+ +

Supported Frameworks

+

Context7 supports more than 100 frameworks including:

+
+
+

Backend

+
    +
  • Ruby on Rails
    • +
  • Django
    • +
  • Laravel
    • +
  • Express
    • +
  • FastAPI
    • +
  • Spring Boot
    • +
+
+
+

Frontend

+
    +
  • React
    • +
  • Vue.js
    • +
  • Angular
    • +
  • Svelte
    • +
  • Next.js
    • +
  • Nuxt
    • +
+
+
+

Mobile

+
    +
  • React Native
    • +
  • Flutter
    • +
  • SwiftUI
    • +
  • Kotlin
    • +
+
+
+

Tools & Libraries

+
    +
  • Tailwind CSS
    • +
  • PostgreSQL
    • +
  • Redis
    • +
  • GraphQL
    • +
  • Prisma
    • +
  • And many more...
    • +
+
+
+ +

Example Usage

+
+ 
# Claude Code will use Context7 automatically for documentation lookups
+"Look up the Rails ActionCable documentation"
+
+"How does the useEffect hook work in React?"
+
+"What are the best practices for PostgreSQL indexes?"
+
+ +

Configuration

+
+ 
{
+  "context7": {
+    "type": "http",
+    "url": "https://mcp.context7.com/mcp"
+  }
+}
+
+
+ + +
+

Manual Configuration

+

+ If MCP servers don't auto-load with the plugin, add them manually to your + .claude/settings.json file. +

+ +

Project-Level Configuration

+

Add to .claude/settings.json in your project:

+
+ 
{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}
+
+ +

Global Configuration

+

Add to ~/.claude/settings.json to enable for all projects:

+
+ 
{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"],
+      "env": {}
+    },
+    "context7": {
+      "type": "http",
+      "url": "https://mcp.context7.com/mcp"
+    }
+  }
+}
+
+ +

Requirements

+ + + + + + + + + + + + + + + + + +
ServerRequirement
PlaywrightNode.js 18+ and npx
Context7Internet connection (HTTP endpoint)
+ +

Verifying MCP Servers

+

After configuration, restart Claude Code and verify the servers are loaded:

+
+ 
# Check if MCP tools are available
+"What MCP tools do you have access to?"
+
+# Test Playwright
+"Take a screenshot of the current directory listing"
+
+# Test Context7
+"Look up Rails Active Record documentation"
+
+
+ + + +
+
+
+ + + + + + + diff --git a/plugins/compounding-engineering/docs/pages/skills.html b/plugins/compounding-engineering/docs/pages/skills.html new file mode 100644 index 0000000..cefb622 --- /dev/null +++ b/plugins/compounding-engineering/docs/pages/skills.html @@ -0,0 +1,597 @@ + + + + + + Skill Reference - Compounding Engineering + + + + + + + + + + +
+
+ + +
+
+ + +
+ +
+

Skill Reference

+

+ Complete documentation for all 11 intelligent skills. Skills provide deep domain expertise + that Claude Code can invoke on-demand, including references, templates, and workflows. +

+ +
+

How to Use Skills

+
+ 
# In your prompt, reference the skill
+skill: [skill-name]
+
+# Examples
+skill: gemini-imagegen
+skill: dhh-ruby-style
+skill: create-agent-skills
+
+
+ +
+
+
+

Skills vs Agents

+

+ Agents are specialized personas invoked with claude agent [name]. + Skills are bodies of knowledge (references, templates, workflows) invoked with skill: [name]. +

+
+
+ + +
+

Development Tools (7)

+

Skills for code generation, gem writing, and development patterns.

+ +
+
+

create-agent-skills

+ Meta +
+

+ Expert guidance for creating, writing, building, and refining Claude Code Skills. + Use when working with SKILL.md files or authoring new skills. +

+

Capabilities

+
    +
  • Skill architecture and best practices
    • +
  • Router pattern for complex multi-step skills
    • +
  • Progressive disclosure design principles
    • +
  • SKILL.md structure guidance
    • +
  • Asset management (workflows, references, templates, scripts)
    • +
  • XML structure patterns
    • +
+

Workflows Included

+
    +
  • create-new-skill - Start from scratch
    • +
  • add-reference - Add reference documentation
    • +
  • add-template - Add code templates
    • +
  • add-workflow - Add step-by-step procedures
    • +
  • add-script - Add executable scripts
    • +
  • audit-skill - Validate skill structure
    • +
  • verify-skill - Test skill functionality
    • +
+
+ 
skill: create-agent-skills
+
+
+ +
+
+

skill-creator

+ Meta +
+

+ Guide for creating effective skills with a 6-step process. +

+

6-Step Process

+
    +
  1. Understand skill usage patterns with examples
    2. +
  2. Plan reusable skill contents
    3. +
  3. Initialize skill using template
    4. +
  4. Edit skill with clear instructions
    5. +
  5. Package skill into distributable zip
    6. +
  6. Iterate based on testing feedback
    7. +
+
+ 
skill: skill-creator
+
+
+ +
+
+

dhh-ruby-style

+ Rails +
+

+ Write Ruby and Rails code in DHH's distinctive 37signals style. + Triggers on Ruby/Rails code generation or when mentioning DHH, 37signals, Basecamp, HEY. +

+

Key Patterns

+
    +
  • REST Purity - 7 REST actions only
    • +
  • Fat Models - Business logic, authorization, broadcasting in models
    • +
  • Thin Controllers - 1-5 line actions
    • +
  • Current Attributes - Request context
    • +
  • Hotwire/Turbo - Model-level broadcasting
    • +
+

Ruby Syntax Preferences

+
    +
  • Symbol arrays %i[...]
    • +
  • Modern hash syntax
    • +
  • Ternaries for simple conditionals
    • +
  • Bang methods for mutations
    • +
+
+ 
skill: dhh-ruby-style
+
+
+ +
+
+

andrew-kane-gem-writer

+ Ruby +
+

+ Write Ruby gems following Andrew Kane's proven patterns and philosophy. + Based on 100+ gems with 374M+ downloads. +

+

Philosophy

+
    +
  • Simplicity over cleverness
    • +
  • Zero or minimal dependencies
    • +
  • Explicit code over metaprogramming
    • +
  • Rails integration without Rails coupling
    • +
+

Key Patterns

+
    +
  • Class macro DSL for configuration
    • +
  • ActiveSupport.on_load for Rails integration
    • +
  • class << self with attr_accessor
    • +
  • Railtie pattern for hooks
    • +
  • Minitest (no RSpec)
    • +
+

Reference Files

+
    +
  • references/module-organization.md
    • +
  • references/rails-integration.md
    • +
  • references/database-adapters.md
    • +
  • references/testing-patterns.md
    • +
+
+ 
skill: andrew-kane-gem-writer
+
+
+ +
+
+

dspy-ruby

+ AI +
+

+ Build type-safe, composable LLM applications with DSPy.rb. + Use when implementing predictable AI features in Ruby. +

+

Predictor Types

+
    +
  • Predict - Basic inference
    • +
  • ChainOfThought - Reasoning with explanations
    • +
  • ReAct - Tool-using agents with iteration
    • +
  • CodeAct - Dynamic code generation
    • +
+

Supported Providers

+
    +
  • OpenAI (GPT-4, GPT-4o-mini)
    • +
  • Anthropic Claude
    • +
  • Google Gemini
    • +
  • Ollama (free, local)
    • +
  • OpenRouter
    • +
+

Requirements

+ + + + + + + + + + + + + +
OPENAI_API_KEYFor OpenAI provider
ANTHROPIC_API_KEYFor Anthropic provider
GOOGLE_API_KEYFor Gemini provider
+
+ 
skill: dspy-ruby
+
+
+ +
+
+

frontend-design

+ Design +
+

+ Create distinctive, production-grade frontend interfaces. + Generates creative, polished code that avoids generic AI aesthetics. +

+

Design Thinking

+
    +
  • Purpose - What is the interface for?
    • +
  • Tone - What feeling should it evoke?
    • +
  • Constraints - Technical and brand limitations
    • +
  • Differentiation - How to stand out
    • +
+

Focus Areas

+
    +
  • Typography with distinctive font choices
    • +
  • Color & theme coherence with CSS variables
    • +
  • Motion and animation patterns
    • +
  • Spatial composition with asymmetry
    • +
  • Backgrounds (gradients, textures, patterns)
    • +
+
+
+
+

Avoids generic AI aesthetics like Inter fonts, purple gradients, and rounded corners everywhere.

+
+
+
+ 
skill: frontend-design
+
+
+ +
+
+

codify-docs

+ Docs +
+

+ Capture solved problems as categorized documentation with YAML frontmatter for fast lookup. +

+

Auto-Triggers

+

Phrases: "that worked", "it's fixed", "working now", "problem solved"

+

7-Step Process

+
    +
  1. Detect confirmation phrase
    2. +
  2. Gather context (module, symptom, investigation, root cause)
    3. +
  3. Check existing docs for similar issues
    4. +
  4. Generate filename
    5. +
  5. Validate YAML frontmatter
    6. +
  6. Create documentation in category directory
    7. +
  7. Cross-reference related issues
    8. +
+

Categories

+
    +
  • build-errors/
    • +
  • test-failures/
    • +
  • runtime-errors/
    • +
  • performance-issues/
    • +
  • database-issues/
    • +
  • security-issues/
    • +
+
+ 
skill: codify-docs
+
+
+
+ + +
+

Content & Workflow (3)

+

Skills for content editing, task tracking, and parallel development.

+ +
+
+

every-style-editor

+ Content +
+

+ Review and edit copy to ensure adherence to Every's style guide. + Provides systematic line-by-line review. +

+

Four-Phase Review

+
    +
  1. Initial Assessment - Context, type, audience, tone
    2. +
  2. Detailed Line Edit - Sentence structure, punctuation, capitalization
    3. +
  3. Mechanical Review - Spacing, formatting, consistency
    4. +
  4. Recommendations - Actionable improvement suggestions
    5. +
+

Style Checks

+
    +
  • Grammar and punctuation
    • +
  • Style guide compliance
    • +
  • Capitalization rules
    • +
  • Word choice optimization
    • +
  • Formatting consistency
    • +
+
+ 
skill: every-style-editor
+
+
+ +
+
+

file-todos

+ Workflow +
+

+ File-based todo tracking system in the todos/ directory. + Integrates with code review and slash commands. +

+

File Format

+
+ 
# Naming convention
+{issue_id}-{status}-{priority}-{description}.md
+
+# Examples
+001-pending-p1-security-vulnerability.md
+002-ready-p2-performance-optimization.md
+003-complete-p3-code-cleanup.md
+
+

Status Values

+
    +
  • pending - Needs triage
    • +
  • ready - Approved for work
    • +
  • complete - Done
    • +
+

Priority Values

+
    +
  • p1 - Critical
    • +
  • p2 - Important
    • +
  • p3 - Nice-to-have
    • +
+

YAML Frontmatter

+
+ 
---
+status: pending
+priority: p1
+issue_id: "001"
+tags: [security, authentication]
+dependencies: []
+---
+
+
+ 
skill: file-todos
+
+
+ +
+
+

git-worktree

+ Git +
+

+ Manage Git worktrees for isolated parallel development. + Handles creating, listing, switching, and cleaning up worktrees. +

+

Commands

+
+ 
# Create new worktree
+bash scripts/worktree-manager.sh create feature-login
+
+# List worktrees
+bash scripts/worktree-manager.sh list
+
+# Switch to worktree
+bash scripts/worktree-manager.sh switch feature-login
+
+# Clean up completed worktrees
+bash scripts/worktree-manager.sh cleanup
+
+

Integration

+
    +
  • Works with /workflows:review for isolated PR analysis
    • +
  • Works with /workflows:work for parallel feature development
    • +
+

Requirements

+
    +
  • Git 2.8+ (for worktree support)
    • +
  • Worktrees stored in .worktrees/ directory
    • +
+
+ 
skill: git-worktree
+
+
+
+ + +
+

Image Generation (1)

+

AI-powered image generation and editing.

+ + +
+ + + +
+
+
+ + + + +