
Automatically generate relationship and dependency maps for any component-based codebase (React, Vue, Svelte, Astro, Next.js, Angular, Solid). Auto-detects framework. Supports TOON format for 30-60% token savings. Use when indexing codebases, mapping component relationships, documenting dependencies, or understanding unfamiliar projects. Generates JSON/TOON files mapping component usage, imports, npm dependencies, utilities, CSS, and data queries.
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.
Orchestrate spec-to-PR workflow with session tracking, worktree isolation, and audit trail
Use when implementing features in git worktrees to ensure all changes stay in the correct worktree - prevents "bleeding" of changes back to main branch
Validates project wrangler version on session start, detects breaking changes, and recommends updates
Creates frontend designs with accessibility, responsive layout, and design system integration. Use when designing user interfaces, implementing visual components, or establishing frontend architecture.
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.
Captures user ideas verbatim using MCP issues system with type='idea'. Use when user shares initial thoughts, feature requests, or proposals that need preservation without interpretation.
For use when a new issue/task has been identified and needs to be formally captured using the Wrangler MCP issue management system. Use this skill to create new issues via the issues_create MCP tool with appropriate metadata and structured content.
Implements a single issue with TDD, code review, and fix loop. Use when a specific issue needs implementation -- either standalone or as part of orchestrated spec execution.
Routes root-level markdown files to appropriate directories or deletes obsolete content. Use when project root accumulates analysis files, memos, or documentation needing organization.
Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation
Use when you've developed a broadly useful skill and want to contribute it upstream via pull request - guides process of branching, committing, pushing, and creating PR to contribute skills back to upstream repository
Use when errors occur deep in execution and you need to trace back to find the original trigger - systematically traces bugs backward through call stack, adding instrumentation when needed, to identify source of invalid data or incorrect behavior
Validates roadmap completeness, phase coherence, and alignment with constitution. Use when creating roadmaps, reviewing planning documents, or ensuring strategic consistency.
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
Creates and refines agent skills using TDD methodology with pressure testing and rationalization detection. Use when creating new skills, editing existing skills, testing skills with pressure scenarios, or verifying skills work before deployment.
Update the wrangler plugin to the latest version by clearing all caching layers. Use when user says "update yourself", "update wrangler", or after pushing changes to the wrangler repo.
Analyzes implementation quality, technical debt, and architectural patterns in existing codebases. Use when conducting code audits, planning refactors, or evaluating technical decisions.
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.
Orchestrates specification implementation through planning, execution, verification, and PR publication phases with session recovery. Use when implementing specifications requiring phased workflow and resumable progress tracking.
Analyzes implementation quality, technical debt, and architectural patterns in existing codebases. Use when conducting code audits, planning refactors, or evaluating technical decisions.
Extracts key insights, patterns, and actionable findings from research documents and papers. Use when reviewing documentation, research, or technical materials requiring systematic analysis.
Use when writing or changing tests, adding mocks, or tempted to add test-only methods to production code - prevents testing mock behavior, production pollution with test-only methods, and mocking without understanding dependencies
Verifies features and decisions align with project constitution. Use when evaluating new features, resolving design conflicts, or ensuring constitutional compliance.
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
Solo rapid ideation method based on Google Design Sprint Crazy 8's exercise. Generates 8 distinct solution ideas in 8 minutes through rapid-fire ideation or sketch documentation. Use when working alone and need to explore multiple solution directions quickly, push beyond first obvious ideas, or generate variety before converging. Includes creativity warm-up questions, built-in timer, optional creative constraints, and generates visual HTML/CSS prototypes plus comparison table. NOT for team sessions (traditional Crazy 8's works better for teams).
Develops project constitutional principles through Socratic questioning. Use when establishing design values, creating project governance, or resolving ambiguous design decisions.
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
Initialize design systems for projects via Q&A and templates, with auto-detection when missing
Use when facing 3+ logically independent failures (different features, different root causes) that can be investigated concurrently - dispatches multiple agents to investigate in parallel; requires either parallel-safe test infrastructure OR sequential fix implementation
Use when implementing critical user workflows that span multiple pages/components - tests complete journeys end-to-end using Page Object Model, user-centric selectors, and condition-based waiting; use sparingly (10-15% of tests)
Generate Figma mockups from wrangler specifications with hierarchical file structure and approval tracking
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 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
Finds specific code elements (functions, classes, patterns) using multiple search strategies. Use when searching for implementations, dependencies, or code requiring modification.
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 assumptions, and capturing pain points. Works in solo, team synchronous, or team asynchronous modes. Creates structured problem map document as foundation for HMW exercises and solution generation.
Improves specification quality through completeness checks, clarity verification, and structured feedback. Use when specifications lack detail, have ambiguities, or need quality improvement.
Auto-updates status metrics across governance documents from MCP issue counts. Use when governance metrics are stale or after significant issue status changes requiring documentation refresh.
Systematically researches topics using web search with source verification. Use when investigating unfamiliar technologies, gathering current information, or verifying technical claims.
Conducts systematic code review with quality checks, architectural verification, and actionable feedback. Use when reviewing pull requests, code changes, or ensuring code quality standards.
Tracks implementation progress against specs or plans with completion percentages. Use when monitoring multi-step implementations, reporting status, or identifying blockers.
Launches workflow engine runs in the background, monitors progress via session files, and reports status. Use when running spec-implementation workflows or any workflow engine invocation.
DEPRECATED - Use writing-skills instead. This functionality has been consolidated into writing-skills which now contains both skill creation and testing methodology.
Updates existing git hook configurations for new requirements or tool changes. Use when hook requirements change, adding new quality checks, or modifying test commands.
Use when starting any conversation - establishes mandatory workflows for finding and using skills, including using Skill tool before announcing usage, following brainstorming before coding, and creating TodoWrite todos for checklists
Use when implementing UI components, design systems, or responsive layouts - verifies visual correctness through screenshot comparison and DevTools verification; prevents shipping broken UI
Use when design is complete and you need detailed implementation tasks - creates tracked MCP issues with exact file paths, complete code examples, and verification steps. Optional reference plan file for architecture overview.
Use when creating technical specifications for features, systems, or architectural designs. Creates comprehensive specification documents using the Wrangler MCP issue management system with proper structure and completeness checks.
Use when creating or developing anything, before writing code or implementation plans - refines rough ideas into fully-formed designs through structured Socratic questioning, alternative exploration, and incremental validation
Use when tests have race conditions, timing dependencies, or inconsistent pass/fail behavior - replaces arbitrary timeouts with condition polling; prefer event-based waiting when available (WebSockets, EventEmitters, Observables)
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 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
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 indexes, apply anti-pattern rules, and flag when existing components don't fit a requirement.
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 references/aliases, and hierarchical organization. Triggers include requests to "create Figma variables", "generate variables JSON", "convert design tokens", or working with design system tokens.
Perform comprehensive project housekeeping - update roadmap, reconcile issues with implementation reality, organize completed work, and identify drift. This is a workflow skill that coordinates multiple parallel subagents for efficiency. Use when user says something like "run housekeeping", "do your housekeeping" or "clean up project state".
Initializes complete governance framework including constitution, roadmap, and templates. Use when setting up new projects or establishing governance in existing projects lacking systematic documentation.
Use when implementing any feature or bugfix, before writing implementation code - write the test first, watch it fail, write minimal code to pass; ensures tests actually verify behavior by requiring failure first
Use when completing tasks, implementing major features, or before merging to verify work meets requirements - dispatches reviewing-code subagent to review implementation against plan or requirements before proceeding
Executes test suites with proper error reporting and failure analysis. Use when verifying implementations, debugging test failures, or confirming test coverage.
Configures git hooks for automated testing, linting, and quality enforcement. Use when initializing projects, establishing quality gates, or preventing commit/push errors.
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
Validates governance file completeness, format compliance, and metric accuracy. Use when auditing governance health, after bulk changes, or ensuring documentation integrity.
Generate situational awareness report showing new memos, recent commits, decisions, questions, and roadmap work since user's last reporting-status. Use when user asks "what's new", "catch me up", "status update", "what did I miss", or "recent activity". ONLY invoke via /wrangler:reporting-status command.
Creates frontend designs with accessibility, responsive layout, and design system integration. Use when designing user interfaces, implementing visual components, or establishing frontend architecture.
Removes git worktrees for merged PRs while preserving active development. Use when cleaning up after feature merges or when worktree directory accumulates stale branches.