safe-engineering

Create engaging changelogs for recent merges to main branch

Create or edit Claude Code skills with expert guidance on structure and best practices

Enhance a plan with parallel research agents for each section to add depth, best practices, and implementation details

Create a new custom slash command following conventions and best practices

Fix incorrect SKILL.md files when a skill has wrong instructions or outdated API references

Full autonomous engineering workflow

Have multiple specialized agents review a plan in parallel

Resolve all TODO comments using parallel processing

Resolve all pending CLI todos using parallel processing

Run browser tests on pages affected by current PR or branch

Explore requirements and approaches through collaborative dialogue before planning implementation

Document a recently solved problem to compound your team's knowledge

Transform feature descriptions into well-structured project plans following conventions

Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and worktrees

Execute work plans efficiently while maintaining quality and finishing features

Use this agent when you need to verify that a UI implementation matches its Figma design specifications. This agent should be called after code has been written to implement a design, particularly after HTML/CSS/React components have been created or modified. The agent will visually compare the live implementation against the Figma design and provide detailed feedback on discrepancies.\n\nExamples:\n- <example>\n Context: The user has just implemented a new component based on a Figma design.\n user: "I've finished implementing the hero section based on the Figma design"\n assistant: "I'll review how well your implementation matches the Figma design."\n <commentary>\n Since UI implementation has been completed, use the design-implementation-reviewer agent to compare the live version with Figma.\n </commentary>\n </example>\n- <example>\n Context: After the general code agent has implemented design changes.\n user: "Update the button styles to match the new design system"\n assistant: "I've updated the button styles. Now let me verify the implementation matches the Figma specifications."\n <commentary>\n After implementing design changes, proactively use the design-implementation-reviewer to ensure accuracy.\n </commentary>\n </example>

Use this agent PROACTIVELY when design work isn't coming together on the first attempt. If you've made 1-2 design changes and the result still feels off, suggest using this agent with 5x or 10x iterations for deeper refinement. This agent takes screenshots, analyzes what's not working, implements improvements, and repeats N times to systematically fix design issues. Perfect when colors feel wrong, layouts aren't balanced, or the overall aesthetic needs work that single changes can't achieve. <example>Context: User asks to change button color but result still looks off. user: "Change the button to blue" assistant: [makes change, takes screenshot] "The button is now blue, but I notice the overall color balance still feels off. Would you like me to use the design-iterator agent with 5 iterations to systematically improve the color harmony and visual balance?" <commentary>PROACTIVE USE: After a simple change doesn't fully resolve the design issue, suggest the design-iterator to do deeper work.</commentary></example> <example>Context: User's design request leads to something that doesn't look right. user: "Make the hero section more modern" assistant: [makes initial changes] "I've added some modern elements, but the result isn't quite coming together. This looks like it needs iterative refinement. Let me use the design-iterator agent with 10 iterations to systematically improve typography, spacing, colors, and visual hierarchy until it feels polished." <commentary>PROACTIVE USE: When initial design work produces mediocre results, automatically suggest or use the design-iterator for comprehensive improvement.</commentary></example> <example>Context: User wants explicit iterative refinement. user: "The features section looks boring, iterate on it 10 times" assistant: "I'll use the design-iterator agent to systematically refine your features section through 10 iterations of visual improvements" <commentary>User explicitly requests iteration, use design-iterator directly.</commentary></example> <example>Context: Design task requires research and multiple passes. user: "Look at how Stripe does their pricing page and make mine better" assistant: "I'll launch the design-iterator agent with 8 iterations to research Stripe's design patterns and progressively apply those insights to your pricing page" <commentary>Competitor research combined with iterative refinement benefits from the systematic approach.</commentary></example>

