skills

Use when the user wants to design, plan, write, review, refactor, test, debug, optimize, harden, or otherwise improve production code. Covers feature implementation, code review, system architecture, debugging, performance work, refactoring, test strategy, error handling, edge cases, dependency choices, and technical standards. Handles 'shape this before I build it', 'review my approach', 'what's wrong with this code', 'simplify this mess', 'why is this slow', 'what tests should I write', 'is this the right abstraction'. Sets up engineering standards (STACK.md, PRINCIPLES.md, TESTING.md) so all sub-commands follow the team's posture. Not for visual / UI design (use impeccable instead) or pure documentation.

Autonomous task-execution loop that pulls actionable issues from a task tracker (Linear or Jira), branches from main, implements, tests, opens a GitHub PR with no AI attribution, and self-paces the next iteration. Use when the user runs `/taskloop init` (one-time per-project setup that picks a provider and generates the loop's memory/config files), `/taskloop start` (re-arms the Monitor + ScheduleWakeup so the loop resumes for the current project), `/taskloop stop`, `/taskloop add-rule [slug]`, or `/taskloop status`. Also triggers when the user says "start" / "porneste" / "resume loop" in a working directory that already has a taskloop config under `~/.claude/projects/SLUG/memory/`.

Manage and maintain a TypeScript MCP server using @modelcontextprotocol/sdk with Express and Streamable HTTP/SSE. Supports setup, adding new MCP tools (handler.ts/prompt.ts/type.ts/index.ts), enforcing strict Zod schemas, token-lean prompts (Claude/Grok friendly), manual tool registration, and transport-level API key injection (query/header → env, never in tool params). All code examples use TypeScript (.ts files). Triggers: "setup MCP server", "add MCP tool", "create handler.ts prompt.ts type.ts", "register tool", "refactor MCP prompt", "API key via header/query".

D3.js data visualization in React/Next.js components with PIXEL-PERFECT Figma matching. Use when building interactive charts, graphs, network diagrams, geographic maps, or any custom data visualization with D3.js inside React components. Covers pixel-perfect Figma extraction workflow, iterative visual validation via Playwright, two integration approaches (useRef+useEffect imperative vs declarative React rendering), responsive sizing, TypeScript typing, SSR/Next.js compatibility, accessibility, and performance. Triggers on: 'create a chart', 'add a D3 visualization', 'build a graph component', 'data visualization', 'interactive chart', 'force-directed graph', 'bar chart', 'line chart', 'heatmap', 'scatter plot', 'pie chart', 'chord diagram'.

Carbon Design System icon usage for React components. MANDATORY when any component includes an icon. Use when implementing UI components that need icons, building atoms/molecules/organisms with icon elements, or adding icons to buttons, inputs, navigation, or any other UI element. Covers icon imports, sizing, color, alignment, touch targets, and the V-Shield Design System icon labeling system.

Import vector illustrations from Figma as reusable React atom components. Use when a component or page needs a custom illustration (NOT a standard Carbon icon). Triggers on requests like 'implement this illustration from Figma', 'add this Figma illustration', 'create illustration component', or when a Figma node contains a multi-layer vector illustration (lock, envelope, microscope, etc.). BEFORE creating a new illustration, always check if it already exists in `apps/web-app/src/components/atoms/Illustration*.tsx` and `apps/web-app/public/assets/illustrations/`.

Autonomous pixel-perfect UI implementation loop for Next.js/React using Figma MCP and Playwright. Converts Figma designs to production-ready components with iterative visual validation. **AUTO-TRIGGERS** on ANY request to implement Figma designs including: 'implement this Figma', 'build this page/component from Figma', 'create from Figma design', 'implement design', 'build this block', 'create component from design'. Use for: (1) Building pages/components from Figma, (2) Pixel-perfect accuracy, (3) Responsive layouts, (4) Design token conversion.

STRICT pixel-perfect Figma to Storybook workflow with ENFORCED extraction and iterative component implementation. MANDATORY: Extract exact design → Implement → Iterate until perfect → Move to next. NO shortcuts, NO assumptions, NO batch processing. Use when implementing Figma designs as Storybook components with 100% accuracy requirement.

Launches an autonomous, pixel-perfect UI implementation loop using Figma MCP and Chrome.

Autonomous pixel-perfect Stencil component implementation using Figma MCP, Storybook, and Playwright MCP for visual testing and fixing.

Use when building a Stencil.js design system with Atomic Design methodology, design tokens, theming support, and slot-based components. Implements a multi-client architecture with standardized patterns for atoms, molecules, organisms, and templates.

Use when creating or modifying Stencil.js web components. Ensures components follow Stencil best practices, proper decorator usage, lifecycle methods, and TypeScript conventions.

Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.