React
FrontendCommonly used with
Skills using React (647)
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
hono
Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime.
react-best-practices
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.
react-component-performance
Diagnose slow React components and suggest targeted performance fixes.
remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
zod-validation-expert
Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.
adobe-local-dev-loop
Configure Adobe local development with App Builder CLI, Runtime actions, hot reload, and mock testing for Firefly/PDF/Photoshop APIs. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Adobe APIs. Trigger with phrases like "adobe dev setup", "adobe local development", "adobe dev environment", "develop with adobe", "aio app".
anima-ci-integration
Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integrating Anima into design handoff workflows. Trigger: "anima CI", "anima GitHub Actions", "anima automated generation".
anima-core-workflow-a
Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator from Figma components. Trigger: "anima design pipeline", "figma to react pipeline", "automated design handoff", "anima component generator".
anima-core-workflow-b
Clone websites to React/HTML code and customize Anima output with AI. Use when converting live websites to code, customizing generated components, or building design-system-aware code from URL screenshots. Trigger: "anima website to code", "anima URL clone", "anima AI customization", "website to react", "clone website to code".
apify-hello-world
Run your first Apify Actor and retrieve results via apify-client. Use when starting a new Apify integration, testing connectivity, or learning the Actor call/dataset retrieval pattern. Trigger: "apify hello world", "apify example", "run an apify actor", "apify quick start", "first apify scrape".
appfolio-local-dev-loop
Set up local development for AppFolio property management API integration. Trigger: "appfolio local dev".
assemblyai-local-dev-loop
Configure AssemblyAI local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with AssemblyAI. Trigger with phrases like "assemblyai dev setup", "assemblyai local development", "assemblyai dev environment", "develop with assemblyai".
clade-local-dev-loop
Set up a fast local development loop for building with the Anthropic API — Use when working with local-dev-loop patterns. hot reload, cost-saving tips, and test patterns. Trigger with "anthropic dev setup", "claude local development", "anthropic test locally", "claude dev workflow".
clay-ci-integration
Configure CI/CD pipelines for Clay integrations with automated testing and validation. Use when setting up automated tests for Clay webhook handlers, validating enrichment data quality in CI, or integrating Clay checks into your build process. Trigger with phrases like "clay CI", "clay GitHub Actions", "clay automated tests", "CI clay", "test clay integration".
clickup-local-dev-loop
Set up local development for ClickUp API integrations with testing, mocking, and hot reload. Trigger: "clickup dev setup", "clickup local development", "clickup dev environment", "develop with clickup", "clickup testing setup", "mock clickup API".
cohere-local-dev-loop
Configure Cohere local development with mocking, testing, and hot reload. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Cohere API v2. Trigger with phrases like "cohere dev setup", "cohere local development", "cohere dev environment", "develop with cohere", "mock cohere".
cursor-extension-integration
Integrate VS Code extensions with Cursor IDE: compatibility, Open VSX registry, VSIX installation, conflict resolution, and essential extensions. Triggers on "cursor extensions", "cursor vscode extensions", "cursor plugins", "cursor marketplace", "open vsx", "vsix install".
deepgram-local-dev-loop
Configure Deepgram local development workflow with testing and mocks. Use when setting up development environment, configuring test fixtures, or establishing rapid iteration patterns for Deepgram integration. Trigger: "deepgram local dev", "deepgram development setup", "deepgram test environment", "deepgram dev workflow", "deepgram mock".
exa-local-dev-loop
Configure Exa local development with hot reload, testing, and mock responses. Use when setting up a development environment, writing tests against Exa, or establishing a fast iteration cycle. Trigger with phrases like "exa dev setup", "exa local development", "exa test setup", "develop with exa", "mock exa".
figma-architecture-variants
Choose between Figma integration architectures: CLI script, webhook service, or plugin. Use when deciding how to integrate with Figma, comparing REST API vs Plugin API, or planning a Figma-connected application. Trigger with phrases like "figma architecture", "figma blueprint", "how to integrate figma", "figma plugin vs api", "figma project type".
fondo-local-dev-loop
Configure local development workflows that integrate with Fondo for financial data, using Fondo exports with QuickBooks or accounting tools. Trigger: "fondo dev setup", "fondo export", "fondo QuickBooks", "fondo local data".
glean-local-dev-loop
Configure Glean local development with mock search responses, test datasources, and connector development workflow. Trigger: "glean dev setup", "glean local development", "glean connector development".
groq-local-dev-loop
Configure Groq local development with hot reload, mocking, and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Groq. Trigger with phrases like "groq dev setup", "groq local development", "groq dev environment", "develop with groq".
ideogram-local-dev-loop
Configure Ideogram local development with mock responses and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Ideogram. Trigger with phrases like "ideogram dev setup", "ideogram local development", "ideogram dev environment", "develop with ideogram", "ideogram testing".
instantly-ci-integration
Configure CI/CD pipelines for Instantly.ai integrations with GitHub Actions. Use when setting up automated testing, deployment pipelines, or continuous validation of Instantly API integrations. Trigger with phrases like "instantly ci", "instantly github actions", "instantly pipeline", "instantly automated testing", "instantly ci/cd".
juicebox-local-dev-loop
Configure Juicebox local dev workflow. Trigger: "juicebox local dev", "juicebox dev setup".
klaviyo-local-dev-loop
Configure Klaviyo local development with hot reload, mocking, and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with the Klaviyo API. Trigger with phrases like "klaviyo dev setup", "klaviyo local development", "klaviyo dev environment", "develop with klaviyo", "klaviyo testing".
langchain-local-dev-loop
Configure LangChain local development workflow with testing and mocks. Use when setting up dev environment, creating test fixtures with mocked LLMs, or establishing a rapid iteration workflow for LangChain apps. Trigger: "langchain dev setup", "langchain local development", "langchain testing", "langchain mock", "test langchain chains".
linear-deploy-integration
Deploy Linear-integrated applications and track deployments. Use when deploying to production, linking deploys to issues, or setting up deployment tracking with Vercel/Railway/Cloud Run. Trigger: "deploy linear integration", "linear deployment", "linear vercel", "track linear deployments", "linear deploy tracking".
linktree-local-dev-loop
Local Dev Loop for Linktree. Trigger: "linktree local dev loop".
lucidchart-local-dev-loop
Local Dev Loop for Lucidchart. Trigger: "lucidchart local dev loop".
maintainx-local-dev-loop
Set up a local development loop for MaintainX integration development. Use when configuring dev environment, testing API calls locally, or setting up a sandbox workflow for MaintainX. Trigger with phrases like "maintainx dev setup", "maintainx local", "maintainx development environment", "maintainx testing setup".
mindtickle-local-dev-loop
Local Dev Loop for MindTickle. Trigger: "mindtickle local dev loop".
miro-local-dev-loop
Configure Miro local development with hot reload, testing, and ngrok tunneling. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with the Miro REST API v2. Trigger with phrases like "miro dev setup", "miro local development", "miro dev environment", "develop with miro", "miro testing".
mistral-ci-integration
Configure Mistral AI CI/CD integration with GitHub Actions and prompt testing. Use when setting up automated testing, prompt regression suites, or integrating Mistral AI quality gates into your build process. Trigger with phrases like "mistral CI", "mistral GitHub Actions", "mistral automated tests", "CI mistral", "prompt testing".
mistral-hello-world
Create a minimal working Mistral AI chat completion example. Use when starting a new Mistral integration, testing your setup, or learning basic Mistral API patterns. Trigger with phrases like "mistral hello world", "mistral example", "mistral quick start", "simple mistral code", "mistral chat".
mistral-local-dev-loop
Configure Mistral AI local development with hot reload, testing, and mocking. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Mistral AI. Trigger with phrases like "mistral dev setup", "mistral local development", "mistral dev environment", "develop with mistral".
openevidence-local-dev-loop
Local Dev Loop for OpenEvidence. Trigger: "openevidence local dev loop".
posthog-reference-architecture
Production PostHog architecture: event taxonomy, SDK layering, feature flag strategy, analytics module layout, and data pipeline integration patterns. Trigger: "posthog architecture", "posthog best practices", "posthog project structure", "how to organize posthog", "posthog design".
posthog-sdk-patterns
Production-ready PostHog SDK patterns: singleton client, typed events, React hooks, Next.js App Router integration, and Python patterns. Trigger: "posthog SDK patterns", "posthog best practices", "posthog React hook", "posthog Next.js", "posthog typescript".
replit-core-workflow-a
Build a full-stack web app on Replit with Express/Flask, PostgreSQL, Auth, and deployment. Use when creating a new production app on Replit from scratch, building the primary user-facing workflow, or following Replit best practices. Trigger with phrases like "build replit app", "replit full stack", "replit web app", "create replit project", "replit express flask".
replit-deploy-integration
Deploy Replit apps with Autoscale, Reserved VM, and Static deployment types. Use when deploying to production, configuring deployment settings, setting up custom domains, or managing deployment secrets and health checks. Trigger with phrases like "deploy replit", "replit deployment", "replit autoscale", "replit reserved VM", "replit static deploy", "replit custom domain".
replit-local-dev-loop
Configure Replit development workflow with hot reload, Webview, and Replit Agent. Use when setting up dev server, configuring run commands, debugging in Workspace, or using Replit Agent for AI-assisted development. Trigger with phrases like "replit dev server", "replit hot reload", "replit local development", "replit agent", "replit workflow".
serpapi-local-dev-loop
Configure SerpApi local development with cached responses and test fixtures. Use when building search integrations, avoiding API calls during development, or setting up reproducible test data from SerpApi. Trigger: "serpapi dev setup", "serpapi local", "test serpapi locally".
together-local-dev-loop
Together AI local dev loop for inference, fine-tuning, and model deployment. Use when working with Together AI's OpenAI-compatible API. Trigger: "together local dev loop".
vercel-architecture-variants
Choose and implement Vercel architecture blueprints for different scales and use cases. Use when designing new Vercel projects, choosing between static, serverless, and edge architectures, or planning how to structure a multi-project Vercel deployment. Trigger with phrases like "vercel architecture", "vercel blueprint", "how to structure vercel", "vercel monorepo", "vercel multi-project".
webflow-local-dev-loop
Configure a Webflow local development workflow with TypeScript, hot reload, mocked API tests, and webhook tunneling via ngrok. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with the Webflow Data API. Trigger with phrases like "webflow dev setup", "webflow local development", "webflow dev environment", "develop with webflow".
moai-platform-auth
Authentication and authorization specialist covering Auth0, Clerk, and Firebase Auth. Use when implementing authentication, MFA, SSO, passkeys, WebAuthn, social login, or security features.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
faf-wizard
Done-for-you .faf generator. One-click AI context for any project - new, legacy, or famous. Auto-detects stack, scores readiness, works everywhere.
fp-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
fp-ts-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
frontend-dev-guidelines
You are a senior frontend engineer operating under strict architectural and performance standards. Use when creating components or pages, adding new features, or fetching or mutating data.
frontend-developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
hono
Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime.
javascript-typescript-typescript-scaffold
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
landing-page-generator
Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.
parallel-agents
Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.
react-best-practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.
react-component-performance
Diagnose slow React components and suggest targeted performance fixes.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
screenshots
Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation.
segment-cdp
Expert patterns for Segment Customer Data Platform including Analytics.js, server-side tracking, tracking plans with Protocols, identity resolution, destinations configuration, and data governance best practices.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
vercel-ai-sdk-expert
Expert in the Vercel AI SDK. Covers Core API (generateText, streamText), UI hooks (useChat, useCompletion), tool calling, and streaming UI components with React and Next.js.
web-artifacts-builder
To build powerful frontend claude.ai artifacts, follow these steps:
zod-validation-expert
Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.
graphql-mobile
GraphQL client integration for mobile applications
security
OWASP security patterns, secrets management, security testing
linear-claude-skill
Manage Linear issues, projects, and teams
apple-notes-local-dev-loop
Set up local development workflow for Apple Notes automation with JXA hot reload. Trigger: "apple notes dev loop".
react-component-generator
Generate react component generator operations. Auto-activating skill for Frontend Development. Triggers on: react component generator, react component generator Part of the Frontend Development skill category. Use when working with react component generator functionality. Trigger with phrases like "react component generator", "react generator", "react".
react-hook-creator
Create react hook creator operations. Auto-activating skill for Frontend Development. Triggers on: react hook creator, react hook creator Part of the Frontend Development skill category. Use when working with react hook creator functionality. Trigger with phrases like "react hook creator", "react creator", "react".
react-modernization
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
component-inventory
Audit and inventory existing UI components in a codebase
ink-component-generator
Generate Ink (React for CLI) components for terminal UIs with hooks, state management, and layout components.
interactive-api-console
Build interactive API try-it-out consoles for documentation
react-development
Specialized skill for React component development, hooks patterns, state management, context API, performance optimization, and modern React best practices.
react-hooks
Deep expertise in React hooks patterns including custom hooks, composition, optimization, and testing strategies.
react-query
TanStack Query (React Query) patterns for server state management, caching, mutations, optimistic updates, and infinite queries.
redux-toolkit
Redux Toolkit patterns including slice creation, async thunks, RTK Query, state normalization, and DevTools integration.
remix
Remix patterns including loaders, actions, nested routing, progressive enhancement, and deployment strategies.
svg-optimizer
Optimize SVG assets, generate sprites, and convert to React components
zustand
Zustand state management patterns including store creation, middleware, persistence, slices, and DevTools integration.
caveman
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
code-simplifier
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Use when asked to "simplify code", "clean up code", "refactor for clarity", "improve readability", or review recently modified code for elegance. Focuses on project-specific best practices.
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
parallel-agents
Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.
react-dev
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
react-patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
opencli
OpenCLI — Make any website or Electron App your CLI. Zero risk, AI-powered, reuse Chrome login.
skillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard, fix visual bugs in either frontend, or need to know which design tokens, components, or patterns to use. This skill covers color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations, and anti-patterns for both frontends. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.
code-simplifier
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Use when asked to "simplify code", "clean up code", "refactor for clarity", "improve readability", or review recently modified code for elegance. Focuses on project-specific best practices.
hugging-face-tool-builder
Your purpose is now is to create reusable command line scripts and utilities for using the Hugging Face API, allowing chaining, piping and intermediate processing where helpful. You can access the API directly, as well as use the hf command line tool.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
technology-search
Search tech blogs, developer forums, and IT media (TechCrunch, Hacker News, 36氪, etc.) for software and hardware industry updates with heat ranking and EN↔CN translation. Use this skill only when the topic is clearly about programming, software, hardware, AI, or IT infrastructure.
video-editing
Video editing pipeline: cut footage, assemble clips via FFmpeg and Remotion.
skillforge
Intelligent skill router, proactive advisor, and creator. Analyzes ANY input to recommend existing skills, improve them, or create new ones. Adds proactive Context Skill Advisor suggestions from session, project, and personal context using user-controlled Proactivity Levels.
nextjs-developer
Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.
react-expert
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.
cross-env-setup
Configure cross-env for cross-platform environment variable setting in npm scripts and CLI commands.
react-testing-library
React Testing Library patterns, queries, user events, and accessibility testing.
research-agent
Research agent for external documentation, best practices, and library APIs via MCP tools
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
learn-teach
Step-by-step explanation of a concept with progressive depth
dotlottie-web
Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
landing-page-generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
senior-qa
Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
ss-motion
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
naming-analyzer
Suggest better variable, function, and class names based on context and conventions.
senior-architect
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
senior-frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
senior-qa
Comprehensive QA and testing skill for quality assurance, test automation, and testing strategies for ReactJS, NextJS, NodeJS applications. Includes test suite generation, coverage analysis, E2E testing setup, and quality metrics. Use when designing test strategies, writing test cases, implementing test automation, performing manual testing, or analyzing test coverage.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
javascript-typescript-jest
Best practices for writing JavaScript/TypeScript tests using Jest, including mocking strategies, test structure, and common patterns.
technology-stack-blueprint-generator
Comprehensive technology stack blueprint generator that analyzes codebases to create detailed architectural documentation. Automatically detects technology stacks, programming languages, and implementation patterns across multiple platforms (.NET, Java, JavaScript, React, Python). Generates configurable blueprints with version information, licensing details, usage patterns, coding conventions, and visual diagrams. Provides implementation-ready templates and maintains architectural consistency for guided development.
happier-release-notes
Author, update, validate, and publish-ready Happier release-note story decks. Use when creating curated release notes, analyzing commits/diffs/tags to discover user-facing changes, brainstorming detailed and short release notes, adding story-deck cards, adding release-note images/videos/posters, validating translation keys and asset references, preparing happier-assets upload inputs, or updating onboarding showcase story content.
architecture
Project architecture and file structure conventions for all process types. Use when: (1) Creating new files or modules, (2) Deciding where code should go, (3) Converting single-file components to directories, (4) Reviewing code for structure compliance, (5) Adding new bridges, services, agents, or workers.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
add-karpathy-llm-wiki
Add a persistent wiki knowledge base to a NanoClaw group. Based on Karpathy's LLM Wiki pattern. Triggers on "add wiki", "wiki", "knowledge base", "llm wiki", "karpathy wiki".
add-rtk
Install rtk token-compression proxy into agent containers. Routes Bash tool calls through rtk for 60–90% token savings on dev commands (git, cargo, pytest, docker, kubectl, etc.).
manage-channels
Wire channels to agent groups, manage isolation levels, add new channel groups. Use after adding a channel, during setup, or standalone to reconfigure.
add-karpathy-llm-wiki
Add a persistent wiki knowledge base to a NanoClaw group. Based on Karpathy's LLM Wiki pattern. Triggers on "add wiki", "wiki", "knowledge base", "llm wiki", "karpathy wiki".
setup
Run initial NanoClaw setup. Use when user wants to install dependencies, authenticate messaging channels, register their main channel, or start the background services. Triggers on "setup", "install", "configure nanoclaw", or first-time setup requests.
agent-base-template-generator
Agent skill for base-template-generator - invoke with $agent-base-template-generator
wiring
Wiring Verification
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
backend-engineering
Use this skill when designing backend systems, databases, APIs, or services. Triggers on schema design, database migrations, indexing strategies, distributed systems architecture, microservices, caching, message queues, observability setup, logging, metrics, tracing, SLO/SLI definition, performance optimization, query tuning, security hardening, authentication, authorization, API design (REST, GraphQL, gRPC), rate limiting, pagination, and failure handling patterns. Acts as a senior backend engineering advisor for mid-level engineers leveling up.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
seo-geo-optimizer
Comprehensive SEO/GEO/AEO analysis toolkit for optimizing content visibility across traditional search engines (Google, Bing), AI platforms (ChatGPT, Perplexity, Claude, Gemini, Grokipedia), answer engines (Google AI Overviews, Bing Copilot, featured snippets), voice assistants (Google Assistant, Siri, Alexa), and social media (Facebook, Twitter, LinkedIn, WhatsApp, Instagram). Analyzes HTML/Markdown/JSX files for metadata completeness, schema markup, keyword optimization, entity extraction, and generates multi-format audit reports with platform-specific recommendations.
resend-cli
Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, API keys, and logs via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent silent failures.
documentation
Generate READMEs, API docs, changelogs, and knowledge base articles. Covers README structure with personality, OpenAPI-based API documentation, changelogs from conventional commits, typedoc patterns, and support KB articles.
find-skills
Search the agent skills ecosystem to discover and install skills that extend AI coding agent capabilities. Use when user asks "how do I do X" (X being a common task), "find a skill for X", "is there a skill that can...", or expresses interest in extending agent capabilities. Triggers on "find a skill", "install a skill", "skill for [task]", "can you do X", "I need help with [domain]", "how do I [task]". Do NOT use when user has explicitly asked to proceed without a skill, or when the task is better handled by agent's built-in capabilities (file operations, git, basic coding).
caveman
Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
devtools-app-setup
Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.
react-audit-grep-patterns
Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags.
nextjs-app-router
Provides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when creating projects with App Router, implementing Server Components and Client Components ("use client"), creating Server Actions for forms, building Route Handlers (route.ts), configuring caching with "use cache" directive (cacheLife, cacheTag), setting up parallel routes (`@slot`) or intercepting routes, migrating to proxy.ts, or working with App Router file conventions (layout.tsx, page.tsx, loading.tsx, error.tsx).
react-code-review
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after implementing new features, or for component architecture validation. Triggers on "review React code", "React code review", "check my React components".
shadcn-ui
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
zod-validation-utilities
Creates reusable Zod v4 schemas, validates API payloads, forms, and configuration input, transforms and coerces data safely, and handles validation errors with strong type inference for TypeScript applications. Use when designing validation layers, parsing `z.string()`, `z.object()`, or `z.email()` schemas, or implementing runtime type-safe data validation.
mermaid
Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
manage-mounts
Configure which host directories agent containers can access. View, add, or remove mount allowlist entries. Triggers on "mounts", "mount allowlist", "agent access to directories", "container mounts".
slm-build-graph
Build or rebuild the knowledge graph from existing memories using TF-IDF entity extraction and Leiden clustering. Use when search results seem poor, after bulk imports, or to optimize performance. Automatically discovers relationships between memories and creates topic clusters.
slm-list-recent
List most recent memories in chronological order. Use when the user wants to see what was recently saved, review recent conversations, check what they worked on today, or browse memory history. Shows memories sorted by creation time (newest first).
slm-recall
Search SuperLocalMemory for relevant facts, decisions, and past context. Use when the user asks to recall, search, find, or retrieve stored information. Invokes 5-channel retrieval with LightGBM reranking via MCP.
form-validation
React Hook Form + Zod integration, multi-step forms, optimistic validation, server-side error mapping, and file upload patterns.
revenuecat-patterns
RevenueCat SDK entegrasyon pattern'leri. iOS (Swift), Android (Kotlin), React Native ve Flutter icin setup, offerings, entitlement checking, webhook integration, StoreKit 2 migration ve sandbox testing.
fix-github-issue
Fix a GitHub issue by number. Use when asked to fix GitHub issues.
implement-ag-playbook
Implement a playbook from its PROMPT specification files. Supports both single-framework (PROMPT-REACT.md, etc.) and 3-framework (PROMPT-3-FRAMEWORKS.md) modes.
implement-github-feature
Design and implement a new feature or component from a GitHub issue. Use for net-new functionality, not bug fixes.
gh-pr-review
Automated Cherry Studio code review for local branches, PRs, commits, and files. Use for reviewing code, docs, or pull requests with project-specific checks for DataApi boundaries, service ownership, renderer data hooks, React Hooks, lifecycle services, i18n, UI conventions, and tests. Supports single-agent review with interactive fix selection, or multi-agent deep review with reviewer-verifier adversarial mechanism and risk-based auto-fix.
accessibility-lead
Accessibility team lead and orchestrator. Use on EVERY task that involves web UI code, HTML, JSX, CSS, React components, web pages, or any user-facing web content. This agent coordinates the accessibility specialist team and ensures no accessibility requirement is missed. Runs the final review before any UI code is considered complete. Applies to any web framework or vanilla HTML/CSS/JS.
common-api-design
Apply REST API conventions — HTTP semantics, status codes, versioning, pagination, and OpenAPI standards for any framework. Use when designing endpoints, choosing HTTP methods, implementing pagination, or writing OpenAPI specs. (triggers: **/*.controller.ts, **/*.router.ts, **/*.routes.ts, **/routes/**, **/controllers/**, **/handlers/**, rest api, endpoint, http method, status code, versioning, pagination, openapi, api design, api contract)
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
resend-cli
Operate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, templates, webhooks, API keys, and logs via the `resend` CLI. Use when the user wants to run Resend commands in the shell, scripts, or CI/CD pipelines, or send/preview React Email templates. Always load this skill before running `resend` commands — it contains the non-interactive flag contract and gotchas that prevent silent failures.
search-tools
Search Tool Hierarchy
check-accessibility
Review component for accessibility issues
update-component-docs
Update component documentation when code changes
vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
debugging
MUST USE for any real runtime debugging across ANY language or binary — crashes, silent failures, wrong responses, stuck processes, memory leaks, async misbehavior, unexplained timing, reverse engineering. Runs a hypothesis-driven loop: form ≥3 hypotheses, investigate in parallel, after 2 failed rounds spawn Oracles from orthogonal angles, confirm root cause, lock with a failing test, fix minimally, QA by actually USING the system, scrub artifacts. The actual HOW lives in `references/` — READ THEM. Triggers: 'debug this', 'why is X not working', 'hanging', 'attach a debugger', 'reverse engineer', 'pwndbg', 'gdb', 'lldb', 'node inspect', 'tsx debug', 'pdb', 'dlv', 'delve', 'rust-gdb', 'set a breakpoint', 'trace this bug', 'reproduce and fix', 'silent failure', 'HTTP 200 but empty', 'stuck process', 'inspect binary', 'reverse engineer', 'playwright failure'.
ai-sdk-documentation
This skill should be used when working with Vercel AI SDK, AI Gateway, streamText, generateText, generateObject, streamObject, tool calling, or AI SDK providers. Also relevant for "ai-sdk", "@ai-sdk/*" packages, or questions about AI SDK patterns, configuration, and best practices.
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
bun-react-ssr
Use when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.
bun-runtime
Use for Bun runtime, bunfig.toml, watch/hot modes, env vars, CLI flags, and module resolution.
bun-test-basics
Use for bun:test syntax, assertions, describe/it, test.skip/only/each, and basic patterns.
cloudflare-workers-frameworks
Framework integration for Cloudflare Workers. Use when building with Hono, Remix, Next.js, Astro, SvelteKit, Qwik, or Nuxt on Workers. Covers routing, SSR, static assets, and edge deployment.
jest-generator
Generate Jest unit tests for JavaScript/TypeScript with mocking, coverage. Use for JS/TS modules, React components, test generation, or encountering missing coverage, improper mocking, test structure errors.
nuxt-production
Nuxt 5 production optimization: hydration, performance, testing with Vitest, deployment to Cloudflare/Vercel/Netlify, and migration from Nuxt 4. Use when: debugging hydration mismatches, optimizing performance and Core Web Vitals, writing tests with Vitest, deploying to Cloudflare Pages/Workers/Vercel/Netlify, or migrating from Nuxt 4 to Nuxt 5. Keywords: hydration, hydration mismatch, ClientOnly, SSR, performance, lazy loading, lazy hydration, Vitest, testing, deployment, Cloudflare Pages, Cloudflare Workers, Vercel, Netlify, NuxtHub, migration, Nuxt 4 to Nuxt 5, Rolldown, Vite 8, Nitro v3, comment placeholder
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
react-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture.
caveman
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.
heroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
angular-testing
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)
deploy-frontend
Use when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
react-best-practices
React and Next.js performance guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React components, hooks, client data fetching, rendering behavior, bundle imports, async request flows, or Next.js pages and server code.
solana-dev
Unified skill hub for Solana development. Routes to external submodule skills (solana-foundation, sendai, solana-game, trailofbits, cloudflare, qedgen, colosseum) and local skills. Progressive disclosure — read only what you need.
explain-code
Explain what code does in plain English
component-refactoring
Refactor high-complexity React components in frontend. Use when the user asks for code splitting, hook extraction, or complexity reduction, or when you come across a component that is too complex to understand and refactor it.
writing-typescript
Idiomatic TypeScript development. Use when writing TypeScript code, Node.js services, React apps, or TypeScript design advice. Emphasizes strict typing, boundary validation, composition, behavior tests, and project-configured tooling. NOT for Go, Python, plain HTML/CSS/JS, or server-rendered templates.
thesys-generative-ui
Generate, modify, and style React components from natural language using the Thesys SDK. Guides schema-driven UI generation, theme customisation, tool calling integration, and deployment to Vite, Next.js, or Cloudflare Workers. Use when the user says "generate UI", "create a component", "build an interface", "Thesys", "generative UI", or asks to turn a description into a React component.
design-system-starter
Use this skill when creating or evolving design systems for applications. Provides design token structures, component architecture patterns, documentation templates, and accessibility guidelines. Ensures consistent, scalable, and accessible UI design across products.
jest-testing
Automatically activated when user works with Jest tests, mentions Jest configuration, asks about Jest matchers/mocks, or has files matching *.test.js, *.test.ts, jest.config.*. Provides Jest-specific expertise for testing React, Node.js, and JavaScript applications. Also applies to Vitest due to API compatibility. Does NOT handle general quality analysis - use analyzing-test-quality for that.
performance
Comprehensive performance specialist covering analysis, optimization, load testing, and framework-specific performance. Use when identifying bottlenecks, optimizing code, conducting load tests, analyzing Core Web Vitals, fixing memory leaks, or improving application performance across all layers (application, database, frontend). Includes React-specific optimization patterns.
prompt-template-designer
Design reusable prompt templates that encode domain-specific patterns for recurring AI tasks. Use when you've executed similar prompts 2+ times and need to capture the pattern as reusable intelligence. NOT for one-off prompts or generic "ask AI a question" patterns.
prototype-to-production
Convert design prototypes (HTML, CSS, Figma exports) into production-ready components. Analyzes prototype structure, extracts design tokens, identifies reusable patterns, and generates typed React components. Adapts to existing project tech stack with React + TypeScript as default.
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
react-server-components-framework
Design and implement React Server Components with Next.js 15 App Router. Master server-first architecture, streaming SSR, Server Actions, and modern data fetching patterns for 2025+ frontend development.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
releasing-clickup-cli
Publishes a new version of clickup-cli to npm, updates Homebrew tap, writes release notes, and syncs the agent skill. Use when releasing a new version, bumping version, or verifying a release.
ai-sdk
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
react-best-practices
React and Next.js performance optimization guide from Vercel Engineering (70 rules in 8 categories). Use when writing, reviewing, or refactoring React/Next.js code to eliminate waterfalls, reduce bundle size, prevent re-renders, optimize Server Components, or fix performance bottlenecks. Triggers on data fetching, Promise.all, Suspense, useMemo, dynamic imports, bundle analysis, code-splitting, and rendering performance tasks.
research-agent
Research agent for external documentation, best practices, and library APIs via MCP tools
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
react-dev
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
convex-file-storage
Complete file handling including upload flows, serving files via URL, storing generated files from actions, deletion, and accessing file metadata from system tables
convex-realtime
Patterns for building reactive apps including subscription management, optimistic updates, cache behavior, and paginated queries with cursor-based loading
component-search
Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.
design-import
Imports a Claude Design (claude.ai/design) handoff bundle and scaffolds the proposed components into the project. Accepts a bundle URL or local file, parses and validates the schema, deduplicates components against the existing codebase via component-search, then pipes the survivors through the design-to-code pipeline. Writes provenance metadata so future imports can detect drift between design versions. Use after exporting a handoff bundle from claude.ai/design — this is the entry point that turns a design into code.
design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts screenshots, descriptions, or URLs as input and produces production-ready React components. Checks existing Storybook components before generating, orchestrates design extraction via Stitch MCP, component matching via 21st.dev registry, adaptation to project design tokens, and self-healing verification via run-story-tests. Use when converting visual designs to code, implementing UI from mockups, or building components from screenshots.
i18n-date-patterns
Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.
remotion-best-practices
Use this skill when the user asks about creating videos with React, Remotion framework, programmatic video generation, video animations, or needs help with Remotion projects
linear-claude-skill
Manage Linear issues, projects, and teams
tdd
Implement changes using Test-Driven Development (Red-Green-Refactor). Use for bug fixes, new features, or any code change that should have test coverage.
wiring
Wiring Verification
caveman
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.
privy-integration
Integrates Privy authentication, embedded wallets, and agent payment protocols into web and agentic apps. Covers React SDK (PrivyProvider, hooks, wagmi), Node.js SDK, smart wallets (ERC-4337), x402 and MPP machine payments, Tempo chain, and agentic wallets with policies. Use when setting up Privy auth, creating embedded or agentic wallets, adding x402 or MPP payments, integrating with Tempo, configuring wallet policies, or connecting Privy to MCP/Agent Auth flows.
tanstack
Build type-safe React apps with TanStack Query (data fetching, caching, mutations), Router (file-based routing, search params, loaders), and Start (SSR, server functions, middleware). Use when working with react-query, data fetching, server state, routing, search params, loaders, SSR, server functions, or full-stack React. Triggers on tanstack, react query, query client, useQuery, useMutation, invalidateQueries, tanstack router, file-based routing, search params, route loader, tanstack start, createServerFn, server functions, SSR.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
vercel-ai-sdk
Vercel AI SDK for building chat interfaces with streaming. Use when implementing useChat hook, handling tool calls, streaming responses, or building chat UI. Triggers on useChat, @ai-sdk/react, UIMessage, ChatStatus, streamText, toUIMessageStreamResponse, addToolOutput, onToolCall, sendMessage.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
ia-react-frontend
React architecture patterns, TypeScript, Next.js, hooks, and testing. Use when working with React component structure, state management, Next.js routing, Vitest, React Testing Library, or reviewing React code. For visual design and aesthetic direction, use frontend-design instead.
nw-ux-tui-patterns
Terminal UI and CLI design patterns for product owners. Load when designing command-line tools, interactive terminal applications, or writing CLI-specific acceptance criteria.
Send WhatsApp messages programmatically via the Baileys library (WhatsApp Web multi-device protocol). Use when the user asks to send a WhatsApp message or interact with WhatsApp.
splitting-notes
Use when note files exceed 1000 lines or need better organization. Splits large note files into smaller, focused files with index files for navigation, following progressive grouping principles with clear hierarchy.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
artisan
Implementing production frontend code for React/Vue/Svelte. Handles hooks design, state management, Server Components, form handling, and data fetching. Converts Forge prototypes to production-quality code.
accessibility-ui-design
When designing and implementing web interfaces to ensure they are usable by everyone.
dom-security-hardening
When hardening a web application against Cross-Site Scripting (XSS) and injection attacks.
react-component-design
When building or refactoring React UI components to ensure reusability and maintainability.
state-management-patterns
When deciding where and how to store data in a modern web application.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
agent-generation
This skill provides knowledge for generating effective Claude Code agents tailored to specific projects. It is used internally by the agent-team-creator plugin when analyzing codebases and creating specialized agent teams. Contains templates, best practices, and patterns for writing project-aware agents.
ai-sdk-handler
Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
bodhi-sdk-react-integration
Integrate React+Vite web apps with bodhi-js-sdk for local LLM integration. Use when user asks to: "integrate bodhi", "add bodhi sdk", "connect to bodhi", "setup bodhi provider", "bodhi react integration", "deploy bodhi to github pages", or troubleshoot bodhi-js-sdk connection/auth issues.
design-to-production
Guided workflow for implementing HTML design prototypes as production React components with glassmorphism styling and quality standards enforcement. Use when converting design prototypes to production code.
fp-ts-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
frontend-developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
react-19-patterns
Comprehensive React 19 patterns including all hooks, Server/Client Components, Suspense, streaming, and transitions. Ensures correct React 19 usage with TypeScript.
react-components
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
react-dev
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
react-email
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
remotion-render
Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video
run-nx-generator
Run Nx generators with prioritization for workspace-plugin generators. Use this when generating code, scaffolding new features, or automating repetitive tasks in the monorepo.
screenshots
Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation.
structural-search
Search code by AST structure using ast-grep. Find semantic patterns like function calls, imports, class definitions instead of text patterns. Triggers on: find all calls to X, search for pattern, refactor usages, find where function is used, structural search, ast-grep, sg.
task-planning
Plan and organize software development tasks effectively. Use when breaking down features, creating user stories, or planning sprints. Handles task breakdown, user stories, acceptance criteria, and backlog management.
typescript-dev
TypeScript development best practices, code quality tools, and documentation templates. Activated when working with .ts, .tsx files or TypeScript projects.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture.
vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
debugging
MUST USE for any real runtime debugging across ANY language or binary — crashes, silent failures, wrong responses, stuck processes, memory leaks, async misbehavior, unexplained timing, reverse engineering. Runs a hypothesis-driven loop: form ≥3 hypotheses, investigate in parallel, after 2 failed rounds spawn Oracles from orthogonal angles, confirm root cause, lock with a failing test, fix minimally, QA by actually USING the system, scrub artifacts. The actual HOW lives in `references/` — READ THEM. Triggers: 'debug this', 'why is X not working', 'hanging', 'attach a debugger', 'reverse engineer', 'pwndbg', 'gdb', 'lldb', 'node inspect', 'tsx debug', 'pdb', 'dlv', 'delve', 'rust-gdb', 'set a breakpoint', 'context window exploded', 'why is the response empty', 'attach the debugger', 'debug it', 'why is this happening', 'trace this bug', 'reproduce and fix', 'silent failure', 'HTTP 200 but empty', 'why did it stop', 'inspect the binary', 'reverse engineering', 'playwright'.
tailwind
Patterns and conventions for all Tailwind styling. Use this skill whenever writing Tailwind class names, combining conditional classes, building component variants, or choosing between twJoin and twMerge. Also trigger when the user asks about custom values, defining @theme tokens or CSS variables, naming color/spacing tokens, rem vs px, responsive breakpoints, or avoiding template literal class strings.
ux
Reviews UX, accessibility, and microcopy for web and React Native (Expo) applications. Analyzes UI code against established UX principles, WCAG 2.2 accessibility standards, platform guidelines (Apple HIG, Material Design 3), and UX writing best practices. Triggers on: "ux review", "review ux", "check accessibility", "improve the UI", "ux audit", "review this component", "is this accessible", "check usability", "ux feedback", "review the design", "improve usability", "check contrast", "review navigation", "ux writing", "improve copy", "review microcopy", "make this more intuitive", "ux best practices", "/ux".
naming-analyzer
Suggest better variable, function, and class names based on context and conventions.
a11y-audit
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
backend-engineering
Use this skill when designing backend systems, databases, APIs, or services. Triggers on schema design, database migrations, indexing strategies, distributed systems architecture, microservices, caching, message queues, observability setup, logging, metrics, tracing, SLO/SLI definition, performance optimization, query tuning, security hardening, authentication, authorization, API design (REST, GraphQL, gRPC), rate limiting, pagination, and failure handling patterns. Acts as a senior backend engineering advisor for mid-level engineers leveling up.
create-linkedin-content
Draft voice-tuned LinkedIn post variants from a free-form brief. Reads a personal voice guide (generated via generate-voice-guide), produces 2–5 variants with distinct framings, applies LinkedIn-specific defaults (arrow bullets, "why this matters" beat, 150–500 words), and self-checks against the voice guide's banned phrases before returning.
create-x-content
Draft voice-tuned X (Twitter) post variants from a free-form brief. Reads a personal voice guide (generated via generate-voice-guide), produces 2–5 variants with distinct framings (simple-howto, problem-first, hype, mechanism-breakdown, etc.), and self-checks against the voice guide's banned phrases before returning.
lazy-agent-loader
Load agent definitions on-demand to reduce context usage. Only loads full agent when needed.
adding-notes
Add notes to the knowledge repository. Use whenever the user provides content to save (commands, config, code, CLI output, explanations) or says "add/save/note/record this", "find a place for this", "记录一下", "添加笔记". Do NOT use for creating new topics from scratch or splitting/reorganizing notes (use splitting-notes skill).
gemini-forge
Generate frontend code drafts using Gemini 3.1 Pro's one-shot UI generation. Use when building React components, HTML/CSS pages, SVG animations, or converting screenshots to code. Produces fast, cheap drafts (7.5x cheaper than Opus) that Claude reviews and refines. Supports design system context loading (1M token window), screenshot-to-code pipeline, and physics-based SVG animation. Trigger: "generate a UI", "screenshot to code", "draft a component", "SVG animation", "convert this design", "gemini forge", "forge a UI".
minoan-frontend-design
This skill should be used when building web components, pages, artifacts, posters, or applications (websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI), including editorial heroes with hover-reactive depth-parallax busts or statues (Astryx pattern) and pointer-reactive fluid effects over DOM sections. Creates distinctive, production-grade frontend interfaces with high design quality that avoids generic AI aesthetics.
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
nextjs-development
Next.js framework development including App Router, Server Components, Server Actions, SSR, SSG, ISR, caching, data fetching, middleware, layouts, parallel routes, and module architecture for Next.js 13+/15/16. NOT for generic React patterns, hooks, or component logic (use react-development). NOT for UI/CSS design systems or visual styling (use frontend-design).
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
heroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
nextjs-developer
Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.
react-expert
Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.
ai-elements
AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.
json-render
AI chat response rendering guidance — handling UIMessage parts, tool call displays, streaming states, and structured data presentation. Use when building custom chat UIs, rendering tool results, or troubleshooting AI response display issues.
react-best-practices
React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.
shadcn
shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.
v0-dev
v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.
react-effects-audit
Audit React components for unnecessary useEffect patterns. Detects 9 anti-patterns from "You Might Not Need an Effect" and proposes fixes with severity levels.
new-component
Scaffold a new React component with optional Storybook story and Vitest test files. Use this skill whenever the user asks to "create a component", "make a button", "scaffold a card", "add a new component", or asks for a new file under `app/components/` following the project's component pattern (PascalCase folder, index.tsx, tests/).
react-frontend
React, TypeScript, and Next.js patterns for frontend development. Use when building React components, managing state, fetching data, optimizing performance, or working with Next.js App Router. Covers React 18-19, hooks, Server Components, and type-safe patterns.
testing-react
Writes React/TypeScript tests using Vitest and React Testing Library. Use when "write react tests", "vitest", "component test", "hook test", "RTL", "testing library", "snapshot test", or testing React components, hooks, and utilities.
feature-builder
Build complete React features with proper layered architecture including UI components, business logic, API integration, and state management. Use this skill when users request implementing features like "user authentication", "shopping cart", "product listing", "file upload", or any complete functionality that requires UI + business logic + data fetching. Generates all layers - presentation (components), business logic (hooks/stores/validation), and data access (API calls/React Query). Integrates with react-component-generator for UI and provides production-ready, maintainable code following best practices.
react-component-generator
Generate React components following best practices with TypeScript, Tailwind CSS, and Zustand state management. Use this skill when the user requests creating React components, UI elements, or mentions component generation. Supports common component patterns including basic components, forms, lists, cards, buttons, modals, and stateful components with Zustand integration.
ui-analyzer
Analyze UI design screenshots and generate React components with TypeScript and Tailwind CSS. Use this skill when the user provides UI mockups, design screenshots, or Figma exports and requests implementation. Provides detailed layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.
agents-sdk
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks.
agents-sdk
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks.
flaky-test-debugger
Debug and fix flaky tests including Playwright E2E, NestJS service/integration, React component, and unit tests. Use this skill when investigating intermittent test failures, triaging flaky tests, or fixing test instability.
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
accessibility-fundamentals
Auto-invoke when reviewing JSX with interactive elements, forms, buttons, or navigation. Enforces WCAG compliance and inclusive design.
ai-sdk
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
api-client
Use when setting up API clients - TanStack Query, Axios, JWT token management, error handling, or response parsing. NOT when plain fetch calls, non-API data handling, or unrelated UI logic. Triggers: "API client", "data fetching", "JWT token", "error handling", "paginated list", "TanStack Query".
blog-creator
Create SEO-optimized MDX blog posts with proper frontmatter
chatgpt-app-builder
DEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill. Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.
chatkit-widget
Use when integrating OpenAI/ChatKit chat widgets into Next.js/React applications. Triggers for: embedding chat widgets, configuring widget appearance, implementing event handlers, setting up authenticated chat access, or customizing widget branding. NOT for: building custom chat UIs from scratch or backend AI model configuration.
coding-standards
React 19 and TypeScript coding standards for Portfolio Buddy 2. Use when: writing new components, reviewing code, refactoring, or ensuring consistency. Contains component patterns, TypeScript rules, and best practices.
component-refactoring
Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
cookmode-v2-source-of-truth
Documents and explains the CookMode V2 codebase as it exists. Use this when the user needs factual information about the current implementation, architecture, file locations, or how components work. DOES NOT suggest improvements unless explicitly asked.
documentation-fundamentals
Auto-invoke when reviewing README files, JSDoc comments, or inline documentation. Enforces "WHY not WHAT" principle.
empathy-ledger-dev
Invoke this skill when: - Starting work on any Empathy Ledger feature - Need quick reference to project patterns
fetching-library-docs
Token-efficient library API documentation fetcher using Context7 MCP with 77% token savings. Fetches code examples, API references, and usage patterns for published libraries (React, Next.js, Prisma, etc). Use when users ask "how do I use X library", need code examples, want API syntax, or are learning a framework's official API. Triggers: "Show me React hooks", "Prisma query syntax", "Next.js routing API". NOT for exploring repo internals/source code (use researching-with-deepwiki) or local files.
framer-motion
Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.
frontend-agent
Handles frontend/UX/route work for Unite-Hub. Fixes UI bugs, implements React components, updates layouts, ensures responsive design, and maintains shadcn/ui consistency.
frontend-component
Next.js 16+ uses App Router with Server Components by default. Client Components are only used when interactivity is needed (hooks, event handlers, browser APIs).
frontend-design
Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
frontend-dev-guidelines
Opinionated frontend development standards for modern React + TypeScript applications. Covers Suspense-first data fetching, lazy loading, feature-based architecture, MUI v7 styling, TanStack Router, performance optimization, and strict TypeScript practices.
frontend-mobile-development-component-scaffold
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
frontend-orchestrator
Coordinates frontend development tasks (React, TypeScript, UI/UX). Use when implementing user interfaces, components, state management, or visual features. Applies frontend-standard.md for quality gates.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
javascript-typescript-typescript-scaffold
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
lovable
Integration skill for Lovable.dev projects. Activates when working with: - Lovable.dev projects with GitHub sync - Supabase Edge Functions that need deployment - Database migrations for Lovable Cloud - Projects with supabase/ directory structure - Any mention of "Lovable", "deploy edge function", "apply migration" Provides exact Lovable prompts for backend operations that can't be done via GitHub alone.
naming-analyzer
Suggest better variable, function, and class names based on context and conventions.
nano-banana-builder
Build full-stack web applications powered by Google Gemini's Nano Banana & Nano Banana Pro image generation APIs. Use when creating Next.js image generators, editors, galleries, or any web app that integrates gemini-2.5-flash-image or gemini-3-pro-image-preview models. Covers React components, server actions, API routes, storage, rate limiting, and production deployment patterns.
pitfalls-react
React component patterns, forms, accessibility, and responsive design. Use when building React components, handling forms, or ensuring accessibility. Triggers on: React component, useEffect, form validation, a11y, responsive, Error Boundary.
react-19
Guide for React 19 development with Actions, Server Components, and new hooks. Use for building React 19 apps, form handling, optimistic updates, and migrations.
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
react-component
Use when creating UI components in React - functional components, hooks, custom hooks, or component composition patterns. NOT when backend logic, API routes, or non-React frameworks are involved. Triggers: "create component", "build widget", "KPI card", "form", "modal", "custom hook", "useContext", "useState", "useEffect".
react-zustand-patterns
Zustand state management patterns for React. Use when working with Zustand stores, debugging state timing issues, or implementing async actions. Works for both React web and React Native.
remix-cache
A type-safe, Redis-backed caching library for Remix applications with SSE-based real-time invalidation, stale-while-revalidate, pattern matching, and automatic React revalidation. Use when working with Remix caching, Redis, cache invalidation, implementing caching strategies, or real-time data synchronization in Remix apps.
rn-zustand-patterns
Zustand state management patterns for React Native. Use when working with Zustand stores, debugging state timing issues, or implementing async actions in Zustand.
senior-architect
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
senior-frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
senior-qa
Comprehensive QA and testing skill for quality assurance, test automation, and testing strategies for ReactJS, NextJS, NodeJS applications. Includes test suite generation, coverage analysis, E2E testing setup, and quality metrics. Use when designing test strategies, writing test cases, implementing test automation, performing manual testing, or analyzing test coverage.
simplify
Simplify and refine recently modified code for clarity and consistency. Use after writing code to improve readability without changing functionality.
styling-with-shadcn
Build beautiful, accessible UIs with shadcn/ui components in Next.js. Use when creating forms, dialogs, tables, sidebars, or any UI components. Covers installation, component patterns, react-hook-form + Zod validation, and dark mode setup. NOT when building non-React applications or using different component libraries.
superpower-zustand
MANDATORY for creating Zustand stores. This skill is required when users request state management, creating stores, or mention Zustand. Do NOT create Zustand stores without this skill - all stores must use the required StoreBuilder pattern with immer middleware and factory pattern separation
tester
Comprehensive testing skill for GabeDA application - designs test strategies (UAT, integration, smoke, unit), creates tests for frontend (React/Playwright) and backend (Django/pytest), executes tests, analyzes results, and generates detailed reports with findings. Stores reports in ai/testing/ and tests in appropriate project folders.
testing-fundamentals
Auto-invoke when reviewing test files or discussing testing strategy. Enforces testing pyramid, strategic coverage, and stack-appropriate frameworks.
typescript-best-practices
Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation. Must use when reading or writing TypeScript/JavaScript files.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
youtrack
Interacts with YouTrack issue tracker for IdeaVim. Use when working with tickets (VIM-XXXX), adding comments, managing tags, setting status, or release management. This project does NOT use GitHub Issues - use YouTrack instead.
nav-skill-creator
Analyze codebase patterns and create custom skills for repetitive workflows. Use when project needs automation or pattern enforcement. Auto-invoke when user says "create a skill for...", "automate this workflow", or "we keep doing X manually".
copilot-sdk
Build agentic applications with GitHub Copilot SDK. Use when embedding AI agents in apps, creating custom tools, implementing streaming responses, managing sessions, connecting to MCP servers, or creating custom agents. Triggers on Copilot SDK, GitHub SDK, agentic app, embed Copilot, programmable agent, MCP server, custom agent.
fec-form-handling
用于构建或审查较复杂表单，包括 React Hook Form、Zod schema、类型化校验、动态字段、受控第三方输入、文件上传、多步骤流程、依赖校验或表单性能。不要用于没有校验的 1-3 个字段小表单；中文触发词包括 表单、表单校验、动态字段。
dev-shadcn
Integration and customization of shadcn/ui (copy-paste React components, Radix + Tailwind). Trigger when the user wants to install shadcn, add components, customize the theme, or when shadcn/ui usage is detected in the project.
react-code
Patterns and conventions for writing and editing React code, including components and hooks. Use this skill whenever writing or reviewing React components, hooks (useEffect, useCallback, useState), event handlers, or component extraction decisions. Also trigger when debugging stale closures, infinite re-renders, or unnecessary re-renders caused by memoization issues.
backend-error-handling
Implement solid error handling patterns. Use when adding error handling, improving error UX, debugging error flows, standardizing error responses, or when user mentions "error boundary", "try/catch", "error state", "toast notification", "form validation error", or "API error handling".
canvas
A Cursor Canvas is a live React app the user opens beside the chat. MUST use a canvas for standalone analytical artifacts — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Prefer canvas for MCP tool results (Datadog, Databricks, Linear, Sentry, Slack) over markdown tables or code blocks. MUST also read this skill when creating, editing, or debugging any .canvas.tsx file.
design-email
Design and implement transactional and marketing email templates. Detects email framework (React Email, MJML, or plain HTML), mail provider (Resend, SendGrid, Postmark, AWS SES, Nodemailer), and delivery setup (SPF/DKIM/DMARC). Builds mobile-first templates with dark mode support, 600px max-width, inline styles for client compatibility, and accessible alt text. Reviews copy for natural, conversational tone — no jargon, no passive voice, no corporate formality. Checks deliverability config. Tests rendering across major email clients. Generic across any stack. Use when asked to "build an email template", "transactional email", "welcome email", "password reset email", "email design", "React Email", "MJML", "dark mode email", "deliverability", "SPF DKIM", "email copy review", or "why is my email in spam".
design-mobile-first
Design design-mobile-first responsive interfaces with touch optimization. Use when user mentions "mobile", "responsive", "touch", "PWA", "design-mobile-first", "small screen", "tablet", "swipe", or "gesture".
parallel-agents
Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.
add-reactions
Add WhatsApp emoji reaction support — receive, send, store, and search reactions.
setup
Run initial Deus setup — dependencies, container, credentials, service, and CLI. Channels are added separately after setup completes. Triggers on "setup", "install", "configure deus", or first-time setup requests.
zigts-expert
Write handler code in the zigts TypeScript subset for zigttp's serverless runtime. Covers the language spec, virtual modules, compile-time verification, sound mode type safety, and idiomatic FaaS patterns. Use for any .ts/.tsx/.js/.jsx files targeting zigttp.
react-no-use-effect
Enforce the no-useEffect rule when writing or reviewing React code. Activate when writing React components, refactoring existing useEffect calls, reviewing PRs that introduce useEffect, or when an agent adds useEffect "just in case." Provides five replacement patterns and the useMountEffect escape hatch.
tanstack-query-best-practices
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.
tanstack-router-best-practices
TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with complex routing needs.
kubebolt-copilot
AI copilot skill for KubeBolt — the Kubernetes monitoring platform. This skill provides deep knowledge about Kubernetes clusters, workloads, networking, storage, RBAC, and troubleshooting, combined with real-time awareness of the user's connected cluster data via KubeBolt's REST API. Use this skill whenever the user asks questions about their Kubernetes cluster, wants to troubleshoot pods, deployments, services, nodes, or any K8s resource, asks about cluster health or insights, wants to understand topology or relationships between resources, needs help interpreting metrics (CPU, memory), asks about Gateway API, Ingresses, RBAC, storage, or any Kubernetes concept in the context of their monitored cluster. Also trigger when the user says things like "what's wrong with my cluster", "why is this pod crashing", "show me resource usage", "explain this insight", or any Kubernetes troubleshooting question. This skill powers the KubeBolt in-app chatbot.
new-hook
Scaffold a new custom React hook with a Vitest test file. Use this skill whenever the user asks to "create a hook", "make a useFoo hook", "scaffold a custom React hook", "add a hook under app/hooks", or describes a piece of reusable React state/effect logic that warrants extraction into a named `use*` hook.
create-relay-nodes-component
Generate Relay-based Nodes components with BAITable integration following established patterns (BAIUserNodes, SessionNodes, BAISchedulingHistoryNodes, BAIRouteNodes). Automatically creates component file with GraphQL fragment, type definitions, column configurations, and customization patterns. Minimal user input required - just provide GraphQL type name and the skill generates a complete starting template.
react-expert
React gotchas and decision criteria covering stale closure bugs in useEffect, conditional rendering traps (falsy 0/empty string), state management selection (useState vs Context vs Zustand vs TanStack Query), and hooks rules. Use when writing React components, debugging re-renders, choosing state management, or encountering useEffect infinite loops.
frontend-tester
Senior Frontend QA Engineer with 10+ years JavaScript/TypeScript testing experience. Use when writing unit tests for React components, creating integration tests with React Testing Library, testing custom hooks, mocking APIs, or following TDD for frontend.
search-tools
Search Tool Hierarchy
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
selenium-ui-test-generator
Generates Selenium WebDriver tests for React/Angular front-ends with STRICT loop prevention. Triggers on: "test UI", "generate Selenium tests", "test React app", "create E2E tests", "test front-end". WARNING: UI tests cost 3x more than unit tests -- generate selectively.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design
Visual design systems, UI/UX styling, Tailwind CSS, CSS variables, component libraries (shadcn/ui, Radix UI), design tokens, accessibility (WCAG), responsive layout, dark mode, and Figma-to-code workflows. NOT for React component logic, hooks, or state management (use react-development). NOT for Next.js routing, SSR, or server components (use nextjs-development).
web-accessibility
Use this skill whenever the user is building or reviewing any web UI. Accessibility is a baseline requirement, not a niche concern. Covers WCAG 2.2 AA, semantic HTML, ARIA patterns, keyboard navigation, focus management, color contrast, touch targets, forms, and testing with axe / screen readers. Trigger when generating any interactive component or page (forms, modals, menus, tables, navigation, layouts), before any "launch" or "go live", during pre-launch checklists, and whenever producing new HTML/JSX markup, even if the user does not explicitly mention a11y or WCAG. Skip for backend-only changes, CLI tools, or non-UI code.
code-to-figma
Sync React components to Figma designs. Use when: 'sync component to Figma', 'generate Figma from code', 'create design system in Figma', 'export React to Figma'. Parses React/TSX with Babel AST, resolves Tailwind classes, outputs Figma-compatible JSON for loading via Figma Desktop plugin.
add-event-type
Add a new event type to the frontend feed system with corresponding React component. Use when user mentions "new event", "add event type", "event block", "new block type", or wants to display new agent output types.
context7
Fetch up-to-date library documentation via Context7 API. Use PROACTIVELY when: (1) Working with ANY external library (React, Next.js, Supabase, etc.) (2) User asks about library APIs, patterns, or best practices (3) Implementing features that rely on third-party packages (4) Debugging library-specific issues (5) Need current documentation beyond training data cutoff (6) AND MOST IMPORTANTLY, when you are installing dependencies, libraries, or frameworks you should ALWAYS check the docs to see what the latest versions are. Do not rely on outdated knowledge. Always prefer this over guessing library APIs or using outdated knowledge.
nextjs-devtools
Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
ai-landing-skill
Build AI-startup landing pages with the `performative-ui` React component library (28 components: Aurora, Rotator, WordRoll, PromptHero, MockIDE, PricingCard, WaitlistForm, …). Use when the user wants a marketing landing page for an AI product, SaaS tool, hackathon project, waitlist, demo, or anything in the "AI-startup landing" aesthetic — animated headlines, gradient text, ChatGPT-style input as CTA, faux IDE typing demos, glass cards, infinite logo marquees. Triggers: "build a landing for my AI app", "AI SaaS landing", "vibe landing", "use performative-ui", "AI startup homepage", "сделай лендинг для AI-стартапа", "лендинг в стиле AI", "залендить waitlist". Do NOT use for regulated-industry sites (medical, legal, banking, government) where this aesthetic is inappropriate.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
keyword-research
Check Google Trends for keyword interest and SEO prioritization. Use when the user mentions "keyword research", "SEO", "search trends", "content strategy", "blog prioritization", "compare keywords", "trending topics", or wants to evaluate keyword opportunities.
model-scan
Scan LLM provider APIs for available models, fetch official docs for specs (parameters, context windows, capabilities, pricing), save timestamped doc snapshots, and optionally update a project's `CLAUDE.md` model table. Use when the user asks about current models or wants to refresh the model list — "scan models", "refresh models", "what models are available", "update model table", "model pricing", "check model IDs".
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
react-expert
Use when building React 18+ applications requiring component architecture, hooks patterns, or state management. Invoke for Server Components, performance optimization, Suspense boundaries, React 19 features.
21st-registry
Publish a React component to the user's team library on 21st.dev so teammates can install it with a single command, or install an existing one. Triggers when the user says things like "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент", "share with team", "make this reusable", "install our Button", "use the team button".
react-email
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
code-reviewer-react
React frontend code review skill. Systematically reviews React + JSX/TSX component code, covering component design, Hook usage, render performance, Props typing, error boundaries, and frontend security. Use this skill when reviewing .tsx/.jsx files or .ts/.js files containing React component code. Applicable to React 18+, function components + Hooks pattern projects.
code-reviewer-typescript
TypeScript code review skill. Focused on systematic review of TypeScript language-level type system, generics design, module organization, and error handling patterns. Covers type safety, generic constraints, interface design, module system, and runtime validation. Use this skill when reviewing .ts files (non-React components). Applicable to pure TypeScript projects, Node.js backend TS code, utility libraries, etc.
code-reviewer-react
React frontend code review skill. Systematically reviews React + JSX/TSX component code, covering component design, Hook usage, render performance, Props typing, error boundaries, and frontend security. Use this skill when reviewing .tsx/.jsx files or .ts/.js files containing React component code. Applicable to React 18+, function components + Hooks pattern projects.
code-reviewer-typescript
TypeScript code review skill. Focused on systematic review of TypeScript language-level type system, generics design, module organization, and error handling patterns. Covers type safety, generic constraints, interface design, module system, and runtime validation. Use this skill when reviewing .ts files (non-React components). Applicable to pure TypeScript projects, Node.js backend TS code, utility libraries, etc.
verify
Run the project's full verification gate — typecheck, lint, tests — in one go. Use after any code change before committing, or when the user asks "is it green?" / "can I ship this?" / "verify" / "run checks".
nextjs-react-expert
React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.
mockgen-shadcn
Generate React + shadcn/ui mockup screens from PRD.md files for UI/UX human designer review. Creates a Vite + React 19 + TypeScript + shadcn/ui mockup application with admin dashboard layout (collapsible sidebar navigation, header with logo/notifications/locale/user menu, footer with copyright/version) using React Router v7 for client-side navigation, organized by user role in a mockup/ folder. Input: application name (mandatory), version (mandatory), module (optional). Output: mockup/ folder in the application's context folder containing MOCKUP.html index page, Vite + React project files, layout components, shadcn/ui components, and role-specific page components. Trigger on keywords: "generate mockup shadcn", "generate shadcn mockup", "create shadcn mockup screens", "shadcn UI mockup", "React mockup from user stories", "mockup from PRD.md shadcn", "generate shadcn screens", "create shadcn UI screens". Accepts application name and version as input (e.g., `/mockgen-shadcn hub_middleware v1.0.3`). Optionally ac
specgen-react-mui
Generate a detailed specification document for building a React SPA (Single Page Application) using React 19, TypeScript 5, Vite 6, Material UI (MUI) v6, React Router v7, TanStack Query v5, Zustand v5, React Hook Form v7, and Zod v3. Authentication (Keycloak OAuth2/OIDC PKCE, generic OIDC, or none), API integration (REST via Axios), and optional features (WebSocket, i18n, MUI X Data Grid, MUI X Charts) are configurable based on user input. Standardized input: application name (mandatory), version (mandatory), module (optional). Use this skill whenever the user asks to create a spec, specification, blueprint, or technical design document for a new React SPA or frontend application. Also trigger when the user says things like "spec out a new React project", "design a React SPA", "write a technical spec for my new frontend app", "scaffold spec for a React MUI app", or any request for a specification document describing a React + MUI + TypeScript application. Even if the user only mentions a subset of the stack (
specgen-react-tailwind
Generate a detailed specification document for building a React SPA (Single Page Application) using React 19, TypeScript 5, Vite 6, Tailwind CSS v3, Headless UI v2, Heroicons, React Router v7, TanStack Query v5, Zustand v5, React Hook Form v7, and Zod v3. Components are built utility-first with Tailwind and made accessible with Headless UI primitives (no component framework like MUI). Authentication (Keycloak OAuth2/OIDC PKCE, generic OIDC, or none), API integration (REST via Axios), and optional features (WebSocket, i18n, TanStack Table data grids, Recharts charts, react-day-picker date pickers, Tiptap rich text) are configurable based on user input. Standardized input: application name (mandatory), version (mandatory), module (optional). Use this skill whenever the user asks to create a spec, specification, blueprint, or technical design document for a new React SPA or frontend application styled with Tailwind CSS. Also trigger when the user says things like "spec out a new React Tailwind project", "design
financial-ui-patterns
Use when building any UI that displays prices, P&L, holdings, orders, trades, charts, order books, watchlists, or streaming market data. Covers patterns from Kraken, Coinbase, TradingView, Bloomberg, Robinhood. Read before writing JSX for any financial surface.
typescript
Enforce TypeScript 5+ strict type-checking. Use when editing .ts/.tsx or tsconfig.json, or when the user mentions TypeScript, any, unknown, strict mode, type assertion, generics, enum, or @ts-ignore. Forbids any, as any, @ts-ignore, namespace, non-const enum; forces strict tsconfig and unknown over any.
react
Core React 19 patterns including hooks, Suspense, lazy loading, component structure, TypeScript best practices, and performance optimization. Use when working with React components, hooks, lazy loading, Suspense boundaries, or React-specific TypeScript patterns.
obed-asset-pipeline-craft
How Obed prepares and ships frontend assets — image format selection, responsive image discipline, font subsetting, SVG sprite hygiene, the Core Web Vitals budget anchoring, and the no-application-logic boundary. Invoke when frontend assets are being prepared or optimised.
dare-frontend-design
Arquitetura frontend DARE para projetos React e Vue. Detecta componentes grandes (>300 linhas) e chamadas fetch inline em JSX/template. Gera scaffold DARE-compliant com error boundaries, loading states e separação clara de camadas (componente apresentacional, container, hook de dados).
distill-design
Use this skill to generate well-branded interfaces and assets for Distill (the web-native ML research journal), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
tenet-errors
Audits error handling: empty catches, swallowed async errors, inconsistent types, and missing timeouts.
tenet-performance
Audits performance risks: N+1 queries, sync I/O, indexes, leaks, bundles, and rerenders.
remotion
Use when creating programmatic videos, animated explainers, or visual compositions with Remotion.
010110-clean-architecture
Clean Architecture layer ordering and strict inward dependency flow for web applications. Domain → Application → Infrastructure → Actions → UI.
060103-better-auth
Better Auth integration for Next.js — setup, API endpoints, client SDK, React Context provider, and Organization plugin for multi-tenant auth.
hugging-face-tool-builder
Use this skill when the user wants to build tool/scripts or achieve a task where using data from the Hugging Face API would help. This is especially useful when chaining or combining API calls or the task will be repeated/automated. This Skill creates a reusable script to fetch, enrich or process data.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
marketing-design
Marketing brand-asset generation (raster images via AI): logo design (55 styles, 30 palettes, 25 industries), corporate identity / CIP mockups (50 deliverables — business card, letterhead, signage, packaging, apparel), banner design (22 styles, social/ads/web/print), SVG icon design (15 styles), social photos (multi-platform), and model-agnostic poster prompts. Default image engine is Codex gpt-image-2 (ChatGPT subscription via `codex login`), attaching the brand logo as a reference image for CIP compositing; falls back to Gemini Nano Banana (GEMINI_API_KEY, same key as omnimedia). Actions: design logo, create CIP / brand identity, generate mockups, design banner, generate icon, create social photos, design poster, social media images. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. For HTML/web pages, dashboards, and slide decks, use opendesign instead.
deployment
Hosting, deployment, CI/CD, and going live. Activated when Claude works with deployment configs, Dockerfiles, Vercel/Netlify configs, or deployment-related commands.
frontend
React, components, state management, and modern frontend concepts. Activated when Claude works with .jsx/.tsx files or React-related code. Most vibecoded apps use React.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
design-ux
UI/UX design patterns and design system architecture. TRIGGER when: working on component design, layout/grid decisions, design tokens, color palettes, typography, accessibility (WCAG), responsive design, TUI aesthetics, or creating DESIGN.md documentation. Covers React, Tailwind CSS, terminal UI, and mobile patterns with a monospace-first, constraint-based design philosophy. DO NOT TRIGGER when: writing React/TypeScript code logic (use droo-stack skill), building Raxol TUI framework features (use raxol skill), working with CSS-in-JS runtime concerns (this skill covers design decisions, not runtime), or designing API/module/public-surface interfaces (use interface-designer skill).
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
ai-sdk
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
chat-sdk
Build multi-platform chat bots with Chat SDK (`chat` npm package). Use when developers want to (1) Build a Slack, Teams, Google Chat, Discord, Telegram, GitHub, Linear, or WhatsApp bot, (2) Use Chat SDK to handle mentions, direct messages, subscribed threads, reactions, slash commands, cards, modals, files, or AI streaming, (3) Set up webhook routes or multi-adapter bots, (4) Send rich cards or streamed AI responses to chat platforms, (5) Build or maintain a custom adapter or state adapter. Triggers on "chat sdk", "chat bot", "slack bot", "teams bot", "google chat bot", "discord bot", "telegram bot", "whatsapp bot", "@chat-adapter", "@chat-adapter/state-", "custom adapter", "state adapter", "build adapter", and building bots that work across multiple chat platforms.
code-deduplicator
Find duplicated code introduced or touched in the current session, then safely consolidate exact or low-risk duplicates while preserving behavior.
react-architect
React 19 standards — TypeScript strict, feature-based components, hooks-first composition, TanStack Query for server state, zustand for cross-tree client state, Suspense + ErrorBoundary at every async boundary, Radix for a11y. Use when writing or reviewing React components, hooks, or client-side state.
ozor-video-best-practices
Expert guide for crafting high-quality video prompts for Ozor.ai, the AI video generation platform. Use this skill whenever the user mentions Ozor, wants to create a launch video, product demo, feature announcement, explainer video, social ad, release notes video, investor update, tutorial, or any marketing video. Also trigger when the user asks for help writing video prompts, improving video output, structuring video scenes, choosing video formats, or wants best practices for AI video creation. Trigger on phrases like 'make a video', 'create a launch video', 'video for my product', 'Ozor prompt', 'video best practices', 'explainer video', 'product demo video', 'social clip', 'announcement video', or any request involving short-form video content for products and marketing.
react
Building and reviewing React applications — components and JSX, hooks (useState/useReducer/useEffect/useRef/useContext, custom hooks), the rules of hooks, state and data flow, rendering and memoization, concurrent features, accessibility, and testing with React Testing Library. Use when writing, reviewing, or debugging React UIs, re-renders/effects, or state architecture. Excludes Next.js (see nextjs) and React Native/Expo (see react-native). Competence skill anchored on react.dev — no first-party certification.
react-native
Building and reviewing React Native and Expo mobile apps — core components and styling (Flexbox, FlatList), navigation (Expo Router, React Navigation), the Expo SDK and permissions, native modules and the New Architecture (JSI, Fabric, TurboModules), EAS Build/Submit/Update, iOS/Android platform differences, and mobile performance. Use when building, reviewing, or debugging RN/Expo apps or the native/mobile layer. Assumes core React (see react); covers the mobile deltas only. Competence skill — no first-party certification.
typescript
Writing and reviewing TypeScript — the type system and structural typing, generics, narrowing and inference, conditional/mapped/utility types, strictness configuration (tsconfig, the strict family), module resolution and project references, typing third-party/Node APIs, and declaration files (.d.ts). Use when adding or reviewing types in any TS codebase (Node, React, Lambdas). Framework-specific concerns live in the react/nodejs/nextjs/react-native skills. Competence skill anchored on the official TypeScript Handbook — no first-party certification.
peg-design
Use this skill to generate well-branded slides, presentations, and data-driven design artifacts in the Peg visual language. Minimal, type-led, Apple-keynote-inspired. Contains design guidelines, color/type/spacing tokens, React components, and 7 production-ready slide templates.
swe-developing-frontend-ui
UI development skill covering design token usage, shadcn/ui + Radix composition patterns, accessibility requirements, anti-patterns catalog, and brand context for `crud-fe-ts-nextjs` and `crud-fs-ts-nextjs`. Auto-loads when working on TSX components, CSS, or UI design tasks.
naming-and-structure-cleanup
Use when naming conventions or file structure drift across a project and need to be made consistent without changing business logic.
design-mode
Use when making UI/frontend changes in Cursor's Design Mode, when the user selects elements visually, draws annotations, or uses voice commands to describe changes. Also use when editing components from the integrated browser, when multi-selecting elements to match styles, when making iterative visual refinements, or when the agent receives visual context (screenshots, element selections, DOM references) alongside a change request.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
react
This skill is loaded by `frontend-developer` when:
android-compose-design
Android-specific UI/UX and engineering system for Jetpack Compose apps. Use this skill whenever building, modifying, reviewing, or designing any Android app screen, component, or layout - even if the user doesn't explicitly mention design, Compose, or Material. Routes between five distinct visual styles (m3-expressive-default, dark-product-minimal, playful-warm, data-dense, trust-signaling) based on the app's purpose, then applies an engineering track covering architecture, state, platform integration (edge-to-edge, splash, predictive back, permissions), accessibility, performance, and build defaults. Use this proactively for any Android development work, not just when "design" is named in the prompt.
og-image
Generate an Open Graph / Twitter Card social unfurler image — 1200×630 JPEG/PNG, <5MB, with deterministic typography. Defaults to Satori + @resvg/resvg-js template rendering (no diffusion). Diffusion is optional and only for the hero art layer composited behind the template.
vue-jsx-best-practices
JSX syntax in Vue (e.g., class vs className, JSX plugin config).
agent-evaluation
Evaluate GenAI agent task execution using LLM-as-judge. Produces structured scores (0-5), feedback, and improvement recommendations.
status-check
Cold-start "where am I?" cockpit. Renders the cross-run orchestrator dashboard (active workers, open questions, ready vs blocked, overlap + lease health) and offers follow-up actions. Read-only; works standalone.
chrome-integration
Use for browser-based web development, visual UI checks, container dev servers, host Chrome, and the browser CLI inside Agent Workcell sandboxes.
nextjs-seo-optimizer
Comprehensive Next.js SEO optimization skill for metadata, sitemaps, robots.txt, structured data, and Core Web Vitals. Use when building or auditing Next.js applications for SEO, implementing metadata API, generating sitemaps, adding Open Graph tags, creating JSON-LD structured data, optimizing for search engines, or improving search rankings. Works with Next.js 13+ App Router and Pages Router.
mui-styling
Material-UI styling with the project neon cyberpunk theme. TRIGGER when: styling React components, defining theme tokens, or applying componentStyles. SKIP: component logic and hooks (use react-patterns); cross-stack UX/design decisions (use ui-ux-pro-max).
pattern-recognition
Identify and apply existing codebase patterns for consistency. TRIGGER when: writing new code that should match conventions, or reviewing code for pattern drift. SKIP: language-specific patterns (use python-patterns or react-patterns); security review (use security-review-checklists).
react-patterns
React 18 + TypeScript component and hook standards. TRIGGER when: creating components, custom hooks, or reviewing React code. SKIP: visual styling and theme tokens (use mui-styling); global store design (use state-management).
ui-ux-pro-max
Cross-stack UI/UX design intelligence: layout, color, typography, charts, accessibility. TRIGGER when: planning or reviewing UI/UX, choosing palettes/fonts, or improving accessibility. SKIP: Material-UI code specifics (use mui-styling); React component code (use react-patterns).
frontend-best-practices
Frontend best practices — TypeScript, React/Vue/Svelte, CSS, accessibility, testing. Use when writing, reviewing, or discussing frontend code.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
react-patterns
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
react-testing
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
beforemerge-react-review
Comprehensive code review rules for React applications (framework-agnostic). Covers security anti-patterns, performance pitfalls, architecture mistakes, and code quality issues. Use this skill when reviewing, writing, or refactoring React code — especially before merging pull requests. Triggers on tasks involving code review, PR review, security audit, performance review, or quality checks for React/TypeScript projects. Does not cover Next.js-specific patterns (see nextjs-review for that).
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
react-dev
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).
vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
antv-s2-expert
S2 multi-dimensional cross-analysis table development assistant (Expert Skill). MUST act as priority when users mention the following keywords: cross table, pivot table, detail table, multi-dimensional analysis table, pivot table, cross table, table sheet, antv s2, s2, @antv/s2. Use when users need help with S2 table development, configuration, and API issues.
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
senior-qa
Generates unit tests, integration tests, and E2E tests for React/Next.js applications. Scans components to create Jest + React Testing Library test stubs, analyzes Istanbul/LCOV coverage reports to surface gaps, scaffolds Playwright test files from Next.js routes, mocks API calls with MSW, creates test fixtures, and configures test runners. Use when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality".
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
caveman
Ultra-compressed communication mode — drops filler, articles, pleasantries while keeping technical accuracy. Use when user says "caveman mode", "talk like caveman", "less tokens", "be brief", or invokes /caveman.
ai-regression-testing
Design regression tests for AI-assisted development by targeting model blind spots such as sandbox versus production path drift, response-shape mismatches, untested bug fixes, and same-model review failures. Use after AI-generated code changes, bug fixes, API edits, or feature-flag/sandbox changes.
no-fluff
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "no fluff", "be concise", "use less tokens", or similar.
creating-agent-teams
Use when facing a complex task that could benefit from multiple agents, parallel work, or specialized roles - triggers on "create a team", "parallelize", "multi-agent", or cross-layer implementation needs
pattern-engineer-frontend-standard
React frontend bullets: composition-first components, custom hooks, route registration + entry-source reachability (a real inbound path, not just a passing URL-render test) in one slice, render to the surface's `docs/ui-contract/<screen>.yaml` (declared role+accessible-name interface; extend its `states` per slice), route-param queries gated by `enabled: !!param`, `onSuccess` cache invalidation, idempotency-key rotation on 4xx, API via `src/lib/api`, Context+Reducer state, RHF+Zod forms, per-route error boundaries, native a11y elements, Tailwind ↔ `docs/design-system/tokens.md`. Activate on frontend `.tsx`/`.ts`.
pattern-engineer-vite
Vite implementation bullets: pick Vite for pure CSR (no SSR/SSG/SEO); env vars via `import.meta.env` with `VITE_` prefix (NOT a security boundary); `vite-plugin-checker` or `tsc --noEmit` in CI — `vite build` does not type-check; `vite-tsconfig-paths` over hand-rolled aliases; `build.sourcemap: false` in prod; `server.host: true` for containerized dev; avoid barrel files; route-boundary splitting via `lazy()` + `<Suspense>`. Activate when editing `vite.config.*` or scaffolding a Vite React app.
pattern-reviewer-frontend-standard
React-specific code-quality audit for a frontend diff: component design, hook correctness, route registration + entry-source reachability (a real inbound path from the shell or parent), TanStack Query route-param guards, mutation `onSuccess` invalidation + return stability, idempotency-key rotation on 4xx, API access through `src/lib/api`, per-route error boundaries, native a11y elements, Tailwind ↔ tokens. Each finding cites `file:line`. Activate on frontend diffs.
senior-qa
Comprehensive QA and testing skill for quality assurance, test automation, and testing strategies for ReactJS, NextJS, NodeJS applications. Includes test suite generation, coverage analysis, E2E testing setup, and quality metrics. Use when designing test strategies, writing test cases, implementing test automation, performing manual testing, or analyzing test coverage.
3d-web-experience
Build 3D experiences for the web with Three.js, React Three Fiber, Spline, WebGL, and GLSL — product configurators, immersive sites, interactive scenes. USE WHEN adding 3D, a configurator, or WebGL depth to a web UI.
artifacts-builder
Build elaborate multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui, then bundle them into a single HTML file. USE WHEN a complex artifact needs state management, routing, or shadcn/ui components — NOT for simple single-file HTML/JSX artifacts.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
library-mermaid
Provides Mermaid diagramming patterns for technical documentation including flowcharts, sequence diagrams, ERDs, class diagrams, state diagrams, Gantt charts, and mindmaps. Use when creating architecture diagrams, documenting API sequences, illustrating database schemas, building project timelines, or asking about Mermaid syntax.
refactor-master
Restructure messy code into smaller, more focused pieces — without changing observable behavior. Knows when to extract a function, split a module, replace a conditional with a strategy, pull pure logic out of side-effect-heavy code, and when to do nothing. Use when the user says "refactor this", "clean this up", "this file is too big", "split this module", "make this readable", or hands over a god-class and asks for a rescue plan.
refactor-master
Restructure messy code into smaller, more focused pieces — without changing observable behavior. Knows when to extract a function, split a module, replace a conditional with a strategy, pull pure logic out of side-effect-heavy code, and when to do nothing. Use when the user says "refactor this", "clean this up", "this file is too big", "split this module", "make this readable", or hands over a god-class and asks for a rescue plan.
posterskill
Generate an HTML conference poster from a paper and project website, printable to PDF
react-patterns
React patterns, anti-patterns, hooks rules, performance, component design, and review checklist for React core (independent of any specific meta-framework). Use whenever the project contains `.jsx` or `.tsx` files, `react` in `package.json` dependencies, OR the user asks about React, hooks, components, JSX, TSX, useState, useEffect, useMemo, useCallback, rendering, hydration, React performance, or any React component work, even if React is not mentioned by name.
aria-usage
WAI-ARIA usage guidelines. Avoid redundant ARIA attributes. No ARIA is better than Bad ARIA. Use when writing or reviewing HTML/JSX with accessibility attributes.
react-use-effect
Rules for useEffect usage in React including when to avoid it and when to extract it into custom hooks. Use when writing or reviewing React components that contain or might need useEffect.
react-use-ref
Avoid unnecessary useRef in React. Prefer HTML standard features, declarative libraries, state, or custom hooks. Use when writing or reviewing React components.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
animation-library-mastery
Animation library selection and implementation for React web and React Native. Choose between Motion (Framer Motion), React Spring, GSAP, and CSS animations. Use when adding animation, transitions, spring physics, scroll effects, layout animation, or gesture-driven motion to any component.
cursor-integration
Hybrid workflow assistant for Cursor IDE and Claude Code CLI. Optimizes context sharing, suggests tool selection (Micro vs Macro), and synchronizes configuration. Use when working with both tools, resolving conflicts, or streamlining the dev environment.
docker-devops
Docker containerization and DevOps assistant. Generates optimized multi-stage Dockerfiles, manages local development with docker-compose, and helps debug container failures. Use when containerizing React/Python apps, setting up local envs, or troubleshooting deployments.
git-github-workflows
Git and GitHub workflow automation. Handles commit messages, branch management (worktrees), PR creations, conflict resolution, and CI/CD pipelines. Use when interacting with version control, setting up Actions, or resolving merge conflicts.
psd-jsx-builder
Programmatically build layered Photoshop PSD files from code (ExtendScript/jsx) and render-verify them without manual clicking. Use this skill whenever the user wants to generate, batch-produce, or script Photoshop documents — slide decks, portfolio pages, posters, certificates, repeated layouts, data-driven graphics — especially when they mention .psd files, Photoshop automation, jsx/ExtendScript, "build slides in Photoshop", 4K artboards, or want a reproducible image pipeline they can re-run after edits. Also use it when they need to edit text or swap images in an existing PSD without losing manual layer edits, or to verify a generated PSD by rendering it to PNG. macOS + Adobe Photoshop required.
psd-jsx-builder
Programmatically build layered Photoshop PSD files from code (ExtendScript/jsx) and render-verify them without manual clicking. Use this skill whenever the user wants to generate, batch-produce, or script Photoshop documents — slide decks, portfolio pages, posters, certificates, repeated layouts, data-driven graphics — especially when they mention .psd files, Photoshop automation, jsx/ExtendScript, "build slides in Photoshop", 4K artboards, or want a reproducible image pipeline they can re-run after edits. Also use it when they need to edit text or swap images in an existing PSD without losing manual layer edits, or to verify a generated PSD by rendering it to PNG. macOS + Adobe Photoshop required.
linear-claude-skill
Manage Linear issues, projects, and teams
implementing-next.js-with-supabase
Guides implementation of Next.js 15 App Router features with Supabase SSR. Helps choose between Server/Client Components, select correct Supabase client, and follow security patterns. Use when building pages, components, or API routes.
test-driven-development
Use when implementing any feature or bugfix in the Culinary Advisor Next.js project - write the test first, watch it fail, write minimal code to pass; ensures tests actually verify behavior by requiring failure first
fsd-frontend-architecture
Строгая Feature-Sliced Design архитектура для frontend кода. Используй для: FSD, фронтенд архитектура, слои, pages/widgets/features/entities/shared, публичные API, импорты, размещение кода. EN triggers: FSD architecture, frontend layers, place code, slice public API, layer boundaries, where to put component, feature-sliced design.
remotion-video-toolkit
Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.
pcb
build123d-cad 的板级电气设计子技能。用 tscircuit(React/TypeScript 写电路) 端到端造板:写 TSX → check → web 预览(PCB+原理图+3D)→ 出件(Gerber/BOM/CPL) → 嘉立创(JLCPCB)报价 + 一键 API 下单。 触发词:PCB、原理图、tscircuit、代码写PCB、TSX、React写板子、Gerber、出件、 嘉立创、JLCPCB、下单打板、PCB 3D、EDA、电路板、BOM 报价。 本子技能不做:机械外壳建模(→ mechanical)、元件选型/curated 料库(→ electronics-bom)、 通用网页预览基建(→ viewer)。
apps-language-rules
Define i18n and internalization rules for forum (React/i18next) and docs (VitePress locales) apps. Use when adding new UI strings, translating docs, adding new locales, checking language consistency, or setting up hreflang SEO for multilingual pages.
team
Manage team conventions, patterns, and security policies shared across the organization.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
dashboard-rebuild
Rebuild the committed dashboard artifacts (src/ui/app.js, src/ui/style.css) after editing src/ui/*.tsx or src/ui/input.css, and stage them for commit. Use whenever a dashboard source file has been edited or whenever the working tree shows .tsx/.input.css changes without matching app.js/style.css updates.
yo-protocol-react-sdk
ALWAYS use this skill when the user is working with React components or hooks that interact with Yo Protocol vaults, or imports from `@yo-protocol/react`. This skill covers the full React SDK: YieldProvider setup, query hooks (useVaultState, useVaultSnapshot, useUserPosition, useTokenBalance, useShareBalance, useAllowance, useMerklRewards, useLeaderboard, usePrices, etc.), action hooks (useDeposit, useRedeem, useApprove, useClaimMerklRewards), and migration from the old API (useVault→useVaultState, useUserBalance→useUserPosition, inputToken→token, account→owner, partnerId string→number, publicClient→publicClients). Trigger whenever the user mentions yo protocol React hooks, vault dashboard components, deposit/redeem UI flows, YieldProvider, useYoClient, @yo-protocol/react, yo-kit, or asks to build React components for yoETH, yoUSD, yoBTC, yoEUR, yoGOLD, or yoUSDT vaults. Also trigger when the user has broken imports or API changes after upgrading @yo-protocol/react. Do NOT use for CLI shell commands (use yo-p
agents-sdk
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat applications, voice agents, or browser automation. Covers Agent class, state management, callable RPC, Workflows, durable execution, queues, retries, observability, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
wechat-miniprogram-design
Create distinctive, production-grade WeChat mini-program UI/UX design — multi-screen interactive prototypes that live inside a real iOS frame with the WeChat top capsule. Trigger whenever the user touches mini-program visual direction — designing from scratch, mocking an existing app, evolving a single screen into a full clickable flow, redesigning, reskinning, or reviewing a prototype. Fires on 小程序界面 / 小程序设计稿 / 小程序原型 / 微信小程序 UI / 界面设计 / 视觉方向 / 改版 / 重新设计, and on English equivalents (mini-program UI, WeChat screen design, interactive prototype, screen mockup, visual redesign). Fires even when the user doesn't say "design" explicitly — e.g. "帮我做个登录页", "画几个屏", "这个页面再优化下", "make this screen feel less generic". Helps non-designers discover their aesthetic through side-by-side device-frame previews rather than abstract style words. If a request touches a mini-program visual decision, this skill runs.
azure-integrations
Azure deployment for web apps — Static Web Apps, App Service, Blob Storage, Bicep/ARM, GitHub Actions CI/CD. Use when deploying Next.js/Vite to Azure or configuring Azure resources for full-stack apps.
react-development
React 19+ with TypeScript — hooks, custom hooks, state management (useState/useReducer/useContext), React Query/SWR, Tailwind CSS, performance. Use when building React components, apps, or optimizing renders.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. Use when building complex, multi-component claude.ai HTML artifacts that need state, routing, or shadcn/ui.
react-component-convention
React component file conventions covering structure ordering, one-component-per-file, and splitting bloated components. Use when writing or reviewing React components.
react-refactor-component
Refactor React components to follow project conventions. Use when reorganizing, splitting, or cleaning up existing React component files.
heimdall-dashboard
Use when modifying the Heimdall dashboard in src/ui. Applies the repo's industrial monochrome design rules, TSX source-of-truth workflow, XSS safeguards, and required UI build steps.
jsonld-article
Generate and validate Article / BlogPosting / NewsArticle JSON-LD structured data for Next.js / Strapi / static sites. Auto-detects subtype, enforces Google rich results requirements (headline length, image aspect ratio, publisher logo size, ISO 8601 timezone), and produces drop-in React components. Battle-tested on miyakodeit.com blog (Article schema across all /blog/* posts, with ChatGPT and Perplexity citation hits). Use when user says "Article schema", "BlogPosting JSON-LD", "NewsArticle structured data", "article rich results", "blog post schema", "author markup", "publisher markup", or is adding JSON-LD to a blog/news/article page.
jsonld-breadcrumb
Generate and validate BreadcrumbList JSON-LD structured data for Next.js App Router, Strapi, and static sites. Auto-derives breadcrumb trails from URL pathnames via a label dictionary, outputs drop-in React components using usePathname(), and enforces Google rich results requirements (sequential position, absolute item URLs, omitted last-item URL). Battle-tested on miyakodeit.com `/study-group-kyoto` (PR
jsonld-event
Generate and validate Schema.org Event JSON-LD structured data for online, offline, and hybrid events. Supports OnlineEventAttendanceMode / OfflineEventAttendanceMode / MixedEventAttendanceMode, Google rich results requirements (timezone-aware startDate, 1920x1080 image), and outputs JSON / Next.js React component / Strapi v5 component. Battle-tested on miyakodeit.com (155+京都IT勉強会イベント) and used for Google Meet online meetups, Kyoto offline venues, and hybrid sessions. Use when user says "Event schema", "Event JSON-LD", "event structured data", "rich results event", "online event schema", "offline event schema", "hybrid event schema", "MixedEventAttendanceMode", "connpass schema", or has event listing pages that need rich results eligibility.
jsonld-faqpage
Generate and validate FAQPage JSON-LD structured data for Next.js / Strapi / static sites. Detects Q&A duplication across pages, validates against Schema.org spec, and produces drop-in React components. Battle-tested on miyakodeit.com (6 categories, 31 questions). Use when user says "FAQ schema", "FAQPage JSON-LD", "FAQ structured data", "rich results FAQ", or has multiple FAQ pages with overlap risk.
jsonld-organization
Generate and validate Organization JSON-LD structured data for Next.js / Strapi / static sites. Auto-expands sameAs from GitHub / X / LinkedIn / connpass / note handles, validates logo dimensions for Google rich results, and produces drop-in React components. Battle-tested on netsujo.jp as the citation source for ChatGPT search "Netsujo" queries. Use when user says "Organization schema", "Organization JSON-LD", "company schema", "about page schema", "brand schema", "sameAs", "logo schema", "rich results organization", or is wiring up `/company`, `/about`, or the site root for AI citation.
jsonld-speakable
Generate and validate WebPage + SpeakableSpecification JSON-LD structured data for Next.js / Strapi / static sites. Explicitly marks the passages that AI search engines and Google Assistant should read aloud or quote, raising AI citation confidence on ChatGPT, Perplexity, and AI Overviews. Battle-tested on miyakodeit.com (4 pages, `<p data-speakable>` markup synchronized with llms.txt). Use when user says "speakable schema", "SpeakableSpecification", "speakable JSON-LD", "AI Overviews speakable", "voice search schema", "AI citation schema", "data-speakable", "Google Assistant schema", or "llms.txt consistency check".
code-quality-standards
Use when writing or reviewing code and documentation
agents-sdk
Build AI agents on Cloudflare Workers with the Agents SDK — Agent class, state, callable RPC, Workflows, durable execution, queues, retries, React hooks. USE WHEN creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat or voice agents, or browser automation.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
sui-frontend
Sui frontend dApp development with @mysten/dapp-kit-react (React) and @mysten/dapp-kit-core (Vue, vanilla JS, other frameworks). Use when building browser apps that connect to Sui wallets, query on-chain data, or execute transactions. Use alongside the sui-ts-sdk skill for PTB construction patterns.
rcode-haitham-frontend
Senior frontend engineer for React, Next.js, Tailwind, shadcn/ui, Arabic RTL layouts, pixel-perfect UIs, website clones, and production frontend work at rcode scale. Activates when the user says "build this UI", "implement the frontend", "React component", "Next.js page", "clone this website", "pixel-perfect build", "Arabic RTL layout", "responsive design", "implement this mockup", "shadcn component", "Tailwind styling", "frontend bug", "talk to Haitham", "rcode frontend", or pastes a Figma/screenshot and asks for implementation. Also activates for accessibility implementation (keyboard nav, ARIA, focus management) and bilingual (Arabic-English) UI work. Do NOT use for: UX design decisions (use Layla), backend APIs (use Yousef), ML/data integration (use Zayd), or architecture decisions (use Waleed).
acmm-audit
Audit this repo against the AI Codebase Maturity Model (ACMM) — canonical 6-level rubric with 100+ criteria from 4 source frameworks (ACMM, Fullsend, AEF, Reflect). Writes a report to .claude/acmm/, files GitHub issues for the next-level gaps, and rewrites the README badge. Invoke with /acmm-audit [--apply] [--badge] [--trend].
chaos-agent
Seed non-breaking but detectable bugs (lint violations, dead links) to verify autonomous audit/lint loops catch and file issues. Scheduled to run weekly to test measurement machinery. Invoke with /chaos-agent or schedule via RemoteTrigger.
ci-monitor
Check GitHub CI status on main branch and open PRs. Fix simple failures directly via mbe agent run, create issues for complex ones. Monitors agent-created PRs for failing checks. Invoke with /ci-monitor.
codex
Configure and use OpenAI Codex CLI. Use when user mentions codex, wants to set up Codex, or asks about Codex config (.codex/config.toml). Trigger: /codex, codex config, set up codex, .codex/config.toml
decompose
Break a feature into ordered, agent-sized GitHub issues that the ship-loop can work through sequentially. Takes a feature description, analyzes the codebase, creates a dependency chain of issues. Invoke with /decompose.
deploy
Check deploy status, trigger deploys, and debug deploy failures for the mattbutlerengineering monorepo. Covers static sites (Cloudflare Workers), API services (DigitalOcean App Platform), and infrastructure (Pulumi).
issue-worker
Pick up the oldest open GitHub issue labeled 'ready', complete the work using mbe agent run with worktree isolation, and create a PR. Manages label lifecycle (ready → in-progress → has-pr). Invoke with /issue-worker.
learning-loop
Sensor-driven continuous improvement loop. Collects metrics from all sensors, detects regressions, creates issues, verifies past fixes, and self-tunes thresholds. Invoke with /learning-loop.
local-ci-precheck
Run the same lint + typecheck + architecture-audit checks CI runs, locally and in parallel. Catches workspace-package issues (missing deps, prop drift, lint rule violations) before pushing — the failures CI would surface in 5 minutes show up in 30 seconds. Use before opening or pushing to a PR.
new-adr
Scaffold a new Architecture Decision Record in docs/adr/ with the repo's canonical format and the next available sequential number
new-component
Scaffold a new rialto design system component with all required files (component, CSS module, test, story, barrel export) following established conventions
new-e2e-test
Scaffold a Playwright E2E test in one of the apps that has a Playwright config, matching the existing test fixtures and auth patterns
new-service
Scaffold a new Fastify + Prisma backend service in the mattbutlerengineering monorepo. Creates the service directory, package.json, app bootstrap, Prisma schema, health route, tests, and updates Turborepo config.
new-service-route
Scaffold a new Fastify route in services/{reservations,users,agent} matching the house pattern — schema validation, auth, error envelope per ADR-002, SSE broadcast (if reservations), tests
progress-tracker
Track continuous improvement loop performance. Queries GitHub for metrics (issues created/closed, PRs merged, CI health), logs trends, and suggests process improvements. Invoke with /progress-tracker.
revert-rca-loop
Detect when an AI-authored PR is reverted and trigger a Reflection session for RCA. Monitors revert commits, matches to AI PRs, and initiates analysis. Scheduled to run hourly. Invoke with /revert-rca-loop.
ship-loop
Full cycle: audit site, check Dependabot alerts, fix issues, push, verify CI, deploy, close. Prioritizes Security > Availability > New features. Parallel dispatch for speed.
site-audit
Audit mattbutlerengineering.com with three modes: smoke (per-commit regression check), sweep (weekly zone rotation), scout (monthly improvement suggestions). Uses inventory tracking, parallel dispatch, and Lighthouse/Playwright. Invoke with /site-audit [smoke|sweep|scout].
hono-helper
Hono web framework for edge-first, lightweight APIs - routing, middleware, validation, and multi-runtime support When user works with Hono, builds APIs, creates middleware, uses Zod validation with Hono, or mentions hono patterns
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design
Load when a workflow-router-selected owner workflow needs polished product UI, web pages, landing pages, dashboards, React components, HTML/CSS layouts, or styling; skip routine frontend logic and reports.
frontend-patterns
Load when a workflow-router-selected owner workflow needs React or Next.js frontend logic, component patterns, state, forms, routing, accessibility, or responsive behavior; use frontend-design for visual direction.
web-artifacts-builder
Load when a workflow-router-selected owner workflow needs complex standalone React/Tailwind/shadcn browser artifacts with state, routing, or bundled components; use effective-interact for reports and frontend-design for production UI.
linear
Managing Linear issues, projects, and teams. Use when working with Linear tasks, creating issues, updating status, querying projects, or managing team workflows.
frontend-component-style
Frontend component file structure, naming, and layer separation for new or refactored components.
react_component
Use this skill when building, editing, or reviewing React components, hooks, context providers, or frontend state management. Triggers on: "create a React component", "write a hook for", "add a context", "build a UI for", "frontend component", "TSX", ".tsx file", React state management, "useEffect", "useState", custom hooks, component composition. Also use when the user asks how to structure React code for maintainability, performance, or testability.
strict-typescript-mode
Enforces TypeScript best practices when writing code. Automatically enables strict typing for TypeScript projects, prevents `any` usage, and recommends generic constraints. Activate on TS/TSX files, new features, code reviews.
content-source-router
Use when dispatching a content-fetch task across the multiple sources the site reads from — local markdown under `content/`, MDX with React components under `content/mdx/`, and a headless-CMS sync under `lib/cms/`. Activate this skill whenever the task says 'render this content' or 'where does this post come from' without naming a specific source, or when adding a new source to the routing surface. Do NOT use for the actual rendering of one source (use the per-source skill — `markdown-post-frontmatter-validation`, an MDX rendering skill, or a CMS-sync skill) or for chasing a specific routing bug (use debugging).
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
language-typescript
TypeScript and JavaScript idioms — strict mode, type safety, discriminated unions, async patterns, and Node. Auto-load when working with .ts, .tsx, .js, .jsx files, package.json, or when the user mentions TypeScript, JavaScript, Node, type safety, or tsconfig.
principle-communication
Caveman output mode — ultra-terse brief replies with fewer tokens. Strips filler, hedging, pleasantries. Three levels — caveman lite (default), caveman full, ultra caveman / max caveman (maximum compression). Persists until normal mode. Auto-load when the user requests terser output, says "be brief", "less tokens", "caveman mode", "use fewer tokens", or invokes `/caveman`.
diagram-generator
Use when user wants to create architecture diagrams, flowcharts, sequence diagrams, ER diagrams, or visualize system design, workflows, and data pipelines
artifacts-builder
Suite of tools for creating elaborate, multi-component HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
requirements
Generate a requirements document with user stories, acceptance criteria, and constraints. Use when defining features, writing specs, or running /requirements before implementation.
figma-developer
Extract components from Figma, convert designs to React components, sync design tokens, and generate code from designs. Bridge the gap between design and code with automated workflows.
cost-estimate
Estimate development cost of a codebase based on lines of code and complexity
opencode
Configure and use OpenCode AI coding assistant. Use when user mentions opencode, wants to set up OpenCode, or asks about OpenCode config (opencode.json). Trigger: /opencode, opencode config, set up opencode, opencode.json
sentry-triage
Query Sentry for production errors, filter by severity/frequency, deduplicate against existing GitHub issues, and create actionable issues for the ship-loop. Invoke with /sentry-triage.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing ...
better-auth-patterns
Auto-enforce Better Auth implementation patterns. Activates when setting up authentication, configuring providers, creating auth forms, or implementing session management in React applications.
tanstack-ai-patterns-alpha
TanStack AI patterns for unified AI SDK integration. Activates when implementing AI chat, streaming responses, or AI-powered features. NOTE: Alpha library - API may change.
tanstack-devtools-patterns
TanStack DevTools patterns for debugging and development. Activates when setting up development tools, debugging queries, or configuring developer experience in React applications.
tanstack-form-patterns
Auto-enforce TanStack Form best practices with Zod validation. Activates when creating forms, handling form state, implementing validation, or building input components in React applications.
tanstack-query-patterns
Auto-enforce TanStack Query best practices with factory key pattern. Activates when creating queries, mutations, managing server state, or implementing data fetching in React applications.
tanstack-store-patterns-alpha
TanStack Store patterns for framework-agnostic reactive state. Activates when implementing client-side state, global stores, or reactive state management in React applications. NOTE: Alpha library - API may change.
tanstack-table-patterns
Auto-enforce TanStack Table best practices for headless data tables. Activates when creating tables, implementing sorting, filtering, pagination, or building data grids in React applications.
tanstack-virtual-patterns
Auto-enforce TanStack Virtual best practices for list virtualization. Activates when implementing large lists, infinite scroll, virtualized grids, or performance optimization for long lists in React applications.
vela-slides
Create presentation decks using the Vela engine. Compact DSL format — never verbose JSON. Also loads, extracts, and edits existing decks.
ozor-video-best-practices
Expert guide for crafting high-quality video prompts for Ozor.ai, the AI video generation platform. Use this skill whenever the user mentions Ozor, wants to create a launch video, product demo, feature announcement, explainer video, social ad, release notes video, investor update, tutorial, or any marketing video. Also trigger when the user asks for help writing video prompts, improving video output, structuring video scenes, choosing video formats, or wants best practices for AI video creation. Trigger on phrases like 'make a video', 'create a launch video', 'video for my product', 'Ozor prompt', 'video best practices', 'explainer video', 'product demo video', 'social clip', 'announcement video', or any request involving short-form video content for products and marketing.
video
Video content creation bridge to Remotion. Provides startup-specific video templates (pitch video, product demo, social clip, investor update, hiring video) with brand integration. Detects Remotion project and guides video creation. Falls back to HTML slides or carousel if Remotion is not available. Triggers on: video, MP4, Remotion, demo video, explainer, social clip, video content, animation, motion graphics, video pitch.
auth-package
This skill should be used when the user asks to "add authentication", "protect a route", "use auth hooks", "integrate Auth0", "add login/logout", "use AuthProvider", "verify JWT", or mentions @mbe/auth, OIDC, access tokens, or authentication in React or Fastify.
diagnose
Disciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.
grill-with-docs
Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.
improve-codebase-architecture
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
prisma-migrations
This skill should be used when the user asks to "create a migration", "run prisma migrate", "deploy database changes", "baseline a database", "set up Prisma CI/CD", or mentions database schema deployment. Provides Prisma Migrate best practices for development and production.
reservations-service
This skill should be used when the user asks to "add an endpoint to reservations", "create a route in reservations service", "write tests for reservations", "test reservations service", "add a table endpoint", "work on reservations API", or mentions the reservations service, table management, or reservation functionality.
rialto
Use when building UI with the Rialto design system, importing from "rialto" or "@mattbutlerengineering/rialto", choosing components, applying design tokens, composing layouts, or authoring new Rialto components. Triggers on mentions of "Rialto", "component library", "design system", "UI component", or imports from rialto.
tdd
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
to-issues
Break a plan, spec, or PRD into independently-grabbable issues on the project issue tracker using tracer-bullet vertical slices. Use when user wants to convert a plan into issues, create implementation tickets, or break down work into issues.
triage
Triage issues through a state machine driven by triage roles. Use when user wants to create an issue, triage issues, review incoming bugs or feature requests, prepare issues for an AFK agent, or manage issue workflow.
users-service
This skill should be used when the user asks to "add an endpoint to users", "create a route in users service", "write tests for users", "test users service", "add auth to a route", "work on users API", or mentions the users service, Fastify routes, or user management functionality.
write-a-skill
Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.
ts-doc
Generate auto-documented props tables in Nextra docs using TSDoc. Use when adding or updating component API documentation in MDX pages.
cm-video-factory
Private Code-to-Video Engine using Remotion React, TTS (ElevenLabs/OpenAI), and Content Mastery. Creates pure VibeCoding-style animations for TikTok/Shorts/Reels automatically.
remotion
Remotion video generation: create product demo videos, animated release notes, and explainer videos as React components — render to MP4/GIF programmatically
copilot-docs
Configure GitHub Copilot with custom instructions. Use when setting up .github/copilot-instructions.md, customizing Copilot behavior, or creating repository-specific AI guidance. Triggers on Copilot instructions, copilot-instructions.md, GitHub Copilot config.
mermaid-diagrams
Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.
react-security
Security audit specific to React applications including dangerouslySetInnerHTML, dynamic href/src injection, ref escape hatches, useEffect/useState pitfalls, React Server Components vs Client Components boundary, hydration mismatches, context leakage, and React Router authorization patterns. Use this skill whenever the user mentions React, JSX, hooks, components, dangerouslySetInnerHTML, React Router, React 18+ features, RSC, useEffect, useState, Suspense, or asks "audit my React app", "is my React code safe", "XSS in React", "React security review". Trigger when the codebase contains React imports (`from 'react'`), JSX (`.jsx`/`.tsx`), or `react-dom`. Use this even when only one React-specific concept is mentioned.
typescript-engineering
Comprehensive TypeScript engineering guidance for coding agents. Use when writing, reviewing, refactoring, or debugging TypeScript or TSX code; designing public APIs; fixing tsconfig or strict-mode issues; resolving generic, union, narrowing, async, module, or type-inference problems; improving runtime validation, testability, and performance; or reviewing TypeScript pull requests for safety and maintainability. Trigger on TypeScript, ts, tsx, tsconfig, tsc, generics, discriminated unions, type guards, Zod, NodeNext, ESM, and strict mode.
react
Write correct, idiomatic React with TypeScript. Use when building or reviewing React components, hooks, or JSX — covers hook rules, component structure, TypeScript prop typing, and boundary safety.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
spoosh-react
Use this skill when the user asks about "Spoosh", "useRead", "useWrite", "usePages", "useQueue", "useSSE", "createClient", "Spoosh React", "Spoosh hooks", "Spoosh plugins", "cache plugin", "retry plugin", "polling plugin", "optimistic updates", "standalone optimistic", "WebSocket cache update", "invalidation", "devtool", "Spoosh DevTools", "Next.js SSR", "initialData", "HonoToSpoosh", "ElysiaToSpoosh", "OpenAPI", "data fetching component", "mutation component", "infinite scroll", "Spoosh patterns", or needs to build React components with type-safe API calls. Provides comprehensive API knowledge and component patterns for @spoosh/react.
21st-dev-builder-v2
Build websites and web apps using 21st.dev — the largest marketplace of shadcn/ui-based React Tailwind components with 1400+ components. Use when user mentions "21st.dev", "21st", "ใช้ 21st", "จาก 21st", "build with 21st", "21st component", "21st magic MCP", or references the 21st.dev component registry in any language. Covers building complete sites (landing pages, dashboards, portfolios, e-commerce storefronts, auth pages), browsing and installing individual 21st.dev components into existing projects, and setting up the 21st.dev MCP server. Also trigger when user wants premium UI components specifically from the 21st.dev registry. Do NOT trigger for general web development, standard shadcn/ui, plain Tailwind CSS, React Native, API development, testing, deployment, or any task that doesn't explicitly reference 21st or 21st.dev.
context7
Retrieve up-to-date documentation for software libraries, frameworks, and components via the Context7 API. This skill should be used when looking up documentation for any programming library or framework, finding code examples for specific APIs or features, verifying correct usage of library functions, or obtaining current information about library APIs that may have changed since training.
react-performance-patterns
Battle-tested patterns for optimizing React applications, from component design to bundle optimization
scaffold-new-react-component
Scaffold a new React component + paired test file following Gryffin Calorai conventions. Pass the PascalCase component name as the argument.
scaffold-new-react-hook
Scaffold a new custom React hook in apps/web/src/hooks/ with a paired test file. Pass the hook name as the argument (e.g. "useActivitySummary"). Supports two patterns - form hooks and data hooks.
caveman
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.
perf-budget
Check bundle size impact of current changes against size-limit baselines. Use when editing apps/* or packages/rialto source, before committing, or when user asks about bundle size.
react-form-validator
This skill should be used when the user asks to "create a form", "add validation", "handle form submission", "use React Hook Form", or when creating login, signup, or data entry forms. Enforces React Hook Form + Zod pattern.
remotion-to-hyperframes
Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. "port my Remotion project to HyperFrames"). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants "the same video as my Remotion one" without explicitly asking to migrate the source — treat as a fresh HyperFrames build. When in doubt, default to the `hyperframes` skill. Detects unsupported patterns (useState, useEffect side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda`) and recommends the runtime interop escape hatch instead of a lossy translation.
mobile
Patterns mobile natif et cross-platform. Se charge à l'écriture/modification de : .kt, .kts (Kotlin/Android), .swift (iOS), .dart (Flutter), .tsx/.jsx dans un projet React Native/Expo. Détection projet : AndroidManifest.xml, Info.plist, pubspec.yaml, app.json ou app.config.js (Expo), dossiers android/ + ios/ (RN), build.gradle, Podfile. Couvre : Android (Kotlin, Jetpack Compose, XML layouts, Gradle, lifecycle), iOS (SwiftUI, UIKit, SwiftPM, CoreData), Flutter (widgets, Riverpod/Bloc, platform channels), React Native/Expo (hooks, navigation, bridges natifs). Ne se charge PAS quand : discussion, review ou documentation sans écriture de code mobile.
openclaw-elsa-x402
DeFi tools for portfolio analysis, token search, and swap execution via Elsa API with x402 micropayments
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-creative-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-design-skill
Create distinctive, clean, production-grade SaaS frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, dashboards, or React applications. Generates polished UI design that focuses on utility and cleanliness over generic maximalism.
caveman
Ultra-compressed communication mode. Cuts token usage ~75% by dropping filler, articles, and pleasantries while keeping full technical accuracy. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman.
research-survey
Deep literature survey pipeline: semantic search via local vec-db, web search for arXiv papers, download PDFs, parallel subagent reading, and structured report generation. Use this skill whenever the user asks to survey, research, or find related papers on a topic, especially when they mention vec-db, arXiv, literature review, paper search, or updating an idea/survey note. Also trigger when the user says things like "调研", "查论文", "找相关工作", "literature survey", "related work", "search papers", or "read papers and summarize". This skill orchestrates the full pipeline from search to structured markdown report.
preact
Preact 10 patterns with React-compat and Module Federation singleton setup. Trigger: When writing Preact components, hooks, types, or configuring Preact in Rsbuild/Rslib/Rstest.
artifacts-builder
使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML artifacts 的工具套件。用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts - 不适用于简单的单文件 HTML/JSX artifacts。
senior-architect
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack decision frameworks, and dependency analysis. Use when designing system architecture, making technical decisions, creating architecture diagrams, evaluating trade-offs, or defining integration patterns.
senior-frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
local-e2e
Local LeadAce E2E testing skill. Triggers: 'local E2E', 'ローカル E2E', 'local-e2e', 'E2E テスト', E2E run against the local stack. Encodes the prerequisites: host-side `claude` CLI, real Google OAuth, local Supabase / Workers / Frontend. Concrete scenarios are user-supplied per run.
local-e2e
Local LeadAce E2E testing skill. Triggers: 'local E2E', 'ローカル E2E', 'local-e2e', 'E2E テスト', E2E run against the local stack. Encodes the prerequisites: host-side `claude` CLI, real Google OAuth, local Supabase / Workers / Frontend. Concrete scenarios are user-supplied per run.
expo-docs-ja-translator
Translate Expo MDX docs pages from English to Japanese. Use when the user asks to translate a docs page to Japanese, says "translate to ja", "ja translate", "translate this page (to Japanese)", or "/expo-docs-ja-translator". Outputs to `pages/ja/<same-path>` mirroring the English source. Preserves frontmatter keys, JSX tags, code blocks, links, and import statements; translates prose, headings, link text, and string-valued JSX props (title, description, summary).
deploy-vite-app
Deploy a Vite + React app (or any static/SPA frontend) to the user's own Docker + Traefik server over SSH, on a Cloudflare-managed subdomain with automatic HTTPS. Use this skill whenever the user wants to deploy, ship, publish, push live, or host a Vite/React/frontend project on their server — e.g. "deploy this app", "put this on my server", "ship the dashboard to a subdomain", "host this on a subdomain", "make this live". Also use it to redeploy/update an already-deployed app, list what's deployed, take an app down, or free up disk space on the server. Trigger even when the user doesn't say "Docker", "Traefik", or "Cloudflare" explicitly — if they have a frontend project and want it on the internet on their box, this is the skill.
lottie-design
Search, fetch, and integrate free Lottie animations into React, React Native, Vue, Svelte, Angular, Flutter, and Vanilla web projects. Use when the user asks for any Lottie/dotLottie/animation work — loaders, success checkmarks, splash screens, empty states, onboarding, micro-interactions. Triggers on keywords like "lottie", "dotlottie", ".lottie", "animasyon ekle", "splash animation", "loader animation", "success animation", "empty state animation".
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
react-email
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
react-19
React 19 component patterns for the admin dashboard and customer app. Trigger: When creating React components, hooks, forms, data fetching with React Query, or client state with Zustand.
better-typescript
Apply this skill for any task involving TypeScript: writing new code, refactoring, reviewing, debugging, designing types, structuring modules, or answering questions about TS patterns. Use it whenever the user mentions TypeScript, .ts/.tsx files, types, interfaces, generics, or any TS ecosystem (Node, Deno, Bun, React, Next.js, tRPC, Zod, etc.) — even if the question seems simple.
landing-page-generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. Creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals (LCP < 1s, CLS < 0.1). Use when the user asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, promo page, or conversion-optimised web page — or when they want to A/B test landing page variants or replace a static page with one designed to convert.
list-tasks
List all tasks in the Claudia orchestrator using the test CLI. Use when you need to see running or completed tasks.
codemux-ui
Use when building, modifying, or improving any user-visible part of Codemux — React components, Tailwind, shadcn, theming, pane layouts, sidebar, notifications, OpenFlow UI. Also use when the task involves visual design decisions, component patterns, or color/theme work. For new ADE feature ideation see `codemux-features`; for chat-pane specifics see `codemux-chat-ui`.
devtools-app-setup
Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.
frontend-functional-validator-detective
Clicks through the running UI to identify broken features and missing backend endpoints.
search-web-implementation
Search the web monorepo (../app) to find how web handles equivalent functionality. Use when implementing mobile features that need to match web behavior, finding web routes, or understanding how web handles a specific feature like statements, portfolios, or user flows.
search-web-implementation
Search the web monorepo (../app) to find how web handles equivalent functionality. Use when implementing mobile features that need to match web behavior, finding web routes, or understanding how web handles a specific feature like statements, portfolios, or user flows.
web-accessibility
Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.
typescript-dev
Use when the user asks to implement, refactor, test, debug, or review TypeScript/TSX code, type definitions, Jest/Vitest tests, ESLint/Biome/Prettier issues, Zod validation, or TypeScript build errors.
shelby
Shelby decentralized storage protocol on Aptos. Use when the user asks general questions about Shelby, needs help choosing which Shelby package to use, or is starting a new Shelby integration.
apow-mine
Set up and start mining AGENT tokens on Base L2 using apow-cli. Handles wallet creation, RPC setup, LLM config, minting a rig, and starting the mining loop.
frontend-coding
Comprehensive frontend engineering skill for building production-grade web applications and components. Use this skill whenever the user asks to: scaffold a React/Vue/Next.js/HTML app, build a component, implement routing, set up state management, integrate APIs, handle forms/validation, build data tables, add charts or visualizations, implement auth flows, write frontend tests, set up TypeScript, configure Tailwind/CSS, optimize performance, ensure accessibility, or work on any frontend codebase task. Also trigger for: "make a dashboard", "build a UI for...", "add a login page", "create a form that...", "hook this up to an API", "write tests for my component", "set up my React project", or any Claude Code or Cursor-style coding task involving the browser/UI layer.
async-patterns-safety
Baseline best practice - prevent invalid hook-style async usage and enforce safe async data flow patterns in migrated code. Always loaded in Transform and Repair stages.
Integration detected automatically from skill content. Some results may be false positives.