Pattern Extraction

Extract reusable patterns, skills, and methodology documentation from existing codebases.

Installation

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install extraction

Before Starting

MANDATORY: Read these reference files based on what you're extracting:

Extraction Process

Phase 1: Discovery

Analyze the project to understand what exists.

Scan for project structure:

- Root directory layout
- Key config files (package.json, tailwind.config.*, etc.)
- Documentation (README, docs/, etc.)
- Source organization (src/, app/, components/, etc.)

Identify tech stack:

Look for design system signals:

• •Custom Tailwind config (not defaults)
• •CSS variables / custom properties
• •Theme files
• •Design documentation
• •Mood boards or reference lists

Capture key findings:

• •What's the tech stack?
• •What's the folder structure?
• •Is there a documented design direction?
• •What workflows exist (Makefile, scripts)?

Phase 2: Categorization

Map discoveries to extraction categories, prioritized:

Priority order:

1. •Design Systems — Color tokens, typography, spacing, motion, aesthetic documentation
2. •UI Patterns — Component organization, layouts, interactions
3. •Architecture — Folder structure, data flow, API patterns
4. •Workflows — Build, dev, deploy, CI/CD
5. •Domain-Specific — Patterns unique to this application type

For each category found, note:

• •What specific patterns exist?
• •Where are they defined? (file paths)
• •Are they documented? (comments, docs)
• •Are they worth extracting? (used in multiple places, well-designed)

Filter by value:

Phase 3: Extraction

For each valuable pattern, generate outputs.

Design Systems → Design System Doc + Skill

1. •Read the Tailwind config, CSS files, theme files
2. •Extract actual token values (colors, typography, spacing)
3. •Document the aesthetic direction
4. •Create:
   • •docs/extracted/[project]-design-system.md using design-system.md template
   • •ai/skills/[project]-design-system/SKILL.md if patterns are reusable

Architecture → Methodology Doc

1. •Document folder structure with reasoning
2. •Capture data flow patterns
3. •Note key technical decisions
4. •Create docs/extracted/[project]-summary.md using project-summary.md template

Patterns → Skills

For each pattern worth a skill:

1. •Load skill-quality-criteria.md
2. •Use skill-template.md template
3. •Verify the quality checklist:
   • •Description has WHAT, WHEN, KEYWORDS
   • •No explanations of basics Claude knows
   • •Has specific NEVER list
   • •< 300 lines ideal
4. •Create ai/skills/[project]-[pattern]/SKILL.md

Phase 4: Validation

Before writing output, validate extracted content.

For each skill, verify:

• • Description has WHAT, WHEN, and trigger KEYWORDS
• • >70% expert knowledge (not in base Claude model)
• • <300 lines (max 500)
• • Has "When to Use" section with clear triggers
• • Has code examples (if applicable)
• • Has NEVER Do section with anti-patterns
• • Project-agnostic (no hardcoded project names)

For documentation, verify:

• • Actual values extracted (not placeholders)
• • Templates fully filled out
• • Aesthetic direction documented (for design systems)
• • File paths are correct

Conflict detection: Before creating a new skill, check if similar skills exist:

# Check existing skills in the target repo
ls ai/skills/*/

Phase 5: Output

Write extracted content to target locations.

Methodology Documentation:

docs/extracted/
├── [project]-summary.md       # Overall methodology
├── [project]-design-system.md # Design tokens and aesthetic
└── [project]-architecture.md  # Code patterns (if complex)

Skills:

ai/skills/
└── [project]-[category]/
    ├── SKILL.md
    └── references/  # (if needed for detailed content)

Create docs/extracted/ directory if it doesn't exist.

Extraction Focus Areas

Design System Extraction (Highest Priority)

When a project has intentional design work, extract thoroughly:

Must capture:

• •Color palette (primary, secondary, accent, semantic)
• •Typography (fonts, scale, weights)
• •Spacing scale
• •Motion/animation patterns
• •The "vibe" or aesthetic direction

Look in:

• •tailwind.config.js / tailwind.config.ts
• •globals.css / app.css / root CSS files
• •theme.ts / theme.js
• •Any design documentation

Generate:

1. •Design system documentation with actual values
2. •Skill capturing the aesthetic philosophy (if distinctive)

Workflow Extraction

Look for:

• •Makefile targets
• •package.json scripts
• •Docker configurations
• •CI/CD workflows

Extract:

• •Dev setup commands
• •Build processes
• •Deployment patterns

Error Handling

When extraction fails partially:

1. •Complete what can be extracted
2. •Document gaps in the project summary
3. •Note "Incomplete extraction" in output
4. •Suggest what additional information would be needed

NEVER Do

• •NEVER extract default configurations — Only extract customized, intentional patterns
• •NEVER create skills for basic concepts — Claude already knows React, Tailwind basics
• •NEVER skip the aesthetic — Design philosophy is highest priority
• •NEVER generate skills > 500 lines — Use references/ for detailed content
• •NEVER create skills without good descriptions — Description determines if skill activates
• •NEVER extract one-off solutions — Focus on patterns used in multiple places
• •NEVER skip validation phase — Quality check before writing output
• •NEVER leave project names in skills — Make patterns project-agnostic
• •NEVER create duplicate skills — Check for existing similar skills first

Quality Check Before Finishing

• • Design system captured (if one exists)?
• • Methodology summary created?
• • Skills have proper descriptions (WHAT, WHEN, KEYWORDS)?
• • Skills pass the expert knowledge test?
• • Anti-patterns documented in skills?
• • Output files created in correct locations?

After Extraction: Staging for Refinement

If you're extracting to later consolidate patterns across multiple projects:

Copy results to the skills toolkit repo for staging:

# From this project, copy to the skills repo staging area
cp -r ai/skills/[project]-* /path/to/skills-repo/ai/staging/skills/
cp -r docs/extracted/* /path/to/skills-repo/ai/staging/docs/

Staging folder structure:

ai/staging/
├── skills/           # Extracted skills from multiple projects
│   ├── project-a-design-system/
│   ├── project-b-ui-patterns/
│   └── ...
└── docs/             # Extracted methodology docs
    ├── project-a-summary.md
    ├── project-b-design-system.md
    └── ...

After staging content from multiple projects:

• •Say "refine staged content" or "consolidate staged skills"
• •The refinement process will:
  • •Identify patterns across projects
  • •Consolidate into project-agnostic skills
  • •Update methodology docs with insights
  • •Promote refined skills to active locations

Related Skills

• •Agent: ai/agents/extraction/ — Autonomous extraction workflow
• •Command: /extract-patterns — Quick extraction command
• •Next step: ai/skills/refinement/ — Consolidate extracted patterns
• •Quality criteria: references/skill-quality-criteria.md