Skills

Coordinate coding agents with harness-engineering practices. Use when supervising multi-agent implementation, ticket-driven work, verification loops, or conflict-safe execution.

Review architecture and refactor only after approval. Use when code structure, module boundaries, seams, or leverage need assessment.

Map how a product creates, delivers, and captures value.

Guides Tailwind CSS v4 patterns for buttons and components. Use this skill when creating components with variants, choosing between CVA/tailwind-variants, or configuring Tailwind v4's CSS-first approach.

Guides when to abstract vs duplicate code. Use this skill when creating shared utilities, deciding between DRY/WET approaches, or refactoring existing abstractions.

Perform focused code review by detecting smells, ranking concrete risks, and deep-diving the most important findings. Use when reviewing diffs, pull requests, changed files, snippets, or implementation plans for security, performance, UX, bugs, tests, API contracts, concurrency, error handling, data/state hazards, accessibility, dependencies, or observability issues.

Simplify recently changed code without behavior changes. Use after edits when code can be clearer, flatter, or easier to maintain.

Use psychology to explain user behavior and improve decisions.

Easy to process feels safer, truer, and more useful.

Design for limited working memory.

Structure commit messages following the Conventional Commits specification. Use when drafting commit messages before coding or reviewing commit message quality.

Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size.

Reveal enough to create interest.

Split a component into focused units. Use when a component mixes responsibilities and needs smaller utilities, hooks, or sub-components.

Structure complex thinking into clarity, frameworks, validation, and action. Use for ambiguous problems or hard decisions.

Improve skill through focused effort, fast feedback, and harder challenges.

Critically discuss code issues with compact findings. Use when code needs review for logic, simplicity, structure, naming, or maintainability.

Clarify and stress-test ambiguous tasks before action. Use when goal, scope, success criteria, constraints, decisions, or risks are unclear.

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

Estimate development effort for tasks and features. Use when sizing work, planning sprints, or comparing approaches.

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

Generate outputs, score them, and iterate until quality passes a bar. Use when clear evaluation criteria exist and refinement is cheaper than failure.

Find root cause by asking why repeatedly.

Behavior happens when motivation, ability, and prompt meet at same moment.

Shape long-running work into a durable objective with a clear stop condition, validation loop, checkpoints, and compact progress reporting. Use when a task is bigger than one prompt but smaller than an open-ended backlog, especially migrations, large refactors, experiments, prototypes, retry loops, prompt optimization, or other work where an autonomous assistant should keep making scoped progress until a verifiable end state is reached.

Cooperate first.

Model a problem as nodes and relationships.

One strong first impression changes how users judge everything else.

More choices slow decisions.

Design engagement loops:

Break a broad question into testable branches.

Users hire products to make progress in a situation.

Continuous small improvement.

Visualize work.

Extract reusable patterns from the current session. Use when errors, debugging techniques, workarounds, or project conventions should become skills.

Create a future-state planning artifact for startups, product management, strategy, roadmap planning, project kickoffs, pivots, and founder or stakeholder alignment. Use when a team needs to describe a desired future, work backward into projects, connect vision to customer value, or turn an uncertain product idea into milestones, risks, metrics, and next actions.

People feel losses more strongly than similar gains.

Make product decisions explicit.

Apply language-agnostic naming conventions using the A/HC/LC pattern. Use when naming variables, functions, or reviewing code for naming consistency.

Use art direction when viewport size needs different image content or crop.

Use a central planner to break dynamic tasks into worker jobs and combine results. Use when task shape is unknown upfront and subtasks must be assigned at runtime.

Organize information by actionability.

Run independent LLM subtasks at same time, then combine results. Use when work can split into isolated parts or multiple judges can score in parallel.

Analyze external macro factors:

Guides Playwright accessibility tests with axe scans and WCAG checks. Use when writing, reviewing, or fixing automated a11y tests, ARIA tests, or page accessibility audits.

Guides resilient Playwright test design and review. Use when writing, reviewing, or fixing Playwright tests for reliable user-focused coverage.

Show what user needs now.

Guides React, Next.js, and TypeScript project organization using feature-based architecture inspired by Bulletproof React. Use when structuring new projects, reorganizing codebases, deciding where new code belongs, preventing cross-feature imports, or enforcing shared -> features -> app dependency flow.

Break a task into fixed sequential LLM steps with checks between steps. Use when work has clear stages, intermediate outputs, or step-specific prompts.

Review prompts and instructions for logic complexity. Use when simplifying workflows, rules, conditions, or agent prompts.

Guides React Hook Form usage for React forms. Use this skill when creating or refactoring forms with useForm, register, handleSubmit, formState errors, validation rules, defaultValues, Controller, useController, FormProvider, useFieldArray, resolvers such as Zod, or TypeScript form types.

Guides proper usage of the key prop in React lists. Use this skill when rendering lists, mapping arrays to components, or troubleshooting list-related state bugs.

Guides handling expected Next.js Server Action errors with TanStack React Query useMutation. Use when server actions, mutationFn, onError toasts, throwOnError, QueryBoundary, ActionResult discriminated unions, translated error codes, or production-safe client error messages are involved.

Guides proper usage of the useCallback hook in React. Use this skill when optimizing function references, passing callbacks to memoized components, or preventing unnecessary re-renders.

- Adding a client component in Next.js or React Server Components.

Guides proper usage of React useState hook. Use this skill when adding state to components, deciding between useState vs alternatives, or troubleshooting state update issues.

- Reviewing React code with `useEffect`.

Plan and apply behavior-preserving code refactors. Use when restructuring code or improving maintainability without changing behavior.

Analyze feature requirements for clarity, scope, risk, and testability. Use before building features or splitting ambiguous work.

Send inputs to specialized prompts, tools, or models based on input type. Use when different request classes need different handling paths.

- Improving retention without adding more notifications.

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

- Adding testimonials, reviews, logos, usage stats, or endorsements.

- Planning product migrations.

Generate a concise PR description from branch commits. Use when a branch needs a clear summary for review or pull request text.

Configure Tailwind CSS v4 with CSS-first approach. Use when installing, migrating from v3, setting up build tools (Vite/PostCSS/CLI), customizing themes with @theme, or configuring plugins.

- Organizing roadmaps or backlogs.

Convert conversation context into concise PRD requirements. Use when raw ideas, requests, or discussions need product requirements.

- Designing landing pages, checkout, signup, or onboarding.

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.

Guides TypeScript best practices for type safety, code organization, and maintainability. Use this skill when configuring TypeScript projects, deciding on typing strategies, writing async code, or reviewing TypeScript code quality.

Guides when to use interface vs type in TypeScript. Use this skill when defining object types, extending types, or choosing between interface and type aliases.

Guides proper usage of TypeScript's satisfies operator vs type annotations. Use this skill when deciding between type annotations (colon) and satisfies, validating object shapes while preserving literal types, or troubleshooting type inference issues.

- Writing backlog items.

- Evaluating a product concept or feature.

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

- Designing CTA hierarchy.

- Reviewing product leadership behavior.