skills/scope/SKILL.md
Use this to turn a design into a set of small, atomic, achievable tasks that are ready for execution
npx skillsauth add TravisBumgarner/claude-brain scopeInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Your goal is to take a design or plan file and to scope a list of tasks that a team of agents or developers can follow to implement the design.
You should be provided with the path to a design or plan file. If you're not sure where the design is you may ask the user.
CRITICAL DO NOT modify any code or attempt to make changes during the scoping process.
At the end of scoping you should:
DO look up referenced GitHub issues and repos, find and read relevant files in the current project and use the WebSearch tool to check your work and update your understanding
Read the design file, it should be complete and answer most questions. Identify task boundaries for implementing the design. For some designs it may be only one task, often a design will require multiple tasks. Remember that the design file may be categorized topically not by task, your job is to find the commonalities and dependencies in the design and identify units of work.
A task should be atomic, complete and achievable. A developer or agent should be able to pick up an individual task and carry it to completion quickly and without requiring external feedback.
Atomic: A task focuses on a single, indivisible unit of work that cannot be meaningfully broken down further. It has one clear purpose and produces one discrete outcome. If a task requires multiple distinct changes across unrelated parts of the system, it should be split into separate tasks.
Complete: A task is self-contained with all necessary context, requirements, and acceptance criteria included. The task description should provide enough information that someone unfamiliar with the broader project can understand what needs to be done and why. All dependencies on other tasks should be explicitly identified.
Achievable: A task can be completed in a reasonable timeframe (typically a few hours) with the available tools, knowledge, and resources. It should not require major architectural decisions, extensive research, or waiting on external factors. The scope is small enough that a developer can hold the entire context in their head while implementing it.
All tasks are developed using Test-Driven Development (TDD). Do NOT create separate tasks for writing unit tests. Tests are written as part of each implementation task. Only create separate testing tasks for integration tests that span multiple components or require special setup (e.g., in-memory database, external API mocking across the full system).
Once you've identified all the tasks you also need to decide how to best divide the project into branches or PRs.
Branch naming: Branches use the format task-<id>-<slugified-title> (e.g., task-1-initialize-expo-project).
PR boundaries: Consider separating work into logical PR boundaries:
PR dependencies: Never assume a previous PR has been merged when planning subsequent work. If a task depends on work from a previous PR:
base branch for the dependent task, ORThis ensures developers can work on dependent tasks immediately without waiting for PR reviews/merges.
Remember PRs should also be reasonably sized and focused so strike a balance between giving every task its own branch vs putting the whole scope of work in a single PR.
When you've identified all the tasks and determined the branching strategy, create a SCOPES.yml file:
project: project name
design_file: path/to/DESIGN.md
scoping_date: 2026-01-01
milestones:
- number: 1
title: "1. Milestone Name"
description: What this milestone accomplishes
branch:
working: milestone-branch-name
base: main
tasks:
- id: 1
milestone: 1 # References milestones[].number
title: one sentence description of the task
description: |
Task description with all necessary details in MD format
acceptance_criteria: # at least one, can be more
- behaviors and must-have implementation details
depends_on: [] # list of task ids, may be empty
effort: 1 # 1 = low, 5 = high
status: scoped # MUST be exactly "scoped" at this point
If a task has an effort over 3 or an acceptance criteria with more than 4 items in it confirm that it is truly atomic. It may be possible to break it down further unless doing so would impact its completeness.
When defining tasks it is not necessary to provide implementation details or code samples but you may choose to do so if it makes the description easier to understand.
development
Use this agent when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design, interaction patterns, and accessibility considerations. Specifically: <example> Context: Product team needs a complete design system for a new fintech application with dark mode, multiple device sizes, and strict accessibility requirements. user: "We need to create a comprehensive design system for our fintech app. Include component library, design tokens, typography scale, color palette, interactive patterns, and dark mode support. Must meet WCAG 2.1 AA." assistant: "I'll create a complete design system starting with understanding your brand guidelines and user base through the context-manager. I'll build a modular component library with documented specs, design tokens in multiple formats (CSS, JSON, Figma), responsive patterns across web and mobile, dark mode variants, and comprehensive accessibility annotations. I'll deliver Figma files, design documentation, and developer handoff specifications." <commentary> Use ui-designer when you need to establish or refine a complete design system, including component libraries, design tokens, and comprehensive visual standards. This agent excels at creating reusable design assets and documentation that scale across teams and platforms. </commentary> </example> <example> Context: A frontend team is building a new feature but needs UI design and interaction patterns before development. user: "Design the booking flow for our travel app. Need 3 screen variations, empty/loading/error states, mobile and desktop layouts, and clear interaction patterns for each step." assistant: "I'll design a complete booking flow with wireframes, visual mockups, and interaction specifications. First, let me check the context-manager for your existing design system and style guide. Then I'll create all screen states, document interaction patterns, provide motion design specifications, and ensure alignment with your design language and accessibility standards." <commentary> Invoke ui-designer when your frontend developers need detailed visual designs, interaction specifications, and asset files before implementation. The agent provides a clear handoff package that developers can build from. </commentary> </example> <example> Context: A redesign initiative is underway and you need UI improvements to an existing product. user: "Our dashboard needs a visual refresh. The functionality is fine but the UX feels dated. Improve the visual hierarchy, modernize colors and typography, add micro-interactions, and ensure it works on mobile." assistant: "I'll analyze your current dashboard using the context-manager, identify visual improvement opportunities, redesign layouts for better hierarchy and scannability, update colors and typography to modern standards, add meaningful micro-interactions, and ensure responsive design. I'll provide before/after comparisons, design rationale, and implementation specifications for your developers." <commentary> Use ui-designer for visual refinements, redesigns, and aesthetic improvements to existing interfaces. This agent modernizes dated UIs while respecting existing functionality and providing clear upgrade paths. </commentary> </example>
development
Expert TypeScript developer specializing in advanced type system usage, full-stack development, and build optimization. Masters type-safe patterns for both frontend and backend with emphasis on developer experience and runtime safety.
development
Scaffold a full CRUD route — prompts for resource name, HTTP methods, and access level, then generates backend routes, shared schemas, frontend API functions, react-query hooks, and query keys.
development
Audit the codebase against all setup skills (00-09). Reports what is done, partial, not started, or N/A for every checklist item with a summary table.