homeflix

Abort a workflow — cleans up worktrees and branches, marks the workspace as aborted.

Finalize the workflow — squash commits into one clean commit, remove worktrees, and close the workspace.

Execute all planned tasks — creates per-task git worktrees, spawns implementer and reviewer agents in dependency order, aggregates results.

Break an approved design into atomic implementation tasks — creates dependency-ordered task specs ready for parallel agent execution.

Review completed implementation — runs final verification across all changes and presents results for user sign-off.

Convert discussion output into a validated design — reads captured requirements and presents architecture for iterative approval.

Kick off a new workflow by discussing requirements — asks clarifying questions, explores trade-offs, and captures decisions in a structured format.

Use when writing or editing any code in this project. Ensures ESLint and Prettier compliance so output needs no auto-fixing.

Use when creating, modifying, or organizing React components. Covers file organization, naming conventions, composition patterns, export rules, prop design, and component splitting strategies specific to this codebase.

Use when creating components that fetch data, defining query options, building loading/error/success states, or working with the Query/Queries wrapper components. Covers the full data fetching pipeline from API clients to rendered UI.

Scaffold a new React component following project conventions — section separators, Props interface, named exports, proper placement in _components/ or components/

Use when building a new page from scratch — library listing pages, detail pages, or browse pages. Covers the full architecture including route structure, page composition, filter systems, grid/detail layouts, and tab patterns.

Use when refactoring a detail page to eliminate prop passthrough by giving each section its own query. Invoke with page path as argument. Covers analysis of component data flow and refactoring sections to use select-based query options.

Use when writing Tailwind CSS, designing component visuals, creating loading skeletons, hover effects, animations, gradients, or any visual/UI work. Covers the visual design system, responsive patterns, dark mode, and polish effects used in this codebase.

Fix TypeScript errors when conditionally selecting between two queryOptions() factories with different query key shapes in TanStack React Query. Use when: (1) useQuery() errors with 'No overload matches this call' when passed a union of two queryOptions results, (2) query keys have different tuple lengths (e.g., ['x', 'movie', number] vs ['x', 'episode', number, number, number]), (3) ternary selection between queryOptions factories fails type checking. Solution: split into separate components that each call useQuery with a single concrete queryOptions type.