Use this agent when you need to synchronize a web or mobile implementation with its Figma design. This agent uses MUI (web) or Tamagui (mobile) with the unified @safe-global/theme package to ensure design consistency. <example> Context: User has implemented a new MUI component and wants to ensure it matches the Figma design. user: "I've implemented the transaction card component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678" assistant: "I'll use the figma-design-sync agent to compare your MUI implementation with the Figma design and fix any differences." <uses Task tool to launch figma-design-sync agent with the Figma URL> </example> <example> Context: User is working on a mobile component with Tamagui. user: "The mobile balance card doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34" assistant: "Let me use the figma-design-sync agent to identify differences and fix them using Tamagui tokens." <uses Task tool to launch figma-design-sync agent> </example> <example> Context: User wants to verify theme tokens are used correctly. user: "Can you check if the button uses the correct theme colors from our design system?" assistant: "I'll run the figma-design-sync agent to verify the component uses @safe-global/theme tokens correctly." <uses Task tool to launch figma-design-sync agent> </example>

Use this agent when you need to research and gather external best practices, documentation, and examples for any technology, framework, or development practice. This includes finding official documentation, community standards, well-regarded examples from open source projects, and domain-specific conventions. The agent excels at synthesizing information from multiple sources to provide comprehensive guidance on how to implement features or solve problems according to industry standards. <example>Context: User wants to know the best way to structure GitHub issues for their Rails project. user: "I need to create some GitHub issues for our project. Can you research best practices for writing good issues?" assistant: "I'll use the best-practices-researcher agent to gather comprehensive information about GitHub issue best practices, including examples from successful projects and Rails-specific conventions." <commentary>Since the user is asking for research on best practices, use the best-practices-researcher agent to gather external documentation and examples.</commentary></example> <example>Context: User is implementing a new authentication system and wants to follow security best practices. user: "We're adding JWT authentication to our Rails API. What are the current best practices?" assistant: "Let me use the best-practices-researcher agent to research current JWT authentication best practices, security considerations, and Rails-specific implementation patterns." <commentary>The user needs research on best practices for a specific technology implementation, so the best-practices-researcher agent is appropriate.</commentary></example>

Use this agent when you need to gather comprehensive documentation and best practices for frameworks, libraries, or dependencies in your project. This includes fetching official documentation, exploring source code, identifying version-specific constraints, and understanding implementation patterns. <example>Context: The user needs to understand how to properly implement a new feature using a specific library. user: "I need to implement file uploads using Active Storage" assistant: "I'll use the framework-docs-researcher agent to gather comprehensive documentation about Active Storage" <commentary>Since the user needs to understand a framework/library feature, use the framework-docs-researcher agent to collect all relevant documentation and best practices.</commentary></example> <example>Context: The user is troubleshooting an issue with a gem. user: "Why is the turbo-rails gem not working as expected?" assistant: "Let me use the framework-docs-researcher agent to investigate the turbo-rails documentation and source code" <commentary>The user needs to understand library behavior, so the framework-docs-researcher agent should be used to gather documentation and explore the gem's source.</commentary></example>

Use this agent when you need to understand the historical context and evolution of code changes, trace the origins of specific code patterns, identify key contributors and their expertise areas, or analyze patterns in commit history. This agent excels at archaeological analysis of git repositories to provide insights about code evolution and development patterns. <example>Context: The user wants to understand the history and evolution of recently modified files.\nuser: "I've just refactored the authentication module. Can you analyze the historical context?"\nassistant: "I'll use the git-history-analyzer agent to examine the evolution of the authentication module files."\n<commentary>Since the user wants historical context about code changes, use the git-history-analyzer agent to trace file evolution, identify contributors, and extract patterns from the git history.</commentary></example> <example>Context: The user needs to understand why certain code patterns exist.\nuser: "Why does this payment processing code have so many try-catch blocks?"\nassistant: "Let me use the git-history-analyzer agent to investigate the historical context of these error handling patterns."\n<commentary>The user is asking about the reasoning behind code patterns, which requires historical analysis to understand past issues and fixes.</commentary></example>

