slashwhy/super-todo

architectural-documentation

Implementation plans, README updates, and architectural decisions. Use when planning features or documenting high-level changes.

backend-routes

Express route handlers with Prisma ORM, async error handling, and security patterns. Use when creating API endpoints, handling requests, or implementing CRUD operations.

code-documentation

TSDoc and inline comment patterns. Use when documenting exported functions, Vue components, or complex logic that needs explanation.

e2e-testing

Playwright E2E testing with Page Objects, API mocking, and Chrome DevTools. Use when writing end-to-end tests, testing user flows, or debugging UI behavior.

generate-api-endpoint

Generate an Express route handler with Prisma queries, explicit field whitelisting, try/catch error handling, and proper HTTP status codes.

generate-component

Generate a Vue 3 component with script setup, TypeScript props/emits, scoped styles using CSS variables, and data-testid attributes.

generate-e2e-test

Generate a Playwright E2E test file with Page Object pattern for a specific user flow.

generate-pinia-store

Generate a Pinia store using Setup Store syntax with TypeScript, async actions, error/loading state, and a $reset() method.

generate-unit-test

Generate a Vitest unit test file for a specific Vue component or Express route with mocking, fixtures, and edge cases.

implement

Implement a feature step by step from PLAN.md (created by /specify or Plan mode). Confirms before each major step. Follows project conventions from AGENTS.md and layer-specific CLAUDE.md files.

mentor

Socratic mentoring — learn through guided questions rather than direct answers. Builds deep understanding of concepts, patterns, and design decisions in this codebase.

onboard

Project orientation guide. Walk through the codebase architecture, conventions, agent/skill system, and get oriented as a new contributor. Adapts to your experience level.

pinia-stores

Pinia store patterns using Setup Store syntax with TypeScript. Use when creating stores, managing global state, or implementing actions and getters.

prisma-database

Prisma schema conventions, migrations, seeding, and query patterns. Use when modifying database schema, creating migrations, or writing complex queries.

security-review

Perform a read-only security review of specified files or a feature. Reports findings by severity (CRITICAL/HIGH/MEDIUM/LOW) using OWASP Top 10 adapted for this Vue 3 + Express + Prisma stack.

specify

Create a detailed implementation plan from a feature description, Jira ticket ID, or Figma design. Resolves all open questions before handing off to /implement. Saves the plan to PLAN.md.

styling

CSS variables, BEM naming, spacing scale, and responsive patterns. Use when styling components, applying design tokens, or implementing responsive layouts.

test-e2e

Write Playwright end-to-end tests using the Page Object pattern. Maps user flows to acceptance criteria. Uses data-testid selectors and waits for network idle.

test-unit

Write Vitest unit tests for a Vue component or Express route. Covers happy paths, error cases, and edge cases using project testing patterns.

unit-testing

Vitest testing patterns for Vue components and Express routes. Use when writing unit tests, integration tests, mocking dependencies, or testing async code.

vue-components

Vue 3 component patterns with Composition API, TypeScript, and project conventions. Use when creating Vue components, handling props, emits, slots, or component lifecycle.

vue-composables

Vue 3 composable patterns with reactive state, lifecycle hooks, and cleanup. Use when creating reusable logic, managing shared state, or implementing custom hooks.

security-review

Security review checklist for API endpoints, data handling, and frontend vulnerabilities. Use when performing security audits, reviewing PRs for security issues, or validating implementations against OWASP guidelines.

e2e-testing

Playwright E2E testing with Page Objects, API mocking, and Chrome DevTools. Use when writing end-to-end tests, testing user flows, or debugging UI behavior.

pinia-stores

Pinia store patterns using Setup Store syntax with TypeScript. Use when creating stores, managing global state, or implementing actions and getters.

styling

CSS variables, BEM naming, spacing scale, and responsive patterns. Use when styling components, applying design tokens, or implementing responsive layouts.

vue-components

Vue 3 component patterns with Composition API, TypeScript, and project conventions. Use when creating Vue components, handling props, emits, slots, or component lifecycle.

vue-composables

Vue 3 composable patterns with reactive state, lifecycle hooks, and cleanup. Use when creating reusable logic, managing shared state, or implementing custom hooks.

architectural-documentation

Implementation plans, README updates, and architectural decisions. Use when planning features or documenting high-level changes.

backend-routes

Express route handlers with Prisma ORM, async error handling, and security patterns. Use when creating API endpoints, handling requests, or implementing CRUD operations.

code-documentation

TSDoc and inline comment patterns. Use when documenting exported functions, Vue components, or complex logic that needs explanation.

prisma-database

Prisma schema conventions, migrations, seeding, and query patterns. Use when modifying database schema, creating migrations, or writing complex queries.

unit-testing

Vitest testing patterns for Vue components and Express routes. Use when writing unit tests, integration tests, mocking dependencies, or testing async code.