Claude Skills by bacchus-labs

Create a new skill that guides agents through visual regression testing for UI components, ensuring visual correctness through screenshot comparison.

Create a new skill that guides agents through accessibility testing for UI components, ensuring WCAG compliance and preventing legal issues.

Create a new skill that guides agents through end-to-end (E2E) testing for critical user workflows, using Page Object Model pattern and user-centric selectors.

Analyzes implementation quality, technical debt, and architectural patterns in existing codebases. Use when conducting code audits, planning refactors, or evaluating technical decisions.

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

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

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.

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)

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 se...

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

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

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 s...

Tracks implementation progress against specs or plans with completion percentages. Use when monitoring multi-step implementations, reporting status, or identifying blockers.

Validates project wrangler version on session start, detects breaking changes, and recommends updates

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 indexes, apply anti-pattern rules, and flag when existing components don't fit a requirement.

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

Creates frontend designs with accessibility, responsive layout, and design system integration. Use when designing user interfaces, implementing visual components, or establishing frontend architecture.

Generate Figma mockups from wrangler specifications with hierarchical file structure and approval tracking

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.

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.

> **For Claude:** REQUIRED SUB-SKILL: Use /wrangler:implement to execute this plan task-by-task. **Goal:** Create unified `/wrangler:implement` skill that replaces both `executing-plans` and `subagent-driven-development` with autonomous, scope-agnostic implementation workflow. **Architecture:** Slash command entry → Scope parser → Task executor with subagent dispatch → Automatic code review & fixes → Final verification → Completion options **Tech Stack:** - Markdown skill file (follows wrangl...

Users need to give high-level goals (e.g., "finish the testing framework spec and implement the authentication feature") and have an AI agent act as both **project manager** and **principal engineer** to orchestrate complete implementation with:

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.

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.

Verifies features and decisions align with project constitution. Use when evaluating new features, resolving design conflicts, or ensuring constitutional compliance.

Removes git worktrees for merged PRs while preserving active development. Use when cleaning up after feature merges or when worktree directory accumulates stale branches.

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.

Develops project constitutional principles through Socratic questioning. Use when establishing design values, creating project governance, or resolving ambiguous design decisions.

Creates frontend designs with accessibility, responsive layout, and design system integration. Use when designing user interfaces, implementing visual components, or establishing frontend architecture.

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 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 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)

Use when implementing UI components, design systems, or responsive layouts - verifies visual correctness through screenshot comparison and DevTools verification; prevents shipping broken UI

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".

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.

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.

Initializes complete governance framework including constitution, roadmap, and templates. Use when setting up new projects or establishing governance in existing projects lacking systematic documentation.

Finds specific code elements (functions, classes, patterns) using multiple search strategies. Use when searching for implementations, dependencies, or code requiring modification.

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 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 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