Use this agent when you need to search institutional learnings in docs/solutions/ for relevant past solutions before implementing a new feature or fixing a problem. This agent efficiently filters documented solutions by frontmatter metadata (tags, category, module, symptoms) to find applicable patterns, gotchas, and lessons learned. The agent excels at preventing repeated mistakes by surfacing relevant institutional knowledge before work begins.\n\n<example>Context: User is about to implement a feature involving email processing.\nuser: "I need to add email threading to the brief system"\nassistant: "I'll use the learnings-researcher agent to check docs/solutions/ for any relevant learnings about email processing or brief system implementations."\n<commentary>Since the user is implementing a feature in a documented domain, use the learnings-researcher agent to surface relevant past solutions before starting work.</commentary></example>\n\n<example>Context: User is debugging a performance issue.\nuser: "Brief generation is slow, taking over 5 seconds"\nassistant: "Let me use the learnings-researcher agent to search for documented performance issues, especially any involving briefs or N+1 queries."\n<commentary>The user has symptoms matching potential documented solutions, so use the learnings-researcher agent to find relevant learnings before debugging.</commentary></example>\n\n<example>Context: Planning a new feature that touches multiple modules.\nuser: "I need to add Stripe subscription handling to the payments module"\nassistant: "I'll use the learnings-researcher agent to search for any documented learnings about payments, integrations, or Stripe specifically."\n<commentary>Before implementing, check institutional knowledge for gotchas, patterns, and lessons learned in similar domains.</commentary></example>

Use this agent when you need to conduct thorough research on a repository's structure, documentation, and patterns. This includes analyzing architecture files, examining GitHub issues for patterns, reviewing contribution guidelines, checking for templates, and searching codebases for implementation patterns. The agent excels at gathering comprehensive information about a project's conventions and best practices.\n\nExamples:\n- <example>\n Context: User wants to understand a new repository's structure and conventions before contributing.\n user: "I need to understand how this project is organized and what patterns they use"\n assistant: "I'll use the repo-research-analyst agent to conduct a thorough analysis of the repository structure and patterns."\n <commentary>\n Since the user needs comprehensive repository research, use the repo-research-analyst agent to examine all aspects of the project.\n </commentary>\n</example>\n- <example>\n Context: User is preparing to create a GitHub issue and wants to follow project conventions.\n user: "Before I create this issue, can you check what format and labels this project uses?"\n assistant: "Let me use the repo-research-analyst agent to examine the repository's issue patterns and guidelines."\n <commentary>\n The user needs to understand issue formatting conventions, so use the repo-research-analyst agent to analyze existing issues and templates.\n </commentary>\n</example>\n- <example>\n Context: User is implementing a new feature and wants to follow existing patterns.\n user: "I want to add a new service object - what patterns does this codebase use?"\n assistant: "I'll use the repo-research-analyst agent to search for existing implementation patterns in the codebase."\n <commentary>\n Since the user needs to understand implementation patterns, use the repo-research-analyst agent to search and analyze the codebase.\n </commentary>\n</example>

Use this agent when reviewing code to ensure features are agent-native - that any action a user can take, an agent can also take, and anything a user can see, an agent can see. This enforces the principle that agents should have parity with users in capability and context. <example>Context: The user added a new feature to their application.\nuser: "I just implemented a new email filtering feature"\nassistant: "I'll use the agent-native-reviewer to verify this feature is accessible to agents"\n<commentary>New features need agent-native review to ensure agents can also filter emails, not just humans through UI.</commentary></example><example>Context: The user created a new UI workflow.\nuser: "I added a multi-step wizard for creating reports"\nassistant: "Let me check if this workflow is agent-native using the agent-native-reviewer"\n<commentary>UI workflows often miss agent accessibility - the reviewer checks for API/tool equivalents.</commentary></example>

Use this agent when you need to analyze code changes from an architectural perspective in the Safe-wallet monorepo. This includes reviewing feature architecture compliance, workspace structure, cross-platform code sharing, and ensuring changes align with the lazy-loading feature pattern. <example>Context: The user is adding a new feature to the monorepo.\nuser: "I've created a new bridge feature in src/features/bridge"\nassistant: "I'll use the architecture-strategist agent to verify this feature follows the lazy-loading architecture pattern"\n<commentary>New features require architectural review to ensure proper folder structure and lazy-loading compliance.</commentary></example><example>Context: The user is modifying shared package code.\nuser: "I've updated the store package with new slices"\nassistant: "Let me analyze this with the architecture-strategist to ensure it works for both web and mobile platforms"\n<commentary>Changes to shared packages require cross-platform compatibility review.</commentary></example>

