Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes - four-phase framework (root cause investigation, pattern analysis, hypothesis testing, implementation) that ensures understanding before attempting solutions.
Use when invalid data causes failures deep in execution, requiring validation at multiple system layers - validates at every layer data passes through to make bugs structurally impossible.
Scan codebase to identify opportunities to replace custom implementations with well-maintained open source libraries. Creates worktree, implements changes, and submits PR for review. Multi-phase workflow with parallel analysis agents.
Locates code patterns, anti-patterns, or specific implementations across codebase. Use when searching for usage examples, identifying inconsistencies, or finding instances requiring updates.
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by verifying work is complete (tests, requirements, code review, TDD compliance) and presenting structured options for merge, PR, or cleanup.
Use when implementing features in git worktrees to ensure all changes stay in the correct worktree - prevents "bleeding" of changes back to main branch.
Foundational problem framing for design sprints and product strategy. Based on Google Design Sprint "Understand" phase methodology. Use when teams need to establish shared understanding before ideation - defining problem statements, identifying users/stakeholders, setting success criteria, documenting constraints and…
Tracks implementation progress against specs or plans with completion percentages. Use when monitoring multi-step implementations, reporting status, or identifying blockers.
Use when implementing any UI - verifies accessibility compliance through automated testing (axe-core), keyboard navigation, screen reader verification, and Lighthouse audits; legally required and ensures inclusive user experience.
Generate AI-ready metadata for design system components to enable intelligent UI generation. Analyzes component structure and generates structured metadata that helps AI understand when and how to use components correctly. Useful for teams building AI-consumable design systems.
Strategic guide for consuming design system metadata to compose components intelligently. Use when generating or modifying UI components and layouts to ensure component reuse, proper variant selection, and adherence to design system patterns. Helps Claude understand project structure, read hierarchical metadata…
Detect and track design token drift between Figma design systems and code implementations - report-only skill that identifies inconsistencies and creates wrangler issues for resolution.
Creates frontend designs with accessibility, responsive layout, and design system integration. Use when designing user interfaces, implementing visual components, or establishing frontend architecture.
Generate JSON files for creating Figma variable collections from text descriptions or design token data. Use when designers need to create or convert design tokens (colors, spacing, typography, etc.) into Figma variables format. Supports multiple modes (Light/Dark), code syntax definitions, variable…
Download YouTube video transcripts when user provides a YouTube URL or asks to download/get/fetch a transcript from YouTube. Also use when user wants to transcribe or get captions/subtitles from a YouTube video.