Personal collection of 27 reusable Claude Code skills extracted from 12 production projects. Each skill encapsulates a proven pattern — from AI pipeline orchestration to brand extraction to accessibility auditing — as instructional prompts that Claude Code can follow.
| # | Skill | Category | Description |
|---|---|---|---|
| 1 | railway-deploy | deploy | Deploy monorepos to Railway with Dockerfiles, config-as-code, and GraphQL API |
| 2 | infographic-video | content | Transform meeting summaries into ~5 min videos with infographics and dialogue |
| 3 | infographics-generate-style | content | Generate infographic style definitions from reference material |
| 4 | demo-video | content | Build narrated demo videos from screen recordings with AI voiceover and branded slides |
| 5 | highlight-reel | content | Create 60-90s polished highlight reels from screen recordings using Remotion |
| 6 | screenshot-capture | content | Capture full-page and viewport screenshots with overlay removal |
| 7 | sse-streaming | patterns | SSE streaming from Cloudflare Workers with reconnection and state persistence |
| 8 | multi-model-orchestrator | patterns | Multi-stage AI pipelines with role-based model routing |
| 9 | cloudflare-fullstack | patterns | Full-stack apps on Cloudflare Workers with KV, D1, R2, Vectorize |
| 10 | session-context | patterns | Multi-turn session tracking with sessionStorage and KV caching |
| 11 | incremental-processor | patterns | Hash-based change detection for resumable batch processing |
| 12 | multi-provider-fallback | patterns | AI provider abstraction with automatic fallback and result synthesis |
| 13 | brand-extractor | brand-design | Extract brand profiles from URLs or descriptions using multi-tier AI analysis |
| 14 | brand-css-generator | brand-design | Generate CSS custom property overrides from brand profiles |
| 15 | figma-token-sync | brand-design | Bidirectional sync between CSS custom properties and Figma variables |
| 16 | design-system-extractor | brand-design | Extract design tokens from live websites using Puppeteer |
| 17 | generative-page-pipeline | page-generation | Multi-stage AI pipeline: query → intent → blocks → images → published page |
| 18 | conversational-page-builder | page-generation | Interactive AI agent loop for iterative page creation with Claude tool calling |
| 19 | ai-image-generator | page-generation | Multi-provider image generation with fallbacks, caching, and R2 storage |
| 20 | da-content-pipeline | page-generation | Convert HTML to DA format and upload to AEM Edge Delivery Services |
| 21 | site-auditor | audit | Cross-reference query indexes, sitemaps, and navigation for content gaps |
| 22 | pagespeed-audit | audit | Collect and analyze Core Web Vitals and PageSpeed scores |
| 23 | accessibility-auditor | audit | WCAG 2.1 AA compliance and content safety auditing |
| 24 | block-detector | audit | Detect and catalog content blocks on web pages using Puppeteer |
| 25 | content-graph | data-intelligence | Build semantic content graphs for navigation and recommendations |
| 26 | data-intelligence-pipeline | data-intelligence | End-to-end pipeline: fetch → analyze → synthesize → dashboard |
| 27 | report-hub-generator | data-intelligence | Generate single-page HTML report hubs with interactive navigation |
Skills for deploying applications to cloud platforms.
- railway-deploy — Railway monorepo deployment with Dockerfiles and config-as-code
Skills for generating videos, images, and visual content.
- demo-video — Screen recording + script → narrated demo with AI voiceover and branded slides (ElevenLabs + ffmpeg)
- infographic-video — Meeting summary → infographic video pipeline (ElevenLabs + Gemini)
- infographics-generate-style — Style definition generator for infographic production
- highlight-reel — Screen recording → polished demo video (Remotion)
- screenshot-capture — Automated website screenshots with overlay removal (Playwright)
Foundational patterns used across multiple domain skills. These are the building blocks.
- sse-streaming — Server-Sent Events with ReadableStream, EventSource, reconnection
- multi-model-orchestrator — Route tasks to optimal models by role (classify → reason → generate)
- cloudflare-fullstack — Workers + KV + D1 + R2 + Vectorize + AI bindings
- session-context — Session tracking across multi-turn interactions
- incremental-processor — Process large datasets incrementally with hash-based change detection
- multi-provider-fallback — Provider abstraction with automatic fallback chains
┌─────────────────────────────────────────────────────────┐
│ patterns (foundation) │
│ sse-streaming ─── multi-model-orchestrator │
│ │ │ │
│ cloudflare-fullstack session-context │
│ │ │ │
│ incremental-processor multi-provider-fallback │
└───────────┬────────────────┬────────────────┬────────────┘
│ │ │
┌────────▼──┐ ┌───────▼───┐ ┌───────▼───┐
│ page-gen │ │ audit │ │ data │
│ pipeline │ │ tools │ │ intel │
└───────────┘ └───────────┘ └───────────┘
Extract, generate, and sync brand identity assets and design tokens.
- brand-extractor — Multi-tier brand profile extraction (web search → AI knowledge → fallback)
- brand-css-generator — CSS custom properties from brand profiles with WCAG AA enforcement
- figma-token-sync — Push/pull/diff CSS tokens ↔ Figma variables
- design-system-extractor — Puppeteer-based computed style extraction from live sites
brand-extractor ──→ brand-css-generator ──→ figma-token-sync
↑ ↑
design-system-extractor ──────────────┘
End-to-end pipelines for generating web pages with AI.
- generative-page-pipeline — Query → intent → blocks → images → published page
- conversational-page-builder — Multi-turn chat agent for iterative page editing
- ai-image-generator — Multi-provider image generation (fal.ai, Imagen, Gemini)
- da-content-pipeline — HTML → DA format conversion and AEM upload
generative-page-pipeline ──→ da-content-pipeline
│ ↑
├── ai-image-generator │
│ │
conversational-page-builder ─────────┘
Audit websites for content quality, performance, accessibility, and structure.
- site-auditor — Cross-reference indexes, sitemaps, and navigation for 11 gap categories
- pagespeed-audit — Core Web Vitals collection and analysis
- accessibility-auditor — WCAG 2.1 AA compliance with content safety testing
- block-detector — Content block detection with CSS selector generation
Transform raw data into structured intelligence and visual reports.
- content-graph — Semantic content graphs for topic mapping and recommendations
- data-intelligence-pipeline — Slack/document → AI extraction → synthesis → dashboard
- report-hub-generator — Single-page HTML report hubs with interactive components
data-intelligence-pipeline
│
├── content-graph
│
└── report-hub-generator
Skills are installed as a Claude Code plugin. Once installed, Claude Code matches user requests to skills via trigger keywords in the skill description.
# Install the plugin (from this repo root)
claude plugin install .
# Then just ask Claude Code naturally:
# "Set up SSE streaming for my Cloudflare Worker"
# "Extract the brand identity from https://example.com"
# "Audit this website for accessibility issues"
# "Generate a report hub from these analysis results"Each skill lives in its own directory under skills/:
skills/
└── skill-name/
├── SKILL.md # Instructions (required)
├── references/ # Supporting docs (optional)
│ └── schema.md
└── scripts/ # Executable scripts (optional)
└── run.py
- Create a directory under
skills/with a descriptive kebab-case name - Add a
SKILL.mdwith YAML front matter (name,descriptionwith trigger keywords) and instructions - Register it in
.claude-plugin/marketplace.jsonunder the appropriate plugin category - Optionally add
references/for supporting documentation andscripts/for executable tools
See skills/_template/SKILL.md for the minimal template.
This is a personal skills collection, but the patterns are designed to be generally applicable. Each skill documents:
- When to Use — Scenarios that trigger the skill
- Step-by-step Instructions — What Claude Code should do
- Code Snippets — Production-tested patterns from real projects
- Troubleshooting — Common issues with causes and fixes
- Cross-References — Related skills for composition