Jochen AI Rules

中文

---

Overview

Jochen AI Rules is a comprehensive Claude Code plugin that provides:

• Commands: Slash commands for common development workflows
• Agents: Specialized AI agents for different tasks
• Skills: Domain-specific knowledge and best practices
• Hooks: Automated quality checks and formatting

Features

Category	Count
Commands	9
Agents	11
Skills	22
Design Styles	50+
Color Palettes	21

Installation

Option 1: From Marketplace (Recommended)

# Add the marketplace
/plugin marketplace add JochenYang/Jochen-ai-rules

# Install individual skills:
/plugin install agent-teams@jochen-ai-rules
/plugin install api-designer@jochen-ai-rules
/plugin install artifacts-builder@jochen-ai-rules
/plugin install claude-audit@jochen-ai-rules
/plugin install database-engineer@jochen-ai-rules
/plugin install developer@jochen-ai-rules
/plugin install devops-engineer@jochen-ai-rules
/plugin install frontend-design@jochen-ai-rules
/plugin install handoff@jochen-ai-rules
/plugin install mcp-builder@jochen-ai-rules
/plugin install context-codebase@jochen-ai-rules
/plugin install performance-optimizer@jochen-ai-rules
/plugin install phaser-build@jochen-ai-rules
/plugin install product-manager@jochen-ai-rules
/plugin install quality-assurance@jochen-ai-rules
/plugin install reflect@jochen-ai-rules
/plugin install requirements-interview@jochen-ai-rules
/plugin install skills-audit@jochen-ai-rules
/plugin install tdd-workflow@jochen-ai-rules
/plugin install threejs-builder@jochen-ai-rules
/plugin install ui-ux-pro-max@jochen-ai-rules
/plugin install vercel-deploy@jochen-ai-rules

# Install individual agents:
/plugin install agent-bug-analyzer@jochen-ai-rules
/plugin install agent-code-implementer@jochen-ai-rules
/plugin install agent-code-reviewer@jochen-ai-rules
/plugin install agent-database-migration@jochen-ai-rules
/plugin install agent-dev-planner@jochen-ai-rules
/plugin install agent-devops-engineer@jochen-ai-rules
/plugin install agent-performance-optimizer@jochen-ai-rules
/plugin install agent-security-reviewer@jochen-ai-rules
/plugin install agent-story-generator@jochen-ai-rules
/plugin install agent-tdd-guide@jochen-ai-rules
/plugin install agent-ui-sketcher@jochen-ai-rules

# Install individual commands:
/plugin install command-branch@jochen-ai-rules
/plugin install command-build-fix@jochen-ai-rules
/plugin install command-commit@jochen-ai-rules
/plugin install command-orchestrate@jochen-ai-rules
/plugin install command-plan@jochen-ai-rules
/plugin install command-refactor-clean@jochen-ai-rules
/plugin install command-review@jochen-ai-rules
/plugin install command-tdd@jochen-ai-rules

Option 2: Local Development

# Clone the repository
git clone https://github.com/JochenYang/Jochen-ai-rules.git

# Load as local plugin
claude --plugin-dir ./Jochen-ai-rules

Option 3: OpenCode Command Wrapper

OpenCode supports per-project markdown commands under .opencode/commands/. This repository includes:

• .opencode/commands/handoff.md

After opening the project in OpenCode, you can use:

/handoff write <topic-or-existing-file>
/handoff read [handoff-file]

This wrapper delegates to the handoff skill logic and keeps the same default behavior:

• write without an existing file creates a new handoff under repo/progress/handoffs/
• write with an existing handoff path updates that file
• read without a file loads the latest handoff
• read with a file loads the specified handoff

Deterministic Handoff Resolver

The handoff skill includes a cross-platform Python helper at skills/handoff/scripts/handoff.py so file selection does not rely on model guessing.

python skills/handoff/scripts/handoff.py write search-migration --project-root /path/to/project
python skills/handoff/scripts/handoff.py read --project-root /path/to/project

Rules:

• write updates only when the argument points to an existing handoff file
• otherwise write creates a new timestamped file under repo/progress/handoffs/
• read loads the specified file when provided
• otherwise read loads the latest handoff
• if --project-root accidentally points at the installed skill directory, the script returns invalid_project_root instead of guessing

Note: Claude Code ultimately loads these files from your Claude configuration folder (typically under .claude/). This repository keeps agents/, commands/, hooks/, rules/, skills/ at the repo root for development, but documentation may reference .claude/... paths because that is the runtime location.

Releasing

This repository publishes releases from Git tags through release.yml.

1. Update .claude-plugin/marketplace.json metadata.version to the target version, for example 1.3.1.
2. Commit the release-ready changes.
3. Create a matching Git tag in the form vX.Y.Z, for example v1.3.1.
4. Push the commit and tag to GitHub.
5. GitHub Actions automatically generates the release notes and publishes the release.