Use this agent when you need a final review pass to ensure code changes are as simple and minimal as possible. This agent should be invoked after implementation is complete but before finalizing changes, to identify opportunities for simplification, remove unnecessary complexity, and ensure adherence to YAGNI principles. Examples: <example>Context: The user has just implemented a new feature and wants to ensure it's as simple as possible. user: "I've finished implementing the user authentication system" assistant: "Great! Let me review the implementation for simplicity and minimalism using the code-simplicity-reviewer agent" <commentary>Since implementation is complete, use the code-simplicity-reviewer agent to identify simplification opportunities.</commentary></example> <example>Context: The user has written complex business logic and wants to simplify it. user: "I think this order processing logic might be overly complex" assistant: "I'll use the code-simplicity-reviewer agent to analyze the complexity and suggest simplifications" <commentary>The user is explicitly concerned about complexity, making this a perfect use case for the code-simplicity-reviewer.</commentary></example>

Use this agent when you need to review database migrations, data models, or any code that manipulates persistent data. This includes checking migration safety, validating data constraints, ensuring transaction boundaries are correct, and verifying that referential integrity and privacy requirements are maintained. <example>Context: The user has just written a database migration that adds a new column and updates existing records. user: "I've created a migration to add a status column to the orders table" assistant: "I'll use the data-integrity-guardian agent to review this migration for safety and data integrity concerns" <commentary>Since the user has created a database migration, use the data-integrity-guardian agent to ensure the migration is safe, handles existing data properly, and maintains referential integrity.</commentary></example> <example>Context: The user has implemented a service that transfers data between models. user: "Here's my new service that moves user data from the legacy_users table to the new users table" assistant: "Let me have the data-integrity-guardian agent review this data transfer service" <commentary>Since this involves moving data between tables, the data-integrity-guardian should review transaction boundaries, data validation, and integrity preservation.</commentary></example>

Use this agent when you need to analyze code for design patterns, anti-patterns, naming conventions, and code duplication. This agent excels at identifying architectural patterns, detecting code smells, and ensuring consistency across the codebase. <example>Context: The user wants to analyze their codebase for patterns and potential issues.\nuser: "Can you check our codebase for design patterns and anti-patterns?"\nassistant: "I'll use the pattern-recognition-specialist agent to analyze your codebase for patterns, anti-patterns, and code quality issues."\n<commentary>Since the user is asking for pattern analysis and code quality review, use the Task tool to launch the pattern-recognition-specialist agent.</commentary></example><example>Context: After implementing a new feature, the user wants to ensure it follows established patterns.\nuser: "I just added a new service layer. Can we check if it follows our existing patterns?"\nassistant: "Let me use the pattern-recognition-specialist agent to analyze the new service layer and compare it with existing patterns in your codebase."\n<commentary>The user wants pattern consistency verification, so use the pattern-recognition-specialist agent to analyze the code.</commentary></example>

Use this agent when you need to analyze code for performance issues, optimize algorithms, identify bottlenecks, or ensure scalability. This includes reviewing database queries, memory usage, caching strategies, and overall system performance. The agent should be invoked after implementing features or when performance concerns arise.\n\n<example>\nContext: The user has just implemented a new feature that processes user data.\nuser: "I've implemented the user analytics feature. Can you check if it will scale?"\nassistant: "I'll use the performance-oracle agent to analyze the scalability and performance characteristics of your implementation."\n<commentary>\nSince the user is concerned about scalability, use the Task tool to launch the performance-oracle agent to analyze the code for performance issues.\n</commentary>\n</example>\n\n<example>\nContext: The user is experiencing slow API responses.\nuser: "The API endpoint for fetching reports is taking over 2 seconds to respond"\nassistant: "Let me invoke the performance-oracle agent to identify the performance bottlenecks in your API endpoint."\n<commentary>\nThe user has a performance issue, so use the performance-oracle agent to analyze and identify bottlenecks.\n</commentary>\n</example>\n\n<example>\nContext: After writing a data processing algorithm.\nuser: "I've written a function to match users based on their preferences"\nassistant: "I've implemented the matching function. Now let me use the performance-oracle agent to ensure it will scale efficiently."\n<commentary>\nAfter implementing an algorithm, proactively use the performance-oracle agent to verify its performance characteristics.\n</commentary>\n</example>

