Analyze a reference codebase to discover and extract reusable architectural patterns. Produces structured pattern descriptions that can be turned into standalone skills. This is a meta-skill that bootstraps the skill evolution chain.
Systematically analyze a reference codebase and extract reusable architectural patterns into structured descriptions. These descriptions become the raw material for new skills (via the skill-template-generator skill).
Read the top-level directory and identify the major code zones:
list_dir <project_root>
list_dir <project_root>/src
Classify each directory into one of these roles:
| Role | Typical Dirs | What to Look For |
|---|---|---|
src/components/ |
| UI classes, base class inheritance, DOM manipulation |
| Services | src/services/ | Data fetching, API calls, circuit breakers, caching |
| Config | src/config/ | Constants, panel definitions, API endpoints, feature flags |
| Styles | src/styles/ | CSS custom properties, theme variables, grid layout |
| Utils | src/utils/ | Helper functions, formatting, DOM utilities |
| API Layer | api/, server/ | Serverless functions, route handlers, CORS, proxy logic |
| Entry Point | src/main.ts | Bootstrap, panel instantiation, scheduler setup |
Find the base component class (usually the most imported file in components/):
read_file <project_root>/src/components/Panel.ts
Extract these structural elements:
Record the pattern as:
COMPONENT PATTERN:
Base class: [name]
Options: [list of constructor params]
DOM tree: [element hierarchy]
States: [loading, error, content]
Lifecycle: [init → fetch → render → destroy]
Key methods: [getElement, showLoading, showError, setContent, refresh, destroy]
Examine 2-3 service files to find the common structure:
read_file <project_root>/src/services/news.ts
read_file <project_root>/src/services/stock-market.ts
Look for:
Record as:
SERVICE PATTERN:
Resilience: [circuit breaker with N failures → cooldown]
Cache: [in-memory, TTL=Xms]
Fetch: [browser fetch → /api/... proxy → external API]
Error: [catch → recordFailure → return default]
Exports: [async functions, not class instances]
Read the server-side proxy layer:
list_dir <project_root>/api/
read_file <project_root>/api/_cors.js
read_file <project_root>/api/stocks.ts # or similar endpoint
Extract:
process.env.* usage, never exposed to frontendCache-Control, s-maxage, stale-while-revalidateread_file <project_root>/src/styles/main.css # first 100 lines for CSS variables
Extract:
grid-template-columns, auto-fill, minmax() valuesread_file <project_root>/src/app/refresh-scheduler.ts
Extract:
For each pattern discovered, produce a structured description:
## Pattern: [Name]
**Source file(s)**: [paths in reference codebase]
**Category**: component | service | api | style | scheduler | utility
### Structure
[Key structural elements — interfaces, classes, functions]
### Key Code
[Minimal representative code snippet, 20-40 lines]
### Conventions
[Naming, file organization, import paths]
### Dependencies
[Other patterns this depends on]
### Adaptation Notes
[What must change when applying to a different project]
The final output should be a list of pattern descriptions, one per architectural concern. These become the input to the skill-template-generator skill, which turns each pattern into a standalone SKILL.md.
../services/, read that service next