Release guardrails:

• the tag must match the vX.Y.Z format
• the tag must match .claude-plugin/marketplace.json metadata.version
• manual workflow runs may leave tag empty to infer it from .claude-plugin/marketplace.json
• if a manual workflow run targets a commit without that tag yet, the workflow creates and pushes the missing tag automatically

Example:

git tag v1.3.1
git push origin main
git push origin v1.3.1

Commands

Command	Description
/plan	Create implementation plans with risk assessment
/orchestrate	Orchestrate multi-agent workflows
/commit	Create conventional commits
/review	Code review with quality audit
/tdd	Test-driven development workflow
/branch	Git worktree management
/build-fix	Fix build errors
/refactor-clean	Clean up dead code

Agents

Agent	Description
dev-planner	Implementation planning specialist
code-implementer	Production code implementation
tdd-guide	Test-driven development
code-reviewer	Quality, security, performance audit
security-reviewer	Deep OWASP security audit
database-migration	Schema and data migration
bug-analyzer	Bug investigation and root cause analysis
story-generator	User story generation
ui-sketcher	UI/UX design prototyping
performance-optimizer	Performance bottleneck identification across full stack
devops-engineer	CI/CD pipeline, Docker, Kubernetes, infrastructure setup

Skills

• Developer: Full-stack development workflows
• Database Engineer: Schema design, query optimization, migrations
• API Designer: REST, GraphQL, gRPC design
• Quality Assurance: Testing, security auditing
• Frontend Design: Production-grade frontend implementation with motion, local media assets, and conversion-aware copy
• Handoff: Manual context handoff workflow for writing resume-ready development notes before reset and reading them back later
• UI/UX Pro Max: 50+ design styles, 21 color palettes
• Agent Teams: Multi-agent collaboration
• Three.js Builder: 3D web content creation
• Phaser Build: 2D HTML5 game development
• MCP Builder: MCP server development
• Reflect: Session reflection and learning extraction
• Context Codebase: Project context engine for repo orientation, cached handoff, and task-focused code retrieval
• Claude Audit: Audit .claude/ files for redundant instructions, verbose phrasing, and memory candidates
• Skills Audit: List all skills with line counts, find overlapping scopes and optimization opportunities
• Artifacts Builder: Create interactive Claude artifacts (charts, UI prototypes, tools)
• DevOps Engineer: CI/CD pipeline design, containerization, Kubernetes, monitoring setup
• Performance Optimizer: Profiling-first performance analysis across full stack
• Product Manager: Product requirements, user stories, roadmap planning
• Requirements Interview: Structured requirements gathering through guided interviews
• TDD Workflow: Test-driven development with RED-GREEN-REFACTOR cycle enforcement
• Vercel Deploy: Next.js deployment, environment variables, edge functions
• Jochen Skill Creator: Template and standards for creating new skills

UI/UX Design Capabilities

• 50+ Design Styles: Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, Skeuomorphism, Flat Design, and more
• 21 Color Palettes: Complete color system for various use cases
• 50 Font Pairings: Typography combinations for different contexts
• 20 Chart Types: Data visualization options
• 9 Tech Stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui

UI Components

• Buttons, Modals, Navbars, Sidebars, Cards, Tables, Forms, Charts
• Responsive design support
• Accessibility (WCAG 2.1 AA compliant)
• Animation and micro-interactions
• Dark mode support

Hooks

One production-ready hook is included with platform-specific configurations:

• Prompt Linter: Warns when prompt > 50 words and asks for goal confirmation

Setup

Copy the hooks section from the appropriate file into your Claude settings:

• Windows: use hooks/hooks.windows.json → %APPDATA%\Claude\settings.json
• Linux / macOS: use hooks/hooks.json → ~/.claude/settings.json

Windows (hooks/hooks.windows.json):

{
  "hooks": {
    "UserPromptSubmit": [{ "matcher": "*", "hooks": [{ "type": "command", "command": "powershell -File hooks/prompt-linter.ps1" }] }]
  }
}

Linux / macOS (hooks/hooks.json):

{
  "hooks": {
    "UserPromptSubmit": [{ "matcher": "*", "hooks": [{ "type": "command", "command": "bash hooks/prompt-linter.sh" }] }]
  }
}

Project Structure

Repo layout (this repository):
agents/   commands/   hooks/   skills/   rules/

Runtime layout (Claude config):
.claude/
├── agents/   # AI agent definitions
├── commands/ # Slash commands
├── hooks/    # Hook configurations
├── skills/   # Domain-specific skills
└── rules/    # Coding standards and guidelines

---

License

View License • GitHub • Issues