Use this agent when you need to validate that code follows the Safe-wallet feature architecture patterns. This includes checking lazy-loading compliance, feature.ts structure, ESLint import restrictions, and proper hook/component/service organization. <example>Context: The user has created a new feature.\nuser: "I've added a new bridge feature in src/features/bridge"\nassistant: "I'll use the safe-feature-architecture-reviewer to validate the feature structure and lazy-loading compliance."\n<commentary>New features must follow the lazy-loading architecture pattern with proper structure.</commentary></example><example>Context: The user modified a feature.ts file.\nuser: "I've updated the multichain feature.ts to add new components"\nassistant: "Let me review the feature.ts changes to ensure they follow the flat structure pattern."\n<commentary>Changes to feature.ts must maintain flat structure with direct imports.</commentary></example>

Use this agent when you need to validate multi-chain code patterns in the Safe-wallet. This includes checking that chainId is always paired with safeAddress, chain-specific configurations are handled correctly, and multi-chain edge cases are considered. <example>Context: The user has added chain-specific logic.\nuser: "I've added support for multiple chains in the transaction builder"\nassistant: "I'll use the safe-multichain-reviewer to validate the multi-chain implementation."\n<commentary>Multi-chain code requires careful validation of chainId/safeAddress pairing.</commentary></example><example>Context: The user is storing Safe addresses.\nuser: "I've updated the Safe storage to handle addresses"\nassistant: "Let me review the storage implementation for proper chain association."\n<commentary>Safe addresses must always be stored with their chainId.</commentary></example>

Use this agent when you need to validate Safe SDK usage in the codebase. This includes checking @safe-global/protocol-kit and @safe-global/api-kit patterns, transaction building, owner/threshold validation, and proper error handling. <example>Context: The user has integrated Safe SDK.\nuser: "I've added Safe SDK integration for creating transactions"\nassistant: "I'll use the safe-sdk-reviewer to validate the SDK usage patterns."\n<commentary>Safe SDK integration requires careful validation of transaction building and signing patterns.</commentary></example><example>Context: The user is modifying owner management.\nuser: "I've updated the owner management to use the Safe SDK"\nassistant: "Let me review the owner management implementation for proper validation."\n<commentary>Owner management is security-critical and requires thorough SDK pattern review.</commentary></example>

Use this agent when you need to validate Redux store patterns in the Safe-wallet. This includes checking state design, testing patterns, RTK Query usage, and cross-platform compatibility. <example>Context: The user has added a new Redux slice.\nuser: "I've created a new slice for tracking pending transactions"\nassistant: "I'll use the safe-store-reviewer to validate the Redux patterns."\n<commentary>New Redux slices should follow Safe-wallet patterns for state design and testing.</commentary></example><example>Context: The user is writing store tests.\nuser: "I've added tests for the safes slice"\nassistant: "Let me review the test patterns to ensure they verify state changes correctly."\n<commentary>Redux tests should verify state changes, not action dispatches.</commentary></example>

Use this agent when you need to review TypeScript code changes in the Safe-wallet monorepo with an extremely high quality bar. This agent should be invoked after implementing features, modifying existing code, or creating new TypeScript components. The agent applies strict TypeScript conventions, Safe-wallet feature architecture patterns, and quality standards. Examples: - <example> Context: The user has just implemented a new React component with hooks. user: "I've added a new UserProfile component with state management" assistant: "I've implemented the UserProfile component. Now let me have the Safe TypeScript reviewer check this code." <commentary> Since new component code was written, use the safe-typescript-reviewer agent to ensure it meets Safe-wallet quality standards and feature architecture patterns. </commentary> </example> - <example> Context: The user has created a new feature in the features directory. user: "I've implemented the new bridge feature" assistant: "Let me review this feature to ensure it follows the Safe-wallet feature architecture." <commentary> New features should be reviewed for lazy-loading compliance, proper feature.ts structure, and ESLint import restrictions. </commentary> </example> - <example> Context: The user has added multi-chain logic. user: "I've added support for multiple chains in the transaction builder" assistant: "I'll review the multi-chain implementation for proper chainId/safeAddress handling." <commentary> Multi-chain code requires chainId always paired with safeAddress and proper chain-specific handling. </commentary> </example>

Use this agent when you need to perform security audits, vulnerability assessments, or security reviews of code in the Safe-wallet application. This includes checking for Web3 security vulnerabilities, validating Safe SDK usage, reviewing transaction building, scanning for hardcoded secrets, and ensuring multi-signature wallet security. <example>Context: The user wants to ensure their transaction building code is secure.\nuser: "I've implemented the multi-sig transaction builder. Can you check it for security issues?"\nassistant: "I'll use the security-sentinel agent to perform a comprehensive security review of your transaction building code."\n<commentary>Transaction building is critical in a multi-sig wallet, making this a perfect use case for security review.</commentary></example> <example>Context: The user is adding Web3 wallet connection.\nuser: "I've added wallet connection via Web3-Onboard. Please review the security."\nassistant: "Let me launch the security-sentinel agent to analyze your wallet connection implementation for security vulnerabilities."\n<commentary>Wallet connection involves sensitive operations, requiring thorough security review.</commentary></example> <example>Context: After implementing Safe SDK integration, the user wants security verification.\nuser: "I've integrated the Safe SDK for owner management. Can you check for security issues?"\nassistant: "I'll deploy the security-sentinel agent to review the Safe SDK integration for potential security vulnerabilities."\n<commentary>Safe SDK integration involves critical multi-sig operations requiring security audit.</commentary></example>

Use this agent when you receive a bug report or issue description and need to verify whether the reported behavior is actually a bug. This agent will attempt to reproduce the issue systematically, validate the steps to reproduce, and confirm whether the behavior deviates from expected functionality. <example>\nContext: The user has reported a potential bug in the application.\nuser: "Users are reporting that the email processing fails when there are special characters in the subject line"\nassistant: "I'll use the bug-reproduction-validator agent to verify if this is an actual bug by attempting to reproduce it"\n<commentary>\nSince there's a bug report about email processing with special characters, use the bug-reproduction-validator agent to systematically reproduce and validate the issue.\n</commentary>\n</example>\n<example>\nContext: An issue has been raised about unexpected behavior.\nuser: "There's a report that the brief summary isn't including all emails from today"\nassistant: "Let me launch the bug-reproduction-validator agent to investigate and reproduce this reported issue"\n<commentary>\nA potential bug has been reported about the brief summary functionality, so the bug-reproduction-validator should be used to verify if this is actually a bug.\n</commentary>\n</example>

Use this agent when you need to address comments on pull requests or code reviews by making the requested changes and reporting back on the resolution. This agent handles the full workflow of understanding the comment, implementing the fix, and providing a clear summary of what was done. <example>Context: A reviewer has left a comment on a pull request asking for a specific change to be made.user: "The reviewer commented that we should add error handling to the payment processing method"assistant: "I'll use the pr-comment-resolver agent to address this comment by implementing the error handling and reporting back"<commentary>Since there's a PR comment that needs to be addressed with code changes, use the pr-comment-resolver agent to handle the implementation and resolution.</commentary></example><example>Context: Multiple code review comments need to be addressed systematically.user: "Can you fix the issues mentioned in the code review? They want better variable names and to extract the validation logic"assistant: "Let me use the pr-comment-resolver agent to address these review comments one by one"<commentary>The user wants to resolve code review feedback, so the pr-comment-resolver agent should handle making the changes and reporting on each resolution.</commentary></example>

Use this agent when you have a specification, plan, feature description, or technical document that needs user flow analysis and gap identification. This agent should be used proactively when:\n\n<example>\nContext: The user has just finished drafting a specification for OAuth implementation.\nuser: "Here's the OAuth spec for our new integration:\n[OAuth spec details]"\nassistant: "Let me use the spec-flow-analyzer agent to analyze this OAuth specification for user flows and missing elements."\n<commentary>\nSince the user has provided a specification document, use the Task tool to launch the spec-flow-analyzer agent to identify all user flows, edge cases, and missing clarifications.\n</commentary>\n</example>\n\n<example>\nContext: The user is planning a new social sharing feature.\nuser: "I'm thinking we should add social sharing to posts. Users can share to Twitter, Facebook, and LinkedIn."\nassistant: "This sounds like a feature specification that would benefit from flow analysis. Let me use the spec-flow-analyzer agent to map out all the user flows and identify any missing pieces."\n<commentary>\nThe user is describing a new feature. Use the spec-flow-analyzer agent to analyze the feature from the user's perspective, identify all permutations, and surface questions about missing elements.\n</commentary>\n</example>\n\n<example>\nContext: The user has created a plan for a new onboarding flow.\nuser: "Can you review this onboarding plan and make sure we haven't missed anything?"\nassistant: "I'll use the spec-flow-analyzer agent to thoroughly analyze this onboarding plan from the user's perspective."\n<commentary>\nThe user is explicitly asking for review of a plan. Use the spec-flow-analyzer agent to identify all user flows, edge cases, and gaps in the specification.\n</commentary>\n</example>\n\nCall this agent when:\n- A user presents a feature specification, plan, or requirements document\n- A user asks to review or validate a design or implementation plan\n- A user describes a new feature or integration that needs flow analysis\n- After initial planning sessions to validate completeness\n- Before implementation begins on complex user-facing features\n- When stakeholders need clarity on user journeys and edge cases

Browser automation using Vercel's agent-browser CLI. Use when you need to interact with web pages, fill forms, take screenshots, or scrape data. Alternative to Playwright MCP - uses Bash commands with ref-based element selection. Triggers on "browse website", "fill form", "click button", "take screenshot", "scrape page", "web automation".

Build applications where agents are first-class citizens. Use this skill when designing autonomous agents, creating MCP tools, implementing self-modifying systems, or building apps where features are outcomes achieved by agents operating in a loop.

This skill should be used before implementing features, building components, or making changes. It guides exploring user intent, approaches, and design decisions before planning. Triggers on "let's brainstorm", "help me think through", "what should we build", "explore approaches", ambiguous feature requests, or when the user's request has multiple valid interpretations that need clarification.

Capture solved problems as categorized documentation with YAML frontmatter for fast lookup

Expert guidance for creating, writing, and refining Claude Code Skills. Use when working with SKILL.md files, authoring new skills, improving existing skills, or understanding skill structure and best practices.

This skill should be used when managing the file-based todo tracking system in the todos/ directory. It provides workflows for creating todos, managing status and dependencies, conducting triage, and integrating with slash commands and code review processes.

This skill should be used when creating distinctive, production-grade frontend interfaces with high design quality. It applies when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

This skill should be used when generating and editing images using the Gemini API (Nano Banana Pro). It applies when creating images from text prompts, editing existing images, applying style transfers, generating logos with text, creating stickers, product mockups, or any image generation/manipulation task. Supports text-to-image, image editing, multi-turn refinement, and composition from multiple reference images.

This skill manages Git worktrees for isolated parallel development. It handles creating, listing, switching, and cleaning up worktrees with a simple interactive interface, following KISS principles.

Mobile device automation using Mobile MCP server for iOS and Android. This skill should be used when interacting with mobile apps on simulators, emulators, or physical devices - tapping, swiping, typing, taking screenshots, launching apps, or automating mobile workflows. Triggers on "tap on mobile", "mobile screenshot", "launch app", "swipe", "mobile automation", "test on device", "iOS simulator", "Android emulator".

---

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.