Next.js
FrontendCommonly used with
Skills using Next.js (1720)
lifecyclemigrate-from-nextjs
Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.
code-to-prd
Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Trigger when users mention: generate PRD, reverse-engineer requirements, code to documentation, extract product specs from code, document page logic, analyze page fields and interactions, create a functional inventory, write requirements from an existing codebase, document API endpoints, or analyze backend routes.
cs-engineering-lead
Engineering Team Lead agent for coordinating QA, security, data engineering, ML, and frontend/backend teams. Orchestrates engineering-team skills for team-level technical decisions. Spawn when users need team coordination, tech stack evaluation, incident response, or cross-functional engineering work.
engineering-skills
23 engineering agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365. 30+ Python tools (stdlib-only).
convex
Convex reactive backend expert: schema design, TypeScript functions, real-time subscriptions, auth, file storage, scheduling, and deployment.
drizzle-orm-expert
Expert in Drizzle ORM for TypeScript — schema design, relational queries, migrations, and serverless database integration. Use when building type-safe database layers with Drizzle.
electron-development
Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.
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.
roier-seo
Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
saas-multi-tenant
Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema isolation, and safe cross-tenant admin patterns in PostgreSQL and TypeScript.
tanstack-query-expert
Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.
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.
alchemy-reference-architecture
Implement reference architecture for Alchemy-powered Web3 applications. Use when designing dApp infrastructure, planning multi-chain deployments, or structuring a production blockchain application. Trigger: "alchemy architecture", "dApp architecture", "alchemy project structure", "web3 system design", "alchemy multi-chain design".
algolia-deploy-integration
Deploy Algolia-powered apps to Vercel, Fly.io, and Cloud Run with proper API key management and InstantSearch frontend integration. Trigger: "deploy algolia", "algolia Vercel", "algolia production deploy", "algolia Cloud Run", "algolia Fly.io", "algolia InstantSearch".
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-sdk-patterns
Apply production-ready patterns for the Anima SDK design-to-code pipeline. Use when building reusable Anima client wrappers, implementing output caching, or establishing team standards for design-to-code automation. Trigger: "anima SDK patterns", "anima best practices", "anima code patterns".
assemblyai-deploy-integration
Deploy AssemblyAI integrations to Vercel, Cloud Run, and Fly.io platforms. Use when deploying AssemblyAI-powered transcription services to production, configuring platform-specific secrets, or setting up webhook endpoints. Trigger with phrases like "deploy assemblyai", "assemblyai Vercel", "assemblyai production deploy", "assemblyai Cloud Run", "assemblyai Fly.io".
canva-deploy-integration
Deploy Canva Connect API integrations to Vercel, Fly.io, and Cloud Run. Use when deploying Canva-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy canva", "canva Vercel", "canva production deploy", "canva Cloud Run", "canva Fly.io".
clade-deploy-integration
Deploy Claude-powered applications to Vercel, Fly.io, and Cloud Run Use when working with deploy-integration patterns. with proper secrets management and streaming support. Trigger with "deploy anthropic", "claude production deploy", "anthropic vercel", "deploy claude app".
clerk-common-errors
Troubleshoot common Clerk errors and issues. Use when encountering authentication errors, SDK issues, or configuration problems with Clerk. Trigger with phrases like "clerk error", "clerk not working", "clerk authentication failed", "clerk issue", "fix clerk".
clerk-core-workflow-a
Implement user sign-up and sign-in flows with Clerk. Use when building authentication UI, customizing sign-in experience, or implementing OAuth social login. Trigger with phrases like "clerk sign-in", "clerk sign-up", "clerk login flow", "clerk OAuth", "clerk social login".
clerk-core-workflow-b
Implement session management and middleware with Clerk. Use when managing user sessions, configuring route protection, or implementing token refresh and custom JWT templates. Trigger with phrases like "clerk session", "clerk middleware", "clerk route protection", "clerk token", "clerk JWT".
clerk-cost-tuning
Optimize Clerk costs and understand pricing. Use when planning budget, reducing costs, or understanding Clerk pricing model. Trigger with phrases like "clerk cost", "clerk pricing", "reduce clerk cost", "clerk billing", "clerk budget".
clerk-data-handling
Handle user data, privacy, and GDPR compliance with Clerk. Use when implementing data export, user deletion, or privacy compliance features. Trigger with phrases like "clerk user data", "clerk GDPR", "clerk privacy", "clerk data export", "clerk delete user".
clerk-debug-bundle
Collect comprehensive debug information for Clerk issues. Use when troubleshooting complex problems, preparing support tickets, or diagnosing intermittent issues. Trigger with phrases like "clerk debug", "clerk diagnostics", "clerk support ticket", "clerk troubleshooting".
clerk-enterprise-rbac
Configure enterprise SSO, role-based access control, and organization management. Use when implementing SSO integration, configuring role-based permissions, or setting up organization-level controls. Trigger with phrases like "clerk SSO", "clerk RBAC", "clerk enterprise", "clerk roles", "clerk permissions", "clerk organizations".
clerk-hello-world
Create your first authenticated request with Clerk. Use when making initial API calls, testing authentication, or verifying Clerk integration works correctly. Trigger with phrases like "clerk hello world", "first clerk request", "test clerk auth", "verify clerk setup".
clerk-install-auth
Install and configure Clerk SDK/CLI authentication. Use when setting up a new Clerk integration, configuring API keys, or initializing Clerk in your project. Trigger with phrases like "install clerk", "setup clerk", "clerk auth", "configure clerk API key", "add clerk to project".
clerk-migration-deep-dive
Migrate from other authentication providers to Clerk. Use when migrating from Auth0, Firebase, Supabase Auth, NextAuth, or custom authentication solutions. Trigger with phrases like "migrate to clerk", "clerk migration", "switch to clerk", "auth0 to clerk", "firebase auth to clerk".
clerk-observability
Implement monitoring, logging, and observability for Clerk authentication. Use when setting up monitoring, debugging auth issues in production, or implementing audit logging. Trigger with phrases like "clerk monitoring", "clerk logging", "clerk observability", "clerk metrics", "clerk audit log".
clerk-performance-tuning
Optimize Clerk authentication performance. Use when improving auth response times, reducing latency, or optimizing Clerk SDK usage. Trigger with phrases like "clerk performance", "clerk optimization", "clerk slow", "clerk latency", "optimize clerk".
clerk-reference-architecture
Reference architecture patterns for Clerk authentication. Use when designing application architecture, planning auth flows, or implementing enterprise-grade authentication. Trigger with phrases like "clerk architecture", "clerk design", "clerk system design", "clerk integration patterns".
clerk-sdk-patterns
Common Clerk SDK patterns and best practices. Use when implementing authentication flows, accessing user data, or integrating Clerk SDK methods in your application. Trigger with phrases like "clerk SDK", "clerk patterns", "clerk best practices", "clerk API usage".
clerk-security-basics
Implement security best practices with Clerk authentication. Use when securing your application, reviewing auth implementation, or hardening Clerk configuration. Trigger with phrases like "clerk security", "secure clerk", "clerk best practices", "clerk hardening".
clerk-upgrade-migration
Manage Clerk SDK version upgrades and handle breaking changes. Use when upgrading Clerk packages, migrating to new SDK versions, or handling deprecation warnings. Trigger with phrases like "upgrade clerk", "clerk migration", "update clerk SDK", "clerk breaking changes".
clerk-webhooks-events
Configure Clerk webhooks and handle authentication events. Use when setting up user sync, handling auth events, or integrating Clerk with external systems via Svix webhooks. Trigger with phrases like "clerk webhooks", "clerk events", "clerk user sync", "clerk svix", "clerk event handling".
elevenlabs-deploy-integration
Deploy ElevenLabs TTS applications to Vercel, Fly.io, and Cloud Run. Use when deploying ElevenLabs-powered apps to production, configuring platform-specific secrets, or setting up serverless TTS. Trigger: "deploy elevenlabs", "elevenlabs Vercel", "elevenlabs Cloud Run", "elevenlabs Fly.io", "elevenlabs serverless", "host TTS API".
firecrawl-deploy-integration
Deploy Firecrawl integrations to Vercel, Cloud Run, and Docker platforms. Use when deploying Firecrawl-powered applications to production, configuring platform-specific secrets, or setting up self-hosted Firecrawl. Trigger with phrases like "deploy firecrawl", "firecrawl Vercel", "firecrawl production deploy", "firecrawl Cloud Run", "firecrawl Docker".
fireflies-deploy-integration
Deploy Fireflies.ai webhook receivers and GraphQL clients to Vercel, Docker, and Cloud Run. Use when deploying Fireflies.ai-powered applications to production, configuring platform-specific secrets, or hosting webhook endpoints. Trigger with phrases like "deploy fireflies", "fireflies Vercel", "fireflies production deploy", "fireflies Cloud Run", "fireflies Docker".
flexport-reference-architecture
Implement Flexport reference architecture for supply chain integrations with best-practice project layout, service boundaries, and data flow. Trigger: "flexport architecture", "flexport project structure", "flexport system design".
gamma-deploy-integration
Deploy Gamma-integrated applications to production environments. Use when deploying to Vercel, AWS, GCP, or other cloud platforms with proper secret management and configuration. Trigger with phrases like "gamma deploy", "gamma production", "gamma vercel", "gamma AWS", "gamma cloud deployment".
groq-deploy-integration
Deploy Groq integrations to Vercel, Cloud Run, and containerized platforms. Use when deploying Groq-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy groq", "groq Vercel", "groq production deploy", "groq Cloud Run", "groq Docker".
ideogram-deploy-integration
Deploy Ideogram integrations to Vercel, Cloud Run, and Docker platforms. Use when deploying Ideogram-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy ideogram", "ideogram Vercel", "ideogram production deploy", "ideogram Cloud Run", "ideogram Docker".
langfuse-deploy-integration
Deploy Langfuse with your application across different platforms. Use when deploying Langfuse to Vercel, AWS, GCP, or Docker, or integrating Langfuse into your deployment pipeline. Trigger with phrases like "deploy langfuse", "langfuse Vercel", "langfuse AWS", "langfuse Docker", "langfuse production deploy".
langfuse-webhooks-events
Configure Langfuse webhooks for prompt change notifications and event-driven workflows. Use when setting up prompt change notifications, triggering CI/CD on prompt updates, or integrating Langfuse events with Slack and external systems. Trigger with phrases like "langfuse webhooks", "langfuse events", "langfuse notifications", "langfuse prompt webhook", "langfuse alerts".
miro-reference-architecture
Implement a production-ready reference architecture for Miro REST API v2 integrations with layered design, caching, and event processing. Trigger with phrases like "miro architecture", "miro project structure", "how to organize miro integration", "miro design patterns".
perplexity-architecture-variants
Choose and implement Perplexity architecture blueprints for different scales: direct search widget, cached research layer, and multi-query pipeline. Trigger with phrases like "perplexity architecture", "perplexity blueprint", "how to structure perplexity", "perplexity project layout".
perplexity-known-pitfalls
Identify and avoid Perplexity anti-patterns and common integration mistakes. Use when reviewing Perplexity code, onboarding new developers, or auditing existing integrations for best practices violations. Trigger with phrases like "perplexity mistakes", "perplexity anti-patterns", "perplexity pitfalls", "perplexity code review", "perplexity gotchas".
posthog-deploy-integration
Deploy PostHog to Vercel, Docker (self-hosted), and Cloud Run. Covers Next.js reverse proxy, server-side capture in edge functions, self-hosted PostHog setup, and platform-specific environment configuration. Trigger: "deploy posthog", "posthog Vercel", "posthog production deploy", "posthog Cloud Run", "posthog self-hosted", "posthog Docker".
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-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".
sentry-common-errors
Troubleshoot common Sentry integration issues and fixes. Use when encountering Sentry errors, missing events, source map failures, rate limits, or configuration problems. Trigger: "sentry not working", "sentry errors missing", "fix sentry", "sentry troubleshoot", "sentry 429", "source maps not resolving", "sentry events not showing", "sentry flush", "sentry CORS".
sentry-install-auth
Install and configure Sentry SDK authentication with DSN setup. Use when setting up Sentry error tracking, configuring DSN, or initializing Sentry in a Node.js or Python project. Trigger with "install sentry", "setup sentry", "sentry auth", "configure sentry DSN".
sentry-prod-checklist
Production deployment checklist for Sentry integration. Use when preparing a production deployment, auditing an existing Sentry setup, or running a go-live readiness review. Trigger: "sentry production checklist", "deploy sentry", "sentry go-live", "audit sentry config", "production readiness sentry".
sentry-reference-architecture
Design production-grade Sentry architecture for multi-service organizations. Use when planning Sentry rollout, structuring projects across teams, building shared config modules, or setting up distributed tracing. Trigger: "sentry architecture", "sentry project structure", "sentry reference design", "sentry distributed tracing".
shipwright-pipeline
Autonomous app builder that converts plain-English descriptions into fully built, tested applications. Use when the user wants to build a new app, scaffold a project, generate a full-stack application, or create an app from a description. Trigger with "build me an app", "create a new app", "shipwright build", "scaffold a project", "generate an application".
sprint-workflow
Execute this skill should be used when the user asks about "how sprints work", "sprint phases", "iteration workflow", "convergent development", "sprint lifecycle", "when to use sprints", or wants to understand the sprint execution model and its convergent diffusion approach. Use when appropriate context detected. Trigger with relevant phrases based on skill purpose.
supabase-architecture-variants
Implement Supabase across different app architectures: Next.js SSR with server components using service_role and client components with anon key, SPA (React/Vue), mobile (React Native), serverless (Edge Functions), and multi-tenant with schema-per-tenant or RLS isolation. Use when choosing how to integrate Supabase into your specific stack, setting up SSR auth flows, configuring mobile deep links, or designing multi-tenant data isolation. Trigger with phrases like "supabase next.js", "supabase SSR", "supabase react native", "supabase SPA", "supabase serverless", "supabase multi-tenant", "supabase server component", "supabase architecture", "supabase service_role server".
supabase-install-auth
Install and configure Supabase SDK, CLI, and project authentication. Use when setting up a new Supabase project, installing @supabase/supabase-js, configuring environment variables, or initializing the Supabase client. Trigger with "install supabase", "setup supabase", "supabase auth config", "configure supabase", "supabase init", "add supabase to project".
supabase-multi-env-setup
Configure Supabase across development, staging, and production with separate projects, environment-specific secrets, and safe migration promotion. Use when setting up multi-environment deployments, isolating dev from prod data, configuring per-environment Supabase projects, or promoting migrations through environments. Trigger: "supabase environments", "supabase staging", "supabase dev prod", "supabase multi-project", "supabase env config", "database branching".
supabase-reference-architecture
Implement enterprise Supabase reference architectures — monorepo layout, multi-tenant RLS, microservices with cross-project access, framework integration, edge functions, caching, queue patterns, and audit logging. Use when designing a new Supabase project from scratch, reviewing project structure for production readiness, planning multi-tenant isolation, or establishing team architecture standards. Trigger with phrases like "supabase architecture", "supabase project structure", "supabase monorepo", "supabase multi-tenant", "supabase reference design", "how to organize supabase at scale".
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".
vercel-local-dev-loop
Configure Vercel local development with vercel dev, environment variables, and hot reload. Use when setting up a development environment, testing serverless functions locally, or establishing a fast iteration cycle with Vercel. Trigger with phrases like "vercel dev setup", "vercel local development", "vercel dev environment", "develop with vercel locally".
vercel-observability
Set up Vercel observability with runtime logs, analytics, log drains, and OpenTelemetry tracing. Use when implementing monitoring for Vercel deployments, setting up log drains, or configuring alerting for function errors and performance. Trigger with phrases like "vercel monitoring", "vercel metrics", "vercel observability", "vercel logs", "vercel alerts", "vercel tracing".
vercel-performance-tuning
Optimize Vercel deployment performance with caching, bundle optimization, and cold start reduction. Use when experiencing slow page loads, optimizing Core Web Vitals, or reducing serverless function cold start times. Trigger with phrases like "vercel performance", "optimize vercel", "vercel latency", "vercel caching", "vercel slow", "vercel cold start".
vercel-reference-architecture
Implement a Vercel reference architecture with layered project structure and best practices. Use when designing new Vercel projects, reviewing project structure, or establishing architecture standards for Vercel applications. Trigger with phrases like "vercel architecture", "vercel project structure", "vercel best practices layout", "how to organize vercel project".
vercel-upgrade-migration
Upgrade Vercel CLI, Node.js runtime, and Next.js framework versions with breaking change detection. Use when upgrading Vercel CLI versions, migrating Node.js runtimes, or updating Next.js between major versions on Vercel. Trigger with phrases like "upgrade vercel", "vercel migration", "vercel breaking changes", "update vercel CLI", "next.js upgrade on vercel".
windsurf-deploy-integration
Deploy applications using Windsurf's built-in deployment features and Cascade automation. Use when deploying apps from Windsurf, configuring Netlify/Vercel integration, or building deployment workflows with Cascade. Trigger with phrases like "deploy windsurf", "windsurf deploy", "windsurf netlify", "windsurf vercel", "cascade deploy".
windsurf-load-scale
Scale Windsurf adoption across large organizations with workspace strategies and performance tuning. Use when rolling out Windsurf to 50+ developers, managing large monorepo workspaces, or planning enterprise-scale deployment. Trigger with phrases like "windsurf at scale", "windsurf large team", "windsurf monorepo", "windsurf organization", "windsurf 100 developers".
windsurf-local-dev-loop
Configure Windsurf local development workflow with Cascade, Previews, and terminal integration. Use when setting up a development environment, configuring Turbo mode, or establishing a fast iteration cycle with Windsurf AI. Trigger with phrases like "windsurf dev setup", "windsurf local development", "windsurf dev environment", "windsurf workflow", "develop with windsurf".
moai-docs-generation
Documentation generation patterns for technical specs, API docs, user guides, and knowledge bases using real tools like Sphinx, MkDocs, TypeDoc, and Nextra. Use when creating docs from code, building doc sites, or automating documentation workflows.
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
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.
moai-platform-deployment
Deployment and hosting platform specialist covering Vercel, Railway, and Convex. Use when deploying applications, configuring edge functions, setting up continuous deployment, or managing serverless infrastructure.
moai-workflow-templates
Template management system for code boilerplates, feedback templates, scaffolding, and project optimization workflows. Use when creating templates, generating boilerplate files, or managing scaffolding.
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
app-builder
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
cc-skill-backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
clerk-auth
Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync
convex
Convex reactive backend expert: schema design, TypeScript functions, real-time subscriptions, auth, file storage, scheduling, and deployment.
development
Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.
drizzle-orm-expert
Expert in Drizzle ORM for TypeScript — schema design, relational queries, migrations, and serverless database integration. Use when building type-safe database layers with Drizzle.
electron-development
Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.
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-developer
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
i18n-localization
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
inngest
Inngest expert for serverless-first background jobs, event-driven workflows, and durable execution without managing queues or workers.
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.
magic-ui-generator
Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router
nodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
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-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
saas-multi-tenant
Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema isolation, and safe cross-tenant admin patterns in PostgreSQL and TypeScript.
saas-mvp-launcher
Use when planning or building a SaaS MVP from scratch. Provides a structured roadmap covering tech stack, architecture, auth, payments, and launch checklist.
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.
spline-3d-integration
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
tanstack-query-expert
Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.
trigger-dev
Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design.
trpc-fullstack
Build end-to-end type-safe APIs with tRPC — routers, procedures, middleware, subscriptions, and Next.js/React integration patterns.
upstash-qstash
Upstash QStash expert for serverless message queues, scheduled jobs, and reliable HTTP-based task delivery without managing infrastructure.
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.
vercel-deployment
Expert knowledge for deploying to Vercel with Next.js
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.
agentic-development
Build AI agents with Pydantic AI (Python) and Claude SDK (Node.js)
medusa
Medusa headless commerce - modules, workflows, API routes, admin UI
posthog-analytics
PostHog analytics, event tracking, feature flags, dashboards
security
OWASP security patterns, secrets management, security testing
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
favicon
Generate favicons from a source image
blog
Full-lifecycle blog engine with 30 sub-skills, 12 content templates, 5-category 100-point scoring, and 5 specialized agents. Routes user requests to the right sub-skill: writing, rewriting, analysis, outlines, audits, schema, charts, images, repurposing, AI-citation optimization, FLOW framework prompts, topic-cluster execution, and multilingual publishing. Optimized for Google rankings (December 2025 Core Update, E-E-A-T) and AI citations (GEO/AEO). Supports any platform (WordPress, Next.js MDX, Hugo, Ghost, Astro, Jekyll, 11ty, Gatsby, HTML). Use when user says "blog", "write a blog", "blog post", "blog strategy", "content brief", "editorial calendar", "blog audit", "blog optimization", "topic cluster", "multilingual blog", "FLOW framework", or any /blog subcommand. Sub-skill descriptions cover narrower triggers.
technical-seo-checker
Use when the user asks to "check technical SEO"; audits crawlability, indexing, Core Web Vitals, robots.txt, sitemaps, canonicals, redirects, and migrations. Not for on-page tags or content — use on-page-seo-auditor. 技术SEO/网站速度
nextjs-app-router-patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
development
开发语言能力索引。Python、Go、Rust、TypeScript、Java、C++、Shell。当用户提到编程、开发、代码、语言时路由到此。
flexport-deploy-integration
Deploy Flexport logistics integrations to Vercel, Fly.io, and Cloud Run. Use when deploying shipment tracking dashboards, webhook receivers, or supply chain automation services to production infrastructure. Trigger: "deploy flexport", "flexport hosting", "flexport Cloud Run".
deck-swiss-international
16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)
context7-auto-research
Automatically fetch latest library/framework documentation for Claude Code via Context7 API. Use when you need up-to-date documentation for libraries and frameworks or asking about React, Next.js, Prisma, or any other popular library.
nextjs-app-router-patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
web-design-reviewer
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
framework-compatibility-checker
Check codebase compatibility with target framework versions and generate migration paths
nextauth
NextAuth.js (Auth.js) configuration including providers, adapters, session management, callbacks, and JWT handling.
nextjs
Next.js specific patterns including App Router, React Server Components, Server Actions, streaming, caching, and Vercel deployment.
nextjs-app-router
Deep expertise in Next.js App Router patterns including route groups, parallel routes, intercepting routes, layouts, and loading states.
playwright
Playwright E2E testing, page objects, fixtures, visual regression, accessibility testing, and CI integration patterns.
prisma-orm
Prisma ORM schema design, migrations, relations, query optimization, and database integration patterns.
tailwind-css
Tailwind CSS configuration, custom plugins, design systems, theming, and component patterns for modern web applications.
trpc
tRPC end-to-end type safety, procedures, routers, middleware, and React integration.
documentation-lookup
Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).
analytics-tracking
Set up, audit, and debug analytics tracking implementation — GA4, Google Tag Manager, event taxonomy, conversion tracking, and data quality. Use when building a tracking plan from scratch, auditing existing analytics for gaps or errors, debugging missing events, or setting up GTM. Trigger keywords: GA4 setup, Google Tag Manager, GTM, event tracking, analytics implementation, conversion tracking, tracking plan, event taxonomy, custom dimensions, UTM tracking, analytics audit, missing events, tracking broken. NOT for analyzing marketing campaign data — use campaign-analytics for that. NOT for BI dashboards — use product-analytics for in-product event analysis.
app-router
This skill should be used when the user asks to "create a Next.js route", "add a page", "set up layouts", "implement loading states", "add error boundaries", "organize routes", "create dynamic routes", or needs guidance on Next.js App Router file conventions and routing patterns.
auth-patterns
This skill should be used when the user asks about "authentication in Next.js", "NextAuth", "Auth.js", "middleware auth", "protected routes", "session management", "JWT", "login flow", or needs guidance on implementing authentication and authorization in Next.js applications.
route-handlers
This skill should be used when the user asks to "create an API route", "add an endpoint", "build a REST API", "handle POST requests", "create route handlers", "stream responses", or needs guidance on Next.js API development in the App Router.
server-actions
This skill should be used when the user asks about "Server Actions", "form handling in Next.js", "mutations", "useFormState", "useFormStatus", "revalidatePath", "revalidateTag", or needs guidance on data mutations and form submissions in Next.js App Router.
server-components
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js.
app-builder
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
i18n-localization
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
neon-instagres
Instantly provision production-ready Postgres databases with Neon Instagres. Use when setting up databases, when users mention PostgreSQL/Postgres, database setup, or need a development database. Works with Drizzle, Prisma, raw SQL.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
playwright-e2e-builder
Plan and build comprehensive Playwright E2E test suites with Page Object Model, authentication state persistence, custom fixtures, visual regression, and CI integration. Uses interview-driven planning to clarify critical user flows, auth strategy, test data approach, and parallelization before writing any tests.
stripe-integration
Get paid from day one. Payments, subscriptions, billing portal, webhooks, metered billing, Stripe Connect. The complete guide to implementing Stripe correctly, including all the edge cases that will bite you at 3am. This isn't just API calls - it's the full payment system: handling failures, managing subscriptions, dealing with dunning, and keeping revenue flowing. Use when: stripe, payments, subscription, billing, checkout.
trigger-dev
Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.
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.
000-jeremy-content-consistency-validator
Validates messaging consistency across website, GitHub repositories, and local documentation. Generates comprehensive read-only discrepancy reports showing where messaging conflicts or inconsistencies exist. Activates when user mentions "consistency check", "validate documentation", "check for mixed messaging", "audit content consistency", or before updating internal paperwork.
project-docs
Generate project documentation from codebase analysis — ARCHITECTURE.md, API_ENDPOINTS.md, DATABASE_SCHEMA.md. Reads source code, schema files, routes, and config to produce accurate, structured docs. Use when starting a project, onboarding contributors, or when docs are missing or stale. Triggers: 'generate docs', 'document architecture', 'create api docs', 'document schema', 'project documentation', 'write architecture doc'.
l-pr
Create a draft pull request targeting develop. Auto-generates PR body from design files, GitHub issues, and/or commit history. Use when opening a PR.
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
web-search
Real-time web search using Playwright-controlled browser. Use this skill when you need current information, latest documentation, recent news, or any data beyond your knowledge cutoff (January 2025).
canonical-tag
When the user wants to configure canonical URLs, fix duplicate content, or consolidate URL signals. Also use when the user mentions "canonical," "canonical URL," "duplicate content," "duplicate content fix," "preferred URL," or "URL consolidation." For GSC duplicates, use google-search-console.
favicon-generator
When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon." For visual system, use brand-visual-generator.
indexing
When the user wants to fix indexing issues from Search Console, use noindex, or implement Google Indexing API. Also use when the user mentions "fix indexing," "not indexed," "Crawled - currently not indexed," "discovered - currently not indexed," "index coverage," "noindex," "noindex tag," "pages not indexed," "why not indexed," "request indexing," or "Google Indexing API." For sitemap, use xml-sitemap.
localization-strategy
When the user wants to plan or implement localization strategy for multilingual and global growth. Also use when the user mentions "localization," "multilingual," "i18n," "global expansion," "market entry," "localization strategy," "hreflang," "multi-language SEO," or "international SEO." For translation workflow, glossary, and style guide, use translation.
page-metadata
When the user wants to optimize meta tags other than title, description, Open Graph, or Twitter Cards. Also use when the user mentions "hreflang," "meta robots," "viewport," "charset," "canonical meta," "other meta tags," "meta robots noindex," "meta robots nofollow," "hreflang tags," "viewport meta," or "meta charset." For title tags, use title-tag. For meta descriptions, use meta-description. For Facebook/LinkedIn previews, use open-graph. For X previews, use twitter-cards.
site-crawlability
When the user wants to improve crawlability, fix orphan pages, or optimize site structure for search engines. Also use when the user mentions "crawlability," "crawl budget," "orphan pages," "internal links," "site structure," "site crawlability," "infinite scroll," "pagination," "masonry SEO," "AI crawler optimization," "GPTBot crawlability," "ClaudeBot crawlability," or "content not indexed." For internal links, use internal-links.
doc-kami-parchment
暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印
exec-briefing-memo
Decision needed + recommendation + evidence + tradeoffs, 把复杂材料压成可拍板的一页
frame-logo-outro
Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕
frame-macos-notification
拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告
clone-website
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
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.
codebase-mapping
Automatic codebase indexing for invisible context injection. Catalogs project structure, file types, entry points, dependencies, and test layout.
csp
Content Security Policy configuration, nonces, and reporting.
developer-portal-builder
Build unified developer portals with Backstage or custom frameworks
drizzle
Drizzle ORM patterns, migrations, type-safe queries, and database schema design.
sdk-init-generator
Generate SDK initialization wizards and scaffolding
seo
Technical SEO, structured data, sitemaps, and meta tags.
shadcn
shadcn/ui component patterns, customization, theming, and integration.
vercel
Vercel deployment, edge functions, environment configuration, and preview deployments.
web-security
OWASP Top 10, security headers, CSP, XSS prevention, and vulnerability prevention.
nextjs-turbopack
Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.
aurakit
Sonnet Amplified fullstack engine. 34 modes, SEC-01~15 OWASP security, 13 runtime hooks, 75% token reduction. Install: npx @smorky85/aurakit
algolia-search
Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.
bullmq-specialist
BullMQ expert for Redis-backed job queues, background processing, and reliable async execution in Node.js/TypeScript applications. Use when: bullmq, bull queue, redis queue, background job, job queue.
clerk-auth
Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up.
firebase
Firebase gives you a complete backend in minutes - auth, database, storage, functions, hosting. But the ease of setup hides real complexity. Security rules are your last line of defense, and they're often wrong. Firestore queries are limited, and you learn this after you've designed your data model. This skill covers Firebase Authentication, Firestore, Realtime Database, Cloud Functions, Cloud Storage, and Firebase Hosting. Key insight: Firebase is optimized for read-heavy, denormalized data. I
inngest
Inngest expert for serverless-first background jobs, event-driven workflows, and durable execution without managing queues or workers. Use when: inngest, serverless background job, event-driven workflow, step function, durable execution.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
vercel-deployment
Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.
ln-773-cors-configurator
Configures CORS policy for development and production environments. Use when setting up cross-origin access for APIs.
ckmui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
awt-e2e-testing
AI-powered E2E web testing — eyes and hands for AI coding tools. Declarative YAML scenarios, Playwright execution, visual matching (OpenCV + OCR), platform auto-detection (Flutter/React/Vue), learning DB. Install: npx skills add ksgisang/awt-skill --skill awt -g
fullstack-dev
Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app, building CRUD app, building real-time app, building chat app, Express + React, Next.js API, Node.js backend, Python backend, Go backend, designing service layers, implementing error handling, managing config/auth, setting up API clients, implementing auth flows, handling file uploads, adding real-time features (SSE/WebSocket), hardening for production. DO NOT TRIGGER when: pure frontend UI work, pure CSS/styling, database schema only.
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.
analyzing-projects
Analyzes codebases to understand structure, tech stack, patterns, and conventions. Use when onboarding to a new project, exploring unfamiliar code, or when asked "how does this work?" or "what's the architecture?"
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.
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.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
documentation-lookup
Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).
everything-claude-code-conventions
Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
everything-claude-code
Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
everything-claude-code-conventions
Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
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.
api-test-suite-builder
Use when the user asks to generate API tests, create integration test suites, test REST endpoints, or build contract tests.
tech-stack-evaluator
Technology stack evaluation and comparison with TCO analysis, security assessment, and ecosystem health scoring. Use when comparing frameworks, evaluating technology stacks, calculating total cost of ownership, assessing migration paths, or analyzing ecosystem viability.
coverage
Analyze test coverage gaps. Use when user says "test coverage", "what's not tested", "coverage gaps", "missing tests", "coverage report", or "what needs testing".
init
Set up Playwright in a project. Use when user says "set up playwright", "add e2e tests", "configure playwright", "testing setup", "init playwright", or "add test infrastructure".
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.
saas-scaffolder
Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM, and Stripe. Use when the user wants to create a new SaaS app, start a subscription-based web project, scaffold a Next.js application, or mentions terms like starter template, boilerplate, new project, or wiring up auth and payments.
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-fullstack
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
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".
spec-to-repo
Use when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap a project', 'I have requirements and need a codebase', or provides a natural-language project specification and expects a complete, runnable repository. Stack-agnostic: Next.js, FastAPI, Rails, Go, Rust, Flutter, and more.
ss-a11y
Audit a component or page for accessibility issues and fix them
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-component
Generate a new UI component following the StyleSeed design conventions
ss-copy
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
ss-feedback
Add appropriate user feedback states (loading, success, error, empty) to a component or page
ss-flow
Design user flows and navigation structure following proven UX patterns
ss-lint
Quick automated lint — detects common design system violations in seconds
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.
ss-page
Scaffold a new mobile page/screen using the StyleSeed layout patterns
ss-review
Review UI code for design system compliance, accessibility, and best practices
ss-setup
Interactive setup wizard — guides you step-by-step to configure the design system for your project
ss-update
Update StyleSeed engine in your project — analyzes what's outdated and updates safely
github-actions-creator
Use when the user wants to create, generate, or set up a GitHub Actions workflow. Handles CI/CD pipelines, testing, deployment, linting, security scanning, release automation, Docker builds, scheduled tasks, and any custom workflow for any language or framework.
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-fullstack
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
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.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
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.
port-upstream-features-cc
Port one or more open PRs from upstream decolua/9router into OmniRoute, adapt JS→TS, attribute the original author, land via release-branch worktree + per-feature PR.
port-upstream-issues-cc
Triage and fix open issues from upstream decolua/9router against OmniRoute. Reproduce first, security first, one worktree per fix, attribution preserved.
brainstorming
需求澄清 Skill。当用户只给了模糊描述时自动触发，通过业务提问把一句话翻译成完整需求，交给 Boss 流水线执行。 Triggers: '我想做一个', '帮我做', '有个想法', 'brainstorm', '帮我规划一下', '做个XX', 'I want to build' Does NOT trigger: - 需求已经完整（包含做什么 + 给谁用 + 核心场景） - 纯技术问题或 bug 修复 Output: .boss/<feature>/design-brief.md 需求设计简报
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-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
oma-frontend
Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, and shadcn work.
breakdown-epic-arch
Prompt for creating the high-level technical architecture for an Epic, based on a Product Requirements Document.
gsap-framer-scroll-animation
Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.
web-design-reviewer
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
chatgpt-app-builder
**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns. **READ THIS FIRST** before any MCP server work, including: - Creating new MCP servers - Modifying existing MCP servers (adding/updating tools, resources, prompts, widgets) - Debugging MCP server issues or errors - Reviewing MCP server code for quality, security, or performance - Answering questions about MCP development or mcp-use patterns - Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets This skill contains critical architecture decisions, security patterns, and common pitfalls. Always consult the relevant reference files BEFORE implementing MCP features.
mcp-apps-builder
**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns. **READ THIS FIRST** before any MCP server work, including: - Creating new MCP servers - Modifying existing MCP servers (adding/updating tools, resources, prompts, widgets) - Debugging MCP server issues or errors - Reviewing MCP server code for quality, security, or performance - Answering questions about MCP development or mcp-use patterns - Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets This skill contains critical architecture decisions, security patterns, and common pitfalls. Always consult the relevant reference files BEFORE implementing MCP features.
mcp-builder
**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns. **READ THIS FIRST** before any MCP server work, including: - Creating new MCP servers - Modifying existing MCP servers (adding/updating tools, resources, prompts, widgets) - Debugging MCP server issues or errors - Reviewing MCP server code for quality, security, or performance - Answering questions about MCP development or mcp-use patterns - Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets This skill contains critical architecture decisions, security patterns, and common pitfalls. Always consult the relevant reference files BEFORE implementing MCP features.
gsap-react
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
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.
frontend-engineer
Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project. Never declare done until the site is built, tested, responsive, accessible, and visually verified in a real browser. Use alongside vercel-cli for production-quality deployments.
competitive-teardown
定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
data-report
把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
deck-guizang-editorial
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘)
deck-open-slide-canvas
锁死 1920×1080 画布, React 组件级自由组合, 不绑模板
deck-pitch
10 页融资 deck, 白底 + 蓝紫渐变 hero, traction 柱状, $X.XM ask
deck-replit
Replit Slides 八套主题 (helix/holm/vance/bevel/world/atlas/bluehouse)
eng-runbook
服务概述 + alerts 表 + dashboards + 操作命令 + on-call + 事故清单
experiment-readout
假设 + 指标 + 结果 + 解释 + 决策, 把 A/B 或产品实验转成行动建议
frame-data-chart-nyt
NYT-newsroom 排版 + 错峰揭示动画 + 编辑级图表 (折线/柱/范围带)
frame-flowchart-sticky
SVG 曲线连接 + 便利贴节点 + 光标交互, 像白板 brainstorm
frame-glitch-title
数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero
frame-light-leak-cinema
胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡
frame-liquid-bg-hero
WebGL 风流体置换背景 + 顶部叠加金句, 适合视频片头 / landing hero / 海报
kanban-board
To do / In progress / In review / Done 四列, 卡片 + 头像 + 泳道
live-dashboard
Notion 风团队仪表板, KPI + 7 日 sparkline + activity feed + 任务表
magazine-poster
Sunday-paper 风格, 大字 serif headline + 双栏正文 + 编号 sections
agent-sandbox
Agent skill for sandbox - invoke with $agent-sandbox
app-builder
App scaffolding: Next.js, Vite, Nuxt, Astro, FastAPI, Django, Laravel, RN, Flutter. Triggers: scaffold, bootstrap, new project, starter, dashboard, mobile app.
docker-devops
Docker/K8s: Dockerfile, multi-stage, compose, manifests, Helm. Triggers: Docker, Dockerfile, container, Kubernetes, k8s, compose, Helm, pod.
explore
Explores codebase structure, stack, and architecture. Triggers: explore codebase, project structure, stack overview, architecture map.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
run-services
Start all local services (backend, frontend, docs) with dependency checking, error diagnosis, and automatic recovery. Handles missing npm/python packages, port conflicts, and stale processes.
turbopack
Turbopack configuration and Next.js integration.
performance-profiler
Performance Profiler
stripe-integration-expert
Stripe Integration Expert
amplify-workflow
Orchestrates AWS Amplify Gen 2 workflows for building full-stack apps with React, Next.js, Vue, Angular, React Native, Flutter, Swift, or Android. Use when user wants to BUILD, CREATE, or DEPLOY Amplify projects, add authentication, data models, storage, GraphQL APIs, Lambda functions, or deploy to sandbox/production. Do NOT invoke for conceptual questions, comparisons, or troubleshooting unrelated to active development.
port-upstream-features-ag
Migrated command port-upstream-features-ag
port-upstream-issues-ag
Migrated command port-upstream-issues-ag
architecttech-research
技术调研方法论，通过系统性调研和对比分析，为技术选型提供数据支持
sharedtech-stack-detection
检测项目技术栈的通用方法，通过分析配置文件识别语言、框架、工具链
sveltia-cms
Sveltia CMS Git-backed content management (Decap/Netlify CMS successor). 5x smaller bundle (300 KB), GraphQL performance, solves 260+ issues. Use for static sites (Hugo, Jekyll, 11ty, Gatsby, Astro, Next.js), blogs, docs, i18n, or encountering OAuth errors, TOML/YAML issues, CORS problems, content listing errors.
tanstack-router
TanStack Router type-safe file-based routing for React. Use for SPAs, TanStack Query integration, Cloudflare Workers, or encountering devtools, type safety, loader, Vite bundling errors.
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).
claude-landing-composer
Compose a premium, animated landing page section by section in Next.js + Tailwind + Motion (Framer Motion) — built on a real design system, with editorial copy and motion that feels human-crafted, not template-generated. Use when building or rebuilding a landing page, marketing site, or hero/feature/pricing/CTA sections that need to look production-ready and bespoke from day one.
nextjs-turbopack
Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.
ss-pattern
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
ss-tokens
View, add, or modify design tokens in the StyleSeed design system
context7-auto-research
Automatically fetch latest library/framework documentation for Claude Code via Context7 API
evals-context
Provides context about the Roo Code evals system structure in this monorepo. Use when tasks mention "evals", "evaluation", "eval runs", "eval exercises", or working with the evals infrastructure. Helps distinguish between the evals execution system (packages/evals, apps/web-evals) and the public website evals display page (apps/web-roo-code/src/app/evals).
next-intl-add-language
Add new language to a Next.js + next-intl application
better-auth
Provides Better Auth integration patterns for NestJS backend and Next.js frontend with Drizzle ORM and PostgreSQL. Use when setting up Better Auth with NestJS backend, integrating Next.js App Router frontend, configuring Drizzle ORM schema, implementing social login (GitHub, Google), adding plugins (2FA, Organization, SSO, Magic Link, Passkey), implementing email/password authentication with session management, or creating protected routes and middleware.
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).
nextjs-authentication
Provides authentication implementation patterns for Next.js 15+ App Router using Auth.js 5 (NextAuth.js). Use when setting up authentication flows, implementing protected routes, managing sessions in Server Components and Server Actions, configuring OAuth providers, implementing role-based access control, or handling sign-in/sign-out flows in Next.js applications.
nextjs-code-review
Provides comprehensive code review capability for Next.js applications, validates Server Components, Client Components, Server Actions, caching strategies, metadata, API routes, middleware, and performance patterns. Use when reviewing Next.js App Router code changes, before merging pull requests, after implementing new features, or for architecture validation. Triggers on "review Next.js code", "Next.js code review", "check my Next.js app".
nextjs-data-fetching
Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching, Incremental Static Regeneration (ISR), revalidation strategies, and error boundaries. Use when implementing data fetching in Next.js applications, choosing between server and client fetching, setting up caching strategies, or handling loading and error states.
nextjs-deployment
Provides comprehensive patterns for deploying Next.js applications to production. Use when configuring Docker containers, setting up GitHub Actions CI/CD pipelines, managing environment variables, implementing preview deployments, or setting up monitoring and logging for Next.js applications. Covers standalone output, multi-stage Docker builds, health checks, OpenTelemetry instrumentation, and production best practices.
nextjs-performance
Expert Next.js performance optimization skill covering Core Web Vitals, image/font optimization, caching strategies, streaming, bundle optimization, and Server Components best practices. Use when optimizing Next.js applications for Core Web Vitals (LCP, INP, CLS), implementing next/image and next/font, configuring caching with unstable_cache and revalidateTag, converting Client Components to Server Components, implementing Suspense streaming, or analyzing and reducing bundle size. Supports Next.js 16 + React 19 patterns.
nx-monorepo
Provides comprehensive Nx monorepo management guidance for TypeScript/JavaScript projects. Use when creating Nx workspaces, generating apps/libraries/components, running affected commands, setting up CI/CD, configuring Module Federation, or implementing NestJS backends within Nx
react-patterns
Provides comprehensive React 19 patterns for Server Components, Server Actions, useOptimistic, useActionState, useTransition, concurrent features, Suspense boundaries, and TypeScript integration. Generates executable code patterns, validates security for public endpoints, and optimizes performance with React Compiler or manual memoization. Proactively use when building React 19 applications with Next.js App Router, implementing optimistic UI, or optimizing concurrent rendering.
turborepo-monorepo
Provides comprehensive Turborepo monorepo management guidance for TypeScript/JavaScript projects. Use when creating Turborepo workspaces, configuring turbo.json tasks, setting up Next.js/NestJS apps, managing test pipelines (Vitest/Jest), configuring CI/CD, implementing remote caching, or optimizing build performance in monorepos
typescript-security-review
Provides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and secrets exposure. Use when performing security audits, before deployment, reviewing authentication/authorization implementations, or ensuring OWASP compliance for Express, NestJS, and Next.js. Triggers on "security review", "check for security issues", "TypeScript security audit".
prd-v05-technical-stack-selection
Determine technologies needed to build the product, making build/buy/integrate decisions during PRD v0.5 Red Team Review. Handles both greenfield and brownfield contexts. Triggers on requests to select tech stack, evaluate technologies, make build vs. buy decisions, discover existing assets, or when user asks "what technologies?", "select tech stack", "build or buy?", "what do we reuse?", "existing stack", "technical decisions", "what tools do we need?", "evaluate solutions". Consumes FEA- (features), SCR- (screens), RISK- (constraints). Outputs TECH- entries with decisions, rationale, and trade-offs. Feeds v0.6 Architecture Design.
article-magazine
Substack / Medium 高级感长文排版, 适合公众号、博客发布
blog-post
杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
card-twitter
推特金句 / 数据卡, 适合配推文
card-xiaohongshu
小红书风格知识卡片, 多张联排可滑动浏览
dashboard
固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
deck-blueprint
奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
deck-course-module
暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
deck-dir-key-nav
8 页单色背景, 160px display + 4px accent + Mono 箭头列表
deck-graphify-dark
深夜渐变 + 漂浮 orbs + SVG 力导向图谱 + JetBrains Mono
deck-hermes-cyber
黑底 + CRT 网格扫描线 + $ 命令行标题 + 薄荷绿大字 + 三档 tag
deck-magazine-web
电子杂志 × 电子墨水风, WebGL 流体背景 + 衬线 display
deck-obsidian-claude
GitHub-dark + 紫蓝环境光 + 三色渐变标题 + GitHub 风代码
deck-presenter-mode
tokyo-night 默认主题, T 切换 5 主题, S 打开提词器 popup
deck-product-launch
暗 hero + 亮内容, 橙→桃 accent, 特性卡 + 定价 + CTA
deck-safety-alert
红琥珀警示色 + hazard 条纹 + L1/L2/L3 tier 卡片 + 删除线标题
deck-simple
通用 horizontal-swipe HTML deck, 不要 magazine 调
deck-xhs-pastel
奶油底 + 柔光 blob + 马卡龙圆角卡片 + Playfair 斜体序号
deck-xhs-post
9 页 3:4 竖版图文, 暖 pastel + 虚线 sticker 卡片
digital-eguide
两页跨页电子指南, 封面 + 课程页 + pull-quote + 步骤列表
docs-page
三栏文档页: 侧导航 + 正文 + 右 TOC
email-marketing
产品发布邮件, 含 masthead、hero、CTA、规格表, table-fallback
finance-report
Masthead + KPI + 收入/烧钱图 + P&L 表 + 重点 + 展望
flowai-team-dashboard
三个 tab 的团队管理后台: 成员、详情、活动日志, 含图表 + CSV 导出
gamified-app
三屏: 封面 / 今日任务带 XP / 任务详情, 暗色舞台
invoice
标准发票: 寄件/收件 + 明细 + 税 + 总额 + 付款指引
mobile-app
像素级 iPhone 15 Pro 边框, 一屏 app 截图
mobile-onboarding
三个手机框并排: splash / value-prop / sign-in
seo-and-llm-rankings
Audits websites for traditional SEO health and AI search visibility (GEO). Generates prioritized reports with actionable fixes and ready-to-use prompts for AI coding agents. Covers Google, Bing, ChatGPT, Perplexity, Claude, Gemini, Copilot, and Google AI Overviews. Use when auditing SEO, LLM visibility, generative engine optimization, AI Overviews, or AI search optimization.
frontend
React / Next.js UI, state, accessibility.
animation-patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
hizir
Hızır'ın kullanım kılavuzu. Tüm komutlar, agent'lar, workflow'lar, sistemler burada. /hizir yaz, her şeyi gör.
project-guidelines-example
Example template for project-specific skill files covering architecture, patterns, testing, and deployment.
server-components
React Server Components, Suspense boundaries, streaming SSR, partial prerendering patterns for Next.js App Router.
session-compression
Lossless session context compression for token efficiency. Extracts entities, decisions, and state into compact format before context window fills. 10-30x reduction in context size while preserving all actionable information.
framework-accessibility
Framework-specific accessibility patterns, common pitfalls, and code fix templates for React, Next.js, Vue, Angular, Svelte, and Tailwind CSS. Use when generating framework-aware accessibility fixes or checking framework-specific anti-patterns.
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.
upgrade-otel
Upgrade OpenTelemetry instrumentations across the Sentry JavaScript SDK. Use when bumping OTel instrumentation packages to their latest versions.
korean-privacy-terms
처리방침·이용약관 자동 생성 스킬 패키지 (v4.0). 호출 시 privacy-kr·privacy-eu·privacy-us·privacy-global 4개 하위 스킬을 번호 메뉴로 제시하고 번호 입력 즉시 해당 스킬 인터뷰로 직행. 한국 PIPA + EU GDPR + US CCPA/CPRA 대응.
privacy-eu
EU 사용자 대상 서비스용 Privacy Notice·Terms of Service·Consent Modal·Cookie Banner 자동 생성. GDPR (Regulation 2016/679) + ePrivacy Directive + Consumer Rights Directive 2011/83 + Digital Services Act + Digital Content Directive + Unfair Terms Directive 반영. 영문 인터뷰로 진행.
privacy-global
한국+EU 병기 처리방침·이용약관 자동 생성. 한국 본사가 EU 사용자까지 대상으로 서비스할 때 사용. 한국어(PIPA)·영문(GDPR) 두 세트 문서를 동시 생성하고, Footer에 언어·관할 전환 링크 자동 삽입.
privacy-global-jp
한국+일본 병기 처리방침·이용약관 자동 생성. 한국 본사가 일본 사용자까지 대상으로 서비스할 때 사용. 한국어(PIPA)·일본어(APPI) 두 세트 문서를 동시 생성하고, Footer에 언어·관할 전환 링크 자동 삽입.
privacy-jp
日本サービス向け（일본 서비스용） プライバシーポリシー・利用規約・同意モーダル・Cookieバナー 자동 생성. 個人情報保護法(APPI)·消費者契約法·特定商取引法 반영. Next.js 13~16 프로젝트 대상.
privacy-kr
한국 서비스용 처리방침·이용약관·회원가입 동의 모달·쿠키 배너 자동 생성. 개인정보보호법 §30, 2025.4.21 작성지침, 2026.3 개정법, 공정위 전자상거래 표준약관 10023호 반영. Next.js 13~16 프로젝트 대상.
privacy-us
미국 CCPA/CPRA + 주요 주법(VCDPA·CPA·CTDPA·UCPA·ICDPA·KCDPA·RIDPA) 기반 Privacy Policy 자동 생성. 2026.1.1 CPPA 갱신 규정, Sensitive Personal Information, Do Not Sell/Share, ADMT 공개, GPC 브라우저 신호 대응. 캘리포니아 거주자 서비스·100K records 초과 서비스 대상.
ai-elements
Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.
find-docs
Retrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill whenever the user asks about a specific library, framework, SDK, CLI tool, or cloud service -- even for well-known ones like React, Next.js, Prisma, Express, Tailwind, Django, or Spring Boot. Your training data may not reflect recent API changes or version updates. Always use for: API syntax questions, configuration options, version migration issues, "how do I" questions mentioning a library name, debugging that involves library-specific behavior, setup instructions, and CLI tool usage. Use even when you think you know the answer -- do not rely on training data for API details, signatures, or configuration options as they are frequently outdated. Always verify against current docs. Prefer this over web search for library documentation and API details.
documentation-lookup
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
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.
better-auth
Skill for integrating Better Auth - comprehensive TypeScript authentication framework for Cloudflare D1, Next.js, Nuxt, and 15+ frameworks. Use when adding auth, encountering D1 adapter errors, or implementing OAuth/2FA/RBAC features.
bun-nextjs
This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.
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.
cloudflare-workers-migration
Migrate to Cloudflare Workers from AWS Lambda, Vercel, Express, and Node.js. Use when porting existing applications to the edge, adapting serverless functions, or resolving Node.js API compatibility issues.
motion
Motion (Framer Motion) React animation library. Use for drag-and-drop, scroll animations, gestures, SVG morphing, or encountering bundle size, complex transitions, spring physics errors.
neon-vercel-postgres
Neon + Vercel serverless Postgres for edge and serverless environments. Use for Cloudflare Workers, Vercel Edge, Next.js apps with HTTP/WebSocket connections, database branching (git-like), Drizzle/Prisma ORM integration, migrations, PITR backups, or encountering connection pool exhausted errors, TCP connection issues, SSL config problems.
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.
ultracite
Ultracite multi-provider linting/formatting (Biome, ESLint, Oxlint). Use for v6/v7 setup, provider selection, Git hooks, MCP integration, AI hooks, migrations, or encountering configuration, type-aware linting, monorepo errors.
independent-developer-micro-saas-master
独立开发者与微型 SaaS — 单人或极小团队 (≤3 人) 构建可持续订阅收入的软件产品商业, 有别于自由职业/咨询、企业级 SaaS 和开源维护: (a) 产品发现与验证 (自己的痒 vs 市场优先 Nugent/Walling; 着陆页冒烟测试; 先接 Stripe 再写代码; JTBD 访谈适配独立开发者场景; Reddit/HN/X/社区痛点挖掘; Mom Test 验证框架; 公开构建作为验证机制); (b) 独立开发者技术架构 (无聊技术论 McKinley; 单体优先; serverless vs VPS 在 ≤$100/月预算下的取舍; Rails/Django/Laravel/Next.js 等框架的出货速度选型; 托管服务优先于自建; Supabase/PlanetScale/Neon 数据库即服务; Clerk/Auth0 认证即服务; Stripe/Paddle/LemonSqueezy 支付; Vercel/Fly.io/Railway 部署; AI 辅助编码 Cursor/Copilot 作为力量倍增器); (c) 无营销团队的分发与增长 (SEO 作为微型 SaaS 护城河; Product Hunt 发布; AppSumo 终身授权利弊; 冷邮件; Twitter/X 公开构建; IndieHackers 社区分发; 集成市场 Shopify/WordPress/Zapier/Slack 应用目录; 联盟计划; 一人内容营销); (d) 定价与变现 (SaaS 定价心理学; freemium vs 免费试用 vs 纯付费; 按席位 vs 按用量 vs 固定费率; 年付折扣; 老用户保价; 微型 SaaS 流失率控制; MRR/ARR/LTV/CAC 在微型规模的含义; $10K MRR 里程碑心理学); (e) 独立创始人心智模型与生活设计 (default alive vs default dead Graham; 拉面盈利 Levels; 生活方式生意 vs 增长生意的光谱; 独立开发者倦怠预防; 时间管理与上下文切换成本; 地理套利与远程优先; 一次构建反复销售的资产思维; 社区作为支持网络 IndieHackers/WIP/MicroConf); (f) 法务与运营基础 (公司注册地选择 LLC/Ltd/GmbH 税效; Stripe Atlas vs Firstbase
developing-software
Software development knowledge reference covering Python, Go, Rust, TypeScript, Java, C++, and Shell. Use when writing code, debugging, or following language-specific best practices.
playwright-core
Battle-tested Playwright patterns for writing and debugging reliable E2E, API, component, visual, accessibility, and security tests. Use when you need locator strategy, assertions, fixtures, network mocking, auth flows, trace debugging, or framework recipes for React, Next.js, Vue, and Angular. TypeScript and JavaScript.
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)
blog
Full-lifecycle blog engine with 30 sub-skills, 12 content templates, 5-category 100-point scoring, and 5 specialized agents. Routes user requests to the right sub-skill: writing, rewriting, analysis, outlines, audits, schema, charts, images, repurposing, AI-citation optimization, FLOW framework prompts, topic-cluster execution, and multilingual publishing. Optimized for Google rankings (December 2025 Core Update, E-E-A-T) and AI citations (GEO/AEO). Supports any platform (WordPress, Next.js MDX, Hugo, Ghost, Astro, Jekyll, 11ty, Gatsby, HTML). Use when user says "blog", "write a blog", "blog post", "blog strategy", "content brief", "editorial calendar", "blog audit", "blog optimization", "topic cluster", "multilingual blog", "FLOW framework", or any /blog subcommand. Sub-skill descriptions cover narrower triggers.
light-frontend-design
独特吸睛、审美好、有特色、美观全面的前端设计。当任务涉及前端界面、项目展示页、系统演示、大屏可视化、可视化平台、微信小程序 UI、移动端界面、设计系统、Tailwind v4、shadcn/ui、Next.js、React、Vite、可访问性、动效、重设计审计时使用。不只是能用，而是好看、统一、清晰、有亮点、有视觉记忆点，适合展示/答辩/演示/落地。按主题选风格：科技感、学术感、农业智慧化、数据可视化、极简、玻璃拟态、卡片式、大屏、管理系统、移动端、小程序等。
light-tool-selection
工具选择与多工具协同。根据任务自动判断适合用什么工具——搜索、Python、R、MATLAB、LaTeX、Word、Excel、PowerPoint、Visio、Origin、数据库、Git、前端/后端框架、绘图工具、文献管理工具等（常驻，所有任务后台生效）。不盲目用工具，而是按实际任务选最高效、最稳定、最专业的实现方式。
api-endpoint-scaffolder
Generate REST API endpoints with proper structure, validation, error handling, and types. Use when creating new API routes, endpoints, or backend services.
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
debug-instance
Debug a running kandev development instance. Use when the user reports a bug, unexpected behavior, or asks to investigate an issue while kandev is running via `make dev`. Triages the bug class first (backend-logic → Go test, live-instance → /debug/export, UI → browser), launches an ISOLATED parallel instance when a running app is needed, and tears down only what it started.
kandev-escalation
How to create a human-actionable decision task when you are blocked
kandev-protocol
How to interact with the kandev orchestrator via the CLI
mobile-parity
Ensures UI feature work ships with desktop and mobile parity, responsive behavior, and mobile Playwright E2E coverage. Use when implementing, planning, reviewing, or testing any new feature, page, component, workflow, form, dialog, sidebar, navigation, dashboard, or visual UI change; if work touches frontend or user-facing UI, this skill must run even when user mentions only desktop or says "new feature".
playwright-cli
Automate browser interactions, test web pages and work with Playwright tests.
privacy-terms
처리방침·이용약관 자동 생성 진입점. 호출 즉시 6개 하위 스킬(privacy-kr·privacy-eu·privacy-us·privacy-jp·privacy-global·privacy-global-jp)을 번호 메뉴로 제시하고, 번호 입력 즉시 해당 스킬 인터뷰로 직행한다.
codebase-audit
全面代码库审计 — 自适应并行深度分析（前后端契约、数据完整性、异常处理/安全、架构/技术债、配置/缓存），输出按严重程度排序的统一报告和修复路线图。Use when user asks to audit, analyze, or review an entire codebase for design issues, find hidden bugs, check architecture health, or asks '全面审查', '代码库审计', '分析设计问题', 'audit codebase', 'health check', '有哪些问题'. Also trigger when user asks to find silent degradation, data flow breakpoints, type mismatches between frontend and backend, or wants to understand technical debt across a project.
figma-to-code
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
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.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
community-browse
Browse community discussions for relevant Gene strategies and updates.
figma-to-react
Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
find-web-developer
Use whenever the user wants to find, shortlist, vet, or enrich US web development firms — building, refreshing, or rebuilding marketing sites, landing pages, ecommerce, WordPress/Webflow/Shopify, headless CMS, microsites, and web frontend work. Triggers on "find a web developer for a marketing landing page", "shortlist three Webflow agencies in California", "rebuild our ecommerce site on Shopify", or "pull contact info for these 8 web dev shop domains", even when described indirectly (redesign and rebuild our site, ship a microsite). Drives the ServiceGraph API (api.servicegraph.co) — a 100k+ US firm catalog filterable by industry, services, location, size, ratings. Defer to find-software-developer for custom backend/API/mobile/internal-tool work — anything beyond a website. Defer to find-marketing-agency when scope spans broader marketing beyond the build. Skip in-house web-engineer hires, "how do I build X" DIY questions, hosting/CMS-product comparisons, non-US firms, individual freelancers.
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.
learning
Extracts reusable patterns from sessions. Use at session end to capture debugging insights and project-specific knowledge.
worktree
创建 Git worktree 用于隔离开发新功能或修复 bug。 自动处理分支创建、worktree 设置、目录切换和开发环境初始化。
review-logging-patterns
Review code for logging patterns and suggest evlog adoption. Guides setup on Nuxt, Next.js, SvelteKit, Nitro, TanStack Start, React Router, NestJS, Express, Hono, Fastify, Elysia, Cloudflare Workers, and standalone TypeScript. Detects console.log spam, unstructured errors, and missing context. Covers wide events, structured errors, drain adapters (Axiom, OTLP, HyperDX, PostHog, Sentry, Better Stack, Datadog), sampling, enrichers, and AI SDK integration (token usage, tool calls, streaming metrics, telemetry integration, cost estimation, embedding metadata).
adr-log
Document architecture decisions with ADR (Architecture Decision Records). Use when making significant technical decisions, choosing between alternatives, or when onboarding needs context on past decisions.
cc-skill-backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
cc-skill-frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
ckm-ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
development
Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.
frontend-api-client-with-jwt
A conceptual skill for building an API client in Next.js that handles JWT tokens
next-js-16-launchpad
Next.js 16 with Turbopack, Cache Components, and proxy.ts. Use for bootstrapping, migrating, and building with App Router and React 19.
next-js-better-auth-integration
A conceptual skill for integrating Better Auth with Next.js App Router
nextjs-architecture
Next.js architecture specialist. Use when designing Next.js applications, migrating to App Router, implementing Server Components, or optimizing Next.js performance. Covers App Router, Server Components, and best practices.
performance-vitals
Enforce Core Web Vitals optimization. Use when building user-facing features, reviewing performance, or when Lighthouse scores drop. Covers LCP, FID/INP, CLS, and optimization techniques.
project-structure
Organize project folders following industry best practices. Use when setting up new projects, reorganizing codebases, or when folder structure becomes messy. Covers Next.js, Bulletproof React, and FSD patterns.
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.
readme-for-developers
Write developer-oriented README as onboarding documentation. Use when creating/updating README, setting up new projects, or when new developers need to understand the codebase quickly. README = Entry point + Architecture overview + Working agreement.
session-memory
Manages cross-session learning and memory persistence. Use when user mentions 前回何をした, 履歴, 過去の作業, セッション記録, continue from before, session history. Do NOT load for: 実装作業, レビュー, 一時的な情報.
streaming-api-patterns
Implement real-time data streaming with Server-Sent Events (SSE), WebSockets, and ReadableStream APIs. Master backpressure handling, reconnection strategies, and LLM streaming for 2025+ real-time applications.
app-builder
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
hunt-nextjs
Hunt Next.js specific vulnerabilities — Server Actions arbitrary function execution, Middleware auth bypass via static asset paths, ISR cache poisoning, Image Optimization SSRF (/_next/image), RSC payload leakage, getServerSideProps injection, source map exposure, debug endpoint leakage. Use when target runs Next.js 13/14/15 or any React SSR framework.
windiff-version-diff-analysis
Generate and analyze a diff between two Windows versions (or two patch levels of one version) for security research, using the WinDiff CLI in this repo. Use this whenever the user wants to compare Windows builds to find what Microsoft changed between versions — new or removed syscalls, new exported/internal kernel routines, added structures or struct fields, new security mitigation flags (process/thread mitigations, CFG/CET/XFG, Code Integrity / ci.dll, kCET, win32k lockdown), AND any other new security-relevant feature or component: new kernel notification/callback surface (Ps/Ob/Cm callbacks, ETW providers and the EtwTi threat-intel channel, minifilter/altitude hooks), new telemetry, ELAM/AMSI/PPL/anti-tamper changes, and brand-new drivers or modules. Frame findings for three audiences — anti-malware / EDR developers, anti-cheat developers, and vulnerability researchers. Triggers on requests like "diff ntoskrnl between 21H2 and 23H2", "what new syscalls were added in 24H2", "what changed in win32k.sys / ci.
frontend-specialist
前端开发专家。精通 React/Vue/Next.js/Nuxt 等现代前端框架，专注于视觉系统、组件化开发、响应式设计、性能优化和用户体验。用于前端应用开发、UI 设计落地、设计系统实现和高质量界面交付。
kandev-agent-edit
Edit or remove existing agents — rename, adjust budget, retire
kandev-approvals
List pending approvals and decide them (approve or reject)
kandev-budget
Check workspace and per-agent spend before expensive operations
kandev-config-export
Export the office workspace config to the .kandev/ folder for version control
kandev-config-import
Apply config changes from the .kandev/ folder back into the office DB
kandev-hiring
Hire new agents via agentctl, gated by the workspace approval policy
kandev-routines
Schedule recurring work via cron and webhook triggers
kandev-tasks
List, move, archive, and message tasks via agentctl
kandev-team
List and inspect agents in the workspace before delegating or hiring
memory
Read and write persistent memory entries via agentctl
ai-app
Full-stack AI application generator with Next.js, AI SDK, and ai-elements. Use when creating chatbots, agent dashboards, or custom AI applications. Triggers: chatbot, chat app, agent dashboard, AI application, Next.js AI, useChat, streamText, ai-elements, build AI app, create chatbot
ai-elements
Build AI chat interfaces with pre-built shadcn-style components (Message, Conversation, PromptInput, Reasoning, Sources, Tool, Artifact, CodeBlock, Branch, Suggestions, Task, Image, ChainOfThought, InlineCitation, WebPreview, and more). Use when adding AI chat UI to a Next.js + AI SDK app, installing AI Elements components via the CLI (`bun x ai-elements@latest add <name>` or `npx shadcn@latest add @ai-elements/<name>`), composing message displays with markdown, building prompt inputs with attachments, or rendering streaming reasoning and tool output.
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".
ai-sdk-6
Vercel AI SDK v6 development. Use when building AI agents, chatbots, tool integrations, streaming apps, or structured output with the ai package. Covers ToolLoopAgent, useChat, generateText, streamText, tool approval, smoothStream, provider tools, MCP integration, and Output patterns.
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Use when implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, managing 'use cache: private' for compliance scenarios, pass-through/interleaving patterns, GET Route Handler caching, debugging cache issues, and reviewing Cache Component implementations.
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.
next-best-practices
Next.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.
nextjs-seo
Next.js App Router SEO optimization and auditing. Use when implementing or fixing SEO in a Next.js app — metadata and generateMetadata, viewport/themeColor, Open Graph and og/twitter images (file conventions + ImageResponse), web app manifest, favicons/icons, sitemap.xml, robots.txt, canonical URLs, hreflang/i18n alternates, JSON-LD structured data and rich results, Core Web Vitals (LCP/INP/CLS), AI search/GEO and AI crawler rules (GPTBot, OAI-SearchBot), or diagnosing Google indexing problems (Search Console, "Discovered/Crawled - currently not indexed"). Also use to run an SEO audit checklist. Not for general Next.js feature work unrelated to SEO.
nextjs-shadcn
Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't mention shadcn explicitly.
openai-agents-sdk
OpenAI Agents SDK (Python) development. Use when building AI agents, multi-agent handoffs, function tools, guardrails, sessions, streaming, or tracing with the `openai-agents` / `agents` Python package — including Azure OpenAI via LiteLLM. Triggers on imports from `agents`, uses of `Runner.run_sync`/`Runner.run_streamed`, `@function_tool`, `AgentOutputSchema`, `SQLiteSession`, or questions about the openai-agents-python SDK.
postgres-semantic-search
PostgreSQL-based semantic and hybrid search with pgvector and ParadeDB. Use when implementing vector search, semantic search, hybrid search, or full-text search in PostgreSQL. Covers pgvector indexing, hybrid FTS/BM25 + RRF, ParadeDB, reranking, halfvec, multilingual search, query translation, and domain evals. Triggers: pgvector, vector search, semantic search, hybrid search, embedding search, PostgreSQL RAG, BM25, RRF, HNSW index, similarity search, ParadeDB, pg_search, reranking, Cohere rerank, Voyage rerank, graceful fallback, iterative_scan, filtered HNSW, websearch_to_tsquery, unaccent, multilingual FTS, pg_trgm, trigram, fuzzy search, LIKE, ILIKE, autocomplete, typo tolerance, fuzzystrmatch, evaluation, benchmarking, Hit@K, MRR, halfvec cast, cross-lingual retrieval, non-English corpus, per-language indexing, query translation, RRF fusion across languages
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.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
skill-creator
Creates new skills, modifies and improves existing skills, and measures skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
supabase-postgres-best-practices
Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
acp-debug
Debug an ACP agent CLI by spawning it, speaking raw JSON-RPC, and capturing every frame to a JSONL file. Use when the user asks to probe an agent's capabilities, compare agents, test a prompt against an agent, inspect raw ACP wire frames, or investigate why an agent fails to initialize.
add-integration
Add a new third-party integration (Jira/Linear-style) — per-workspace credentials, 90s auth-health poller, settings page, link/import buttons. Use when scaffolding a new external service integration.
code-review
Review changed code for quality, security, and architecture compliance. Use after implementing features or before opening PRs.
commit
Stage and commit changes using Conventional Commits. Use when there are dirty/staged files to commit, the user says "commit", or before pushing a PR.
debug-logs
Add debug logs (temporary console.log / structured Warn, or permanent namespaced loggers) to investigate or instrument runtime behaviour. Use whenever the user wants to add logs, log statements, console.logs, trace, instrument, or print runtime behaviour to debug a frontend or backend issue. Triggers include "add debug logs", "add some logs", "log this", "trace this", "instrument", "investigate why", "print", "console.log around". Temporary debug logs must be stripped before creating a PR; persistent ones (frontend `createDebugLogger`, backend tier-appropriate level) stay.
e2e
Write and run web E2E tests (Playwright) using TDD — locations, patterns, commands, and debugging.
feature
Guided feature development — brainstorm, explore codebase, design architecture, implement with TDD, and review. Use for new features or significant changes.
fix
Fix bugs and issues — reproduce, find root cause, minimal fix with regression test. Use when something is broken.
kandev-task-comment
Post a comment on any task as the current agent
plan
Create an implementation plan (plan.md) from a feature spec. Explores the codebase, designs the approach, and produces a structured plan with backend, frontend, tests, and E2E sections. Use after writing a spec and before implementing.
pr
Commit, push, and create a PR. Default is ready-for-review with auto-fixup. Use --draft to skip review/fixup.
pr-fixup
Wait for CI checks and automated reviews (CodeRabbit, Greptile, Claude, cubic) on a PR, fix failures and address comments, then push.
pull-upstream
Pull latest changes from the public kandev repo, rebase onto them, and fix any conflicts or issues.
qa
Verify a feature works after implementation. Actively try to break it — edge cases, error paths, integration wiring, and real usage flows.
record
Keep docs/decisions/ ADRs and docs/specs/ specs in sync with the work happening in the conversation. AUTO-INVOKE proactively the moment the user asks for any change that will alter architecture or observable product behavior — new feature, cross-cutting refactor, dependency swap, data-model or public-API change, new pattern, or a bug fix that changes documented behavior or reveals a spec gap. Also invoke on explicit triggers: "record this", "create an ADR", "document this decision", "update the spec", "ADR for X". Run BEFORE coding when the decision is upfront, or AFTER landing when the right call only became clear during implementation. SKIP for typo/lint fixes, refactors that preserve behavior within an existing pattern, and obvious uncontested choices.
simplify
Simplify recently changed code — inline one-off abstractions, remove speculative code, reduce nesting, replace cleverness with clarity. Run after implementing a feature.
spec
Write a feature spec — the "what & why" of a kandev product feature, before coding. Use ONLY for a product-feature surface (user-visible capability the app supports). Do NOT use for bug fixes, incident postmortems, refactors that preserve behavior, or infra-only work — those get ADRs (if a new convention emerged) and/or regression tests, not specs. Use when the user says "let's spec X" or starts a new product feature.
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.
cloudflare-workers
Rapid development with Cloudflare Workers - build and deploy serverless applications on Cloudflare's global network. Use when building APIs, full-stack web apps, edge functions, background jobs, or real-time applications. Triggers on phrases like "cloudflare workers", "wrangler", "edge computing", "serverless cloudflare", "workers bindings", or files like wrangler.toml, worker.ts, worker.js.
download-webpage-as-pdf
Save a live webpage as a high-fidelity PDF that preserves the original layout AND every image (including lazy-loaded ones) using the agent-browser CLI. Use this whenever the user asks to "download this page as PDF", "save this article", "archive this URL", "fetch this page for reference", or otherwise wants a local PDF of a web page that looks like the browser version. Especially important on modern JS-heavy sites (engineering blogs, Next.js sites, anything with IntersectionObserver lazy loading) where naive `chrome --headless --print-to-pdf` or a bare `agent-browser pdf` produces blank rectangles or broken-image placeholders. Trigger this skill even when the user does not name the tool - any request to capture a webpage's full visual content as a PDF on disk should pull this in. For reader-mode/article-only output (no nav, no footer, no manual trimming) prefer percollate instead - see "When NOT to use this".
mpp
Build with MPP (Machine Payments Protocol) - the open protocol for machine-to-machine payments over HTTP 402. Use when developing paid APIs, payment-gated content, AI agent payment flows, MCP tool payments, pay-per-token streaming, or any service using HTTP 402 Payment Required. Covers the mppx TypeScript SDK with Hono/Express/Next.js/Elysia middleware, pympp Python SDK, and mpp Rust SDK. Supports Tempo stablecoins, Stripe cards, Lightning Bitcoin, and custom payment methods. Includes charge (one-time) and session (streaming pay-as-you-go) intents. Make sure to use this skill whenever the user mentions mpp, mppx, machine payments, HTTP 402 payments, Tempo payments, payment channels, pay-per-token, paid API endpoints, or payment-gated services.
frontend
Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.
analysis-skill-router
Use when picking which analysis or project-analysis-* skill fits a request — routes by scope, framework, and symptom — even if the user just says 'analyze this' or 'dig into the codebase'.
api-endpoint
Use when creating an API endpoint or HTTP route handler — detects the project stack and routes to the matching carve-out (laravel-api-endpoint, nextjs-patterns, symfony-workflow).
agent-creator
Use when creating expert agents. Generates agent.md with frontmatter, hooks, required sections, and skill references.
apex-methodology
Systematic development workflow: Analyze → Plan → Execute → eLicit → eXamine. Use for ANY development task: features, bug fixes, refactoring, hotfixes. Triggers: "implement", "create", "build", "fix", "add feature", "refactor", "develop". Auto-detects project type (Laravel, Next.js, React, Swift) and loads framework-specific references. Enforces: files <100 lines, interfaces separated, SOLID principles, expert self-review, sniper validation. Modes: --auto (default), --manual, --skip-elicit
research
Technical research methodology using Context7, Exa, and Sequential Thinking for documentation, best practices, and complex investigations.
skill-creator
Use when creating new skills, restructuring existing skills, or improving skill documentation. Generates SKILL.md + references/ structure with proper patterns.
nextjs-senior-dev
Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance.
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.
go
Opens the running app in a browser and verifies recent UI changes actually work. Use whenever the user wants a quick smoke test or sanity check of recent work, or says "go", "open in browser", "check in browser", "test your work", "make sure it works", "smoke test", "verify", "did it actually work", "make sure the form/page works", "check the form submits", "works on mobile" — even when they don't explicitly ask for browser testing. Also activates implicitly when the user appends "...and make sure it works" to a UI request. Skips design critique; for that, use go-ui.
handoff
Write or update a HANDOFF.md so a fresh agent can continue this work. Use when the user says "handoff", "compact this", "context is full", or "/clear and continue".
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
codebase-audit
全面代码库审计 — 自适应并行深度分析（前后端契约、数据完整性、异常处理/安全、架构/技术债、配置/缓存），输出按严重程度排序的统一报告和修复路线图。Use when user asks to audit, analyze, or review an entire codebase for design issues, find hidden bugs, check architecture health, or asks '全面审查', '代码库审计', '分析设计问题', 'audit codebase', 'health check', '有哪些问题'. Also trigger when user asks to find silent degradation, data flow breakpoints, type mismatches between frontend and backend, or wants to understand technical debt across a project.
figma-to-code
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.
figma-to-react
Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.
craft-project-setup
Scaffold Claude Code configuration specifically for Craft CMS projects. Generates CLAUDE.md and .claude/rules/ files tailored to the project type (plugin, site, module, hybrid, or monorepo). Only for Craft CMS projects — not for Next.js, Laravel, or other frameworks. Triggers on: 'set up Claude for this Craft project', 'initialize CLAUDE.md', 'scaffold project config', 'configure Claude Code for Craft', 'create CLAUDE.md', 'missing CLAUDE.md', 'does this project have a CLAUDE.md', 'bootstrap Claude config', 'new Craft project setup', 'onboard a developer to this Craft project', 'generate .claude/rules', 'set up coding standards config', 'upgrade Claude config', 'update CLAUDE.md', 'compare my setup', 'is my config up to date', 'audit my Claude setup', 'redo project setup'. Also triggers when starting work in a new Craft CMS project that lacks a CLAUDE.md file, or when the user wants to check or upgrade an existing configuration. Detects project type from composer.json (craft-plugin, craft-module, project), .d
hig-doctor-audit
HIG Doctor audit workflow for scanning app projects against Apple Human Interface Guidelines. Use when the user asks for a HIG audit, Apple UI compliance scan, accessibility/design lint, HIG Doctor, severity report, CI gate, or wants to verify SwiftUI, UIKit, React, Next.js, Vue, Svelte, Angular, React Native, Flutter, Compose, Android XML, CSS, or HTML against Apple HIG rules.
cockpit-release
Cut a new Cockpit release end-to-end — bump version, tag, publish to npm, write user-facing release notes, refresh the website, and verify everything went live.
coverage
Analyze test coverage gaps. Use when user says "test coverage", "what's not tested", "coverage gaps", "missing tests", "coverage report", or "what needs testing".
init
Set up Playwright in a project. Use when user says "set up playwright", "add e2e tests", "configure playwright", "testing setup", "init playwright", or "add test infrastructure".
app-builder
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
file-organization
Organize project files and folders for maintainability and scalability. Use when structuring new projects, refactoring folder structure, or establishing conventions. Handles project structure, naming conventions, and file organization best practices.
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.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
i18n-automation
Automate internationalization and localization workflows for web applications with translation, key generation, and library setup
i18n-localization
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
javascript-sdk
JavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate 150+ models. Package: @inferencesh/sdk (npm install). Full TypeScript support, streaming, file uploads. Build agents with template or ad-hoc patterns, tool builder API, skills, human approval. Use for: JavaScript integration, TypeScript, Node.js, React, Next.js, frontend apps. Triggers: javascript sdk, typescript sdk, npm install, node.js api, js client, react ai, next.js ai, frontend sdk, @inferencesh/sdk, typescript agent, browser sdk, js integration
next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
nextjs-15-specialist
Use when working with Next.js 15 features, App Router, Server Components, Server Actions, or data fetching patterns. Ensures correct usage of Server vs Client Components and modern Next.js patterns.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
ohmg
Ultimate multi-agent framework for Google Antigravity. Orchestrates specialized domain agents (PM, Frontend, Backend, Mobile, QA, Debug) via Serena Memory.
quetrex-architect
Use when implementing new features in Quetrex. Ensures TDD, TypeScript strict mode, Next.js App Router patterns, ShadCN UI components, and security best practices are followed. Updated for November 2025 standards.
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.
seo-handler
Manage SEO, sitemaps, and metadata for optimal search engine visibility
shadcn-ui-patterns
Use when building UI components. Enforces ShadCN UI patterns, accessibility standards (Radix UI), and TailwindCSS best practices for November 2025.
trigger-dev
Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.
vercel-deploy-claimable
Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as 'Deploy my app', 'Deploy this to production', 'Create a preview deployment', 'Deploy and give me the link', or 'Push this live'. No authentication required - returns preview URL and claimable deployment link.
vercel-deployment
Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.
mir-frontend-react
Make It Right (React reactivity tier). React 19 + React Compiler reactivity footguns shared across EVERY React meta-framework (Next.js, React Router 7/Remix, TanStack Start, Vite SPA) — distinct from the generic frontend gates and from any one framework's mechanics. Covers: the Rules of Hooks, effect-dependency discipline (derive in render, effects are for external sync only), stale closures, list-key correctness, controlled vs uncontrolled inputs, granular Suspense + Error Boundary placement, useTransition/useDeferredValue for INP, React Compiler 1.0 interop (blind useMemo/useCallback is now a liability; the 'use no memo' opt-out), concurrent-rendering/StrictMode double-invoke, and the server-state-vs-client-state boundary (TanStack Query, not useState mirrors). TRIGGER when the frontend reactivity library is React — sits between mir-frontend (generic) and the framework module (e.g. mir-frontend-react-next). SKIP for Vue/Angular/Svelte (each gets its own mir-frontend-<lib> tier), and for meta-framework-libra
dev-api
Develop and document a REST or GraphQL API. Use when the user wants to create an endpoint, a route, or structure an API.
dev-debug
Debug and resolve problems. Use when the user has a bug, an error, an unexpected behavior, or wants to understand why something is not working.
dev-refactor
Code refactoring to improve quality. Trigger when the user wants to clean up, restructure, or improve existing code.
dev-tdd
TDD development with Red-Green-Refactor cycle. Use to implement a feature by writing tests BEFORE the code. Trigger automatically when the user asks for TDD, wants to write tests first, mentions "test first", or asks to implement, add, create, fix, correct code, a new feature, a bugfix, or a functionality.
feature-flags
Feature flags and toggles management. Trigger when the user wants to implement feature flagging, A/B testing, or progressive deployment.
ops-ci-fix
Autonomous diagnosis and repair of failing CI/CD pipelines. Scan GitHub Actions workflows, identify failure causes, and apply fixes. Trigger when CI is broken, tests fail in CI, or workflows are stuck.
ops-database
Database schema design. Trigger when the user wants to create tables, migrations, or optimize queries.
ops-docker
Docker and Docker Compose containerization. Trigger when the user wants to dockerize an application or create containers.
ops-infra-code
Infrastructure as Code with Terraform/OpenTofu. Trigger to create modules, configure backends, write idiomatic HCL, or audit infrastructure.
ops-monitoring
Application instrumentation for monitoring. Trigger when the user wants to add logs, metrics, or traces.
ops-opnsense
OPNsense configuration via Terraform. Trigger for interfaces, firewall, NAT, DHCP/DNS, aliases.
ops-proxmox
Proxmox VE infrastructure with Terraform (VMs, LXC, network, storage, backup)
ops-standup
Cross-repo morning briefing. Aggregation of recent commits, PRs, CI, blockers and priorities of the day. Trigger when the user wants a standup, an activity summary, or to know what happened.
qa-perf
Application performance optimization. Trigger when the user wants to improve speed, reduce latency, or optimize resources.
qa-security
Perform a security audit based on OWASP. Use when the user wants to verify security, look for vulnerabilities, or before a production deployment.
work-batch
Sequential execution of user stories from a PRD file. Autonomous mode that implements and commits each story one by one. Trigger when the user wants to process a backlog, execute multiple stories, or launch an autonomous mode.
work-brainstorm
Structured ideation before specification. Transform a vague idea into a validated design via questioning and exploration of alternatives. Trigger when the user has a fuzzy idea, wants to explore approaches, or hesitates between several directions.
work-commit
Generates clear commit messages following Conventional Commits. Use when the user wants to commit, asks for a commit message, or after completing a modification.
algolia-search
Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.
bullmq-specialist
BullMQ expert for Redis-backed job queues, background processing, and reliable async execution in Node.js/TypeScript applications. Use when: bullmq, bull queue, redis queue, background job, job queue.
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
heart
Ops health monitor for the machine substrate. Checks Memory Bus, brain_watchdog, Voice Operator, dashboard, audit-log freshness, and scheduled tasks. Cross-cutting skill that any repo can invoke when daemons feel off or before starting a heavy work session.
pdlc-bootstrap
AI 对话式项目初始化
clean-branches
Delete local branches whose remote has been deleted ([gone]), including their worktrees. Use for branch cleanup after merging PRs.
push
Commit and push to the current branch. Use --fixup to also wait for CI and CodeRabbit, Greptile, Claude, and cubic review feedback, then fix issues.
release
Kandev release & versioning conventions — single SemVer across npm, Homebrew, GitHub release. Use when cutting a release, debugging release artifacts, or answering questions about version channels.
verify
Run format, typecheck, test, and lint across the monorepo. Use after implementing changes.
chrome-devtools
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance (LCP/CLS/INP), or verify visual output with real runtime data. Complements Playwright — use this for live debugging and performance work, Playwright for stable E2E test suites.
hetzner-cloud
Manage Hetzner Cloud infrastructure with the `hcloud` CLI — servers, networks, firewalls, load balancers, volumes, DNS zones, SSH keys, primary/floating IPs, snapshots, certificates, placement groups, storage boxes. Use whenever the user mentions Hetzner, hcloud, VPS provisioning, or Hetzner location codes (fsn1, hel1, nbg1, ash, hil, sin) — even if they don't say "hcloud". CLI-only; does NOT cover Hetzner Robot (dedicated servers, separate product and API).
nextjs-chatbot
Advanced patterns for production Next.js web chatbots built with AI SDK 6 + ai-elements. Covers tool calling with human-in-the-loop (HITL) approval, PostgreSQL session persistence, GDPR consent gating, SQL-first search, per-tool UI rendering, popup widget embedding, message feedback, follow-up suggestions, scope enforcement, and evals. Use when building a customer support bot, conversational interface, or any web chatbot needing tool approval, database sessions, or custom tool output components. Not a scaffolding tool — use `/ai-app` to scaffold from scratch, `/ai-sdk-6` for general SDK questions, `/ai-elements` for chat UI components, `/vercel:chat-sdk` for multi-platform (Slack/Teams/Discord) bots.
webiny-skill-generator
Generate, update, and maintain abstraction catalogs from the Webiny platform's public API. Use this skill whenever you need to: scan the `webiny` package to discover exported EventHandlers and UseCases, regenerate catalog JSON files after a platform release, check which abstractions are available, or add support for a new abstraction type.
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
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.
no-outlinks-audit
Runs a full dead-end page audit for any website. Discovers all blog/content pages, detects which ones have zero outgoing links to any URL on the same domain, fetches keywords, clusters pages by topic, and generates 3 outgoing link suggestions per dead-end page with anchor text, placement guidance, and ready-to-paste context copy. Outputs a styled HTML report matching report-style-reference.html. Automatically detects site framework (Next.js, static, WordPress) and uses the correct detection method: RSC header for Next.js/Vercel sites, standard curl for static and traditional CMS sites. Trigger when a user provides a domain or URL and asks for a dead-end page audit, outgoing internal links audit, "which pages don't link out", "find pages with no internal links in the content", "pages that are link dead-ends", or any variation of finding pages that have zero outgoing links to the same domain. Always use this skill for dead-end page audits — never attempt the workflow without following every step here.
ccc-design
click-first picker over 39 design skills. Landing pages, component systems, polish suite, Figma→code. Use when the user types /ccc-design, asks to 'design a landing…
core-web-vitals
Use this skill when optimizing Core Web Vitals - LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift). Triggers on page speed optimization, Lighthouse score improvement, fixing layout shifts, improving responsiveness, setting up performance monitoring with CrUX or RUM, and framework-specific CWV fixes for Next.js, Nuxt, Astro, and Remix.
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
business-data-model-designer
Design complete Supabase/PostgreSQL data models with ERD, SQL migrations, RLS policies, indexes, and triggers for business applications
repo-snapshot
Produce a repository snapshot — folder tree, top files by LOC, dependency surface, contributor map, framework detection — for handoff or onboarding.
docs-seeker
Fetch up-to-date library and framework documentation into AI context. Use when looking up docs, finding feature-specific references, or discovering documentation sources for any library, framework, or tool.
frontend-development
Frontend implementation patterns, conventions, and tooling. Use this skill when creating components, building pages, implementing forms, fetching data, styling UI, organizing frontend code, or configuring frontend tooling (Biome, ESLint, Prettier, linting, formatting). Covers file structure, component patterns, state management, data fetching, and code quality tools.
better-auth
Better Auth integration guide for TypeScript/JavaScript authentication. Covers server/client configuration, database adapters, session management, plugins, OAuth, and scaffolding auth from scratch. Use when setting up authentication with Better Auth, configuring auth.ts, adding OAuth providers, or creating sign-in/sign-up flows.
next-upgrade
Upgrade Next.js to the latest version following official migration guides and codemods
tech-stack-teardown
Reverse-engineer a company's sales and marketing tech stack from public signals. Detects CRMs, cold email tools, people databases, ad pixels, email delivery services, and outbound sending domains via DNS records, website source inspection, Apify technology profiling, blacklist checks, and public spam complaint searches. Works on single companies or batches. Outputs a structured markdown report per company.
init-project
Use when setting up a new or existing project for AI-assisted development.
lazy-agent-loader
Load agent definitions on-demand to reduce context usage. Only loads full agent when needed.
feishu-bitable
飞书多维表格（Bitable）的创建、查询、编辑和管理工具。包含 27 种字段类型支持、高级筛选、批量操作和视图管理。 **当以下情况时使用此 Skill**�� (1) 需要创建或管理飞书多维表格 App (2) 需要在多维表格中新增、查询、修改、删除记录（行数据） (3) 需要管理字段（列）、视图、数据表 (4) 用户提到"多维表格"、"bitable"、"数据表"、"记录"、"字段" (5) 需要批量导入数据或批量更新多维表格
feishu-create-doc
创建飞书云文档。从 Lark-flavored Markdown 内容创建新的飞书云文档，支持指定创建位置（文件夹/知识库/知识空间）。
feishu-fetch-doc
获取飞书云文档内容。返回文档的 Markdown 内容，支持处理文档中的图片、文件和画板（需配合 feishu_doc_media 工具）。
feishu-im-read
飞书 IM 消息读取工具使用指南，覆盖会话消息获取、话题回复读取、跨会话消息搜索、图片/文件资源下载。 **当以下情况时使用此 Skill**: (1) 需要获取群聊或单聊的历史消息 (2) 需要读取话题（thread）内的回复消息 (3) 需要跨会话搜索消息（按关键词、发送者、时间等条件） (4) 消息中包含图片、文件、音频、视频，需要下载 (5) 用户提到"聊天记录"、"消息"、"群里说了什么"、"话题回复"、"搜索消息"、"图片"、"文件下载" (6) 需要按时间范围过滤消息、分页获取更多消息
feishu-task
飞书任务管理工具,用于创建、查询、更新任务和清单。 **当以下情况时使用此 Skill**: (1) 需要创建、查询、更新、删除任务 (2) 需要创建、管理任务清单 (3) 需要查看任务列表或清单内的任务 (4) 用户提到"任务"、"待办"、"to-do"、"清单"、"task" (5) 需要设置任务负责人、关注人、截止时间
netlify-integration
Deploy and manage Netlify projects using Next.js with serverless functions, environment variables, and continuous deployment. Use this skill when working with Netlify deployments, configuring netlify.toml, managing Netlify Functions, debugging webhooks, setting environment variables, or troubleshooting deployment issues for Next.js applications on Netlify. Essential for Twilio-Aldea and similar serverless SMS/telephony projects. v2.0 includes official Netlify documentation, production patterns from Twilio-Aldea (webhook timeout solutions, background functions), and TypeScript code examples.
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).
webiny-api-event-publisher-catalog
api/event-publisher — 2 abstractions.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
apple-bento-grid
Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. Supports both light (Apple signature #f5f5f7) and dark (#000) themes. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, Apple-style presentation layouts, project overviews, achievement showcases, or any visual summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.
frontend-taste
Anti-slop tactical layer for React / Next.js / Tailwind / Framer Motion frontend work. Pairs with the impeccable skill (strategic layer / register laws). Use when building or auditing UI, working on hero sections, landing pages, dashboards, components, or any frontend surface that an AI agent is generating. Carries the Dial System, the Frequency Gate, the Jane-Doe anti-slop content rules, hero discipline, Bento 2.0 motion-engine archetypes, Double-Bezel nested architecture, image-first workflow, shadow + surface recipes, a ~50-item redesign audit checklist, minimalist warm-monochrome variant, stack-specific gotchas, and anti-truncation output discipline.
algolia-search
Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.
bullmq-specialist
BullMQ expert for Redis-backed job queues, background processing, and reliable async execution in Node.js/TypeScript applications. Use when: bullmq, bull queue, redis queue, background job, job queue.
clerk-auth
Expert patterns for Clerk auth implementation, middleware, organizations, webhooks, and user sync Use when: adding authentication, clerk auth, user authentication, sign in, sign up.
firebase
Firebase gives you a complete backend in minutes - auth, database, storage, functions, hosting. But the ease of setup hides real complexity. Security rules are your last line of defense, and they're often wrong. Firestore queries are limited, and you learn this after you've designed your data model. This skill covers Firebase Authentication, Firestore, Realtime Database, Cloud Functions, Cloud Storage, and Firebase Hosting. Key insight: Firebase is optimized for read-heavy, denormalized data. I
generating-solana-projects
Generates complete Solana blockchain projects with Anchor framework (v0.32.1) and Next.js frontend including Rust smart contracts, tests, and wallet integration. Use when creating Solana dApps, NFT marketplaces, token programs, DAOs, DeFi protocols, or when user mentions Solana, Anchor, or blockchain projects.
inngest
Inngest expert for serverless-first background jobs, event-driven workflows, and durable execution without managing queues or workers. Use when: inngest, serverless background job, event-driven workflow, step function, durable execution.
next-upgrade
Upgrade Next.js to the latest version following official migration guides and codemods
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
page-builder
Helper for building landing pages and marketing sites using Tailark components.
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
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.
agents-md-author
Bootstrap or update project AI-agent instruction files (AGENTS.md for Codex, CLAUDE.md for Claude Code, or both) from the current project's structure. Triggers on: write AGENTS.md, write CLAUDE.md, generate AGENTS.md, agent instructions, project conventions for AI, bootstrap agent docs, set up project memory for Codex/Claude, document dev/test/build commands for AI coding tools, single-source project instructions for any AI agent.
about-page-scaffold
Drop in a 3-paragraph "what is this?" page for new users, per frontend framework; optionally collapses into the architecture page when both standards are enabled
architecture-viz-scaffold
Generate a static architecture page that reads ADRs, Mermaid diagrams, CHANGELOG, SBOM, tech-debt log into one navigable UI; per frontend stack
changelog-ui-scaffold
Drop in a UI component / page that surfaces the project's CHANGELOG.md and current version, per frontend framework
agent-browser-verify
Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass/fail before continuing.
auth
Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns, sign-in/sign-up flows, and Marketplace provisioning. Use when implementing user authentication.
env-vars
Vercel environment variable expert guidance. Use when working with .env files, vercel env commands, OIDC tokens, or managing environment-specific configuration.
marketplace
Vercel Marketplace expert guidance — discovering, installing, and building integrations, auto-provisioned environment variables, unified billing, and the vercel integration CLI. Use when consuming third-party services, building custom integrations, or managing marketplace resources on Vercel.
nextjs
Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.
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.
routing-middleware
Vercel Routing Middleware guidance — request interception before cache, rewrites, redirects, personalization. Works with any framework. Supports Edge, Node.js, and Bun runtimes. Use when intercepting requests at the platform level.
turbopack
Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences.
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.
vercel-api
Vercel MCP and REST API expert guidance. Use when the agent needs live access to Vercel projects, deployments, environment variables, domains, logs, or documentation through the MCP server or REST API.
vercel-functions
Vercel Functions expert guidance — Serverless Functions, Edge Functions, Fluid Compute, streaming, Cron Jobs, and runtime configuration. Use when configuring, debugging, or optimizing server-side code running on Vercel.
audio-loop
Use this skill whenever a user has an audio file (.wav/.mp3/.flac/etc.) that needs to loop as background on a website or web page — hero ambience, landing-page atmosphere, portfolio mood audio, ambient wind/rain/ocean/forest/breeze/pad beds, or any "play quietly behind the page while users read/scroll/interact" use case. Trigger on intents like making a clip loop without audible gaps or boundary artifacts on a site, fixing a click/tick/pop/bump at the loop boundary, fixing stereo bias or L/R imbalance on a web-bound ambient clip, normalizing loudness (LUFS) for web delivery, encoding a loop for web playback, or fading audio in on first user click/gesture — in any web framework (Next.js, Vue, Astro, Nuxt, plain HTML). The skill outputs a gapless FLAC plus a paste-in Web Audio snippet that unlocks on first interaction. Skip for general audio editing (cuts, mixing, effects), music/podcast mastering, or transcription.
scaffold
Bootstrap a new web project on a strictly opinionated Cloudflare Workers stack — Next.js 16 or Astro 6, TypeScript strict, pnpm, Biome, Tailwind. No fallbacks: no Vercel/Netlify, no ESLint/Prettier, no swap. Skip if the user wants any of these. Use when the user says "start a new project", "bootstrap", "init", "scaffold", "create a new site", or is working in an empty directory and wants production-ready foundations.
tdd
Use when writing production code that needs tests - new features, bug fixes, refactoring. Enforces RED-GREEN-REFACTOR cycle before any implementation.
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
best-choice
Select the best technology for any project automatically during planning. Never ask users to choose technology. Activates whenever technical decisions are needed.
user-level-detect
Detect user's technical level from how they speak. Adjust all communication accordingly.
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.
new-project
Full project bootstrap — interviews the developer (name, description, stack, components), then scaffolds directory structure, CLAUDE.md, config files, hooks, skills, and first commit.
development
开发语言能力索引（Python/Go/Rust/TypeScript/Java/C++/Shell）。
algolia-cost-tuning
Optimize Algolia costs: understand search request vs record pricing, reduce operations with batching and caching, monitor usage via Analytics API. Trigger: "algolia cost", "algolia billing", "reduce algolia costs", "algolia pricing", "algolia expensive", "algolia budget".
attio-debug-bundle
Collect Attio integration diagnostic evidence -- API health, scopes, object schema, and rate limit status -- for debugging or support tickets. Trigger: "attio debug", "attio support bundle", "attio diagnostic", "collect attio logs", "attio not working debug".
canva-debug-bundle
Collect Canva Connect API debug evidence for troubleshooting and support. Use when encountering persistent issues, preparing support tickets, or collecting diagnostic information for Canva API problems. Trigger with phrases like "canva debug", "canva support bundle", "collect canva logs", "canva diagnostic".
exa-webhooks-events
Build event-driven integrations with Exa using scheduled monitors and content alerts. Use when building content monitoring, competitive intelligence pipelines, or scheduled search automation with Exa. Trigger with phrases like "exa monitor", "exa content alerts", "exa scheduled search", "exa event-driven", "exa notifications".
frontend-design
Use for any frontend, app UI, UI/UX, visual design, styling, layout, component, page, dashboard, landing page, website, HTML/CSS/JS, React, Next.js, Tailwind, animation, responsive design, polish, redesign, beautify, or improve-the-interface request. Produces clean, production-grade frontend design and working UI code; avoids generic AI slop, default purple gradients, bland card stacks, weak spacing, and template-looking layouts.
payuni-checkout
Implements PAYUNi UPP checkout integration including AES256 encryption, form submission, and payment callback handling. Use when integrating payment gateway, creating checkout flows, or building 統一金流 payment pages.
payuni-webhook
Implements PAYUNi webhook handling including signature verification, replay attack prevention, and payment status updates. Use when building payment notification endpoints for 統一金流.
mem-forever
Every AI tool forgets you. This one doesn't. Ever. Auto-generates your profile from conversation, saves decisions and lessons, applies your preferences across every session. Works with Claude Code, Cursor, Codex, Copilot, Gemini CLI. Use this skill at session start to load memory, and throughout the session to save new observations.
agent-ui
Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop
ai-elements
Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements.
analyzing-projects
Analyzes codebases to understand structure, tech stack, patterns, and conventions. Use when onboarding to a new project, exploring unfamiliar code, or when asked "how does this work?" or "what's the architecture?"
api-endpoint-creation
Next.js 15+ API endpoint creation patterns with Supabase and workspace validation
api-testing
Use when writing tests for backend APIs or frontend flows. Triggers for: unit tests, integration tests, E2E tests, pytest fixtures, TestClient setup, mock data factories, or test coverage analysis. NOT for: testing business logic that doesn't involve API endpoints.
app-store-screenshots
Use when building App Store screenshot pages, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, screenshots, marketing assets, html-to-image, phone mockup.
ascii-visualizer
Creates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.
auth
Authentication and access control skill for Next.js 15 + Supabase applications. Use when implementing user authentication, protecting routes, managing user sessions, enforcing role-based access control (admin/member), or working with multi-tenant family-based data isolation. Covers login/logout, registration with email verification, OAuth (GitHub), route protection for Server Components and Server Actions, admin-only features, and multi-tenant data access patterns.
auth-integration
Use when implementing authentication - login/signup forms, session management, protected routes, or role-based access control. NOT when non-auth UI, plain data fetching, or unrelated backend logic. Triggers: "login page", "signup form", "auth setup", "protected route", "role-based access", "Better Auth", "NextAuth".
backend-agent
Handles backend/API/database work for Unite-Hub. Implements Next.js API routes, Supabase database operations, RLS policies, authentication, and third-party integrations (Gmail, Stripe).
blocklet-converter
Converts static web or Next.js projects into ArcBlock blocklets using provided DID. Analyzes project structure, generates configuration files, and validates setup. Requires blocklet DID as parameter.
brainstorming-features
Facilitates creative ideation sessions for mobile and web app features, generating structured ideas with user stories, technical considerations, and implementation suggestions. Use when planning new features, exploring product direction, generating app ideas, feature discovery, product brainstorming, or when user mentions 'brainstorm', 'ideate', 'app ideas', or 'feature suggestions'.
building-nextjs-apps
Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.
chat-ui
"Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat," react chat, chat interface, messaging ui, conversation ui, chat building blocks
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.
configuring-better-auth
Implement OAuth 2.1 / OIDC authentication using Better Auth with MCP assistance. Use when setting up a centralized auth server (SSO provider), implementing SSO clients in Next.js apps, configuring PKCE flows, or managing tokens with JWKS verification. Uses Better Auth MCP for guided setup. NOT when using simple session-only auth without OAuth/OIDC requirements.
containerizing-applications
Containerizes applications with Docker, docker-compose, and Helm charts. Use when creating Dockerfiles, docker-compose configurations, or Helm charts for Kubernetes. Includes Docker Hardened Images (95% fewer CVEs), multi-stage builds, and 15+ battle-tested gotchas.
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.
convex-quickstart
Initializes a new Convex project from scratch or adds Convex to an existing app. Use this skill when starting a new project with Convex, scaffolding with npm create convex@latest, adding Convex to an existing React, Next.js, Vue, Svelte, or other frontend, wiring up ConvexProvider, configuring environment variables for the deployment URL, or running npx convex dev for the first time, even if the user just says "set up Convex" or "add a backend."
deploying-cloud-k8s
Deploys applications to cloud Kubernetes (AKS/GKE/DOKS) with CI/CD pipelines. Use when deploying to production, setting up GitHub Actions, troubleshooting deployments. Covers build-time vs runtime vars, architecture matching, and battle-tested debugging.
empathy-ledger-dev
Invoke this skill when: - Starting work on any Empathy Ledger feature - Need quick reference to project patterns
error-handling
Use when implementing structured error handling in backend or frontend code. Triggers for: try-catch patterns, custom exception classes, global error handlers, error logging, user-friendly error messages, or API error responses. NOT for: business logic validation (use domain exceptions) or unrelated error types.
exa-research
Comprehensive research skill using Exa AI tools for web search and code context retrieval. Use when conducting research on technologies, finding code examples, discovering latest tools, or gathering comprehensive information on any topic. Combines web search for articles/news with code search for implementation examples.
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-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-guardrails
Professional frontend standards for building, scaffolding, extending, or reviewing any UI or frontend project — new or existing — even when standards aren't explicitly asked for. Keeps generated code consistent, reusable, secure, and production-quality. Framework-agnostic: React, Vue, Angular, Svelte, plain JS.
frontend-nextjs-app-router
Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.
internationalizing-websites
Adds multi-language support to Next.js websites with proper SEO configuration including hreflang tags, localized sitemaps, and language-specific content. Use when adding new languages, setting up i18n, optimizing for international SEO, or when user mentions localization, translation, multi-language, or specific languages like Japanese, Korean, Chinese.
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
mcp-apps-builder
**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns. **READ THIS FIRST** before any MCP server work, including: - Creating new MCP servers - Modifying existing MCP servers (adding/updating tools, resources, prompts, widgets) - Debugging MCP server issues or errors - Reviewing MCP server code for quality, security, or performance - Answering questions about MCP development or mcp-use patterns - Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets This skill contains critical architecture decisions, security patterns, and common pitfalls. Always consult the relevant reference files BEFORE implementing MCP features.
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.
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
payload
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
project-scaffolder
Quick project setup with templates, best practices, and complete configuration for various framew...
project-scaffolding
IDE-grade project scaffolding wizard for creating new projects with comprehensive configuration. Supports 70+ project types: HTML/CSS websites, React, Next.js, Vue, Astro, Remix, React Native, Flutter, Expo, FastAPI, Django, Express, NestJS, Go/Gin, Rust/Axum, Spring Boot, Hono, Elysia, Chrome Extensions, VS Code Extensions, Tauri desktop apps, serverless functions, and more. Provides WebStorm/PyCharm-level project creation with interactive SDK selection, framework configuration, database setup, and DevOps tooling. Use when: creating a new project, setting up a framework application, initializing a codebase, scaffolding boilerplate, building extensions, creating mobile/desktop/web apps, setting up monorepos, or making static websites/landing pages.
qa-check
PR作成前の品質保証チェックを実行します。Lint、テスト、ビルド、カバレッジ確認を自動で行い、合格/不合格を判定します。フロントエンドのみ、バックエンドのみ、または両方のチェックが可能です。
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.
researching-with-deepwiki
Research GitHub, GitLab, and Bitbucket repositories using DeepWiki MCP server. Use when exploring unfamiliar codebases, understanding project architecture, or asking questions about how a specific open-source project works. Provides AI-powered repo analysis and RAG-based Q&A about source code. NOT for fetching library API docs (use fetching-library-docs instead) or local files.
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-fullstack
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
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.
seo-fundamentals
Auto-invoke when reviewing HTML head, meta tags, or Next.js page components. Enforces semantic HTML and search optimization.
storage-debug-instrumentation
Add comprehensive debugging and observability tooling for backend storage layers (PostgreSQL, ChromaDB) and startup metrics. Includes storage drift detection, raw data inspection endpoints, and a Next.js admin dashboard.
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.
tanstack-integration
Find opportunities to improve web application code using TanStack libraries (Query, Table, Form, Router, etc.). Avoid man-with-hammer syndrome by applying TanStack after vanilla implementation works.
testing-fundamentals
Auto-invoke when reviewing test files or discussing testing strategy. Enforces testing pyramid, strategic coverage, and stack-appropriate frameworks.
tools-ui
"Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results," agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
vercel-deploy
Use when deploying Next.js applications to Vercel. Triggers for: vercel.json configuration, build optimization, environment variable setup, custom domain configuration, API proxy setup, or deployment troubleshooting. NOT for: backend-only deployments, non-Vercel hosting, or local development setup.
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-navigation
Navigation and routing patterns for React web applications. Use when implementing React Router, Next.js routing, deep links, or handling navigation state.
widgets-ui
"Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets," dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui
qa
Browser-based QA verification. Launches a real browser, navigates the app, clicks buttons, fills forms, and tests user flows. Works as a standalone skill or as a phase end condition in campaigns. Requires Playwright (optional dependency, graceful skip if not installed).
fec-nextjs-project-standard
用于创建或审查 Next.js 14+ App Router 项目、文件路由、layout、服务端/客户端组件边界、SSR/SSG/ISR、streaming、metadata、middleware、server actions 或 Next 特定数据获取。通用客户端 React 组件架构另按项目 React 约定处理；中文触发词包括 Next.js、App Router。
fec-route-protection
用于实现或审查前端路由保护、auth guard、RBAC、权限路由、登录态处理、重定向、middleware、React Router、Next.js、Vue Router 或 Nuxt route middleware；中文触发词包括 路由保护、权限路由、登录态。
fec-typescript-project-standard
用于创建、配置、审查或调试前端应用、库、SDK、CLI、monorepo 包中的 TypeScript 项目规范，包括 tsconfig、strictness、module/moduleResolution、路径别名、project references、声明文件、package exports、公共 API 类型、DTO、高级泛型、判别联合、类型守卫、类型收窄或类型级回归。React/Vue/Next/Nuxt 组件架构优先使用框架项目 skill；中文触发词包括 TypeScript 项目规范、TS 项目规范、TypeScript 类型安全、类型建模、泛型、判别联合、类型收窄、tsconfig、声明文件。
agent-teams
Multi-agent team orchestration with native Agent Teams. Trigger when the user wants to launch a team of agents, coordinate parallel work with inter-agent communication, or use swarm mode.
api-mocking
API mock configuration for tests. Trigger when the user wants to mock APIs, use MSW, or test without a backend.
dev-auth
Modern web auth implementation (better-auth, Lucia, NextAuth/Auth.js, Clerk, Supabase Auth). Trigger when the user wants to add login, signup, sessions, OAuth, magic links, 2FA, or when existing auth code is detected to audit or migrate.
dev-document
Document generation (PDF, DOCX, XLSX, PPTX). Trigger when the user wants to create a document, generate a report, export to PDF/Word/Excel/PowerPoint, or produce an office file.
dev-error-handling
Error handling strategy. Trigger when the user wants to implement error handling, exceptions, or error boundaries.
dev-flutter
Flutter development with Clean Architecture and BLoC. Trigger when the user wants to create widgets, screens, or Flutter features.
dev-frontend-design
Distinctive UI design with strong art direction. Trigger when the user wants to create an interface, a landing page, a visual component, or when frontend code creation is detected without a defined design direction.
dev-graphql
GraphQL API development. Trigger when the user wants to create schemas, resolvers, or GraphQL queries.
dev-i18n
Internationalization (i18n) and localization (l10n) for web and mobile applications. Libraries next-intl, react-i18next, vue-i18n, formatjs, flutter_localizations, ARB. Trigger when the user wants to add multiple languages, extract strings, handle plurals, date/number formats, or when translation files are detected.
dev-nextjs
Next.js development (App Router, Server Components, caching, streaming). Trigger when the user works with Next.js, modifies app/, pages/, next.config, or talks about RSC, Server Actions, Route Handlers, middleware.
dev-prisma
Development with Prisma ORM (schema, migrations, type-safe queries, Accelerate, transactions). Trigger when the user wants to add a model, create a migration, optimize Prisma queries, or when schema.prisma is detected in the project.
dev-react-perf
React/Next.js performance optimization. Trigger when the user wants to optimize rendering, reduce re-renders, or improve Core Web Vitals.
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.
dev-supabase
Backend development with Supabase. Trigger when the user wants to configure auth, the database, or Supabase storage.
doc-changelog
CHANGELOG maintenance following Keep a Changelog. Trigger when the user wants to document changes or prepare a release.
doc-generate
Technical documentation generation. Trigger when the user wants to create a README, API docs, or guides.
growth-cro
Conversion rate optimization (CRO). Trigger when the user wants to optimize conversions, improve a signup form, a checkout, a landing page, or an onboarding.
ops-ci
CI/CD pipeline configuration. Trigger when the user wants to configure GitHub Actions, GitLab CI, or automate deployments.
parallel-agents
Orchestration of parallel agents to maximize efficiency. Trigger when a task can be decomposed into independent sub-tasks that can run in parallel.
qa-chrome
Visual tests and browser debugging via Chrome. Use to test web pages, verify visual rendering, debug with the console, or automate browser actions. Trigger when the user mentions "visual test", "Chrome", "browser", "browser console", "DOM", "screenshot", "GIF".
qa-design
UI/UX design audit and verification of web best practices. Trigger when the user wants to audit the design, verify the UI/UX, or improve the user interface.
qa-e2e
End-to-end tests with Playwright or Cypress. Trigger when the user wants to create user journey tests, UI integration tests, or browser automation.
qa-review
Perform a thorough code review. Use when the user requests a review, wants to verify code quality, or before merging a PR.
qa-tech-debt
Technical debt management and prioritization. Trigger when the user wants to identify, prioritize, or plan the repayment of technical debt.
session-handoff
Context transfer between AI sessions. Trigger when the user wants to save the context, resume a task, or hand off the work to another session.
web-scraping
Clean LLM-ready web scraping via Firecrawl (scrape/crawl/map/extract/search). Trigger when the user wants to extract content from a page, crawl a site, collect structured data, bypass anti-bot/JS-rendering, or perform a web search with integrated extraction. Fallback to Playwright/curl if Firecrawl is unavailable.
work-explore
Explore and understand an existing codebase. Use when the user wants to understand the code, explore a project, discover an architecture, or before modifying existing code.
work-plan
Plan the implementation of a feature. Use when the user wants to plan, architect, define an approach, or before coding a complex feature.
build-feature
Implement one vertical slice (UI → server action/route handler → DB) for a single PRD user story. Obeys path-scoped rules. Ends by invoking /code-review. Draft/approve at every boundary.
code-review
Review the current diff against path-scoped rules (secrets, RLS/tenant scoping, Stripe webhook verification, input validation, scope), flag changed code lacking tests, and run a quick security pass. Reports findings; nothing auto-fixed without approval.
design-pricing
Define plans/tiers, metered units, trial period, and upgrade/downgrade rules using the pricing template. Map each plan to Stripe products and prices. Drafts pricing.md then awaits approval.
design-schema
Design Postgres tables, relations, RLS policies, and tenant scoping using the data-model template. Produce a draft Supabase migration. Get approval before applying anything.
launch-checklist
Run the pre-launch gate: verify secrets not committed, RLS enforced, Stripe in live mode with webhooks, error monitoring configured, and legal stubs present. Outputs PASS or BLOCK with blocking items.
setup-billing
Implement Stripe billing end-to-end: products/prices from config, checkout session, webhook handler with signature verification and idempotency, and customer portal. Present plan then implement.
setup-deploy
Set up the Vercel project, wire environment variables across environments, and add a GitHub Actions CI workflow (lint, typecheck, build). Presents the full config plan before touching anything.
setup-stack
Scaffold the Next.js + TypeScript + Tailwind + shadcn + Supabase + Stripe project. Presents exact commands and config for approval BEFORE running anything. Writes .env.example with required keys.
test-setup
Scaffold the test stack for the SaaS app: install and configure Vitest + Testing Library, Playwright, and a CI test step. Run after qa-plan is approved. Produces a runnable test harness.
threat-model
Produce a STRIDE-lite threat model for the SaaS app: enumerate assets, trust boundaries, and entry points, then name the top threat and mitigation for each STRIDE category, focused on multi-tenant SaaS.
write-tests
Author tests for one PRD user story: unit, integration, and e2e cases plus any RLS policy or Stripe webhook fixture tests required. Run after test-setup is complete. Produces passing test files.
spline-3d-integration
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
pdlc-e2e
端到端测试（生成或执行 E2E 用例）
backend-db-performance
Optimize database queries, schemas, and performance. Use when fixing slow queries, adding indexes, N+1 problems, schema design, RLS policies, or when user mentions "slow query", "database performance", "timeout", "index", "query optimization", "Prisma", "Supabase", or "PostgreSQL".
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".
backend-observability
Instrument features so errors, traces, and logs are correlated from the first line. Use when adding logging, tracing, or monitoring; wiring Sentry, Langfuse, or structured logs; or when asked "add logging", "instrument this", "why can't I debug prod", "correlate the error to the trace", "redact PII from logs", "set up alerts/SLOs".
backend-patterns
Design solid backend architectures with modern patterns. Use when user wants "API design", "database schema", "authentication", "caching", "queues", "background jobs", "microservices", "serverless", or "backend architecture".
backend-realtime
Implement real-time features using WebSockets, Supabase Realtime, Server-Sent Events, and live data. Use when user wants "real-time", "live updates", "WebSocket", "notifications", "chat", "collaborative", "presence", "live data", or "instant sync".
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.
create-subagent
Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.
data-pipeline
Wire ETL, ingestion, cron, edge-function, and queue jobs correctly. Use for "build a pipeline", "sync X into Y", "nightly aggregation", "cron double-counts", "dedupe", "backfill", "the numbers are wrong after a retry". Bakes in idempotency, atomic writes, data contracts, dead-letter, and observability.
data-visualization
Create interactive charts, graphs, and data visualizations. Use when user wants "chart", "graph", "visualization", "dashboard", "analytics", "D3", "Recharts", "data display", "metrics", or "statistics".
debug-error
Systematic debugging workflow for errors and bugs. Use when debugging errors, investigating bugs, troubleshooting issues, or when something isn't working as expected. Integrates Sentry MCP for production error context, Firecrawl for researching fix patterns, and Sequential Thinking for complex multi-step diagnosis.
debug-fe-be-integration
Debug frontend-backend integration issues for any project by analyzing backend logs, identifying incorrect API calls, and fixing both sides. Auto-detects FE/BE frameworks, API style (REST/GraphQL/tRPC), and validation library. Uses Sentry MCP for production error context, Firecrawl for debugging pattern research, and Supabase MCP for data verification. Replaces hardcoded paths with auto-detected patterns. Use when diagnosing API errors, mismatched requests, integration issues between frontend and backend, or when the user mentions API 4xx/5xx errors, validation failures, or FE-BE contract mismatches.
debug-sentry-monitor
Monitor, triage, fix, and proactively enhance Sentry error monitoring for any project. Use when asked to: check Sentry, fix Sentry errors, triage Sentry issues, run post-deploy monitoring, review production errors, clean up Sentry noise, audit Sentry setup, improve monitoring coverage, enhance error tracking, or "run sentry check". Works with any GitHub repo — auto-detects org, project, framework, and config. Fetches issues via Sentry MCP, triages them, performs root cause analysis, fixes code bugs, updates noise filters, audits the monitoring architecture, and resolves issues only after verified fixes.
deploy-npm
Release a Changesets + GitHub Actions + npm OIDC (trusted publisher) monorepo end-to-end. Use when asked to "release", "publish to npm", "ship a new version", "cut a release", "update the changelog and publish", or any package name + release verb.
deploy-verify
Post-deploy smoke test combining all 5 MCPs (Sentry + Supabase + Langfuse CLI + Playwright + Firecrawl) into one workflow. Auto-detects deployment context, checks Sentry for new errors (with Seer AI root-cause on P0s), verifies Supabase migration health and logs, confirms Langfuse trace pipeline, runs Playwright smoke test on critical paths, and produces a ship-or-rollback verdict. Works with any project. Use when asked to: "verify deploy", "post-deploy check", "smoke test production", "check if deploy is healthy", "ship or rollback", "post-release check", "verify release", "deploy health check", or "run post-deploy".
design-api
Design RESTful and GraphQL APIs following best practices. Use when designing APIs, creating endpoints, structuring responses, or planning API architecture.
design-canvas
Create museum-quality visual art in .png and .pdf formats using design philosophy. Use when user asks for poster, visual design, infographic, certificate, badge, banner, social media graphic, print design, or mentions "create artwork", "design graphic", "visual identity", or "print material".
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-frontend
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, dashboards, or beautifying UI. Avoids generic AI aesthetics.
design-generative-art
Create algorithmic art using p5.js, Canvas API, or SVG with seeded randomness and interactive parameters. Use when user requests generative art, procedural art, flow fields, particle systems, creative coding, noise patterns, mathematical visualizations, or asks for "art from code", "generate visuals", or "interactive animation".
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".
design-motion
Create delightful animations and micro-interactions using Framer Motion, CSS animations, and GSAP. Use when user mentions "animation", "transition", "micro-interaction", "motion", "animate", "hover effect", "scroll animation", "page transition", or "make it interactive".
design-prd
Generate Product Requirements Documents through structured conversation for any project. Auto-detects tech stack, existing features, and data model from the codebase. Uses Firecrawl to research competitor products and UX patterns, Context7 to check framework capabilities for feasibility, and Supabase MCP to verify data model feasibility. Produces actionable PRDs with technical feasibility sections informed by real codebase analysis. Use when starting a new feature, documenting requirements, creating specs before implementation, or needing clarity on scope and success criteria.
design-system
Build and maintain cohesive design systems and component libraries. Use when creating component libraries, design tokens, theming systems, or when user mentions "design system", "component library", "tokens", "variants", "consistent styling", or "reusable components".
design-theme
Apply cohesive visual themes to artifacts (slides, docs, landing pages). Provides 11 pre-set themes with colors/fonts. Use when user mentions "apply theme", "color palette", "brand colors", "styling slides", "presentation design", "visual identity", or wants consistent styling across artifacts.
docs-writer
Write clear, helpful documentation including READMEs, API docs, and code comments. Use when writing documentation, creating READMEs, documenting APIs, or when the user needs help with docs.
enhance-capacitor-ui
Cross-surface UIUX separation skill for hybrid web apps that ship as PWA + iOS + Android via Capacitor (or Tauri / Expo Web / Ionic / RN-Web). Use when a previous UI/UX sweep "improved one surface and broke the other" — desktop polished but mobile cramped, or mobile native but desktop wastes space. Also use when the project has ad-hoc useIsMobile / isNative branches scattered across components, a single md: breakpoint doing double duty as "is desktop" and "wider slot", or per-component platform styling instead of mode tokens. Establishes three orthogonal axes — form factor (compact/medium/expanded), platform (web/ios/android), pointer (fine/coarse) — and a three-layer architecture (context hook, mode tokens, container-query primitives) so one sweep can enhance one axis without degrading the others. Catches axis conflation in a single boolean, hover-only affordances on native shells, and SSR/Capacitor first-paint mismatch. For pure visual polish on a single surface, use enhance-web-ui first.
enhance-pwa
Add or upgrade PWA features to any web app: service worker, offline mode, install prompt, push notifications, and background sync. Detects existing manifest and service worker setup. Installs and configures the right tooling for the framework (Vite PWA plugin, next-pwa, Workbox). Runs a Playwright Lighthouse audit to measure the PWA score before and after. Compatible with Capacitor hybrid apps — bridges PWA web layer with native shell without conflicts. Generic across any web framework. Use when asked to "make it a PWA", "offline support", "install prompt", "push notifications", "service worker", "add to home screen", "background sync", "Lighthouse PWA score", "app-like experience", "installable", or "works offline".
enhance-readme
Turn a plain-text README into a visually rich showcase with a theme-aware hero image, a feature tour grid, an optional animated guided-tour GIF, and updated tech badges. Captures live screenshots via Playwright MCP in both dark and light mode at hero-quality 1600x1000, pairs them with `<picture>` for auto theme-swap, and inlines them into the README using GitHub-supported HTML. Optionally records a guided-tour `.gif` (autoplays inline on github.com via `record-readme-tour.mjs`) for an animated demo above the static screenshots. Works with any web app that has a live URL or local dev server. Use when asked to "enhance README", "make README prettier", "add screenshots to README", "showcase the app in README", "design the README", "add hero image", "spice up README", "make README more fun", "add animated demo to README", "record a tour GIF", or "make a README GIF".
enhance-web-landing
Build landing pages, portfolios, and marketing sites that don't look AI-generated. Use when asked for "landing page", "portfolio", "marketing site", "anti-slop", "Awwwards-style", "premium frontend", or when design needs a strong point of view.
enhance-web-redesign
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Use when redesigning existing projects, upgrading UI to premium quality, removing AI slop patterns, or when the user asks for a redesign audit. Works with any CSS framework or vanilla CSS.
enhance-web-ui
Artistic, research-grounded UI enhancement skill for making an existing page feel intentional, spacious, and human-crafted. Use when the user asks to make a page nicer, more polished, more premium, more editorial, less crowded, less AI-generated, better laid out or balanced, or mentions typography, visual hierarchy, spacing, empty/dead space, motion, hover states, cards, grids, or density — especially vague-but-visceral feedback ("clunky", "heavy", "incoherent", "wasted space", "feels AI-generated", "monochromatic", "everything stacked left"). Catches hard-to-spot failures: active-state mass mismatch, chrome tautology, card-on-card layering, brand-color competition, full-cell wash where a micro-indicator belongs, wrapper-collapsed tiles, conditional slots reserving space for absent content, and the same datum repeated 3× in one fold. General across web repos. Focuses on content choreography, hierarchy, spacing, and motion; for task-flow usability/data correctness use enhance-web-ux first or alongside it.
migrate-to-skills
Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use when the user wants to migrate rules or commands to skills, convert .mdc rules to SKILL.md format, or consolidate commands into the skills directory.
update-cli-config
View and modify Cursor CLI configuration in ~/.cursor/cli-config.json. Use to change CLI settings, configure permissions, switch approval mode, enable vim mode, toggle display options, configure sandbox, or manage any CLI preferences.
charting
Selects the right chart type and visualization library for React/Next.js (web) and Expo/React Native (mobile) data visualization tasks, then applies accessibility and anti-pattern guardrails. Maps data shape and intent (comparison, composition, distribution, relationship, evolution, flow, geographic, hierarchical) to a recommended chart, then to a recommended library based on platform, dataset size, and design system. Defers cross-cutting UI concerns (contrast, touch targets, typography, copy) to the `ux` skill rather than restating them. Triggers on: "what chart should I use", "visualize this data", "build a chart", "build a dashboard", "data visualization", "pick a chart library", "graph this", "/charting".
code-quality
Language-agnostic skill for authoring and reviewing code with low cognitive complexity, readability, and long-term maintainability. Covers guard clauses, single-responsibility functions, type-driven design (illegal states unrepresentable, branded primitives, discriminated unions), schema-first validation, single source of truth for union metadata, functional core + imperative shell, idempotency, and neighbour-pattern symmetry. Pairs with `tdd` for new code (rules apply in GREEN/REFACTOR). Stack-specific extensions live under `rules/stacks/<stack>/` (React, Next.js today; drop a subdirectory for any other language or framework). Use during PR review, after writing new code, in TDD GREEN/REFACTOR, or when asked to "improve quality", "make this readable", "reduce complexity", "deduplicate", "clean this up", or "/code-quality".
rum-tracking
Guides product analytics and RUM (Real User Monitoring) event tracking in web (React/Next.js) and mobile (React Native/Expo) apps. Decides what user interactions are valuable to capture, what's noise, what's PII to avoid, and how to implement, audit, update, and remove tracking code cleanly. Covers event naming, property schemas, tracking plans, GDPR/CCPA/DPDPA compliance, OpenTelemetry semantic conventions for browser and mobile RUM, and platforms (PostHog, Segment, Mixpanel, Amplitude, Datadog RUM, Sentry, OTel, Dash0). Modes: guide (default), implement, audit, remove, plan. Triggers on "track this event", "add analytics", "what should I track", "is this PII", "tracking plan", "remove tracking", "audit analytics", "/rum-tracking".
feishu-calendar
飞书日历与日程管理工具集。包含日历管理、日程管理、参会人管理、忙闲查询。
feishu-channel-rules
Lark/Feishu channel output rules. Always active in Lark conversations.
feishu-update-doc
更新飞书云文档。支持 7 种更新模式：追加、覆盖、定位替换、全文替换、前/后插入、删除。
mobile-pwa-usability
Use when building or modifying React/Next.js components, pages, layouts, PWA configurations, or CSS/Tailwind files - enforces mobile usability standards with mandatory checks for critical issues (touch targets, viewport, safe areas, accessibility) and recommendations for PWA optimization (manifest, service worker, offline support)
ccc-build
Build something new — web app, API, CLI, or mobile. Guided spec interview routes to the right template, then scaffolds. Use when: 'build something', 'new project', 'create app'.
ccc-knowledge
Knowledge compounding — search past lessons, view learning history, browse by category. Use when the user says 'what did we learn', 'past lessons', 'knowledge base',…
ccc-saas
complete SaaS development ecosystem — 21 skills in one. Scaffold, authenticate, bill, ship, and grow a production SaaS from zero to revenue.
ccc-session
Session management — resume work, review what was built, browse session history. Use when the user says 'resume session', 'review work', 'continue where I left…
gws-admin-reports
This skill should be used when the user says "show audit logs", "pull admin reports", "list user activity", "check login history", "get usage stats for my org", "show drive activity logs", or wants to access Google Workspace Admin SDK reports. Covers activity logs, customer usage reports, entity usage, and user usage reports.
gws-calendar
This skill should be used when the user says "manage my calendar", "list my calendars", "update calendar settings", "share a calendar", "delete a calendar", "check free/busy time", or wants to broadly manage Google Calendar. Covers calendars, events, ACL rules, free/busy queries, and settings.
gws-chat
This skill should be used when the user says "manage Chat spaces", "list my Chat rooms", "create a Chat space", "delete a Chat space", "set up a group chat", "find a direct message", or wants to broadly manage Google Chat. Covers spaces, memberships, messages, custom emojis, and media uploads.
gws-classroom
This skill should be used when the user says "manage my classroom", "create a course", "list my classes", "add a student to a course", "assign coursework", "invite a teacher", or wants to manage Google Classroom. Covers courses, enrollments, coursework, announcements, topics, and guardian invitations.
gws-drive
This skill should be used when the user says "manage my Drive files", "search Google Drive", "list files in a folder", "share a file", "create a shared drive", "download a file from Drive", or wants to broadly manage Google Drive. Covers files, folders, permissions, comments, shared drives, and revisions.
gws-events
This skill should be used when the user says "subscribe to Workspace events", "set up event notifications", "watch for Workspace changes", "manage event subscriptions", "list active subscriptions", or wants to broadly manage Google Workspace Events subscriptions. Covers creating, listing, updating, and reactivating subscriptions.
gws-gmail-forward
This skill should be used when the user says "forward this email", "forward to someone", "pass this email along", "send this message to", "forward with a note", or wants to forward a specific Gmail message to new recipients. Covers adding a note, CC/BCC, attachments, and HTML content.
gws-gmail-reply
This skill should be used when the user says "reply to this email", "send a reply", "respond to that message", "write back to sender", "reply to the sender only", or wants to send a threaded reply to a single Gmail message. Covers in-reply-to threading, attachments, CC/BCC, and HTML replies.
gws-gmail-reply-all
This skill should be used when the user says "reply all to this email", "respond to everyone", "reply to the whole thread", "send to all recipients", "reply all with note", or wants to reply to a Gmail message including all original To/CC recipients. Covers recipient exclusions, extra CC/BCC, attachments, and HTML content.
gws-gmail-send
This skill should be used when the user says "send an email", "email someone", "compose a message", "write an email to", "send a Gmail", "draft and send", or wants to send a new outbound email through Gmail. Covers recipients, subject, body, CC/BCC, attachments, HTML content, and send-as aliases.
gws-people
This skill should be used when the user says "manage my contacts", "look up a contact", "add a new contact", "search my address book", "list contact groups", "update someone's contact info", or wants to manage Google People/Contacts. Covers personal contacts, contact groups, directory search, and profile photos.
gws-shared
This skill should be used when the CLI needs to authenticate with Google Workspace, apply global flags like --format or --dry-run, or follow security rules before any gws command. Not a user-facing service — this is the shared reference for gws CLI auth patterns, output formatting, shell escaping tips, and write-command safety rules used by all other gws-* skills.
gws-sheets
This skill should be used when the user says "work with a spreadsheet", "create a Google Sheet", "update a spreadsheet", "batch update cells", "manage sheet data", "get spreadsheet metadata", or wants to broadly manage Google Sheets. Covers creating spreadsheets, reading and writing values, and batch updates.
route-tester
Framework-agnostic HTTP API route testing patterns, authentication strategies, and integration testing best practices. Supports REST APIs with JWT cookie authentication and other common auth patterns.
develop-frontend
Next.js/Reactによるフロントエンド実装スキル（UI、API連携、状態管理、テスト）
nextjs-15-patterns
Next.js 15 App Router patterns and best practices.
cross-platform-error-handling
Design consistent error handling across web, mobile, and React Native—central handlers, user-facing copy, retry, and logging.
framework-expert
Unified framework expertise bundle. Lazy-loads relevant framework patterns (React, Vue, Angular, Next.js, Node.js, Python, Laravel, Go, Flutter, Godot) based on detected tech stack.
nextjs-expert
Next.js 14+ gotchas and decision criteria. Covers server/client boundary, caching strategy, and data fetching patterns Claude commonly gets wrong.
frontend-developer
Frontend Developer (/fe, alias: Finn, /finn) - Senior Frontend Developer with 10+ years web and mobile experience. Covers React/Next.js (default), Angular, Vue/Nuxt, Flutter/Dart, and JavaFX desktop - detects the project's framework and loads the matching stack reference. Use when implementing UI components, state management, data fetching, styling, forms, or any web/cross-platform frontend feature in any of these stacks.
feishu-troubleshoot
飞书插件问题排查工具。包含常见问题 FAQ 和深度诊断命令（/feishu_doctor）。 常见问题可随时查阅。诊断命令用于排查复杂问题（多次授权仍失败、自动授权无法解决等）， 会检查账户配置、API 连通性、应用权限、用户授权状态，并生成详细的诊断报告和解决方案。
design-code
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
gws-admin-reports
This skill should be used when the user says "show audit logs", "pull admin reports", "list user activity", "check login history", "get usage stats for my org", "show drive activity logs", or wants to access Google Workspace Admin SDK reports. Covers activity logs, customer usage reports, entity usage, and user usage reports.
gws-calendar
This skill should be used when the user says "manage my calendar", "list my calendars", "update calendar settings", "share a calendar", "delete a calendar", "check free/busy time", or wants to broadly manage Google Calendar. Covers calendars, events, ACL rules, free/busy queries, and settings.
gws-chat
This skill should be used when the user says "manage Chat spaces", "list my Chat rooms", "create a Chat space", "delete a Chat space", "set up a group chat", "find a direct message", or wants to broadly manage Google Chat. Covers spaces, memberships, messages, custom emojis, and media uploads.
gws-classroom
This skill should be used when the user says "manage my classroom", "create a course", "list my classes", "add a student to a course", "assign coursework", "invite a teacher", or wants to manage Google Classroom. Covers courses, enrollments, coursework, announcements, topics, and guardian invitations.
gws-drive
This skill should be used when the user says "manage my Drive files", "search Google Drive", "list files in a folder", "share a file", "create a shared drive", "download a file from Drive", or wants to broadly manage Google Drive. Covers files, folders, permissions, comments, shared drives, and revisions.
gws-events
This skill should be used when the user says "subscribe to Workspace events", "set up event notifications", "watch for Workspace changes", "manage event subscriptions", "list active subscriptions", or wants to broadly manage Google Workspace Events subscriptions. Covers creating, listing, updating, and reactivating subscriptions.
gws-gmail-forward
This skill should be used when the user says "forward this email", "forward to someone", "pass this email along", "send this message to", "forward with a note", or wants to forward a specific Gmail message to new recipients. Covers adding a note, CC/BCC, attachments, and HTML content.
gws-gmail-reply
This skill should be used when the user says "reply to this email", "send a reply", "respond to that message", "write back to sender", "reply to the sender only", or wants to send a threaded reply to a single Gmail message. Covers in-reply-to threading, attachments, CC/BCC, and HTML replies.
gws-gmail-reply-all
This skill should be used when the user says "reply all to this email", "respond to everyone", "reply to the whole thread", "send to all recipients", "reply all with note", or wants to reply to a Gmail message including all original To/CC recipients. Covers recipient exclusions, extra CC/BCC, attachments, and HTML content.
gws-gmail-send
This skill should be used when the user says "send an email", "email someone", "compose a message", "write an email to", "send a Gmail", "draft and send", or wants to send a new outbound email through Gmail. Covers recipients, subject, body, CC/BCC, attachments, HTML content, and send-as aliases.
gws-people
This skill should be used when the user says "manage my contacts", "look up a contact", "add a new contact", "search my address book", "list contact groups", "update someone's contact info", or wants to manage Google People/Contacts. Covers personal contacts, contact groups, directory search, and profile photos.
gws-shared
This skill should be used when the CLI needs to authenticate with Google Workspace, apply global flags like --format or --dry-run, or follow security rules before any gws command. Not a user-facing service — this is the shared reference for gws CLI auth patterns, output formatting, shell escaping tips, and write-command safety rules used by all other gws-* skills.
gws-sheets
This skill should be used when the user says "work with a spreadsheet", "create a Google Sheet", "update a spreadsheet", "batch update cells", "manage sheet data", "get spreadsheet metadata", or wants to broadly manage Google Sheets. Covers creating spreadsheets, reading and writing values, and batch updates.
genesis-frontend
Agente Frontend do Genesis. Implementa interface de usuário adaptando-se ao framework escolhido: React (Vite ou Next.js), Vue (Nuxt ou Vite), Angular, React Native (Expo), Flutter. Segue as specs do manifest e os contratos de API. Gera componentes, rotas, state management e integração com backend.
qa-check
Auto-detects the project's tech stack, then audits for Accessibility, Performance, and Code Quality. Works across WordPress/PHP, Python, Node/JS, and static web projects.
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).
aws-spa-deploy
Use this skill whenever the user is deploying a React/Vite single-page app to AWS, or mentions Amplify, CDK, or wiring up Lambda + API Gateway for a frontend. Covers Amplify hosting, custom domains, CDK backend (Lambda + API Gateway), SES email, CORS configuration, and environment variables. Skip for non-AWS hosts (Vercel, Netlify, Cloudflare Pages), pure backend services without an SPA, or server-rendered apps (Next.js SSR on Vercel).
google-analytics-4
Use this skill whenever the user installs, configures, or debugs Google Analytics 4, or mentions gtag.js, GTM, conversion tracking, e-commerce events, or a cookie/consent banner tied to analytics. Covers installation, event tracking, user properties, e-commerce, Consent Mode v2 for EU/UK visitors, SPA pageview tracking, and BigQuery export. Skip for other analytics products (Plausible, Mixpanel, PostHog, Segment), Universal Analytics (sunset 2024), or server-side-only tracking.
seo-llmo
Use this skill whenever the user is building, reviewing, or preparing to launch any public-facing website or web app. SEO, LLMO, and agent-readiness are baseline requirements for every public site, not optional add-ons. Covers meta tags, Open Graph, JSON-LD structured data (including SoftwareApplication and Product types), robots.txt (including the Content-Signal directive), sitemap.xml, llms.txt (including agent instruction block and MCP declaration), AI crawler access (GPTBot, ClaudeBot, PerplexityBot), Markdown content negotiation for agents, Link response headers, Agent Skills index, A2A Agent Card, MCP server discovery, agent.json, pricing.md, and the "explicit absence beats silence" principle for agent-facing files. Trigger for marketing sites, landing pages, blogs, docs, and e-commerce stores; before any "launch" or "go live"; during pre-launch checklists; when the user mentions isitagentready.com, ora.run, agent-readiness, A2A, MCP discovery, Cloudflare Markdown for Agents, or wants AI agents (ChatGPT
web-performance
Use this skill whenever the user is improving Core Web Vitals or page load performance, or mentions slow pages, PageSpeed Insights / Lighthouse failures, LCP/CLS/INP scores, bundle size, image/font optimization, or third-party script impact. Covers Core Web Vitals, image and font optimization, JavaScript bundle size, CSS build size, CDN caching, third-party JavaScript impact, and measurement tools. Skip for backend latency tuning, database query optimization, or CI build speed.
accessibility
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
best-practices
Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".
core-web-vitals
Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
performance
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".
seo
Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".
web-quality-audit
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
svg-add-primitive
Add a new reusable motion / shape / filter primitive to lib/primitives/ with safety: JSDoc + sensible defaults + at least one consuming preset + passing snapshot tests + updated docs/lib-api.md + CLAUDE.md index. Use this only when /svg-animate has flagged a missing capability or when the user explicitly asks to "add a primitive", "extend the lib", "teach the system to <verb>", or "I need a new <motion / filter / shape> for ...". This is the only sanctioned path for growing lib/primitives/; do not edit those files directly.
svg-verify
Visually verify a rendered SVG animation by opening it in chrome-devtools MCP, capturing keyframes, and scoring against the 5-point quality rubric. Invoke this immediately after `/svg-animate` writes an output, or whenever the user asks "is this animation good?", "how does it look?", "verify the motion", or "check the SVG visually". Always run before declaring an animation complete. Returns a ≤100-word verdict and never leaks screenshots into the calling thread.
changelog-generator
Changelog Generator - Auto-activating skill for Technical Documentation. Triggers on: changelog generator, changelog generator Part of the Technical Documentation skill category.
hypermedia-link-generator
Hypermedia Link Generator - Auto-activating skill for API Development. Triggers on: hypermedia link generator, hypermedia link generator Part of the API Development skill category.
jwt-token-validator
Jwt Token Validator - Auto-activating skill for Security Fundamentals. Triggers on: jwt token validator, jwt token validator Part of the Security Fundamentals skill category.
security-headers-generator
Security Headers Generator - Auto-activating skill for Security Fundamentals. Triggers on: security headers generator, security headers generator Part of the Security Fundamentals skill category.
ensemble-discover-standards
Analyze codebase and extract coding conventions into a standards/ directory with index.yml (Codex skill for /ensemble:discover-standards)
alchemy-infra
Sets up Alchemy (alchemy-run/alchemy, Infrastructure-as-TypeScript) in any codebase — new project scaffold OR add to existing app. Wires Cloudflare/AWS providers, state backend, secrets, and binding types end-to-end with strict secret hygiene. USE THIS SKILL whenever the user mentions "alchemy", "alchemy.run", "Infrastructure as TypeScript", or asks to deploy a Worker/Lambda/D1/R2/KV/Queue/DO via TS, add a state backend, configure ALCHEMY_PASSWORD, generate alchemy.run.ts, replace SST/Pulumi/CDK/Terraform with Alchemy, or scaffold a Cloudflare/AWS app from TypeScript. Trigger even when the user does not say "alchemy" explicitly but describes the workflow (e.g., "deploy a Worker with KV in pure TS", "TypeScript IaC", "wire D1 + Drizzle to a Worker", "set up Cloudflare bindings without wrangler.toml").
devcontainer-generator
Generate devcontainer setups by scanning CWD for tech stack and infra services. Triggers on devcontainer, dev container, devcontainer.json, development container, containerized development, VS Code Remote Containers, GitHub Codespaces. Produces devcontainer.json, Dockerfile, Docker Compose, post-create scripts, firewall rules, and DEVCONTAINER.md summary. Uses an 11-step interactive workflow (Steps 0–9 with Step 1b for host credential sharing).
code-review-security
Security-focused code review checklist and automated scanning patterns. Use when reviewing pull requests for security issues, auditing authentication/authorization code, checking for OWASP Top 10 vulnerabilities, or validating input sanitization. Covers SQL injection prevention, XSS protection, CSRF tokens, authentication flow review, secrets detection, dependency vulnerability scanning, and secure coding patterns for Python (FastAPI) and React. Does NOT cover deployment security (use docker-best-practices) or incident handling (use incident-response).
competitive-intelligence-analyst
Use this skill when users need to analyze competitors, monitor market movements, benchmark features/pricing, identify market gaps, or understand competitive positioning. Activates for "what are competitors doing," market analysis, or differentiation strategy.
deep-analysis
Analytical thinking patterns for comprehensive evaluation, code audits, security analysis, and performance reviews. Provides structured templates for thorough investigation with extended thinking support.
product-strategist
Expert product strategy covering market analysis, competitive positioning, go-to-market planning, and product-led growth.
spec-writer
Generate structured software specifications for features, bug fixes, and products. Use when the user wants to create a spec, PRD, feature brief, requirements document, or when starting any new implementation that needs a specification first. Invoke via /spec-writer or when the user says "write a spec", "spec this out", "create a spec", "I need a spec for...", or describes a feature they want to build. Produces adaptive-complexity specs with Job Stories, Gherkin acceptance criteria, and three-tier boundaries. Output is a markdown file ready for agent execution or human review.
setup-ci
Teaches CI/CD from first principles to a non-developer, then scaffolds a working test + deploy pipeline. Handles the common hosts (GitHub Actions, GitLab CI, CircleCI, Travis, Jenkins) and common deploy targets (SSH to VM, Vercel, Netlify, Fly.io, Cloud Run, Docker registries). Asks what the operator has before generating anything — never assumes.
nextjs
Next.js 15+ App Router development patterns
agentation
Add Agentation visual feedback toolbar to a Next.js project
authentication-logic
Guide to using Better Auth for client and server-side authentication.
blog-writer
Write and add new blog posts for this Next.js site by matching the existing BlogPost structure in `src/lib/blog-data.ts`. Use when asked to draft a new blog article, update blog content, or produce SEO metadata/slug/image details for a new post.
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.
context7-auto-research
Automatically fetch latest library/framework documentation for Claude Code via Context7 API
deployment-build
Knowledge of the Vercel deployment pipeline, hybrid build scripts, and environment configuration.
global-tech-stack
Understand and apply project-specific technology choices including frameworks, languages, databases, testing tools, and third-party services to maintain consistency across the stack. Use this skill when making technology decisions, adding new dependencies, choosing libraries/frameworks, configuring build tools, setting up databases, implementing authentication, or integrating third-party services. Apply when working with framework-specific code, package managers, ORM configurations, testing setups, deployment configurations, or any task that requires knowledge of the project's chosen technologies to ensure architectural consistency and avoid introducing conflicting tools or patterns.
next-js-patterns
Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
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.
project-architecture
Overview of the project's tech stack, directory structure, and architectural patterns.
fec-legacy-to-modern-migration
用于规划或实施从 JavaScript、jQuery、HTML/CSS、服务端渲染模板、MPA 遗留前端代码或旧框架代码迁移到现代前端技术栈，同时保持行为一致。不要用于仍留在旧技术栈内的日常遗留 bug 修复；中文触发词包括 遗留项目、技术栈升级、jQuery 迁移。
knowledge-update
Corrects outdated LLM knowledge about the Vercel platform and introduces new products. Injected at session start.
next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
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-architecture
Define system structure, module boundaries, and data flow for the SaaS app. Record significant decisions as ADRs. Drafts architecture.md then awaits approval.
design-ui
For each screen in flows.md, select shadcn/ui components and layout, note empty/loading/error states, and document basic accessibility. Drafts ui.md then awaits approval.
help
List all 23 studio skills grouped by phase, each with a one-line description. Run any time you need a map of what the studio can do.
map-flows
Derive key user journeys and the full screen list from the PRD. Confirm primary flows with the user, then produce flows.md as the UX contract for design-ui and build-feature.
qa-plan
Define the test strategy and tooling for the SaaS app before writing tests: the test pyramid, what to cover at each layer, and the security-critical seams. Run after the first feature exists. Produces a qa-plan doc.
scope-check
Compare current or proposed work against the PRD's non-goals and scope boundaries. Flag scope creep early, recommend cut or keep, and get a user decision before work continues.
security-audit
Audit the SaaS codebase (or a diff) against the path-scoped rules and an OWASP-style SaaS checklist: auth/session, RLS/tenant isolation, secrets, input validation, Stripe webhook verification, dependency vulnerabilities. Produces a severity-ranked findings report.
start
Detect the project's current stage and route to the right first skill. Run at the very beginning of any new session. Shows the studio map and recommends the next action.
studio-status
Report where the project stands: which spec artifacts exist, what's missing, and which skill to run next. Run at the start of any session to re-orient.
validate-idea
Pressure-test a SaaS idea before any PRD: problem, target user, market, willingness to pay. Run right after /start. Produces an idea-validation doc and a PROCEED/PIVOT/KILL verdict.
write-prd
Turn a validated idea into a full PRD: goals, target users, user stories with acceptance criteria, non-goals, and success metrics. Requires idea-validation.md. Drafts then awaits approval.
tfx-autoresearch
자율 웹 리서치 → 실행 가능 계획 도출. 주제를 받아 웹 검색 → 정보 수집 → 분석 → 구조화된 리서치 보고서 생성. '알아봐', '조사해', '리서치해줘', '검색하고 정리해', 'research and plan' 같은 요청에 반드시 사용. 웹 검색 후 실행 가능한 계획까지 도출이 필요할 때 적극 활용.
cyberseguranca
Skill ROBUSTA de cybersegurança full-spectrum para arquitetar, auditar e responder. Usar SEMPRE que o usuário quiser projetar segurança, auditar projeto, garantir hardening, defender contra invasão, mitigar vulnerabilidades, ou tratar incident. Também aciona quando mencionar 'cybersegurança', 'cyber', 'segurança do projeto', 'hackeado', 'invadido', 'invasão', 'ataque', 'breach', 'vazamento', 'pentest', 'red team', 'blue team', 'audit de segurança', 'OWASP', 'LGPD', 'ISO 27001', 'SOC 2', 'PCI', 'NIST', 'CIS Controls', 'STRIDE', 'threat modeling', 'modelagem de ameaças', 'MFA', 'FIDO2', 'WebAuthn', 'passkey', 'JWT seguro', 'RLS', 'row-level security', 'CSP', 'security headers', 'WAF', 'Cloudflare Access', 'Zero Trust', 'BeyondCorp', 'SSRF', 'XSS', 'CSRF', 'BOLA', 'IDOR', 'injection', 'SQLi', 'prompt injection', 'LLM security', 'AI security', 'agent security', 'supply chain', 'SBOM', 'SLSA', 'Sigstore', 'cosign', 'gitleaks', 'secret scanning', 'rotação de chave', 'data breach', 'incident response', 'IR plan', 'N
doa-e2etest
端到端测试全流程：安装配置 Playwright → 编写 E2E 测试用例 → 执行测试 → 生成精美 HTML 报告 → 输出 PDF。USE FOR: E2E测试、端到端测试、Playwright测试、前端自动化测试、编写E2E用例、生成测试报告、测试报告PDF、测试报告HTML、Playwright配置、自动化回归测试、UI测试、冒烟测试。DO NOT USE FOR: 单元测试（使用 test-driven-development skill）、API测试、性能测试。
stacks
Stack-specific skills organized by technology category (backend, frontend, infrastructure, mobile)
ci-standards
CI/CD standards knowledge for validating project compliance with CI conventions
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
nextjs-developer
Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke for full-stack features, performance optimization, SEO implementation, production deployment.
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.
building-agents
Expert at creating and modifying Claude Code agents (subagents). Auto-invokes when the user wants to create, update, modify, enhance, validate, or standardize agents, or when modifying agent YAML frontmatter fields (especially 'model', 'tools', 'description'), needs help designing agent architecture, or wants to understand agent capabilities. Also auto-invokes proactively when Claude is about to write agent files (*/agents/*.md), create modular agent architectures, or implement tasks that involve creating agent components.
mdr-745-specialist
EU MDR 2017/745 compliance specialist for medical device classification, technical documentation, clinical evidence, and post-market surveillance. Covers Annex VIII classification rules, Annex II/III technical files, Annex XIV clinical evaluation, and EUDAMED integration.
react-email
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
turborepo
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
analyzing-projects
Analyzes codebases to understand structure, tech stack, patterns, and conventions. Use when onboarding to a new project, exploring unfamiliar code, or when asked "how does this work?" or "what's the architecture?"
gws-calendar-agenda
This skill should be used when the user says "what's on my calendar", "show my schedule", "what do I have today", "show this week's events", "what's coming up", "show my agenda", or wants to view upcoming events across calendars. Covers listing today, tomorrow, this week, or N days ahead, with optional calendar filtering.
gws-calendar-insert
This skill should be used when the user says "create a calendar event", "schedule a meeting", "add an event to my calendar", "book a time slot", "set up a meeting with", "add a Google Meet to an event", or wants to create a new Google Calendar event. Covers title, start/end time, attendees, location, description, and Meet link.
gws-chat-send
This skill should be used when the user says "send a Chat message", "post to a Chat space", "message the team on Chat", "send a Google Chat notification", "post in the Chat room", or wants to send a plain-text message to a specific Google Chat space. Covers sending to a named space by ID.
gws-docs
This skill should be used when the user says "read a Google Doc", "create a document", "get the contents of a doc", "update a document", "make a new Google Doc", "batch update a doc", or wants to broadly work with Google Docs. Covers creating, reading, and batch-updating document content.
gws-docs-write
This skill should be used when the user says "append text to a doc", "add content to a Google Doc", "write to a document", "insert text at the end of a doc", "add a note to my doc", or wants to append plain text to an existing Google Doc. Covers inserting text at the end of a document body.
gws-drive-upload
This skill should be used when the user says "upload a file to Drive", "put this file in Google Drive", "save a file to Drive", "upload to a folder", "push a file to Drive", or wants to upload a local file to Google Drive. Covers automatic MIME detection, parent folder targeting, and custom filenames.
gws-events-renew
This skill should be used when the user says "renew my Workspace subscription", "reactivate an event subscription", "my subscription expired", "keep subscriptions alive", "refresh expiring subscriptions", or wants to renew or reactivate Google Workspace Events subscriptions. Covers renewing by name or batch-renewing all subscriptions expiring within a time window.
gws-events-subscribe
This skill should be used when the user says "stream Workspace events", "listen for Chat messages", "subscribe to Drive changes", "watch events from a Workspace resource", "stream events as NDJSON", or wants to create a new Workspace Events subscription and stream events in real time. Covers Pub/Sub setup, filtering by event type, and writing events to a directory.
gws-forms
This skill should be used when the user says "create a Google Form", "read form responses", "update a form", "get form submissions", "set up a survey", "publish a form", or wants to work with Google Forms. Covers creating, reading, updating forms and retrieving responses.
gws-gmail
This skill should be used when the user says "manage my Gmail", "work with email", "set up email filters", "manage labels", "check my Gmail profile", "manage email settings", or wants to broadly manage Gmail. Covers messages, threads, labels, drafts, filters, and push notification settings.
gws-gmail-read
This skill should be used when the user says "read this email", "show me the body of a message", "get the contents of an email", "what does this message say", "show headers for this email", or wants to read a specific Gmail message by ID. Covers plain text body, HTML body, and message headers.
gws-gmail-triage
This skill should be used when the user says "show my unread emails", "what's in my inbox", "summarize my email", "check my inbox", "what emails do I have", "triage my inbox", or wants a quick summary of unread Gmail messages. Covers sender, subject, date, labels, and custom search queries.
gws-gmail-watch
This skill should be used when the user says "watch for new emails", "stream incoming Gmail", "monitor my inbox for new messages", "set up a Gmail listener", "pipe incoming emails to a script", or wants to watch a Gmail mailbox and stream new messages in real time. Covers Pub/Sub integration, label filtering, and writing messages to a directory.
gws-keep
This skill should be used when the user says "create a Keep note", "add a note", "list my notes", "delete a note", "read a Google Keep note", "show my Keep notes", or wants to manage Google Keep. Covers creating, reading, listing, and deleting notes and their attachments.
gws-meet
This skill should be used when the user says "create a Meet space", "manage a meeting room", "end a Meet conference", "list past meetings", "get meeting recordings", "get meeting transcripts", or wants to manage Google Meet. Covers meeting spaces, conference records, participants, recordings, and transcripts.
gws-modelarmor
This skill should be used when the user says "filter content for safety", "set up Model Armor", "sanitize AI input", "screen prompts for harmful content", "manage safety templates", or wants to broadly work with Google Model Armor. Covers creating templates and sanitizing prompts and model responses.
gws-modelarmor-create-template
This skill should be used when the user says "create a Model Armor template", "set up a safety template", "create a jailbreak filter", "add a new content filter", "configure a Model Armor policy", or wants to create a new Google Model Armor template. Covers preset templates (jailbreak) and custom JSON-defined template configuration.
gws-modelarmor-sanitize-prompt
This skill should be used when the user says "sanitize a user prompt", "screen input for harmful content", "filter a user message before sending to AI", "run prompt through Model Armor", "check this input for safety", or wants to sanitize inbound user input through a Model Armor template. Covers text and JSON request bodies, and stdin input.
gws-modelarmor-sanitize-response
This skill should be used when the user says "sanitize a model response", "filter AI output for safety", "screen model output before showing the user", "run this response through Model Armor", "check AI output for harmful content", or wants to sanitize outbound model responses through a Model Armor template. Covers text and JSON request bodies, and stdin piping.
gws-script-push
Google Apps Script: Upload local files to an Apps Script project.
gws-sheets-append
This skill should be used when the user says "add a row to a sheet", "append data to a spreadsheet", "log data to Sheets", "insert a new row", "write values to the bottom of a sheet", or wants to append one or more rows to a Google Sheets spreadsheet. Covers single-row and multi-row bulk inserts.
gws-sheets-read
This skill should be used when the user says "read data from a sheet", "get values from a spreadsheet", "show me what's in this sheet", "pull data from a range", "read a cell range", or wants to read values from a specific range in a Google Sheets spreadsheet. Covers named ranges and A1 notation cell ranges.
gws-slides
This skill should be used when the user says "create a presentation", "read a Google Slides deck", "update a slide", "get a presentation", "add slides to a deck", "batch update a presentation", or wants to work with Google Slides. Covers creating, reading, and batch-updating presentations and individual pages/slides.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
claude-api
Build, debug, and optimize Claude API / Anthropic SDK apps. Apps built with this skill should include prompt caching. Also handles migrating existing Claude API code between Claude model versions (4.5 → 4.6, 4.6 → 4.7, retired-model replacements). TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`; user asks for the Claude API, Anthropic SDK, or Managed Agents; user adds/modifies/tunes a Claude feature (caching, thinking, compaction, tool use, batch, files, citations, memory) or model (Opus/Sonnet/Haiku) in a file; questions about prompt caching / cache hit rate in an Anthropic SDK project. SKIP: file imports `openai`/other-provider SDK, filename like `*-openai.py`/`*-generic.py`, provider-neutral code, general programming/ML.
docx
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
pptx
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions "deck," "slides," "presentation," or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
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.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
xlsx
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
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.
ultrathink
UltraThink Workflow OS — 4-layer skill mesh with persistent memory and privacy hooks for complex engineering tasks. Routes prompts through intent detection to activate the right domain skills automatically.
data-pipeline
ETL/ELT pipeline design. Trigger when the user wants to create data flows, transformations, or orchestration.
git-worktrees
Using git worktrees for parallel development. Trigger when the user wants to work on multiple branches simultaneously, do parallel dev, or manage worktrees.
ops-mobile-release
Publishing apps to the App Store and Google Play. Trigger when the user wants to deploy a mobile app or configure Fastlane.
towow-eng-frontend
通爻前端事件消费专才。负责实时 UI、WebSocket/SSE 事件消费和协商过程展示。
fabric-app-bootstrap
Use when creating or deploying a Microsoft Fabric App (preview, Rayfin CLI) — 'build my first Fabric App', 'host this SPA inside Fabric', 'deploy to Fabric Apps', 'rayfin up fails', 'what can Fabric Apps host', or when a deploy needs to run headless/CI with a service principal and zero portal clicks. Also use BEFORE porting an existing app into Fabric, to check what survives static hosting (no Node SSR, no server secrets, no Python runtime, 100 MB zip cap). Do NOT use for the data layer — that is fabric-app-lakehouse-live (read-only) or fabric-app-sqldb-writeback (write-back).
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
nextjs-seo-foundations
Next.js 14 应用的生产级 SEO 工程化规范 (Metadata, Schema, Performance)
create-hook
Create Cursor hooks. Use to create a hook, write hooks.json, add hook scripts, or automate behavior around agent events.
create-rule
Create Cursor rules for persistent AI guidance. Use when user wants to create a rule, add coding standards, project conventions, file-specific patterns, or mentions ".cursor/rules", "AGENTS.md", "cursor rule", "coding standard", "convention", or "AI guidance".
create-skill
Guide users through creating effective Agent Skills for Cursor. Use when user wants to create, write, update, or debug a skill, or asks about SKILL.md format, skill structure, ~/.cursor/skills/, or skill best practices.
shell
Run the rest of a /shell request as a literal shell command. Use only when the user explicitly invokes /shell and wants the following text executed directly in the terminal.
statusline
Configure a custom status line in the CLI. Use when the user mentions status line, statusline, statusLine, CLI status bar, prompt footer customization, or wants to add session context above the prompt.
update-cursor-settings
Modify Cursor/VSCode user settings in settings.json. Use when user wants to change editor settings, preferences, themes, font size, tab size, keybindings, or mentions "settings", "preferences", "theme", "font", "format on save", "auto save", or "cursor config".
accessibility
Accessibility (a11y) compliance checking with WCAG 2.1 validation
api-docs-generate
Generate OpenAPI/Swagger documentation from code analysis
api-test-generate
Auto-generate comprehensive API tests for REST and GraphQL endpoints with request/response validation
bundle-analyze
Bundle size analysis and optimization for Webpack, Vite, and esbuild
skill-manager
Detect project tech stack and disable irrelevant skills to save context window space. Use when the user says "manage skills", "optimize skills", "disable irrelevant skills", "skill manager", or asks which skills are relevant for this project.
launch-audit
Run a comprehensive pre-launch quality audit on any web application. Explores the codebase first, then generates project-specific audit prompts that reference the actual files, routes, hooks, and functions found. Covers 7 areas: security, functionality, domain data coherence, visual consistency, performance, test coverage, and UX polish. Produces per-area audit reports and a final scorecard with 0-10 grades and launch readiness verdict. Use this skill whenever someone says "audit", "launch readiness", "pre-launch review", "quality check", "is this ready to ship", "review before launch", "pente fino", "revisão pré-lançamento", "está pronto pra lançar", "qa completa", "score the codebase", or any variation of checking whether a project is ready for production. Also triggers for deep-dive flow audits: "audita o wizard", "deep dive no checkout", "rastreia os dados do fluxo X", or any request to audit a specific multi-step flow in detail. Works with any web stack (React, Next.js, Vue, Svelte, etc + any backend).
agent-orchestration
Guidelines for adopting specialized agent personas, Coordinator Mode, and managing context compression.
app-builder
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
i18n-localization
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
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.
nodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
gws-calendar-agenda
This skill should be used when the user says "what's on my calendar", "show my schedule", "what do I have today", "show this week's events", "what's coming up", "show my agenda", or wants to view upcoming events across calendars. Covers listing today, tomorrow, this week, or N days ahead, with optional calendar filtering.
gws-calendar-insert
This skill should be used when the user says "create a calendar event", "schedule a meeting", "add an event to my calendar", "book a time slot", "set up a meeting with", "add a Google Meet to an event", or wants to create a new Google Calendar event. Covers title, start/end time, attendees, location, description, and Meet link.
gws-chat-send
This skill should be used when the user says "send a Chat message", "post to a Chat space", "message the team on Chat", "send a Google Chat notification", "post in the Chat room", or wants to send a plain-text message to a specific Google Chat space. Covers sending to a named space by ID.
gws-docs
This skill should be used when the user says "read a Google Doc", "create a document", "get the contents of a doc", "update a document", "make a new Google Doc", "batch update a doc", or wants to broadly work with Google Docs. Covers creating, reading, and batch-updating document content.
gws-docs-write
This skill should be used when the user says "append text to a doc", "add content to a Google Doc", "write to a document", "insert text at the end of a doc", "add a note to my doc", or wants to append plain text to an existing Google Doc. Covers inserting text at the end of a document body.
gws-drive-upload
This skill should be used when the user says "upload a file to Drive", "put this file in Google Drive", "save a file to Drive", "upload to a folder", "push a file to Drive", or wants to upload a local file to Google Drive. Covers automatic MIME detection, parent folder targeting, and custom filenames.
gws-events-renew
This skill should be used when the user says "renew my Workspace subscription", "reactivate an event subscription", "my subscription expired", "keep subscriptions alive", "refresh expiring subscriptions", or wants to renew or reactivate Google Workspace Events subscriptions. Covers renewing by name or batch-renewing all subscriptions expiring within a time window.
gws-events-subscribe
This skill should be used when the user says "stream Workspace events", "listen for Chat messages", "subscribe to Drive changes", "watch events from a Workspace resource", "stream events as NDJSON", or wants to create a new Workspace Events subscription and stream events in real time. Covers Pub/Sub setup, filtering by event type, and writing events to a directory.
gws-forms
This skill should be used when the user says "create a Google Form", "read form responses", "update a form", "get form submissions", "set up a survey", "publish a form", or wants to work with Google Forms. Covers creating, reading, updating forms and retrieving responses.
gws-gmail
This skill should be used when the user says "manage my Gmail", "work with email", "set up email filters", "manage labels", "check my Gmail profile", "manage email settings", or wants to broadly manage Gmail. Covers messages, threads, labels, drafts, filters, and push notification settings.
gws-gmail-read
This skill should be used when the user says "read this email", "show me the body of a message", "get the contents of an email", "what does this message say", "show headers for this email", or wants to read a specific Gmail message by ID. Covers plain text body, HTML body, and message headers.
gws-gmail-triage
This skill should be used when the user says "show my unread emails", "what's in my inbox", "summarize my email", "check my inbox", "what emails do I have", "triage my inbox", or wants a quick summary of unread Gmail messages. Covers sender, subject, date, labels, and custom search queries.
gws-gmail-watch
This skill should be used when the user says "watch for new emails", "stream incoming Gmail", "monitor my inbox for new messages", "set up a Gmail listener", "pipe incoming emails to a script", or wants to watch a Gmail mailbox and stream new messages in real time. Covers Pub/Sub integration, label filtering, and writing messages to a directory.
gws-keep
This skill should be used when the user says "create a Keep note", "add a note", "list my notes", "delete a note", "read a Google Keep note", "show my Keep notes", or wants to manage Google Keep. Covers creating, reading, listing, and deleting notes and their attachments.
gws-meet
This skill should be used when the user says "create a Meet space", "manage a meeting room", "end a Meet conference", "list past meetings", "get meeting recordings", "get meeting transcripts", or wants to manage Google Meet. Covers meeting spaces, conference records, participants, recordings, and transcripts.
gws-modelarmor
This skill should be used when the user says "filter content for safety", "set up Model Armor", "sanitize AI input", "screen prompts for harmful content", "manage safety templates", or wants to broadly work with Google Model Armor. Covers creating templates and sanitizing prompts and model responses.
gws-modelarmor-create-template
This skill should be used when the user says "create a Model Armor template", "set up a safety template", "create a jailbreak filter", "add a new content filter", "configure a Model Armor policy", or wants to create a new Google Model Armor template. Covers preset templates (jailbreak) and custom JSON-defined template configuration.
gws-modelarmor-sanitize-prompt
This skill should be used when the user says "sanitize a user prompt", "screen input for harmful content", "filter a user message before sending to AI", "run prompt through Model Armor", "check this input for safety", or wants to sanitize inbound user input through a Model Armor template. Covers text and JSON request bodies, and stdin input.
gws-modelarmor-sanitize-response
This skill should be used when the user says "sanitize a model response", "filter AI output for safety", "screen model output before showing the user", "run this response through Model Armor", "check AI output for harmful content", or wants to sanitize outbound model responses through a Model Armor template. Covers text and JSON request bodies, and stdin piping.
gws-script-push
Google Apps Script: Upload local files to an Apps Script project.
gws-sheets-append
This skill should be used when the user says "add a row to a sheet", "append data to a spreadsheet", "log data to Sheets", "insert a new row", "write values to the bottom of a sheet", or wants to append one or more rows to a Google Sheets spreadsheet. Covers single-row and multi-row bulk inserts.
gws-sheets-read
This skill should be used when the user says "read data from a sheet", "get values from a spreadsheet", "show me what's in this sheet", "pull data from a range", "read a cell range", or wants to read values from a specific range in a Google Sheets spreadsheet. Covers named ranges and A1 notation cell ranges.
gws-slides
This skill should be used when the user says "create a presentation", "read a Google Slides deck", "update a slide", "get a presentation", "add slides to a deck", "batch update a presentation", or wants to work with Google Slides. Covers creating, reading, and batch-updating presentations and individual pages/slides.
flutter-ai-ui-skill
A master-level Flutter UI/UX design skill that equips AI coding assistants with curated design intelligence, colour palettes, typography pairings, animation patterns, component blueprints and actionable checklists for building beautiful, accessible, production-ready Flutter applications. Covers Material 3, Cupertino, adaptive layouts, animations, theming, state management integration, accessibility and performance optimization.
ui-component-builder
Build production-ready UI components with accessibility, loading/empty/error states, responsive behavior, and reusable props — not retrofitted polish. Use when creating a new component. To review an existing UI use /design-review instead.
coverage
Analyze test coverage gaps. Use when user says "test coverage", "what's not tested", "coverage gaps", "missing tests", "coverage report", or "what needs testing".
astro-accessibility
This skill should be used when implementing accessibility in Astro, WCAG compliance in Astro, Astro ARIA patterns, keyboard navigation in Astro components, screen reader support in Astro, Astro semantic HTML, focus management in Astro, accessible forms in Astro, Astro accessibility testing, axe-core integration with Astro, accessible Astro islands, alt text for Astro images, focus trapping in modals, accessible view transitions, or color contrast requirements.
astro-best-practices
This skill should be used when working on any Astro project or when the user asks about Astro best practices, conventions, or patterns. Trigger when: working on an Astro project, creating Astro components/pages/layouts, configuring astro.config, setting up Content Collections, using Content Layer API, choosing client directives (client:load/idle/visible/media/only), using server:defer or server islands, deciding between SSR and SSG, working with Astro Actions for forms, configuring middleware, using Zod schemas for content, building with TypeScript in Astro, creating API endpoints, using @astro/autoload, working with .astro files, Astro 5 or Astro 6 development.
astro-performance
This skill should be used when optimizing Astro performance, improving Core Web Vitals in Astro, fixing LCP/CLS/INP issues, auditing client directives, reducing JavaScript bundle size, configuring Astro prefetching, using server:defer for performance, optimizing Astro images, configuring Astro fonts, CSS optimization in Astro, HTML streaming, Astro build optimization, Astro CDN configuration, Route Caching API, Lighthouse audit for Astro, hydration performance, client:visible vs client:load, or Astro asset pipeline.
astro-security
This skill should be used when implementing Astro security, configuring Content Security Policy in Astro, preventing XSS in Astro, using set:html safely, handling secrets in Astro, configuring astro:env, Astro authentication patterns, Astro Session API, CSRF protection in Astro, configuring security.checkOrigin, Astro cookie security, middleware security patterns, Astro CORS configuration, protecting API endpoints, security.allowedDomains, environment variable security in Astro, import.meta.env secret leakage
astro-troubleshooting
This skill should be used when debugging Astro issues, identifying Astro anti-patterns, fixing common Astro mistakes, troubleshooting Astro errors, resolving "document is not defined" in Astro, resolving "window is not defined" in Astro, diagnosing a component not interactive, fixing content validation errors, investigating why an Astro build fails, debugging hydration issues, solving Astro 5 migration problems, fixing slug vs id errors, resolving render method not found, diagnosing Astro performance problems, reducing too much JavaScript in Astro, fixing Astro routing errors, or addressing form resubmission warnings.
fastify-best-practices
This skill should be used when working on any Fastify project or when the user asks about Fastify best practices, conventions, or patterns. Trigger when: working on a Fastify project, creating Fastify plugins, registering routes, using decorators, organizing Fastify application structure, using @fastify/autoload, creating encapsulated contexts, working with fastify-plugin, building Fastify APIs, configuring Fastify server options, using the register API, understanding Fastify encapsulation, project scaffolding with fastify-cli
fastify-hooks-lifecycle
This skill should be used when implementing Fastify hooks, understanding hook execution order, using onRequest/preParsing/preValidation/preHandler/preSerialization/onError/onSend/onResponse hooks, using onReady/onListen/onClose/onRoute/onRegister application hooks, debugging hook chain issues, adding authentication hooks, implementing request lifecycle interceptors, working with Fastify lifecycle events, or understanding when request.body is available.
fastify-logging
This skill should be used when configuring Fastify logging, setting up Pino logger, using child loggers, implementing log redaction, configuring log transports, using pino-pretty for development, async logging with sonic-boom, structured JSON logging, request correlation IDs, log levels, configuring pino.final for crash handling, multi-target log transports, or Fastify observability.
fastify-production
This skill should be used when deploying Fastify to production, configuring Fastify security headers, setting up reverse proxy with Fastify, implementing graceful shutdown, configuring @fastify/helmet, @fastify/cors, @fastify/rate-limit, trustProxy settings, Kubernetes Fastify deployment, Fastify performance tuning, request timeouts, handler timeouts, return503OnClosing, prototype poisoning protection, production Fastify checklist, or hardening Fastify server.
fastify-schemas-validation
This skill should be used when writing Fastify JSON schemas, configuring Ajv validation, using fast-json-stringify serialization, defining request body/querystring/params/headers schemas, sharing schemas with addSchema and $ref, using fluent-json-schema, configuring response schemas, handling validation errors, setting up custom validators, working with Fastify schema design, coercion issues, nullable types, or allErrors configuration.
fastify-testing
This skill should be used when testing Fastify applications, using .inject() for HTTP testing, writing Fastify unit tests, testing Fastify plugins in isolation, separating app from server for testing, using light-my-request, testing route handlers, integration testing Fastify, test setup and teardown with Fastify, parallel test execution, testing Fastify hooks, or mocking in Fastify tests.
fastify-troubleshooting
This skill should be used when debugging Fastify issues, identifying Fastify anti-patterns, diagnosing common Fastify mistakes, performing Fastify error troubleshooting, investigating request.body undefined in hook, fixing decorator shared across requests, resolving hook executing twice, handling reply already sent error, debugging encapsulation not working, fixing schema validation bypassed, diagnosing serialization error 500, handling Fastify crash unhandled rejection, troubleshooting plugin not loading, resolving decorator not found, or diagnosing Fastify performance problems.
fastify-typescript
This skill should be used when using TypeScript with Fastify, configuring type providers, using @fastify/type-provider-typebox, using @fastify/type-provider-json-schema-to-ts, typing Fastify plugins, declaration merging for decorators, typing route handlers, FastifyInstance generics, FastifyRequest generics, FastifyReply generics, withTypeProvider, typing custom decorators, or Fastify TypeScript configuration.
apple-bridges
Use this skill whenever the user asks about Apple apps — Reminders, Calendar, Contacts, Notes, Mail, or tmux sessions. This includes creating/completing reminders, checking/adding calendar events, looking up contacts, reading/writing notes, sending/reading email, and capturing tmux session content. Also use this skill when the user mentions tasks, todos, scheduling, birthdays, free time slots, or end-of-day summaries. The bridges are CLI tools installed at ~/.claude/ that give Claude Code native access to these Apple apps on macOS.
codebase-navigator
Token-efficient codebase navigation skill. Use this whenever the user wants to explore, understand, or find anything in their codebase — folder structure, entry points, config files, where a feature lives, or a specific file by name/purpose. Triggers on: "navigate my codebase", "explore the project", "find the file for X", "where is the code for Y", "show me the structure", "what's the entry point", "find config files", "understand this repo". Prefer this over raw `view` calls on directories.
writing-config-files
Use this skill when you need to write configuration files in `src/config` for the Next.js app
writing-data
Use this skill when you need to structure data in `srs/data` for the Next.js app
writing-lib-functions
Use this skill when you need to write lib functions in `srs/lib` for the Next.js app
writing-page-layout
Use this skill when you need to write code for a page layout in the Next.js
writing-types
Use this skill when you need to write types and interfaces in `srs/types` for the Next.js app
writing-utils
Use this skill when you need to write utility functions for the Next.js app
next-upgrade
Upgrade Next.js to the latest version following official migration guides and codemods
claude-code-starter
Analyze a project's tech stack and generate comprehensive Claude Code configuration files (.claude/ directory with CLAUDE.md, skills, agents, rules, and commands). Use when setting up Claude Code for a new or existing repository.
setup
Initialize a project with the SpecRails workflow. Generates project-specific data files: .specrails/config.yaml, personas, memory directories, backlog config, and CLAUDE.md snippet. Does NOT copy logic files — the sr plugin already provides all agents, skills, and commands.
arbitrum-dapp-skill
Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.
tenet-api-contract
Audits API consistency: schemas, errors, status codes, pagination, versioning, and idempotency.
pdlc-add-app
添加新的前端应用
boilerplate
Generate framework-specific boilerplate code
config-generate
Generate configuration files for development tools
nextjs-skills
Next.js framework patterns, SSR/SSG, and App Router best practices
010113-polar-integration
Polar.sh payment integration — product sync, checkout, webhooks, multi-currency, MoR model, sandbox testing, and API reference.
050102-nextjs-framework
Next.js 16 framework patterns — async APIs, server components, React Compiler, routing, caching, metadata SEO, and anti-patterns.
060103-better-auth
Better Auth integration for Next.js — setup, API endpoints, client SDK, React Context provider, and Organization plugin for multi-tenant auth.
astro-accessibility
This skill should be used when implementing accessibility in Astro, WCAG compliance in Astro, Astro ARIA patterns, keyboard navigation in Astro components, screen reader support in Astro, Astro semantic HTML, focus management in Astro, accessible forms in Astro, Astro accessibility testing, axe-core integration with Astro, accessible Astro islands, alt text for Astro images, focus trapping in modals, accessible view transitions, or color contrast requirements.
astro-best-practices
This skill should be used when working on any Astro project or when the user asks about Astro best practices, conventions, or patterns. Trigger when: working on an Astro project, creating Astro components/pages/layouts, configuring astro.config, setting up Content Collections, using Content Layer API, choosing client directives (client:load/idle/visible/media/only), using server:defer or server islands, deciding between SSR and SSG, working with Astro Actions for forms, configuring middleware, using Zod schemas for content, building with TypeScript in Astro, creating API endpoints, using @astro/autoload, working with .astro files, Astro 5 or Astro 6 development.
astro-performance
This skill should be used when optimizing Astro performance, improving Core Web Vitals in Astro, fixing LCP/CLS/INP issues, auditing client directives, reducing JavaScript bundle size, configuring Astro prefetching, using server:defer for performance, optimizing Astro images, configuring Astro fonts, CSS optimization in Astro, HTML streaming, Astro build optimization, Astro CDN configuration, Route Caching API, Lighthouse audit for Astro, hydration performance, client:visible vs client:load, or Astro asset pipeline.
astro-security
This skill should be used when implementing Astro security, configuring Content Security Policy in Astro, preventing XSS in Astro, using set:html safely, handling secrets in Astro, configuring astro:env, Astro authentication patterns, Astro Session API, CSRF protection in Astro, configuring security.checkOrigin, Astro cookie security, middleware security patterns, Astro CORS configuration, protecting API endpoints, security.allowedDomains, environment variable security in Astro, import.meta.env secret leakage
astro-troubleshooting
This skill should be used when debugging Astro issues, identifying Astro anti-patterns, fixing common Astro mistakes, troubleshooting Astro errors, resolving "document is not defined" in Astro, resolving "window is not defined" in Astro, diagnosing a component not interactive, fixing content validation errors, investigating why an Astro build fails, debugging hydration issues, solving Astro 5 migration problems, fixing slug vs id errors, resolving render method not found, diagnosing Astro performance problems, reducing too much JavaScript in Astro, fixing Astro routing errors, or addressing form resubmission warnings.
fastify-best-practices
This skill should be used when working on any Fastify project or when the user asks about Fastify best practices, conventions, or patterns. Trigger when: working on a Fastify project, creating Fastify plugins, registering routes, using decorators, organizing Fastify application structure, using @fastify/autoload, creating encapsulated contexts, working with fastify-plugin, building Fastify APIs, configuring Fastify server options, using the register API, understanding Fastify encapsulation, project scaffolding with fastify-cli
fastify-hooks-lifecycle
This skill should be used when implementing Fastify hooks, understanding hook execution order, using onRequest/preParsing/preValidation/preHandler/preSerialization/onError/onSend/onResponse hooks, using onReady/onListen/onClose/onRoute/onRegister application hooks, debugging hook chain issues, adding authentication hooks, implementing request lifecycle interceptors, working with Fastify lifecycle events, or understanding when request.body is available.
fastify-logging
This skill should be used when configuring Fastify logging, setting up Pino logger, using child loggers, implementing log redaction, configuring log transports, using pino-pretty for development, async logging with sonic-boom, structured JSON logging, request correlation IDs, log levels, configuring pino.final for crash handling, multi-target log transports, or Fastify observability.
fastify-production
This skill should be used when deploying Fastify to production, configuring Fastify security headers, setting up reverse proxy with Fastify, implementing graceful shutdown, configuring @fastify/helmet, @fastify/cors, @fastify/rate-limit, trustProxy settings, Kubernetes Fastify deployment, Fastify performance tuning, request timeouts, handler timeouts, return503OnClosing, prototype poisoning protection, production Fastify checklist, or hardening Fastify server.
fastify-schemas-validation
This skill should be used when writing Fastify JSON schemas, configuring Ajv validation, using fast-json-stringify serialization, defining request body/querystring/params/headers schemas, sharing schemas with addSchema and $ref, using fluent-json-schema, configuring response schemas, handling validation errors, setting up custom validators, working with Fastify schema design, coercion issues, nullable types, or allErrors configuration.
fastify-testing
This skill should be used when testing Fastify applications, using .inject() for HTTP testing, writing Fastify unit tests, testing Fastify plugins in isolation, separating app from server for testing, using light-my-request, testing route handlers, integration testing Fastify, test setup and teardown with Fastify, parallel test execution, testing Fastify hooks, or mocking in Fastify tests.
fastify-troubleshooting
This skill should be used when debugging Fastify issues, identifying Fastify anti-patterns, diagnosing common Fastify mistakes, performing Fastify error troubleshooting, investigating request.body undefined in hook, fixing decorator shared across requests, resolving hook executing twice, handling reply already sent error, debugging encapsulation not working, fixing schema validation bypassed, diagnosing serialization error 500, handling Fastify crash unhandled rejection, troubleshooting plugin not loading, resolving decorator not found, or diagnosing Fastify performance problems.
fastify-typescript
This skill should be used when using TypeScript with Fastify, configuring type providers, using @fastify/type-provider-typebox, using @fastify/type-provider-json-schema-to-ts, typing Fastify plugins, declaration merging for decorators, typing route handlers, FastifyInstance generics, FastifyRequest generics, FastifyReply generics, withTypeProvider, typing custom decorators, or Fastify TypeScript configuration.
seo-master
Complete SEO + GEO (Generative Engine Optimization) + AEO (Answer Engine Optimization) playbook for 2026. Covers traditional search ranking, how AI engines + coding agents (ChatGPT/Bing, Claude+Claude Code/Codex/OpenClaw/Brave, Gemini/Google, Perplexity) discover/rank/cite pages, framework-aware implementation (Next.js App Router Metadata API + React SPA prerender), structured data, technical SEO, titles/meta, content strategy, IndexNow, Google + Bing Search Console, competitor analysis, the 2026 I/O + core-update changes, and a prioritized checklist. Use when optimizing any website for search engines and AI answer engines, planning content/SEO strategy, adding structured data, fixing titles/meta, getting cited by AI chatbots/agents, or setting up Search Console.
cover-letter
Generate a cover letter from a job description using Sukhrob's resume. Applies humanizer for natural tone.
create-spec
ユーザーと対話しながら機能仕様を策定し、Notion に自動でドキュメント化するスキル。「仕様を作ろう」「スペックを書いて」「仕様を詰めよう」などの指示で呼び出される。
nginx
Expert assistant for nginx — for everyday config work AND tricky debugging. Use it to set up a new site from scratch, write or refactor server/location blocks, configure a reverse proxy (proxy_pass, upstreams, load balancing), set up TLS/SSL and certificates, enable HTTP/2 or HTTP/3, wire up WebSockets, serve a SPA/Next.js/React frontend, proxy S3/MinIO, add caching/gzip/brotli, rate limiting, security headers, or real-IP behind a CDN. Also use it to review/harden an existing config, or to debug problems: a site that "won't load", is "slow on mobile", "works through VPN but not directly" (or vice-versa), returns 502/504/413, has redirect loops, or cert/SNI errors. Keywords: nginx, reverse proxy, proxy_pass, location, server block, virtual host, certbot, letsencrypt, websocket, upstream, load balancer, 502 bad gateway.
webcloner
Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.
navigation-design
Design information architecture, wayfinding systems, and navigation structures for documentation sites and applications. Use when the user asks to design navigation, plan a sitemap, structure a sidebar or menu, define content hierarchy, design breadcrumbs, or organize how users move through content. NOT for user journey maps or touchpoint flows across time (use user-journey-design). NOT for microcopy, labels, or button text in navigation (use ux-writing). NOT for Next.js routing, layouts, or parallel routes (use nextjs-development).
backend
Servers, routes, APIs, and backend architecture. Activated when Claude creates server-side code, API routes, or Express/Fastify/Next.js API handlers.
deployment
Hosting, deployment, CI/CD, and going live. Activated when Claude works with deployment configs, Dockerfiles, Vercel/Netlify configs, or deployment-related commands.
github-actions-creator
Use when the user wants to create, generate, or set up a GitHub Actions workflow. Handles CI/CD pipelines, testing, deployment, linting, security scanning, release automation, Docker builds, scheduled tasks, and any custom workflow for any language or framework.
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.
dev-owasp
Run full OWASP Top 10 security audit. Use with /dev-owasp.
project-tunnel
Expose local dev server via Cloudflare Tunnel. Use with /project-tunnel.
svg-animate
Create, edit, or remix an animated SVG file from a natural-language description. Use this whenever the user asks you to make, build, design, generate, animate, or "draw something that moves" — mascots, logos, loaders, badges, icons, characters, brand marks, or any visual asset that should animate. Always prefer this skill over hand-writing SVG strings. Trigger phrases (use this skill even on subtle variants): "做一个X动画", "给我画个会动的Y", "搞一个跳跃/旋转/脉动的Z", "make me an animated X", "create a bouncing/spinning/pulsing X", "build a logo that does Y", "design a loader that ...", "I need an SVG mascot for ...". Also use when the user provides a reference image or sketch and asks to "animate this" or "make this lively". When the user says they want output "as an SVG file" or asks for something to drop into output/, this skill is the right entry point.
svg-export
Finalize a rendered SVG for production: run SVGO optimization, add accessibility metadata (<title>, <desc>), verify viewBox sanity, and copy to a user-specified destination. Use when the user says "ship it", "optimize and export", "make it production-ready", "minify this SVG", "copy the final SVG to <path>", "export <slug> for the website", or asks for the byte-size after optimization. Always run after /svg-animate produces a passing verdict and before the SVG is committed or shared.
saas-preflight
Audit a vibe-coded or AI-generated SaaS for security and payment failures before it ships, focused on the Next.js + Supabase + Stripe stack. Use this whenever the user is about to deploy, launch, or "ship" a web app that handles authentication, user data, or payments. Trigger on phrases like "is my app secure", "can someone read other users' data", "is my Stripe integration safe", "will someone get a free subscription", "review my SaaS before launch", "I'm going to production", or any review of API routes, server actions, Supabase RLS policies, Stripe webhooks, or middleware in a SaaS, even if the user never says the word "audit". Prefer this skill over an ad-hoc code read whenever real users or real money are about to touch the code.
ss-a11y
Audit a component or page for accessibility issues and fix them
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-feedback
Add appropriate user feedback states (loading, success, error, empty) to a component or page
ss-lint
Quick automated lint — detects common design system violations in seconds
ss-review
Review UI code for design system compliance, accessibility, and best practices
ss-setup
Interactive setup wizard — guides you step-by-step to configure the design system for your project
ss-update
Update StyleSeed engine in your project — analyzes what's outdated and updates safely
ensemble-fold-prompt
Optimize CLAUDE.md for token efficiency, standards discovery, and progressive context loading (Codex skill for /ensemble:fold-prompt)
vibe-proof
Security-focused hardening for vibe-coded full-stack apps. Runs parallel audits across frontend, backend, and config layers, then fixes issues systematically by severity. Covers injection, PII exposure, missing headers, error leakage, dead code, and credential hygiene.
vibe-proof
Security-focused hardening for vibe-coded full-stack apps. Runs parallel audits across frontend, backend, and config layers, then fixes issues systematically by severity. Covers injection, PII exposure, missing headers, error leakage, dead code, and credential hygiene.
target-recon
Target discovery methodology for finding high-quality npm/PyPI/GitHub packages to audit for vulnerabilities, with evaluation criteria and search strategies.
cinematic-scroll
Build cinematic, scroll-driven websites — pinned chapter reveals, multi-depth parallax, 3D tilt, and environment-morphing backgrounds, from a single self-contained HTML section to a full Next.js release site. The motion grammar is the constant; the aesthetic is always the user's.
webflow-to-react
Convert a Webflow page or site into a pixel-perfect React implementation (Vite or Next.js) with Playwright visual-regression testing as the correctness gate. Use when the user wants to migrate, port, rebuild, clone, or recreate a Webflow design 1:1 in React, move off Webflow, or set up screenshot/visual-diff testing of a rebuilt page against the original. Triggers: "convert Webflow to React", "rebuild this Webflow site in Next.js", "pixel-perfect clone", "visual regression vs the original".
agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
content-strategy
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," or "content planning." For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit.
devops
Deploy to Vercel (frontends, serverless), Railway (backends, services), Supabase (database, auth, storage), GitHub Actions CI/CD. Use for deployments, infrastructure, monitoring, CI/CD.
email-sequence
When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," or "lifecycle emails." For in-app onboarding, see onboarding-cro.
market-sizing-analysis
This skill should be used when the user asks to "calculate TAM", "determine SAM", "estimate SOM", "size the market", "calculate market opportunity", "what's the total addressable market", or requests market sizing analysis for a startup or business opportunity.
micro-saas-launcher
Expert in launching small, focused SaaS products fast - the indie hacker approach to building profitable software. Covers idea validation, MVP development, pricing, launch strategies, and growing to sustainable revenue. Ship in weeks, not months. Use when: micro saas, indie hacker, small saas, side project, saas mvp.
premortem
Pre-mortem analysis that imagines a plan has failed, then works backward to identify causes and preventions. Use before launches, major decisions, or risky initiatives to surface hidden risks.
pricing-strategy
When the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van Westendorp,' 'willingness to pay,' or 'monetization.' This skill covers pricing research, tier structure, and packaging strategy.
scientific-critical-thinking
Evaluate research rigor. Assess methodology, experimental design, statistical validity, biases, confounding, evidence quality (GRADE, Cochrane ROB), for critical analysis of scientific claims.
security-audit
Use when reviewing code security, auditing dependencies for CVEs, checking configuration or secret security, assessing authentication and authorization patterns, identifying OWASP vulnerabilities (injection, XSS, CSRF), or addressing security concerns about implementations.
seo-audit
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health check." For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
startup-financial-modeling
This skill should be used when the user asks to "create financial projections", "build a financial model", "forecast revenue", "calculate burn rate", "estimate runway", "model cash flow", or requests 3-5 year financial planning for a startup.
tailwind-v4-shadcn
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
team
Quickly assemble a temporary AI Agent team for a task. Automatically selects the best members from .claude/agents/.
payuni
Provides PAYUNi integration overview and guides users to the appropriate skill. Use when starting PAYUNi integration, setting up environment, or needing general guidance about 統一金流.
gws-script
Manage Google Apps Script projects.
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
deploy-checklist
Generate pre-deployment checklist based on project type. Trigger: user says "部署前检查"、"发版检查"、"deploy checklist"、"预发布检查" before release.
monorepo-manager
【Monorepo管理】设计和管理 Monorepo 项目结构，包含工作空间配置、依赖管理、构建优化、版本管理。 触发时机： - 用户要求"Monorepo"、"多包管理"、"workspace配置" - 需要将多个项目合并到一个仓库 - 需要优化 Monorepo 构建性能 支持 Turborepo/Nx/Lerna/pnpm workspace。
react-service-creator
【React脚手架】生成 React 项目脚手架，支持 Next.js/Vite/CRA，包含路由、状态管理、API层、组件规范、测试配置。 触发时机： - 用户要求"创建React项目"、"React脚手架" - 新建前端项目需要标准化模板 - 需要统一团队 React 项目结构 生成完整可运行的项目骨架。
assembling-components
Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.
implementing-navigation
Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration. Use when building navigation systems or setting up routing.
formloop
Create Typeform-quality forms on-the-fly to ask a human structured questions, then resume execution when the form is submitted. Supports rich blocks (HTML mockup grids, drag-and-drop ranks, sliders with live previews) that chat and AskUserQuestion can't render. Use when you need 4+ structured inputs from a human in the loop, or when the choice is visual (designs, mockups, layouts).
benchmark-testing
Create and launch benchmark test projects to exercise vercel-plugin skill injection across realistic scenarios. Sets up isolated directories, installs the plugin, and spawns WezTerm panes running Claude Code with crafted prompts.
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
next-forge
Expert assistance for next-forge — a production-grade Turborepo template for Next.js SaaS apps. Triggers on questions about next-forge installation, setup, architecture, packages, customization, deployment, and development workflows.
nestjs-patterns
NestJS best practices, module architecture, DTOs, Guards, Interceptors, and common patterns. Use when building or reviewing NestJS backend services.
nextjs-app-router
Next.js App Router best practices, Server Components, Server Actions, routing patterns, and data fetching strategies. Use when building Next.js applications with the App Router.
prisma-workflow
Prisma ORM best practices, schema design, migrations, seeding, and query optimization for PostgreSQL. Use when working with database schemas, migrations, or Prisma queries.
prompt-engineering
Comprehensive prompt engineering framework for designing, optimizing, and iterating LLM prompts. Use when creating prompts, optimizing existing prompts, or improving AI instructions.
sumit-officeguy
Use when integrating the SUMIT / OfficeGuy Israeli billing & accounting API (api.sumit.co.il) — credit-card processing (סליקה), payments.js tokenization, recurring billing (הוראת קבע), saved-card vault, tax invoices/receipts (חשבוניות), allocation numbers (מספר הקצאה), webhooks/triggers, or CRM. Trigger on SUMIT, OfficeGuy, payments.js, SingleUseToken, סליקת אשראי, or charging cards / issuing documents from a server.
cinematic-website-prime-directive
One-line-prompt → cinematic, gorgeous, functional, well-tested, deployed website. Pre-hydrated SPA + full PWA kit + JSON-LD rich snippets + third-party integrations. React 19+Vite default (Angular optional). 100 concrete improvements grouped into 10 categories that EVERY single-prompt site build must satisfy before being marked done. Trigger whenever the user says 'make a website for X', 'build a site for X', 'rebuild X.com', or any equivalent one-liner.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
perseus-logic
Business logic, race conditions, and AI security analysis
preprod-check
Use this skill when the user asks for a pre-production readiness check, launch checklist, "is this safe to ship", "go-live review", "prod audit", or any variant of "what should I check before deploying". Performs a structured audit covering auth/multi-tenancy, input validation, billing & credit integrity, rate limiting, cost containment, external-request safety (SSRF, uploads), secrets/env, security headers/cookies, error handling, CORS, database (indexes/backups), logging & monitoring, email/password flows, legal/compliance, and operations. Adapts checks to the detected stack (Next.js, Auth.js, Stripe, Supabase, Drizzle, AI SDKs, blob storage, etc.). Produces a severity-grouped findings report and drafts patches for trivial fixes. Also invocable as `/preprod-check`.
review
Run a comprehensive multi-perspective code review on recent changes. Also triggers on 'is this secure?', 'security review', 'check for vulnerabilities', 'could this be exploited?' for security-focused review.
api-contract-audit
Static OpenAPI contract audit - endpoint drift (spec vs code), schema drift, status-code mismatch, breaking-change detection vs previous spec version, versioning consistency, security scheme alignment, deprecation markers, Richardson Maturity L0-L3 scoring. Framework auto-gen for FastAPI, NestJS, Express+swagger-jsdoc, Next.js route handlers, Django REST.
dependency-scan
Phase 1 mandatory dependency scan. Runs all 6 checks in a single invocation - route hrefs, component import consumers, shared type/utility consumers, test file references, FK references, access control policies. Returns a structured report per check with exact file paths and line numbers. Invoke once with the full list of affected entities. Never invoke for single-check queries - use Grep directly for those.
doc-audit
Static documentation drift audit - relative-link resolution, code-block syntax, CDK placeholder residuals, slash-command name match, skill-count consistency, ADR marker freshness, stack-specific doc sync (Next.js / Django / Swift).
ui-audit
Audit UI for design token compliance and component adoption. Static grep-based analysis against the sitemap's page and component files. Requires a design system with semantic tokens.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 13 templates for various tech stacks.
gws-script
Manage Google Apps Script projects.
nextjs-architect
Next.js 16 standards — App Router only, server components by default with explicit `"use client"` boundaries, server actions for mutations, streaming Suspense, edge vs node runtime, Image/Font/Metadata APIs. Pairs with react-architect. Use when scaffolding or reviewing a Next.js app or auditing server/client boundaries.
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.
ui-ux-architect
UI/UX standards — WCAG 2.2 AA, Radix + Tailwind 4 + shadcn/ui, design-token theming, mandatory loading/error/empty/success states on every async surface, mobile-first responsive, keyboard parity, contrast checked in CI. Use when designing UI components, building a design system, or auditing accessibility.
korean-privacy-terms
처리방침·이용약관 자동 생성 스킬 패키지 (v4.0). 호출 시 privacy-kr·privacy-eu·privacy-us·privacy-global 4개 하위 스킬을 번호 메뉴로 제시하고 번호 입력 즉시 해당 스킬 인터뷰로 직행. 한국 PIPA + EU GDPR + US CCPA/CPRA 대응.
privacy-eu
EU 사용자 대상 서비스용 Privacy Notice·Terms of Service·Consent Modal·Cookie Banner 자동 생성. GDPR (Regulation 2016/679) + ePrivacy Directive + Consumer Rights Directive 2011/83 + Digital Services Act + Digital Content Directive + Unfair Terms Directive 반영. 영문 인터뷰로 진행.
privacy-global
한국+EU 병기 처리방침·이용약관 자동 생성. 한국 본사가 EU 사용자까지 대상으로 서비스할 때 사용. 한국어(PIPA)·영문(GDPR) 두 세트 문서를 동시 생성하고, Footer에 언어·관할 전환 링크 자동 삽입.
privacy-kr
한국 서비스용 처리방침·이용약관·회원가입 동의 모달·쿠키 배너 자동 생성. 개인정보보호법 §30, 2025.4.21 작성지침, 2026.3 개정법, 공정위 전자상거래 표준약관 10023호 반영. Next.js 13~16 프로젝트 대상.
privacy-us
미국 CCPA/CPRA + 주요 주법(VCDPA·CPA·CTDPA·UCPA·ICDPA·KCDPA·RIDPA) 기반 Privacy Policy 자동 생성. 2026.1.1 CPPA 갱신 규정, Sensitive Personal Information, Do Not Sell/Share, ADMT 공개, GPC 브라우저 신호 대응. 캘리포니아 거주자 서비스·100K records 초과 서비스 대상.
core
Extraction schemas, QC criteria, provider routing rules, and page estimation for the reading-assistant plugin
nextjs
Building and reviewing Next.js applications — the App Router, Server and Client Components, rendering and caching (use cache, PPR, streaming), data fetching, Route Handlers, Server Actions and their security rules, and the Proxy (formerly Middleware) layer. Use when building, reviewing, or debugging Next.js apps, routing, caching, or server actions. Excludes React fundamentals (see react) and the Node.js runtime (see nodejs). Competence skill anchored on official Next.js docs (v16.x) — no first-party certification.
nodejs
Building and reviewing Node.js applications and services — the event loop and async patterns, streams and buffers, the module system (ESM/CJS), packaging and the toolchain, error handling and diagnostics, and HTTP services with security. Use when writing, reviewing, or debugging Node.js code, CLIs, services, or AWS Lambda handlers. Stays on the Node runtime; excludes React (see react), Next.js (see nextjs), and TypeScript typing (see typescript). Competence skill mapped to the retired OpenJS JSNAD/JSNSD curriculum.
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.
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.
agent-developing-agents
AI agent development standards including frontmatter structure, naming conventions, tool access patterns, model selection, and reference documentation structure
docs-applying-content-quality
Universal markdown content quality standards for active voice, heading hierarchy, accessibility compliance (alt text, WCAG AA contrast, screen reader support), and professional formatting. Essential for all markdown content creation across docs/, web sites, plans/, and repository files. Auto-loads when creating or editing markdown content.
docs-applying-diataxis-framework
Diátaxis documentation framework for organizing content into four categories - tutorials (learning-oriented), how-to guides (problem-solving), reference (technical specifications), and explanation (conceptual understanding). Essential for creating and organizing documentation in docs/ directory.
docs-creating-accessible-diagrams
WCAG-compliant Mermaid diagrams using verified accessible color palette. Use when creating diagrams, flowcharts, or any color-dependent visualizations requiring accessibility compliance for color blindness.
docs-creating-by-example-tutorials
Comprehensive guide for creating by-example tutorials - code-first learning path with 75-85 heavily annotated examples achieving 95% language coverage. Covers five-part example structure, annotation density standards (1.0-2.25 comments per code line PER EXAMPLE), self-containment rules, and multiple code blocks for comparisons. Essential for creating by-example tutorials for programming languages on educational platforms
docs-creating-in-the-field-tutorials
Comprehensive guide for creating in-the-field production implementation guides - production-ready code with 20-40 guides following standard library first principle, framework integration, and enterprise patterns. Essential for creating production tutorials for programming languages on educational platforms
docs-validating-factual-accuracy
Universal methodology for verifying factual correctness in documentation using WebSearch and WebFetch tools. Covers command syntax verification, version checking, code example validation, API correctness, confidence classification system ([Verified], [Error], [Outdated], [Unverified]), source prioritization, and update frequency rules. Essential for maintaining factual accuracy in technical documentation and educational content
docs-validating-links
Comprehensive link validation methodology for markdown links including format requirements, path validation, broken link detection, external link verification, and checker implementation patterns
docs-validating-software-engineering-separation
Validates software engineering documentation separation — ensures docs/explanation/ style guides focus on repository-specific conventions only (not generic language tutorials), and that every programming language README has proper prerequisite statements linking to external learning resources.
grill-me
Interview the user relentlessly about a plan or design, presenting choices one at a time until shared understanding is reached. Resolves every branch of the decision tree. Use when the user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
link-workspace-packages
Link workspace packages in monorepos (npm, yarn, pnpm, bun). USE WHEN: (1) you just created or generated new packages and need to wire up their dependencies, (2) user imports from a sibling package and needs to add it as a dependency, (3) you get resolution errors for workspace packages (@org/*) like "cannot find module", "failed to resolve import", "TS2307", or "cannot resolve". DO NOT patch around with tsconfig paths or manual package.json edits - use the package manager's workspace commands to fix actual linking.
monitor-ci
Monitor Nx Cloud CI pipeline and handle self-healing fixes. USE WHEN user says "monitor ci", "watch ci", "ci monitor", "watch ci for this branch", "track ci", "check ci status", wants to track CI status, or needs help with self-healing CI fixes. Prefer this skill over native CI provider tools (gh, glab, etc.) for CI monitoring — it integrates with Nx Cloud self-healing which those tools cannot access.
nx-generate
Generate code using nx generators. INVOKE IMMEDIATELY when user mentions scaffolding, setup, structure, creating apps/libs, or setting up project structure. Trigger words - scaffold, setup, create a ... app, create a ... lib, project structure, generate, add a new project. ALWAYS use this BEFORE calling nx_docs or exploring - this skill handles discovery internally.
nx-import
Import, merge, or combine repositories into an Nx workspace using nx import. USE WHEN the user asks to adopt Nx across repos, move projects into a monorepo, or bring code/history from another repository.
nx-run-tasks
Helps with running tasks in an Nx workspace. USE WHEN the user wants to execute build, test, lint, serve, or run any other tasks defined in the workspace.
nx-workspace
Explore and understand Nx workspaces. USE WHEN answering questions about the workspace, projects, or tasks. ALSO USE WHEN an nx command fails or you need to check available targets/configuration before running a task. EXAMPLES: 'What projects are in this workspace?', 'How is project X configured?', 'What depends on library Y?', 'What targets can I run?', 'Cannot find configuration for task', 'debug nx task failure'.
plan-creating-project-plans
Comprehensive project planning standards for plans/ directory including folder structure (ideas.md, backlog/, in-progress/, done/), stage-aware naming convention (backlog/done use YYYY-MM-DD__identifier/, in-progress uses identifier/ with no date prefix), five-document file organization (README.md, brd.md, prd.md, tech-docs.md, delivery.md for multi-file default; single README.md for trivially-small single-file exception), BRD/PRD content-placement rules, Gherkin acceptance criteria, and the mandatory structured multiple-choice grilling gates (pre-write and post-write) for resolving design decisions with the user. Essential for creating structured, executable project plans.
plan-writing-gherkin-criteria
Guide for writing Gherkin acceptance criteria using Given-When-Then syntax for testable requirements. Covers scenario structure, background blocks, scenario outlines with examples tables, common patterns for authentication/CRUD/validation/error handling, and best practices for clear testable specifications. Essential for writing user stories and plan acceptance criteria
readme-writing-readme-files
README quality standards for engaging, accessible, scannable content including problem-solution hooks, plain language (no unexplained jargon), acronym context, paragraph limits (≤5 lines), benefits-focused language, visual hierarchy, and progressive disclosure. Essential for creating effective README files that welcome and guide users.
repo-applying-maker-checker-fixer
Three-stage content quality workflow pattern (Maker creates, Checker validates, Fixer remediates) with detailed execution workflows. Use when working with content quality workflows, validation processes, audit reports, or implementing maker/checker/fixer agent roles.
repo-assessing-criticality-confidence
Universal classification system for checker and fixer agents using orthogonal criticality (CRITICAL/HIGH/MEDIUM/LOW importance) and confidence (HIGH/MEDIUM/FALSE_POSITIVE certainty) dimensions. Covers priority matrix (P0-P4), execution order, dual-label pattern for verification status, standardized report format, and domain-specific examples. Essential for implementing checker/fixer agents and processing audit reports
repo-defining-workflows
Workflow pattern standards for creating multi-agent orchestrations including YAML frontmatter (name, description, tags, status, agents, parameters), execution phases (sequential/parallel/conditional), agent coordination patterns, and Gherkin success criteria. Essential for defining reusable, validated workflow processes.
repo-generating-validation-reports
Guidelines for generating validation/audit reports with UUID chains, progressive writing, and UTC+7 timestamps
repo-practicing-trunk-based-development
Trunk Based Development workflow - all development on main branch with small frequent commits, minimal branching, and continuous integration. Covers when branches are justified (exceptional cases only), commit patterns, feature flag usage for incomplete work, environment branch rules (deployment only), and AI agent default behavior (assume main). Essential for understanding repository git workflow and preventing unnecessary branch proliferation
repo-understanding-repository-architecture
Six-layer governance hierarchy (Vision → Principles → Conventions → Development → Agents → Workflows). Use when understanding repository structure, tracing rules to foundational values, explaining architectural decisions, or navigating layer relationships.
swe-developing-applications-common
Common software development workflow patterns shared across all language developer agents
swe-developing-e2e-test-with-playwright
Playwright E2E testing standards from authoritative docs/explanation/software-engineering/automation-testing/tools/playwright/ documentation
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.
swe-programming-clojure
Clojure coding standards from authoritative docs/explanation/software-engineering/programming-languages/clojure/ documentation
swe-programming-csharp
C# coding standards from authoritative docs/explanation/software-engineering/programming-languages/c-sharp/ documentation
swe-programming-dart
Dart coding standards from authoritative docs/explanation/software-engineering/programming-languages/dart/ documentation
swe-programming-elixir
Elixir, Phoenix Framework, and Phoenix LiveView coding standards from authoritative docs/explanation/ documentation
swe-programming-fsharp
F# coding standards from authoritative docs/explanation/software-engineering/programming-languages/f-sharp/ documentation
swe-programming-golang
Go coding standards from authoritative docs/explanation/software-engineering/programming-languages/golang/ documentation
swe-programming-java
Java, Spring Framework, and Spring Boot coding standards from authoritative docs/explanation/ documentation
swe-programming-kotlin
Kotlin coding standards from authoritative docs/explanation/software-engineering/programming-languages/kotlin/ documentation
swe-programming-python
Python coding standards from authoritative docs/explanation/software-engineering/programming-languages/python/ documentation
swe-programming-rust
Rust coding standards from authoritative docs/explanation/software-engineering/programming-languages/rust/ documentation
swe-programming-typescript
TypeScript coding standards from authoritative docs/explanation/software-engineering/programming-languages/typescript/ documentation
speckit.constitution
Governance Manager - Thiết láºp & quản lý Constitution (Source of Law).
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
web-perf
Diagnose and fix web performance through a disciplined measure-first loop. Forces evidence-based optimization: measure → identify bottleneck → fix ONE thing → re-measure → repeat. Prevents guessing. Use when pages load slowly, user mentions performance, LCP, INP, CLS, lighthouse, bundle size, or "make it faster".
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.
shaders
Guides building GPU-accelerated visual effects in React / Next.js with the `shaders` npm package from shaders.com — declarative `<Shader>` component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (`auto-animate`, `mouse-position`, `map`), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cursor-trail" hero, mentions shaders.com, the `shaders/react` package, the `<Shader>` component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.
react
This skill is loaded by `frontend-developer` when:
hook-generator
Generate 10 short-form video hooks across proven frameworks (curiosity gap, contrarian, before/after, story open, callout, list, question). Each hook is tagged with its framework and rationale.
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.
recall-ai-integration
Meeting-bot vendor integration knowledge — Recall.ai (bot dispatch + webhooks) plus closely-coupled ElevenLabs surfaces (Scribe as Recall's transcription provider, Voice as the TTS swap target). Use when the user asks to touch, extend, debug, or explain anything that calls the Recall.ai or ElevenLabs API or handles their webhooks. Fires on Recall.ai terms (RECALL_API_KEY, in_call_recording, output_audio, send_chat_message, transcript.data, bot.in_call_recording, bot.in_waiting_room, bot.call_ended, bot.fatal, Svix signature, realtime endpoint, sandbox region, us-west-2.recall.ai), ElevenLabs terms (Scribe, Voice, elevenlabs_streaming, elevenlabs_async, scribe_v2, ELEVENLABS_API_KEY, xi-api-key, voice_id, eleven_multilingual_v2), and on any new code that dispatches a bot, pushes audio, sends a chat message, or ends a bot. Enforces docs→fixture→probe→code, tri-site nesting consistency, doc-check date stamps at every call site, spec-faithful webhook fixtures with at least two events, and your repo's standard qua
doc-coauthoring
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
pr-review
Pre-landing PR review. Analyses the current branch diff against the base branch for structural issues — SQL safety, LLM trust boundary, race conditions, shell injection, enum completeness, scope drift. Domain-agnostic. Adapted from Garry Tan's gstack /review (garrytan/gstack); role-catalog framing stripped; MARVIN's REVIEW.md honoured.
security-audit
OWASP Top 10 + STRIDE threat model pass on the current codebase, or on the current branch diff. Emits a findings report with severity, confidence, and exploit scenario. Use alongside Claude Code's built-in /security-review for spot checks, and whenever the diff touches auth, credentials, tool policy, shell execution, or data persistence. Adapted from Garry Tan's gstack /cso (garrytan/gstack); role framing stripped.
skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
systematic-debugging
Use when encountering any bug, test failure, or unexpected behaviour, BEFORE proposing fixes. Four-phase root-cause workflow with an Iron Law — no fixes without root cause investigation first. Merges patterns from Jesse Vincent's Superpowers (obra/superpowers) and Garry Tan's gstack (garrytan/gstack).
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code. Enforces RED-GREEN-REFACTOR with an Iron Law — no production code without a failing test first. Ported from Jesse Vincent's Superpowers plugin (obra/superpowers) under its open-source terms; adapted for MARVIN's single-assistant constraints.
paper2code
Converts an arxiv paper into a minimal, citation-anchored Python implementation. Trigger when user runs /paper2code with an arxiv URL or paper ID, says "implement this paper", or pastes an arxiv link asking for implementation. Flags all ambiguities honestly. Never invents implementation details not stated in the paper.
claude-supervision
Use when the user wants to delegate work to the local Claude Code CLI (`claude --print`, `claude --bg`, `claude ultrareview`) — substantive tasks, multi-turn resume, structured output, multi-agent code review, background sessions — and then independently verify what Claude did. Useful from Codex / Kimi / any agent that wants to hand work to Claude Code and inspect the result. Wraps the CLI as PowerShell scripts with deadlock-safe async I/O, timeout, native JSONL recovery, and on-disk artifacts.
codex-supervision
Use when the user wants Claude to delegate work to the local Codex CLI — code review, adversarial review, or substantive rescue tasks — and then independently verify what Codex did. Works in Claude Desktop (no plugin system required); wraps codex exec as PowerShell scripts and keeps run artifacts on disk.
kimi-supervision
Use when the user wants Codex to delegate work to local Kimi Code, supervise its progress, inspect intermediate/native artifacts, continue a native Kimi session, and verify Kimi's results instead of trusting only the flattened final output.
authos-web-integration
Integrate AuthOS into browser, React, Vue, or plain TypeScript applications using @drmhse/sso-sdk and the AuthOS React/Vue adapters. Use when adding OAuth redirects, password login, magic links, passkeys, MFA callback handling, token refresh, or frontend session state.
chrome-integration
Use for browser-based web development, visual UI checks, container dev servers, host Chrome, and the browser CLI inside Agent Workcell sandboxes.
reverse-seo-traffic
Alavancar tráfego orgânico em ATIVOS PRÓPRIOS — páginas de produto, blogs e sites do usuário (stack Next.js, Astro, WordPress, HTML estático). Replica método mostrado em vídeo SEO usando Semrush MCP + Claude Code para engenharia reversa de competidores, mineração de clusters semânticos PT-BR/EN, e construção de páginas de cluster + free-tool com email gate. Use quando user disser "aumentar tráfego do meu site", "ranquear minha página de produto", "criar conteúdo SEO para meu blog", "encontrar palavras-chave", "engenharia reversa SEO competidor", "construir cluster semântico", "ferramenta grátis lead gen", "Semrush MCP", "growth orgânico", "/reverse-seo", "/seo-cluster", "ranquear pt-br", "rank en", "hreflang multi-idioma".
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.
spec-writer
Generate structured software specifications for features, bug fixes, and products. Use when the user wants to create a spec, PRD, feature brief, requirements document, or when starting any new implementation that needs a specification first. Invoke via /spec-writer or when the user says "write a spec", "spec this out", "create a spec", "I need a spec for...", or describes a feature they want to build. Produces adaptive-complexity specs with Job Stories, Gherkin acceptance criteria, and three-tier boundaries. Output is a markdown file ready for agent execution or human review.
babysit
Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.
split-to-prs
Split current work into small reviewable PRs. Use when the user asks to split a chat, set of changes, branch, or PR.
docker-templates
Docker multi-stage build templates, image security, and docker-compose patterns. TRIGGER when: writing a Dockerfile, composing services, or hardening a container image. SKIP: CI pipeline definitions (use github-actions-template); runtime monitoring (use monitoring-observability).
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.
specdd
Spec-driven development orchestrator that turns vague, top-of-mind feature requests into production-grade specifications before any code is written. ALWAYS use this skill whenever the user describes a feature, change, capability, screen, flow, or new component in plain language — even if they don't explicitly ask for a spec. Triggers on phrases like "build me", "make me", "add a feature", "I want to", "help me create", "implement", "let's build", "I need a", "can you make", "create a screen/page/component", or any new-feature request that lacks complete requirements (missing user stories, acceptance criteria, edge cases, error/empty/loading states, accessibility, or non-functional requirements). Interviews the user to fill gaps, applies UX/UI common sense, produces a structured spec + plan + tasks, then implements against the spec. Use this BEFORE writing any code for non-trivial features. Skip only for true one-liners (rename a variable, fix a typo, answer a research question) or work that is purely investig
dev-start
Start dev server in background
010111-http-caching
Three-tier caching — browser, runtime, and distributed cache. Pipeline batching, atomic transactions, invalidation, and multi-language cache keys.
react-doctor
React/Next.js anti-pattern denetimi — state management, effects, re-render performansı, mimari sınırlar, client-side security ve accessibility eksikleri için yapılandırılmış audit. Mevcut bir React/Next.js yüzeyinde kod yazmadan ÖNCE veya /ulak-frontend war room'u sırasında "neyi yanlış yapıyoruz" sorusunu somut kontratlarla cevaplar. typescript-nextjs rule-pack'i frontend kalite-barında genişletir.
saas-scaffolder
Materialize a full-stack SaaS project skeleton with Ulak OS governance pre-wired (Next.js + TypeScript + Supabase + optional payment + i18n + RLS + CI + tests + Traefik deploy). Generates a shippable starter that embeds 23 sector packs + 8 rule packs + 79 anti-patterns from commit 1. Use when starting a new SaaS product OR when /ulak-scaffold command dispatches.
project-stats
Generate a comprehensive project statistics report with language breakdown, git activity, test coverage, dependencies, and infrastructure detection. Automatically compares with the previous report to show growth trends and deltas. Use this skill whenever the user asks for project statistics, project report, project health, codebase overview, how big is the project, project summary, project metrics, project status report, repo stats, repo report, monorepo stats, lines of code, LOC count, code metrics, health check report — even if they just say "stats", "relatorio", "relatório do projeto", "estatísticas", "como está o projeto", "tamanho do projeto", or "project overview". This skill works on ANY git project regardless of language or framework.
cuit-instrument
Wire CUIT into a customer app end-to-end. Auto-detects framework + state lib, mounts window.__cuitDebug, installs the recorder bridge, sets up the GitHub Action, and verifies with a round-trip test session. Use this when starting CUIT against a new codebase.
craft-project-setup
Scaffold Claude Code configuration specifically for Craft CMS projects. Generates CLAUDE.md and .claude/rules/ files tailored to the project type (plugin, site, module, hybrid, or monorepo). Only for Craft CMS projects — not for Next.js, Laravel, or other frameworks. Triggers on: 'set up Claude for this Craft project', 'initialize CLAUDE.md', 'scaffold project config', 'configure Claude Code for Craft', 'create CLAUDE.md', 'missing CLAUDE.md', 'does this project have a CLAUDE.md', 'bootstrap Claude config', 'new Craft project setup', 'onboard a developer to this Craft project', 'generate .claude/rules', 'set up coding standards config'. Also triggers when starting work in a new Craft CMS project that lacks a CLAUDE.md file. Detects project type from composer.json (craft-plugin, craft-module, project), .ddev/config.yaml, templates/, config/project/, and modules/. NOT for installing Craft CMS itself, creating DDEV environments, writing PHP code, building templates, or content modeling. NOT for non-Craft project
saas-analytics
SaaS uygulaması için PostHog analytics ve ürün analizi kur. Event tracking, kullanıcı tanımlama, feature flag, session replay, funnel analizi ve gizlilik uyumlu yapılandırma. Bu skill'i kullanıcı analytics, PostHog, event tracking, kullanıcı davranışı, feature flag, A/B test, dönüşüm analizi veya metrik takibi ile ilgili bir şey istediğinde kullan. "Analytics kur", "kullanıcıları takip et", "PostHog ekle", "feature flag yap" gibi ifadeler tetikler.
saas-api-security
SaaS uygulaması için API güvenlik katmanı kur. Rate limiting, plan bazlı erişim kontrolü, input validation, hata yönetimi, CORS ve health check. Bu skill'i kullanıcı API güvenliği, rate limiting, yetkilendirme, input doğrulama, hata yönetimi veya API koruması ile ilgili bir şey istediğinde kullan. "API'yi koru", "rate limit ekle", "plan kontrolü yap", "input validation" gibi ifadeler tetikler.
saas-auth
SaaS uygulaması için kimlik doğrulama ve oturum yönetimi kur. Google OAuth, Magic Link, e-posta/şifre veya bunların kombinasyonlarını yapılandır. Bu skill'i kullanıcı login sistemi, kayıt akışı, oturum yönetimi, korumalı route'lar veya kullanıcı profili ile ilgili bir şey istediğinde kullan. "Giriş sayfası yap", "auth ekle", "kullanıcı sistemi kur", "login/register" gibi ifadeler tetikler.
saas-database
SaaS uygulaması için Supabase veritabanı altyapısını kur. Proje oluşturma, şema tasarımı, Row Level Security (RLS), migration, connection pooling, realtime ve edge function yapılandırması. Bu skill'i kullanıcı veritabanı, Supabase, tablo, migration, RLS, şema veya veri modeli ile ilgili bir şey istediğinde kullan. "Veritabanı kur", "tablo oluştur", "Supabase ayarla", "migration yap" gibi ifadeler tetikler.
saas-deployment
SaaS uygulamasını production'a taşı. Vercel, Railway veya Fly.io ile deployment, domain yapılandırması, SSL, ortam değişkenleri, CI/CD, izleme ve operasyonel hazırlık. Bu skill'i kullanıcı deploy, yayınlama, production, hosting, domain, SSL, CI/CD, monitoring veya "siteyi canlıya al" ile ilgili bir şey istediğinde kullan. "Deploy et", "yayınla", "canlıya al", "Vercel'e koy", "domain bağla" gibi ifadeler tetikler.
saas-email
SaaS uygulaması için transactional e-posta altyapısı kur. Resend veya Mailgun yapılandırması, DNS kayıtları (SPF, DKIM, DMARC), e-posta şablonları ve spam'dan kaçınma stratejisi. Bu skill'i kullanıcı e-posta gönderimi, DNS ayarları, spam sorunu, magic link, e-posta şablonu veya e-posta servisi ile ilgili bir şey istediğinde kullan. "E-postalar spam'a düşüyor", "DNS ayarla", "hoş geldin e-postası yap" gibi ifadeler tetikler.
saas-landing-seo
SaaS uygulaması için dönüşüm odaklı landing page tasarla ve arama motoru optimizasyonu (SEO) kur. Hero, pricing, FAQ, testimonials gibi bileşenler, metadata, sitemap, robots.txt, Open Graph, yapısal veri ve blog sistemi. Bu skill'i kullanıcı landing page, ana sayfa, fiyatlandırma sayfası, SEO, sitemap, Open Graph, blog veya "daha fazla müşteri çekmek" istediğinde kullan. "Güzel bir ana sayfa yap", "SEO ayarla", "pricing section ekle", "blog kur" gibi ifadeler tetikler.
saas-launcher
Sıfırdan production-ready bir SaaS uygulaması kur. Ödeme, kimlik doğrulama, veritabanı, e-posta, landing page, SEO ve API güvenliği dahil tüm katmanları kapsar. Kullanıcı SaaS kurmak, web uygulaması başlatmak, AI aracı oluşturmak veya online ürün çıkarmak istediğinde bu skill'i kullan — "startup kur", "proje başlat", "uygulama yap" gibi ifadeler dahil. Mevcut bir projeye tek bir katman eklemek (sadece ödeme, sadece auth vb.) için ilgili alt skill'e yönlendir.
saas-legal
SaaS uygulaması için yasal uyumluluk altyapısı kur. KVKK ve GDPR uyumluluğu, gizlilik politikası, kullanım koşulları, çerez onayı, aydınlatma metni ve veri işleme süreçleri. Bu skill'i kullanıcı yasal gereklilikler, KVKK, GDPR, gizlilik politikası, kullanım koşulları, çerez onayı, kişisel veri veya uyumluluk ile ilgili bir şey istediğinde kullan. "Gizlilik politikası yaz", "KVKK uyumlu yap", "çerez onayı ekle", "yasal sayfaları hazırla" gibi ifadeler tetikler.
saas-payments
SaaS uygulaması için ödeme ve abonelik sistemi kur. Stripe veya Lemon Squeezy ile checkout, webhook, abonelik yönetimi, fiyatlandırma planları ve müşteri portalı yapılandır. Bu skill'i kullanıcı ödeme, abonelik, fiyatlandırma, Stripe, gelir, plan, subscription veya checkout ile ilgili bir şey istediğinde kullan. "Para al", "ödeme sistemi kur", "pricing yap", "abonelik ekle" gibi ifadeler tetikler.
saas-storage
SaaS uygulaması için Supabase Storage ile dosya depolama altyapısı kur. Bucket yapılandırması, RLS ile dosya güvenliği, dosya yükleme, görsel optimizasyonu ve plan bazlı depolama limitleri. Bu skill'i kullanıcı dosya yükleme, görsel, depolama, storage, upload veya profil fotoğrafı ile ilgili bir şey istediğinde kullan. "Dosya yükleme ekle", "profil fotoğrafı yükle", "storage kur" gibi ifadeler tetikler.
saas-testing
SaaS uygulaması için test stratejisi kur. Vitest ile birim test, Playwright ile E2E test, API route testi, webhook mock, Stripe test modu ve CI entegrasyonu. Bu skill'i kullanıcı test, test yazma, E2E, birim test, Playwright, Vitest, coverage veya kalite güvencesi ile ilgili bir şey istediğinde kullan. "Test yaz", "test kur", "E2E ekle", "CI'da test çalıştır" gibi ifadeler tetikler.
fuck-you-and-stop-charging-for-sloppy-design-agents
Full-blown AI design agent that extracts your design taste AND builds production-quality UI from it. Use when the user asks to "extract my design taste", "create a taste spec", "design a landing page", "build a UI", "design my app", "build a website", "code a dashboard", "design taste extraction", "taste spec then build", "design and code", "build UI from my references", "design agent". Two modes - (1) extract taste from references/URLs into a 12-section spec, (2) then build any UI using that spec as the design system. Handles landing pages, SaaS dashboards, mobile apps, campaign pages, portfolios, and any frontend component. Make sure to use this skill whenever someone wants to extract design taste, build UI from references, or design and code any interface.
clone
Clone a GitHub repo as a starting skeleton — strips its git history, re-inits, generates CLAUDE.md for the detected stack, optionally renames variables/namespaces to your project
deploy
Deploys your app to DigitalOcean or AWS — generates Nginx config, SSL, systemd service, and step-by-step server setup for Ubuntu/CentOS
design
Generate a DESIGN.md from any reference website using designmd.me, then apply its design tokens (colors, typography, spacing) to your project — CSS variables, Tailwind config, theme files
saas
SaaS product wizard — captures preferences (auth, billing, multi-tenancy, free tier), generates phase plan, pipes design decisions into UI/UX Pro Max, hands the rest to GSD for execution
skill-bootstrap
Detects your project stack, installs the right Claude Code skills, and surfaces built-in Claude Code capabilities you might not know exist
webapp
Full-stack web app wizard — Angular/Node, React/Node, Vue/Node — with optional deployment to AWS or DigitalOcean
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
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-performance
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.
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.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
beforemerge-fullstack-architecture-review
Code review rules for DRY/SOLID layered architecture in fullstack TypeScript applications. Covers dependency direction, service/repository patterns, factory injection, domain entities, security hardening, performance optimization, and code quality patterns. Use this skill when reviewing, writing, or refactoring fullstack TypeScript code with layered architecture — especially before merging pull requests. Triggers on tasks involving code review, architecture review, SOLID principles, clean architecture, or quality checks for fullstack TypeScript projects.
beforemerge-nextjs-review
Comprehensive code review rules for Next.js, React, and TypeScript applications. Covers security anti-patterns, performance pitfalls, architecture mistakes, and code quality issues. Use this skill when reviewing, writing, or refactoring Next.js/React code — especially before merging pull requests. Triggers on tasks involving code review, PR review, security audit, performance review, or quality checks for React/Next.js/TypeScript projects.
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).
beforemerge-supabase-review
Comprehensive code review rules for Supabase applications including RLS security, auth patterns, query performance, migration workflows, and type safety. Use this skill when reviewing, writing, or refactoring Supabase-backed code — especially before merging pull requests. Triggers on tasks involving code review, PR review, security audit, performance review, or quality checks for Supabase/PostgreSQL projects.
beforemerge-wordpress-review
Comprehensive code review rules for WordPress plugin and theme development. Covers security anti-patterns, performance pitfalls, architecture mistakes, and code quality issues. Use this skill when reviewing, writing, or refactoring WordPress/PHP code — especially before merging pull requests. Triggers on tasks involving code review, PR review, security audit, performance review, or quality checks for WordPress projects.
exa-code-search
Code search using Exa. Finds real code snippets, API docs, and examples from GitHub, StackOverflow, and technical docs. Use when searching for code examples, API syntax, library documentation, or debugging help.
lictor-security-check
Pre-release security audit for AI-built web apps. Scans the user's project for 7 common bugs that get vibe-coded SaaS apps embarrassed in public — leaked API keys, unprotected user-data endpoints, open databases, the wrong kind of admin-page lock, exposed config files, dangerous AI chat setups, and over-permissive cross-origin settings. Writes a plain-English markdown report. No jargon.
forge-clarify
Clarify and validate Forge issues before planning — reproduce bugs via browser, verify UX expectations for features, capture evidence screenshots. Use this skill after triage (confirmed status) to ensure the issue is well-understood before writing an implementation plan. Triggers on: /forge-clarify, clarifying issues, reproducing bugs, validating UX, verifying issue understanding. Also use when the pipeline needs to move an issue from confirmed to clarified status.
forge-code
Implement code changes for Forge issues. Use this skill whenever approved issues need to be coded — creates branch, follows the plan, implements changes, builds, reviews, commits, and pushes. Triggers on: /forge-code, coding issues, implementing approved issues, writing code for an issue, building features from a plan. Also use when the pipeline needs to move an issue from approved to deploying.
forge-fix
Fix rejected Forge issues based on review or QA feedback. Use this skill when an issue has been reopened with rejection comments — reads the feedback, applies a scoped fix, builds, re-tests, and pushes. Triggers on: /forge-fix, fixing rejected issues, addressing review feedback, fixing QA failures, resolving reopen comments, fixing CI build failures. Also use when the pipeline needs to move an issue from reopen back to deploying.
forge-plan
Write implementation plans for confirmed Forge issues. Use this skill whenever an issue needs a plan before coding begins — exploring the codebase, identifying affected files, and writing step-by-step implementation instructions into the issue's plan field. Triggers on: /forge-plan, planning issues, writing implementation plans, exploring codebase for an issue, preparing issues for development, moving issues from confirmed to approved. Also use when the pipeline needs to advance an issue from confirmed status.
forge-release
Merge approved issue code to production branch and trigger deployment. Use this skill when an issue has been approved at staging and needs to be released — squash-merges the ISS-* feature branch to the production branch, triggers Coolify deploy, and closes the issue. Triggers on: /forge-release, releasing an issue, merging to production, deploying to production. Also use when the pipeline needs to move an issue from released to closed.
forge-review
Review code changes for Forge issues. Use this skill for independent code review with fresh context — checks diff against project conventions, finds bugs, security issues, and consistency problems. Triggers on: /forge-review, reviewing code, checking a diff, code review for an issue, reviewing PR changes. Used as a subagent by forge-code during the build+review step (before push), or standalone for manual review.
forge-staging
Merge feature branch to baseBranch for staging deployment. Triggered when an issue reaches pass status — merges the ISS-* branch to the project's baseBranch and sets status to staging. Triggers on: /forge-staging, merging to staging, promoting to staging, deploying to staging. Also use when the pipeline needs to move an issue from pass to staging.
forge-test
QA test Forge issue changes against preview deployments. Use this skill to test like a human QA — hitting the preview backend API and navigating the preview frontend to verify acceptance criteria are met. Triggers on: /forge-test, testing an issue, QA testing, verifying changes on preview, checking if acceptance criteria pass. Also use when the pipeline needs to verify changes at testing status.
forge-triage
Triage and validate Forge project management issues before development begins. Use this skill whenever issues need to be reviewed for completeness, classified by complexity, or assigned category/priority. Triggers on: /forge-triage, triaging issues, validating issue quality, classifying issue complexity, setting issue priority, reviewing new issues, checking if issues are actionable. Also use when the pipeline needs to move an issue from open to confirmed status. Even if the user just says 'triage this' or 'check if this issue is ready', use this skill.
closing
Switch to freelance closing mode — mission qualification, scoping, quoting, and client relationship management
coding-standards
Invoke when implementing features, writing code, or reviewing code quality. Contains project-specific naming conventions, error handling patterns, import style, and deviations from standard practices.
memory-palace
Reproducible kit for mounting Henry Heffernan's 3D-CRT-monitor + Win98-desktop portfolio template (`/palace`) on top of an existing Next.js site. Ships drop-in build scripts, config snippets (webpack / Next / Vercel / tsconfig), placeholder showcase pages, NOTICE templates, a post-deploy DevTools verification snippet, and the 13-gotcha PLAYBOOK that catalogues every way this rollout breaks in production. Use when the user wants a /palace-style 3D portfolio with a clickable retro monitor mounted on their own site, when integrating a vendored CRA app inside a Next.js host, or when debugging "same-origin iframe but Chrome treats it as cross-origin", iframe stuck on broken-document, framer-motion type drift on Vercel, COOP/X-Frame-Options blocking own-iframe, or font fallback inside the inner OS.
win98-paper-theme
Apply the bingranyou.com Win98 paper site-wide theme to a Next.js + Tailwind site so non-palace routes share the same visual language as /palace. Use when porting palace typography, palette, CJK fallback, paper-smudge overlay, or raised Win98 CTA styling to the front door, About, blog, or other routes.
feature-sliced-design
Official Feature-Sliced Design (FSD) v2.1 skill for applying the methodology to frontend projects. Use when the task involves organizing project structure with FSD layers, deciding where code belongs, placing static assets (images, icons, fonts, PDFs), grouping closely related slices, defining public APIs and import boundaries, resolving cross-imports or evaluating the @x pattern, deciding whether to create or remove an entity, evaluating whether the entities layer is needed at all, deciding whether logic should remain local or be extracted, migrating from FSD v2.0 or a non-FSD codebase, integrating FSD with frameworks (Next.js App Router and Pages Router, Nuxt, Vite, Astro), or implementing common patterns such as authentication, API handling, Redux, and TanStack Query (React Query) within FSD.
lifecyclemigrate-from-nextjs
Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.
agent-ready
Audit any website for AI and LLM readiness. Analyses structure, content, and technical signals across 60+ criteria. Generates curated llms.txt, JSON-LD structured data, robots.txt patches, Content-Signal headers, and platform-specific deployment code. Works across WordPress, Shopify, Webflow, Next.js, Vite, Astro, static HTML, and any other platform.
sprint-orchestrator
Use when the user wants to plan, dispatch, review or deploy software sprints in a multi-chat orchestration pattern — running parallel multi-agent work across isolated git worktrees without context bloat in long Claude sessions. Skill provides a portable workflow with auto-discovery of project profile, modular addons (postgres, multi-tenant, nextjs, coolify-ssh, e2e-validation, etc), URL-scheme dispatch to new Claude Code sessions, and validated checklists from 17+ production sprints. Reads `.sprint-orchestrator.yml` from the consuming project.
api-test-suite-builder
Use when the user asks to generate API tests, create integration test suites, test REST endpoints, or build contract tests.
python-project-setup
Universal project scaffolding toolkit — drops pre-built, battle-tested layers (config, helpers) into any Python project with a single command. Zero boilerplate, maximum cognitive coherence.
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-fullstack
Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.
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".
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
starting-a-project
Use when someone is starting a new project and unsure what stack or framework to build it with — "what should I use to build X?", "how do I start a new project?" — or asks how to deploy / put a project online. Covers the common beginner goals: a content website, an interactive app, a database-backed web app, an API, a script or automation, a phone app, a data dashboard.
pev-bootstrap-playwright
pev-harness を使うプロジェクトに Playwright を導入する自動 bootstrap skill。 npm install / browser binary / playwright.config.ts template / seed test template / `npx playwright init-agents --loop=claude` (Playwright agents 自動生成) の 5 step を 1 操作で完了する。 pev-e2e-verify skill の Preflight が「未setup」と判定した時に自動的に提案される。
privacy-terms
처리방침·이용약관 자동 생성 진입점. 호출 즉시 4개 하위 스킬(privacy-kr·privacy-eu·privacy-us·privacy-global)을 번호 메뉴로 제시하고, 번호 입력 즉시 해당 스킬 인터뷰로 직행한다.
feature
Cria bounded context completo (24 arquivos Java = 16 producao + 8 testes) alinhado a docs/crud-patterns.md baseline. Inclui 5 use cases (Criar/Listar/BuscarPorId/Atualizar/Deletar), controller com auditoria + GET /{id}, userId, repository completo, DTOs e os 4 niveis de teste (domain, 5 useCases com Mockito, RepositoryImpl com Testcontainers, Controller E2E com 7 cenarios). Elimina necessidade de invocar /write-test para o baseline. Recebe nome do contexto em snake_case minusculo.
plan
Recebe objetivo de alto nivel, spawna sub-agente planejador que quebra em tasks, registra em .claude/tasks.json e spawna executores em paralelo. O humano so revisa os PRs.
setup-design
Inicializa design system do projeto. Recebe dominio como argumento e flag --figma <url> opcional. Spawna planejador que propoe design system completo, aguarda aprovacao do operador, gera docs/design-system.md e componentes wrapper.
watch-ci
Routine Tier 1 que monitora CI do branch main a cada 30 minutos. Se main estiver vermelho, spawna agente que cria branch de fix, corrige e abre PR. Invocar uma vez -- o loop se auto-agenda via ScheduleWakeup.
obsidian-zettelkasten
Obsidian note templates, naming conventions, and wikilink rules for Zettelkasten output
error-handling-expert
Expert in error handling patterns, exception management, error responses, logging, and error recovery strategies for React, Next.js, and NestJS applications
nextra-writer
Expert in creating clear, comprehensive technical documentation with Nextra (Next.js-based docs framework), MDX, and modern documentation patterns. Use for documentation sites that need Next.js integration.
no-ai-slop
Strip AI slop from UI and Next.js code output. Use when generated or reviewed React, Next.js, or TypeScript code contains redundant comments that restate the code, leftover TODO and placeholder stubs, debug remnants like console.log and debugger, bloated JSDoc, decorative banner comments, or lazy type escapes like as any and ts-ignore. Trigger when the user asks to clean up generated code, remove AI comments, deslop, or tidy UI output, and run automatically as a review pass in the DO-UI pipeline.
analyze
Deep cross-layer consistency audit for any codebase. Traces every feature from UI to database, finds broken wiring, missing handlers, model mismatches, and security gaps. Auto-fixes critical and warning issues. Use this after building features, before releases, or whenever something feels off. Works with any tech stack.
bundle-analysis
Analyze frontend bundle size, detect heavy dependencies, find duplicates, evaluate tree-shaking, recommend code splitting, and generate size budget configs. USE THIS SKILL WHEN: user mentions bundle size, JavaScript bundle, webpack analysis, slow page load from large bundles, tree-shaking, code splitting, heavy dependencies, duplicate packages, vendor chunk, DIM weight of JS, or performance budget. Trigger phrases: "analyze bundle size", "why is my bundle so big", "find heavy dependencies", "reduce bundle size", "code splitting opportunities", "tree-shaking not working", "duplicate packages in bundle", "set up size budget", "vendor chunk too large", "initial load too slow", "optimize webpack output", "vite build analysis".
webdesign
Design, build, review, and test modern web interfaces and frontend app experiences. Use for responsive UI, visual polish, accessibility audits, design systems, Next.js or React implementation, TanStack Router/Query/Form/Table/Start, Playwright/Vitest web testing, Core Web Vitals, dashboards, forms, data tables, charts, landing pages, product pages, and optional Three.js/WebGL/WebGPU scenes.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
clawdtm
ClawdTM skills for OpenClaw agents -- search, install, and review skills with security awareness.
next-forge
Expert assistance for next-forge — a production-grade Turborepo template for Next.js SaaS apps. Triggers on questions about next-forge installation, setup, architecture, packages, customization, deployment, and development workflows.
symphony-forge
Expert assistance for symphony-forge — a CLI that scaffolds next-forge projects with a composable control metalayer for AI agent governance. Triggers on questions about initializing projects with symphony-forge, adding metalayer layers (control, harness, knowledge, consciousness, autoany), running entropy audits, configuring EGRI self-improvement loops, and setting up AI-agent-ready development workflows. Also serves as a skill creator — use this to bootstrap new projects with built-in agent skills.
git-commit
Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping
ai-prompt-mastery
讓 AI 發揮極致潛力的通用方法論。使用情境：(1) 覺得 AI 回答太籠統或不夠好， (2) 想要 AI 用專家級標準回答，(3) 不知道怎麼問才能得到好答案， (4) 想分享給別人讓他們也能把 AI 用好。包含即貼即用的 Prompt + 五大技巧。
blocklet-updater
Creates a new release for a blocklet project by bumping version, building, and bundling. Use when asked to "create a new release", "bump and bundle", or "update blocklet version".
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
clean-vm
Safely clean the local loop VM by reporting and removing stale loop runs, inactive Next.js or Storybook servers, optional browser windows, and unused loop-created worktrees without disturbing active tmux-backed sessions.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
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.
pattern-reviewer-vite
Vite audit: stack choice (Vite for CSR, Next for SSR/SSG/SEO); `VITE_` prefix on every client-exposed `import.meta.env` read; `VITE_` is NOT a security boundary (secret-shaped `VITE_*` is HIGH); `loadEnv(..., '')` leaks server secrets; `.env.example` mirrors every `VITE_*`; type-check gap (no `tsc --noEmit`); prod sourcemap without Sentry; route-boundary lazy-load. Activate when the diff touches `vite.config.*`, `vitest.config.*`, or `import.meta.env` reads.
cold-email-sequence-generator
Generate personalized cold email sequences (7-14 emails) with A/B test subject lines, follow-up timing recommendations, and integrated social proof. Creates multi-touch campaigns optimized for response rates. Use when users need outbound email campaigns, sales sequences, or lead generation emails.
deep-reading-analyst
Comprehensive framework for deep analysis of articles, papers, and long-form content using 10+ thinking models (SCQA, 5W2H, critical thinking, inversion, mental models, first principles, systems thinking, six thinking hats). Use when users want to: (1) deeply understand complex articles/content, (2) analyze arguments and identify logical flaws, (3) extract actionable insights from reading materials, (4) create study notes or learning summaries, (5) compare multiple sources, (6) transform knowledge into practical applications, or (7) apply specific thinking frameworks. Triggered by phrases like 'analyze this article,' 'help me understand,' 'deep dive into,' 'extract insights from,' 'use [framework name],' or when users provide URLs/long-form content for analysis.
deep-research
Conduct enterprise-grade research with multi-source synthesis, citation tracking, and verification. Use when user needs comprehensive analysis requiring 10+ sources, verified claims, or comparison of approaches. Triggers include "deep research", "comprehensive analysis", "research report", "compare X vs Y", or "analyze trends". Do NOT use for simple lookups, debugging, or questions answerable with 1-2 searches.
financial-unit-economics
Use when evaluating business model viability, analyzing profitability per customer/product/transaction, validating startup metrics (CAC, LTV, payback period), making pricing decisions, assessing scalability, comparing business models, or when user mentions unit economics, CAC/LTV ratio, contribution margin, customer profitability, break-even analysis, or needs to determine if a business can be profitable at scale.
find-skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
github-explorer
Deep-dive analysis of GitHub projects. Use when the user mentions a GitHub repo/project name and wants to understand it — triggered by phrases like "帮我看看这个项目", "了解一下 XXX", "这个项目怎么样", "分析一下 repo", or any request to explore/evaluate a GitHub project. Covers architecture, community health, competitive landscape, and cross-platform knowledge sources.
ph-community-outreach
Engage Reddit, Indie Hackers, Hacker News and other communities for Product Hunt launches. Use this skill to identify relevant communities, craft appropriate posts, and drive cross-platform engagement without appearing spammy.
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.
seo-content-strategist
Expert SEO content strategy for SaaS and B2B sites. Use when doing keyword research, planning content clusters, creating pillar pages, optimizing on-page SEO, fixing technical SEO issues, building links, refreshing content, implementing programmatic SEO, mapping search intent, optimizing for SERP features, or measuring content performance. Use for SEO audits, content gap analysis, and organic growth strategy.
startup-business-models
Use when choosing or evaluating a startup revenue model, pricing/value metric, packaging/tier design, or calculating unit economics (LTV, CAC, payback, gross margin, NRR), including usage-based/credit/AI pricing and variable compute/COGS constraints.
user-persona-creation
Create detailed user personas based on research and data. Develop realistic representations of target users to guide product decisions and ensure user-centered design.
user-research-synthesis
Synthesize qualitative and quantitative user research into structured insights and opportunity areas. Use when analyzing interview notes, survey responses, support tickets, or behavioral data to identify themes, build personas, or prioritize opportunities.
ux-audit-rethink
Comprehensive UX audit using IxDF's 7 factors, 5 usability characteristics, and 5 interaction dimensions. Holistic evaluation with redesign proposals based on user-centered design principles.
web-scraping
Web scraping with anti-bot bypass, content extraction, undocumented APIs and poison pill detection. Use when extracting content from websites, handling paywalls, implementing scraping cascades or processing social media. Covers requests, trafilatura, Playwright with stealth mode, yt-dlp and instaloader patterns.
websh
A shell for the web. Navigate URLs like directories, query pages with Unix-like commands. Activate on `websh` command, shell-style web navigation, or when treating URLs as a filesystem.
chartjs-integrations
This skill should be used when the user asks "Chart.js React", "react-chartjs-2", "Chart.js Vue", "vue-chartjs", "Chart.js Angular", "ng2-charts", "Chart.js Rails", "Chart.js Rails 8", "Chart.js importmaps", "Chart.js Stimulus", "Chart.js Turbo", "Chart.js Hotwire", "Chart.js SSR", "Chart.js Next.js", "Chart.js Nuxt", or needs help integrating Chart.js v4.5.1 with frontend frameworks.
astro-framework
Astro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (client:load/idle/visible/media), using server:defer (server islands), Content Layer API (glob/file loaders, live loaders), sessions, astro:env, i18n routing, actions, SSR adapters, view transitions, or integrating React/Vue/Svelte/Solid. Not for full-SPA frameworks (Next.js, Remix, SvelteKit).
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. USE WHEN building or refactoring Node/Express/Next.js backend code, API routes, or data-access and server-side logic.
error-tracking
에러 추적 및 모니터링
ship-it
Set up or fix a deploy pipeline. Picks a platform that fits the app, writes the config (Dockerfile, vercel.json, railway.toml, fly.toml, GitHub Actions), and ships a first deploy. Knows Vercel, Railway, Fly.io, Render, AWS basics (ECS, Lambda, Amplify), Docker, Kubernetes essentials, and GitHub Actions. Use when the user says "deploy this", "ship it", "set up vercel", "dockerize this", "write the GitHub Actions for deploy", or has working local code that needs to be live.
ship-it
Set up or fix a deploy pipeline. Picks a platform that fits the app, writes the config (Dockerfile, vercel.json, railway.toml, fly.toml, GitHub Actions), and ships a first deploy. Knows Vercel, Railway, Fly.io, Render, AWS basics (ECS, Lambda, Amplify), Docker, Kubernetes essentials, and GitHub Actions. Use when the user says "deploy this", "ship it", "set up vercel", "dockerize this", "write the GitHub Actions for deploy", or has working local code that needs to be live.
deploy-planner
Deployment and DevOps agent that generates Dockerfiles, CI/CD configs, and step-by-step deployment guides for free hosting platforms. Triggers on: deploy, launch, hosting, Docker, CI/CD, production, go live, ship it.
system-architect
System architecture agent that designs tech stack, folder structure, API contracts, and external service integrations. Triggers on: system design, tech stack, architecture, API design, folder structure, choose framework.
api-patterns
Scaffold and review API routes following project conventions. Use when creating new API endpoints, modifying existing routes, or reviewing API code for correctness.
adding-schema-markup
Use when adding JSON-LD structured data to a page — Article, BlogPosting, Product, FAQPage, HowTo, BreadcrumbList, Organization, WebSite, TouristTrip. Picks the right schema type for the page, populates required + key recommended fields from the actual content, validates against schema.org, and ships in a single PR. Triggers on "add schema", "add JSON-LD", "structured data", "rich results", "FAQ schema", "Article schema", "Product schema", "BreadcrumbList", "schema markup for [page]", or any time per-page schema is being added or audited.
analyzing-content-gaps
Use when running a competitor SERP diff, asking why a competitor outranks you, building a content brief, or auditing what top-3 ranking pages cover that yours doesn't. Auto-triggers on "content gap analysis", "competitor SERP", "why does X outrank us", "what are competitors covering that we aren't", "content brief", "SERP analysis". Takes a target query + your URL, scrapes top-3 via Firecrawl, diffs entities/H2s/schema/depth/freshness/AIO presence, and ships `CONTENT_BRIEF.md` with gaps ranked by impact. Pairs with `optimizing-on-page` (fills the gaps) and `planning-topic-clusters` (when gaps span sub-topics).
auditing-technical-seo
Use when running a technical SEO audit, debugging Core Web Vitals regressions, checking indexability, validating schema and sitemaps, diagnosing why a site isn't ranking, or preparing a site for AI-search visibility (GPTBot, ClaudeBot, PerplexityBot). Covers crawlability, indexability, rendering, Core Web Vitals, schema, AI-search readiness, mobile, security, and meta basics. Lifecycle-aware — pre-launch, growth, mature. Produces a prioritized SEO_AUDIT.md and a low-risk fix PR.
building-eeat-and-authority
Use when building Google E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) signals, writing author bios, planning thought-leadership SEO, hardening trust on YMYL (Your Money Your Life) content, getting cited as an authority by AI engines, or building a long-term authority moat from zero. Triggers on phrases like "E-E-A-T", "author bios", "build authority", "thought leadership SEO", "Google trust signals", "YMYL", "how to get cited as an authority". Long-game skill — invest 6+ months before you need it.
generating-programmatic-seo
Use when generating hundreds or thousands of unique landing pages from a structured data source (Supabase table, CSV, Sanity collection) — city pages, category pages, "[X] for [Y]" matrices, integration pages, directory listings. Wires data + template + LLM enrichment + per-page schema + sitemap inclusion + internal-link graph, with quality gates that keep output on the Tripadvisor/Zapier side and away from Google's scaled-content-abuse policy. Auto-triggers on "programmatic SEO", "generate landing pages from data", "scale content", "city pages", "category pages", "[X] for [Y] pages", or "directory site SEO".
optimizing-for-generative-engines
Use when optimizing content for AI search ("GEO"), getting cited in ChatGPT, Claude, Perplexity, or Gemini, ranking in Google AI Overviews, making a page LLM-citable, defending against AI-citation decay, or running an "AI SEO" pass on existing content. Triggers on phrases like "optimize for AI search", "GEO", "get cited in ChatGPT", "Perplexity ranking", "AI Overview optimization", "make this LLM-citable", "AI SEO". Cross-cuts the content lifecycle — fires per-page on growth content, becomes critical on mature pages for citation defense.
optimizing-on-page
Use when optimizing a single page for SEO — fixing title and meta, tightening H1/H2 hierarchy, improving internal linking and anchor text, auditing alt text, capturing featured snippets, or aligning a page with search intent. Auto-triggers on "optimize this page", "fix the SEO on this URL", "polish this blog post", "title and meta", "improve internal linking", "alt text audit". Per-page workhorse — takes a URL or markdown/MDX file path, ships ONE focused PR with title/meta/H/link/alt edits. Pairs with finding-underserved-keywords (feeds keywords in), auditing-technical-seo (clears blockers first), and adding-schema-markup (hands JSON-LD off).
planning-topic-clusters
Use when planning a content architecture from a keyword map, designing pillar pages and supporting spokes, drawing an internal-link graph, deciding what to write next, building a content calendar, or reorganizing legacy posts into topical authority clusters. Triggers on "topic clusters", "content architecture", "pillar pages", "internal link graph", "what should I write next", "content calendar", "SEO content plan". Produces `CONTENT_PLAN.md` with cluster map, slugs, link matrix, and publishing order.
refreshing-stale-content
Use when content is losing traffic, dropping in rankings, or showing decay signals in Google Search Console — impressions down >20% YoY, position sliding, CTR rotting, or LLM citations falling. Auto-triggers on phrases like "refresh this content", "fix the decay", "traffic is dropping on /blog/X", "update old post", "content refresh". Pairs with gsc-mcp for decay detection and opens a single PR with updated copy, schema (dateModified), internal links, and an IndexNow ping. Mature-phase only — page must have >6 months of GSC data.
researching-keywords-pre-launch
Use when starting keyword research for a brand-new site with no Google Search Console history yet — pre-launch, just-launched, or first 90 days. Covers cold-start discovery via Google autocomplete / People Also Ask / related searches, Google Trends, Reddit/HN/Indie Hackers demand mining, competitor SERP overlap, and AI-search query patterns. Produces a clustered KEYWORD_MAP.md to seed the first content slate. Auto-triggers on "what should I write about", "keyword research from scratch", "no GSC data yet", "cold start SEO", "what keywords should I target", "pre-launch keyword research", "topic ideas for new site".
seo-bootstrap
Use on day 1 of a project to ship sitemap, robots.txt, OG image, and JSON-LD schema in a single PR. Auto-detects Next.js, Astro, or SvelteKit, audits what's already there, and only generates what's missing. Triggers on "set up SEO", "SEO bootstrap", "configure SEO", "add sitemap", "add robots.txt", "make my site SEO-ready", or "I just shipped a site, help me with SEO."
finding-underserved-keywords
Use when optimizing existing pages for SEO, hunting low-hanging keyword opportunities, analyzing pages that get impressions in Google Search Console but few clicks, or planning a content refresh. Covers the full content lifecycle (initial → growth → mature) and integrates with Generative Engine Optimization (GEO) for AI-search visibility. Applies to any site with GSC access.
setting-up-seo-measurement
Use when bootstrapping SEO measurement on a new or existing site — verifying Google Search Console, submitting a sitemap, wiring GA4 or Plausible analytics, enabling Bing Webmaster Tools, or laying groundwork for AI-citation (GEO) tracking. Triggers on "set up Google Search Console", "verify domain", "submit sitemap", "GA4 setup", "measure SEO", "track AI citations", "connect GSC". Pairs with `/seo-setup` (credentials) and runs once at site bootstrap; every other skill in this plugin assumes GSC is already streaming data.
colorize
Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
nextjs-app-router-audit
Audit a Next.js App Router codebase for React Server Component boundary mistakes, request waterfalls, client/server anti-patterns, and Core Web Vitals risks — then propose concrete fixes. Use when the user asks to review/audit a Next.js app, find performance problems, fix slow LCP/CLS/INP, check 'use client' usage, find request waterfalls, improve App Router structure, debug why a page isn't streaming, or why metadata/SEO tags aren't showing. Ships a zero-dependency static scanner (scripts/audit.mjs) plus a manual review methodology for things static analysis can't catch.
rcode-harden
Security hardening checklist for SaaS applications.
rcode-perf
Performance optimisation for the rcode-default stack — Next.js (LCP / TBT / CLS / hydration),.
rcode-source-truth
Cite official documentation before writing or recommending any framework, library, or API code.
next-app-router-patterns
Next.js App Router patterns covering server/client boundary, data fetching and caching, server actions, streaming, parallel and intercepting routes, edge vs node runtime, and review checklist. Use whenever the project contains `next.config.js`, `next.config.mjs`, `next.config.ts`, an `app/` directory with `page.tsx`/`page.jsx`/`layout.tsx`/`layout.jsx`/`route.ts`, OR `next` in `package.json` dependencies, OR the user asks about Next.js, App Router, server components, client components, server actions, route handlers, parallel routes, intercepting routes, streaming, generateMetadata, generateStaticParams, even if Next.js is not mentioned by name.
security-patterns
Security checklist covering XSS, injection, authentication, authorization, sessions, CSRF, CSP, secrets, dependency CVEs, input validation, and severity calls. Use whenever the project includes auth code, session handling, environment variable reads, user input handling, route handlers, server actions, middleware, or external API calls, OR the user asks about security, hardening, vulnerabilities, auth, authentication, authorization, sessions, cookies, XSS, CSRF, SQL injection, secrets, environment variables, CSP, headers, or reviews changes that touch user input, auth, or external data, even if "security" is not mentioned by name.
arbitrum-dapp-skill
Opinionated guide for building dApps on Arbitrum using Stylus (Rust) and/or Solidity. Covers local devnode setup, contract development, testing, deployment, and React frontend integration with viem. Use when starting a new Arbitrum project, writing Stylus or Solidity contracts, deploying to Arbitrum, or building a frontend that interacts with Arbitrum contracts.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
walrus-sites
Publish a Walrus Site (decentralized website hosted on Walrus). Use when the user mentions Walrus Sites or wants to host a site on Walrus.
review-arch
Revisa decisoes arquiteturais de um PR via subagent architect-reviewer (Sonnet). Use em PRs com mudanca estrutural em domain/application/infrastructure/interfaces.
review-pr
Revisa o PR informado via subagent pr-reviewer (Haiku). Use antes do merge.
write-report
Gera componente React de relatorio impresso (PDF) via subagent report-writer. Recebe descricao multiline do relatorio como argumento.
clone-website
Clone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data injection. Use when the user wants to clone, replicate, reverse-engineer, or create a pixel-perfect copy of any website or web app. Provide one or more target URLs as arguments.
openai-apps-mcp
Build ChatGPT apps with MCP servers on Cloudflare Workers. Extend ChatGPT with custom tools and interactive widgets (HTML/JS UI). Use when: developing ChatGPT extensions, implementing MCP servers, or troubleshooting CORS, widget 404s, MIME types, ASSETS binding errors, Next.js integration issues, or edge platform limitations.
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.
config-settings
Claude Code configuration and settings management guide. Covers the settings hierarchy (Enterprise managed > project local > project > user), permission evaluation order (Deny > Ask > Allow), CLAUDE.md best practices, settings.json schema, settings.local.json personal overrides, memory management, and context optimization strategies. Use when configuring Claude Code, updating settings, writing CLAUDE.md, managing permissions, or optimizing context window usage.
design-system-claude
Design system encoding for CLAUDE.md to ensure on-brand, consistent UI generation. Create and maintain design tokens, typography scales, spacing systems, shadow depths, animation defaults, and dark mode rules in CLAUDE.md. Use when setting up a new project design system, enforcing brand consistency, defining color tokens, typography scale, or component interaction patterns.
repo-structure-review
リポジトリのディレクトリ構造・命名規則・ファイル配置が設計原則と整合しているかをレビューする。構造の崩れを早期に検出し、保守コストの増加を防ぐ。リポジトリ構造をレビューするときに使う。
shippage
Generate production-quality, conversion-optimized SaaS landing pages in minutes. Use when the user asks to build a landing page, marketing page, product page, homepage, or website for a SaaS, startup, app, or B2B product. Also use when they say "make a page for my product", "I need a website", "create a sales page", "ship a landing page", or "help me launch". Use for audits too: "roast my page", "audit this landing page", "review my website". Outputs deployable React projects with Tailwind CSS, Framer Motion, shadcn/ui, 200 real design tokens, and 18 conversion-optimized section templates. Supports Next.js, Vite, Remix, Astro, Vue, Svelte. Use this skill even if the user doesn't explicitly say "landing page" — if they're building software and need a website that sells, this is the skill.
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
playwright-automation-fill-in-form
Automate filling in a form using Playwright MCP
legal-audit-codebase
Fuehrt einen systematischen Rechts-Audit einer Codebase durch (DE/EU-Scope). Nutze diese Skill wenn /legal-audit aufgerufen wird ODER wenn der User eine Codebase auf DSGVO/UWG/AGB/DDG/AI-Act/BFSG/UrhG/NIS2-Probleme untersuchen lassen will.
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.
pre-commit-quality-checking
Runs mandatory quality checks before commits. Executes build, tests, and pattern validation from code-review-standards.md. Use when ready to commit code or when asked to verify code quality meets project standards.
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
templatecentraladd
Use when adding any capability to a FastAPI, NestJS, Next.js, or Vite+React project — auth, database, tests, components, logging, and more.
templatecentralmigrate
Use when running database migrations, migrating conventions, or extracting a Next.js backend to a dedicated service — FastAPI or NestJS.
templatecentralstandards
Use when reviewing code quality, naming conventions, validation patterns, drift, or full-stack type contracts in a templateCentral project.
templatecentralwrite-skill
Use when writing or modifying files under skills/ — walks through CONVENTIONS.md authoring checklist.
stripe-level-ui
Build world-class, polished UI/UX components with intense focus on visual appeal
nextjs-senior-dev
Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance.
vercel-deploy
Deploy applications to Vercel with edge functions, serverless, and ISR.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
steroid-vibe-capture
This skill should be used when a non-technical user describes what they want to build using natural language. It translates vague aesthetic ideas into a rigorous, structured vibe profile written to .memory/changes/<feature>/vibe.md.
bootstrap-project
Bootstrap a fresh or existing repo with nyann. TRIGGER when the user says "set up this project", "initialize git workflow", "bootstrap this repo", "scaffold this project", "ngyamm this repo", "use my <name> profile" / "apply the nextjs-prototype profile" (profile mode). ALSO trigger on "standard setup" / "usual stack" / "the usual setup" / "install all the standard hooks" / "give this repo the usual setup" / "make this repo standard" / "install nyann" — these read as opinionated bulk setup, not narrow edits, even though they sound small. Also trigger on any phrasing that mentions wiring up git hooks + branching + conventions + docs as a single opinionated setup. DO NOT trigger on narrow requests like "add a lint hook" or "update CLAUDE.md" — those are edits, not bootstraps. DO NOT trigger on "audit this project" / "fix what's drifted" / "bring into compliance" — those are retrofit. DO NOT trigger on "check this project's health" / "is this healthy" — those are doctor. When in doubt, run the detection step and
diff-profile
Compare two nyann profiles side-by-side and show what would change. TRIGGER ON: 'diff profiles', 'compare profiles', 'what's different between profiles', 'profile diff', 'diff default vs nextjs', 'compare default and python-cli', 'what would change if I switch profiles', 'show me the difference between profiles', 'how does X profile differ from Y', 'what hooks does X add over Y', 'profile comparison', '/nyann:diff-profile'. Do NOT trigger on "switch profile" / "migrate profile" — those are migrate-profile. Do NOT trigger on "inspect profile" / "what does this profile do" — those are inspect-profile.
doctor
Run a read-only hygiene + documentation audit on the current repo. TRIGGER when the user says "is this repo healthy", "check hygiene", "audit this repo" (when they mean inspect, not remediate), "what's drifted", "run doctor", "run a health check", "audit docs", "check for doc drift", "what's broken in this project", "are the hooks still installed", "/nyann:doctor". Do NOT trigger on "fix this repo" / "remediate" / "bring it into compliance" — those are retrofit (audit + fix). doctor reports, never writes. Do NOT trigger on "what does this repo do" (that's a docs pointer, not a hygiene audit).
inspect-profile
Explain in plain English what a nyann profile enables — stack, branching, hooks, extras, conventions, documentation. TRIGGER when the user says "what does the nextjs-prototype profile do", "explain the python-cli profile", "show me what <name> enables", "what's in profile X", "describe the <name> profile", "inspect profile X", "/nyann:inspect-profile". Do NOT trigger on "show this repo's setup" — that's the `explain-state` skill (reads the repo, not a profile file). Do NOT trigger on "apply profile X to this repo" — that's `bootstrap-project`. Do NOT trigger on "save this setup as a profile" — that's `learn-profile`.
migrate-profile
Switch this repository from one nyann profile to another. TRIGGER ON: 'switch profile', 'migrate profile', 'change this repo profile', 'switch from X to Y', 'change profile to', 'migrate from', 'use a different profile', 'switch to nextjs', 'switch to python'. Computes a diff between source and target profiles, previews all hook/config/convention changes, and applies via bootstrap.
nextjs-turbopack
Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.
project-operator
Operates and debugs the local stack (API/worker/frontend); focuses on observability, logs, and safe automation.
writing-style-skill
可复用的写作风格 Skill 模板。内置自动学习： 从你的修改中自动提取规则，SKILL.md 越用越准。 Fork 后改成你自己的风格。
library-build-sync
Use when creating or updating JavaScript/TypeScript libraries in this monorepo; require building the library first and then running yarn in `_templates/react_template` so the template picks up the latest local library version.
api-testing
Test backend HTTP surfaces — REST/RPC endpoints, Next.js route handlers, Supabase APIs, and Stripe webhook handlers — without a browser. Use this skill whenever the user wants to test an API, check an endpoint, verify a webhook, confirm RLS/auth behavior, validate response shape or status codes, or smoke-test the backend after a change. Trigger even if the user just says "does the booking endpoint still work" or "test the payment API" without naming a tool.
e2e-testing
Write and run TypeScript end-to-end browser tests with Playwright that exercise real user journeys — signup/login, search, the booking flow, and Stripe checkout → confirmation. Use this skill whenever the user wants an e2e test, a browser test, to test a full flow "end to end", to catch regressions before deploy, or to verify the live site still works after a change. Trigger even on casual asks like "make sure booking still works in the browser" or "test the checkout flow".
payments-testing
Test Stripe payment flows in test mode using the Stripe API/MCP — the successful charge/checkout path that should create a booking, and the decline/failure paths (generic decline and 3DS/SCA-required) that the app must handle gracefully. Use this skill whenever the user wants to test payments, verify checkout, confirm a charge succeeds or a declined card is handled, or check Stripe integration before launch. Trigger on casual asks like "does paying actually work" or "test a declined card" too. Stripe TEST MODE only.
security-audit
Run a defensive security audit of a full-stack web app — exposed secrets and service-role keys, Supabase RLS gaps, auth bypass and IDOR on routes, Stripe webhook signature handling, input validation, insecure direct object references, and vulnerable dependencies. Use this skill whenever the user wants a security audit, a vulnerability check, to review auth, to find exposed keys/secrets, or to harden the app before launch. Trigger on asks like "is my app secure" or "check for leaked keys" too. Defensive use only.
seo-audit
Audit web pages for on-page SEO health — title and meta tags, heading structure, canonical/robots directives, Open Graph and Twitter cards, structured data (JSON-LD), image alt text, and crawlability signals. Use this skill whenever the user wants an SEO audit, an SEO check, to improve search ranking, to validate metadata or structured data, or asks why pages aren't ranking or showing rich results. Trigger on casual asks like "check the SEO on my listings pages" too.
community-led-growth
Expert in community-led growth (CLG) - leveraging user communities to drive acquisition, retention, and expansion. Covers building developer communities, user groups, ambassador programs, and turning customers into advocates. Knows the difference between community as a feature vs community as a growth engine, and how to measure community ROI. Use when "community-led, CLG, ambassador program, champion program, user community, developer community, word of mouth, user group, " mentioned.
forge-design
Use this skill to generate well-branded interfaces and assets for Forge, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
shop-preflight
Forge⇄Epodsystem integration guide — the thin Forge-owned layer that sits ON TOP of Epodsystem's live single-source playbooks. Defers build mechanics to the live shop-core-rules, holds Forge's durable invariants (build-on-draft, backup-before-publish, verify-via-live-URL), and records how Forge routes around current service quirks so a quirk degrades instead of hard-failing. Referenced by shop-customize-draft, shop-products, shop-menus, shop-verify-draft, shop-publish, shop-rollback. Triggers on: any Epodsystem theme/store mutation, 'customize storefront', 'edit theme', 'add products', 'change menu'.
cors-auditor
Audit CORS configuration in Express, Next.js, FastAPI, or Flask code for security misconfigurations. Use whenever the user mentions CORS errors, 'blocked by CORS policy', cross-origin issues, configures an API for a frontend, or asks why credentials/cookies aren't being sent cross-origin. Also run it before deploying any API. Runs fully offline — no API keys, no network, no credentials.
cors-auditor
Audit CORS configuration in Express, Next.js, FastAPI, or Flask code for security misconfigurations. Use whenever the user mentions CORS errors, 'blocked by CORS policy', cross-origin issues, configures an API for a frontend, or asks why credentials/cookies aren't being sent cross-origin. Also run it before deploying any API. Runs fully offline — no API keys, no network, no credentials.
frontend-state-accessibility
Turn frontend requirements into usable, testable, accessible UI behavior with explicit loading/empty/error/success states and keyboard/a11y flows.
agent-task-mapping
Map tasks to specialist agents. Use when choosing which agent for a job, comparing agent capabilities, or routing to React/Next.js/Playwright/docs/code-quality experts. Keywords: which agent, best agent for this, delegate to expert, agent capability mapping.
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.
mongodb-mongoose
MongoDB with Mongoose — schemas, models, aggregation pipelines, migrations, and Atlas connections. Use when designing collections, writing queries, or integrating MongoDB into Node.js/Next.js apps.
nextjs-development
Next.js 16.2.4 with TypeScript — App Router, Server Components, use cache directive, Turbopack dev, Server Actions, ISR, SSR, SSG, MCP devtools, metadata API, route handlers, instrumentation.
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
app-store-screenshots
Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, play store, screenshots, marketing assets, html-to-image, phone mockup, android screenshots, feature graphic.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
find-docs
使用 Context7 CLI 获取任意开发技术的最新文档、API 参考和代码示例。 当用户询问具体的库、框架、SDK、CLI 工具或云服务时都应使用本 skill （包括 React、Next.js、Prisma、Express、Tailwind、Django、Spring Boot 等常见技术）。训练数据可能无法反映近期 API 变更或版本更新。 以下场景必须优先使用：API 语法问题、配置项问题、版本迁移问题、包含库名的 “如何实现”问题、涉及库特定行为的调试、安装/初始化说明、CLI 使用方式。 即使你认为自己知道答案，也不要直接依赖训练数据来回答 API 细节、函数签名 或配置项；这��内容经常过时。请始终以最新官方文档为准。对于库文档和 API 细节， 优先使用本 skill 而不是普通网页搜索。
health-check
Check the health of the running WealthWise API, web app, and MongoDB services. Triggers when asked to "check if the app is running", "verify the API is up", "is the server healthy", or "show service status".
preview-template
Start the local dev server / preview environment for this project. Customize per project type. Use when iterating on UI or before visual verification.
frontend-headless
Conventions for decoupled/headless frontends — a React SPA (or Next.js) consuming Optimizely's Content Delivery API / Optimizely Graph (GraphQL) rather than Razor server rendering. Use for tasks involving a headless/decoupled Optimizely frontend, Content Delivery API or Optimizely Graph, or a React/Next.js SPA against a CMS. Load when the repo's frontend mode is "headless".
nfs-add-auth
Add Better Auth to an existing project scaffolded with nextjs-fullstack-starter that initially skipped auth. Use this when the user says 'add auth', 'add login', 'wire Better Auth', 'add user accounts', invokes /nfs-add-auth, or starts asking permission/session questions in a project without auth wired. Wires up the Better Auth Prisma adapter, session helper, requirePermission helper, /login page (credentials), the auth route handler at /api/auth/[...all], and the User / Session / Account / Verification Prisma models. Updates the (dashboard) layout to call requireSession() and routes Server Actions through requireSession() first.
nfs-add-cache
Retrofit Redis-backed cache handling into an existing project scaffolded with nextjs-fullstack-starter. Use when the user wants to add Redis, share Next.js cache across processes / deploys, speed up frequent reads, or any 'add caching to this project' request. Adds ioredis, a docker-compose redis service, wires Next.js's experimental cacheHandler to use Redis, adds a typed cache helper at src/server/lib/cache.ts, and REDIS_URL env. Refuses to run on projects that don't have the scaffolded structure.
nfs-add-mcp
Add an MCP (Model Context Protocol) entry point to an existing project scaffolded with nextjs-fullstack-starter. Use when the user wants AI clients (Claude Desktop, Cursor) to query the project's data over OAuth, mentions MCP, wants to expose tools to AI, or invokes /nfs-add-mcp. Wires up /api/mcp/route.ts inside an (mcp) route group, the MCP plugin in Better Auth (the project's OAuth provider), the .well-known OAuth discovery endpoints, a tool registry at src/server/mcp/registry.ts, one example tool, and the migration for the three OAuth tables. Requires Better Auth to be wired — if not, prompts to run /nfs-add-auth first.
nfs-architecture-patterns
Reference patterns for ongoing development on a Next.js fullstack project scaffolded with nextjs-fullstack-starter — Server Components for reads, Server Actions for writes, services in src/server/modules/. Use this whenever adding a new module, writing a new page or Server Action, deciding between Server Action vs route handler vs MCP tool, wiring permissions, structuring services, handling errors, caching with cacheTag / updateTag, or making any architectural decision in a project that was bootstrapped with this plugin. Triggers on phrases like 'add a new module', 'create a Server Action', 'where should this logic go', 'follow project conventions', 'how do I invalidate the cache', 'should this be a page or an action', or any 'how do I do X in this project' question.
nfs-review-project
Review an existing project scaffolded with nextjs-fullstack-starter against the architectural invariants and patterns. Use this whenever the user wants to audit project conventions, asks 'does this follow our patterns', wants a pre-PR architecture check, suspects drift, is onboarding a new contributor, or invokes /nfs-review-project. Runs a mechanical check script for fast objective violations (missing server-only, DB queries in src/app/, missing requirePermission on mutations, missing audit, wrong cache primitives, tRPC imports from the wrong stack), then samples files for judgment calls, then produces a categorized report grouped by severity (must fix / should fix / notes / passing).
nfs-scaffold-app
Scaffold a brand-new fullstack back-office app on pure Next.js (App Router) — Server Components for reads, Server Actions for writes, services in src/server/modules/. Use this whenever the user wants to start a new internal tool, admin dashboard, back-office app, line-of-business system, lightweight ERP, or CRUD app on Next.js without a separate API service — even if they don't name the stack. Walks the user through an interactive Q&A (project name, location, database, auth, cache, MCP, deployment target), then generates the canonical folder structure, dependencies, sample Server Action, sample service, Prisma schema starter, .env.example, and CLAUDE.md. Always trigger when the user wants a Next.js fullstack starter without tRPC, when they describe building a back office with Server Components, or when they say 'one Next.js app does everything'.
nfs-testing-patterns
Test-writing patterns for projects scaffolded with nextjs-fullstack-starter. Use whenever the user is writing or reviewing tests in such a project, asks 'how do I test X', wants to add test coverage for a new module, or needs to debug a failing test. Covers service-layer unit tests (the high-value layer where most coverage lives), integration tests with a real Postgres (Testcontainers), Server Action tests via direct invocation, route-handler tests, and Playwright e2e. Each section explains WHAT to test at that layer and HOW so test effort lands where it pays off.
nts-add-auth
Add Better Auth to an existing project scaffolded with nextjs-trpc-prisma-starter that initially skipped auth. Use this when the user says 'add auth', 'add login', 'wire Better Auth', 'add user accounts', invokes /nts-add-auth, or starts asking permission/session questions in a project without auth wired. Wires up the Better Auth Prisma adapter, session helper, requirePermission helper, /login page (credentials), the auth route handler at /api/auth/[...all], and the User / Session / Account / Verification Prisma models. Updates the tRPC context to include the session and switches the example router from publicProcedure to protectedProcedure.
nts-add-cache
Retrofit Redis caching into an existing project scaffolded with nextjs-trpc-prisma-starter. Use this when the user wants to add Redis, add a cache layer, speed up frequent reads, share cache across processes, or any 'add caching to this project' request. Adds ioredis, a docker-compose redis service, a typed cache helper at src/server/lib/cache.ts, REDIS_URL env, and updates CLAUDE.md to reflect the new dependency. Refuses to run on projects that don't have the scaffolded structure.
nts-add-mcp
Add an MCP (Model Context Protocol) entry point to an existing project scaffolded with nextjs-trpc-prisma-starter. Use this when the user wants AI clients (Claude Desktop, Cursor) to query the project's data over OAuth, mentions MCP, wants to expose tools to AI, or invokes /nts-add-mcp. Wires up /api/mcp/route.ts, the MCP plugin in Better Auth (the project's OAuth provider), the .well-known OAuth discovery endpoints, a tool registry at src/server/mcp/registry.ts, one example tool, and the migration for the three OAuth tables. Requires Better Auth to be wired — if not, prompts to run /nts-add-auth first.
nts-architecture-patterns
Reference patterns for ongoing development on a Next.js + tRPC + Prisma project scaffolded with nextjs-trpc-prisma-starter. Use this whenever adding a new module, writing a new tRPC procedure, deciding between tRPC vs route handler vs MCP tool, wiring permissions, structuring services, handling errors, or making any architectural decision in a project that was bootstrapped with this plugin. Triggers on phrases like 'add a new module', 'create a tRPC procedure', 'where should this logic go', 'follow project conventions', or any 'how do I do X in this project' question.
nts-review-project
Review an existing project scaffolded with nextjs-trpc-prisma-starter against the architectural invariants and patterns. Use this whenever the user wants to audit project conventions, asks 'does this follow our patterns', wants a pre-PR architecture check, suspects drift, is onboarding a new contributor, or invokes /nts-review-project. Runs a mechanical check script for fast objective violations (missing server-only, DB queries in src/app/, Server Actions present, wrong cache primitives), then samples files for judgment calls, then produces a categorized report grouped by severity (must fix / should fix / notes / passing).
nts-scaffold-internal-tool
Scaffold a brand-new lightweight internal management system on Next.js + tRPC + Prisma in SPA / client-component mode. Use this whenever the user wants to start a new internal tool, admin dashboard, back-office app, CRUD app, management system, or operational SaaS starter — even if they don't name the stack. Walks the user through an interactive Q&A (project name, location, database, auth, cache, MCP, deployment target), then generates the canonical folder structure, dependencies, sample tRPC router, sample service, Prisma schema starter, .env.example, and CLAUDE.md.
nts-testing-patterns
Test-writing patterns for projects scaffolded with nextjs-trpc-prisma-starter. Use whenever the user is writing or reviewing tests in such a project, asks 'how do I test X', wants to add test coverage for a new module, or needs to debug a failing test. Covers service-layer unit tests (the high-value layer), tRPC procedure tests via createCaller (typed, no HTTP), MCP tool tests, route handler tests, and Playwright e2e. Each section explains WHAT to test at that layer and HOW so test effort lands where it pays off.
vercel-deploy
Deploy applications to Vercel with edge functions, serverless, and ISR.
app-builder
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
code-review
Proactive code quality review. Triggers on significant code changes to check security, performance, architecture, and project patterns.
ai-citation-tracker
Track brand and domain citations in ChatGPT/Perplexity/Gemini/AI Overviews over time. Issues structured queries, captures citation lists from each engine's response, persists snapshots, and reports week-over-week changes in citation share. Use when user says "AI citation", "AI流入", "ChatGPT引用", "Perplexity citation", "AI Overview mention", "brand visibility in AI", "GEO tracking", "share of AI voice", or "LLM SEO monitoring". Use proactively after content publication to measure GEO uplift.
bing-indexnow
Submit URLs to IndexNow (Bing/Yandex/Seznam/Naver) for instant indexation. Critical for AI search because 87% of ChatGPT Search citations and 100% of Microsoft Copilot citations come from the Bing index. Use when user says "IndexNow", "Bing indexation", "Copilot SEO", "ChatGPT Search SEO", "AI search indexation", "new article publish", "URL submit", "instant index" or after publishing/updating any blog article. Battle-tested on miyakodeit.com (51 sessions/90d via Bing).
ga4-custom-dimensions
Register the 12 standard custom dimensions in Google Analytics 4 via the Admin API. Idempotent, dry-run by default, YAML-driven catalog covering event-scoped, user-scoped, and item-scoped dimensions. Battle-tested on miyakodeit.com (GA4 property 531238165) and netsujo.jp (property 382871067). Use when user says "GA4 custom dimensions", "register dimensions", "customDimensions API", "event-scoped dimension", or "GA4 Admin API".
ga4-tracking-wiring
Wire GA4 event tracking (CTA clicks, outbound links, scroll depth, read completion) into a Next.js App Router project. Scaffolds a typed gtag wrapper, four event helpers, and four drop-in client components. Battle-tested on miyakodeit.com (PR
gsc-weekly-audit
Run a comprehensive Google Search Console audit covering Sitemap status, URL Inspection, Search Analytics, canonical mismatch detection, CTR diagnosis, and 0-impression page detection. Battle-tested on miyakodeit.com and netsujo.jp with weekly GitHub Actions cron. Use when user says "GSC audit", "Search Console weekly check", "indexing audit", "canonical mismatch", "CTR low pages", or wants automated site health monitoring.
h1-mobile-check
Detect Japanese H1 headings that break awkwardly on mobile (375px), where 1-2 characters spill onto a second line or particles/verbs get split mid-phrase. Renders the page at iPhone SE width, measures line boxes, and suggests optimal `<br />` insertion points using bunsetsu boundaries. Battle-tested on netsujo.jp and miyakodeit.com (3 prior incidents). Use when user says "H1", "mobile break", "見出し改行", "375px", "Japanese line break", "iPhone改行", "H1モバイル", or "見出しが崩れる".
indexation-recovery
Diagnose and recover "Discovered - not indexed" and "Crawled - not indexed" pages from Google Search Console. Pulls GSC coverage state, classifies the failure mode, proposes internal linking + content fixes, and triggers Indexing API submissions. Use when user says "indexed", "未インデックス", "クロール済み未インデックス", "検出未インデックス", "indexation", "coverage state", "Discovered", "Crawled not indexed", or "GSC coverage drop". Battle-tested on miyakodeit.com (recovered from 37% → target 60%+).
jp-ascii-space-fix
Detect and remove half-width spaces at ASCII↔CJK boundaries in Markdown, TSX/TS/JSX/JS, HTML, JSON-LD, and plain text. Context-aware — skips fenced code blocks, HTML attributes, and ASCII-only runs. Battle-tested across netsujo-web (178 files, 1500+ replacements in lib/blog-data.ts alone). Use when user says "half-width space", "CJK space", "Japanese typography", "和欧混植", "ASCII boundary", "英単語と日本語のスペース", or "remove space between English and Japanese".
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".
llms-txt-generator
Generate llms.txt and llms-full.txt for AI search optimization (GEO). Crafts AI-citable definition blocks, identifies key pages, and ensures consistency with Speakable JSON-LD across the site. Battle-tested on miyakodeit.com (cited by ChatGPT for "Kyoto IT 勉強会" query). Use when user says "llms.txt", "GEO", "AI search optimization", "ChatGPT citation", "AI Overviews", "Perplexity optimization", or wants to make their site AI-recommendable.
passage-citability-checker
Score the AI citation readiness of a page's first 200 tokens. AI Overview/ChatGPT/Perplexity cite 44.2% of passages from the first 30% of an article. This skill measures definition-density, statistic-density, answer-first structure, and entity clarity in the opening passage and proposes rewrites. Use when user says "AI引用", "GEO", "AI Overview optimization", "ChatGPT citation", "passage citability", "AIに引用される", "冒頭リード", or "intro rewrite".
scrollfilm
Construye una landing con video controlado por scroll — el efecto "ScrollFilm", donde un video (o secuencia de imágenes) avanza fotograma a fotograma mientras el usuario hace scroll, estilo página de producto de Apple. Genera el patrón completo: motor de scrubbing, overlay de carga, secciones de texto con fade + parallax, dots de navegación lateral, barra de progreso y navbar fijo. Usa esta skill siempre que el usuario mencione "ScrollFilm", "video con scroll", "scroll scrubbing", "scrubbing", "video que avanza al hacer scroll", "video scroll-driven", una animación de scroll estilo Apple, un hero cinematográfico con scroll, o quiera una landing donde el scroll controle la línea de tiempo de un video — aunque no diga la palabra exacta "ScrollFilm". Funciona tanto para proyectos vanilla HTML/CSS/JS como React/Next.js.
analyze
Analyze entire codebases using Gemini CLI's 1M token context. Generates architecture reports covering structure, security, performance, and improvement roadmaps. Use when auditing code quality or running /analyze.
implement
Generate implementation code from design documents by delegating to OpenAI Codex. Use when you have specs ready and want to auto-generate source code, or when running /implement.
research
Conduct technical research using Gemini CLI, producing comparison reports with recommendations and code examples. Use when evaluating technologies, comparing libraries, or running /research.
openmaic-classroom
OpenMAIC — Open Multi-Agent Interactive Classroom platform for generating immersive AI-powered learning experiences with slides, quizzes, simulations, and multi-agent discussions.
atmos-canvas-agent
Drive the user's open Atmos Canvas (tldraw whiteboard) via the `atmos canvas` CLI. Use whenever the user asks to sketch, draw, diagram, lay out, arrange, label, move, resize, recolor, or delete anything on the canvas — including architecture/flow diagrams, sticky notes, frames, geo shapes, arrows, grids of cards, or viewport changes.
atmos-changelog
Refresh the Atmos landing-page changelog from the GitHub Releases page. Use when Codex needs to read `https://github.com/AruNi-01/atmos/releases`, extract release-note content, and rewrite `apps/landing/src/lib/changelog-data.ts` in the shape expected by the landing changelog UI. Supports generating a specific version on demand, or filling only versions that are still missing from the landing data file.
atmos-cli-release
Run the standalone Atmos CLI release workflow for this repository. Use this whenever you need to cut an Atmos CLI release, verify `apps/cli/Cargo.toml`, create or dispatch the required `cli-v<version>` GitHub Release, and publish CLI archives. Prefer this over local runtime or generic GitHub release flows for CLI releases.
atmos-desktop-release
Run the Atmos desktop release workflow for this repository. Use this whenever you need to cut an Atmos desktop release, bump the desktop version, create the required `desktop-v<version>` tag, push the release-prep commit, and verify the GitHub Actions + Homebrew tap flow. Prefer this over a generic GitHub release process for Atmos desktop releases.
atmos-local-web-release
Run the Atmos local web runtime release workflow for this repository. Use this whenever you need to cut an Atmos local web runtime release, verify the local web runtime installer version, create the required `local-web-runtime-v<version>` tag, publish the runtime archives, and publish the `@atmos/local-web-runtime` installer package. Prefer this over a generic GitHub release process for Atmos local web runtime releases.
atmos-review-fix
Handle an Atmos review fix run by reading review comments, marking run status with the installed `atmos review` CLI, editing code, replying to each comment, writing a run summary, and finalizing the run into a new review revision.
atmos-specs-brainstorm
Run a structured brainstorm for an Atmos spec and write it into `specs/<ZONE>/<ZONE>-NNN_.../BRAINSTORM.md`. Use this whenever the user wants to explore a new feature idea, sketch a rough direction, weigh multiple approaches, or dump unstructured thoughts into the Atmos specs tree — anything that belongs in the BRAINSTORM stage, before a PRD is written. Trigger also when the user says "brainstorm", "头脑风暴", "探索方向", "几种做法", or starts a new `APP-NNN` / `Landing-NNN` / `Docs-NNN` directory. Only touch `BRAINSTORM.md`; leave PRD/TECH/TEST alone.
atmos-specs-impl
Implement an Atmos spec — turn the four spec docs (BRAINSTORM / PRD / TECH / TEST) at `specs/<ZONE>/<ZONE>-NNN_.../` into real production code changes in `crates/`, `apps/`, `packages/`. Use whenever the user says "implement APP-NNN", "ship this spec", "按照 spec 实现", "start coding the PRD", or otherwise transitions from spec authoring to actual engineering. Read all four files first, plan along TECH's rollout, respect Atmos's layered architecture (infra → core-engine → core-service → api → apps) and WebSocket-first transport. Keep existing tests green (regression gate) and run lint+compile on every chunk; delegate authoring new scenario-level tests to the `atmos-specs-test-run` skill. Writes production code (not specs, not new scenario tests); updates specs only when reality forces TECH to change.
atmos-specs-prd
Write or update the PRD (Product Requirements) for an Atmos spec at `specs/<ZONE>/<ZONE>-NNN_.../PRD.md`. Use whenever the user wants to lock in WHAT a feature is and WHY it matters — user stories, Must Have / Nice to Have, success metrics, explicit out-of-scope. Trigger when the user says "write a PRD", "产品文档", "需求文档", "定义范围", "user stories", mentions Must Have/Nice to Have, or asks to promote brainstorm output into a PRD. Focus strictly on user value and scope; leave HOW to the tech spec. Only touch `PRD.md`.
atmos-specs-review
Review an implemented Atmos spec and write or update `specs/<ZONE>/<ZONE>-NNN_.../REVIEW.md` with actionable post-implementation findings. Use this whenever the user asks to review whether a spec implementation is complete, ready to ship, functionally correct, aligned with PRD/TECH/TEST, or architecturally maintainable. Choose the functional review reference, quality review reference, or both based on the user's wording; if the request is ambiguous or asks for release readiness, use both.
atmos-specs-tech
Write or update the technical design document for an Atmos spec at `specs/<ZONE>/<ZONE>-NNN_.../TECH.md`. Use whenever the user wants to turn a PRD into a HOW — architecture, data model, API/WebSocket messages, rollout plan, risks. Trigger on "tech spec", "技术方案", "架构设计", "data model", "WebSocket message", "crate layout", or when the user asks how to build a feature the PRD has already pinned down. Respect Atmos's layered architecture (infra → core-engine → core-service → api → apps) and WebSocket-first transport. Only touch `TECH.md`.
atmos-specs-test-plan
Author the scenario-level test plan for an Atmos spec at `specs/<ZONE>/<ZONE>-NNN_.../TEST.md`. Use whenever the user wants to define WHAT to verify for a feature — Given/When/Then scenarios, acceptance criteria, regression checklist, performance budgets, manual steps. Trigger on "test plan", "测试方案", "acceptance criteria", "验收标准", "how do we verify", "QA checklist", or after PRD/TECH has stabilized and you need to pin down what "done" looks like. This skill only writes the plan document; actually writing and running test code lives in the `atmos-specs-test-run` skill. Cover happy path, edge cases, and failure recovery at the scenario level — not individual unit tests. Only touch `TEST.md`.
atmos-specs-test-run
Implement and execute the real tests for an Atmos spec — turn the scenarios in `specs/<ZONE>/<ZONE>-NNN_.../TEST.md` into actual Rust `#[cfg(test)]` modules, `bun test` specs, and (where warranted) Playwright/E2E tests, then run them and report. Use whenever the user says "write the tests", "实现测试", "跑测试", "run the tests for APP-NNN", "make TEST.md actually executable", or asks to verify that an implemented spec still works. Respect the project's test stack (`just test` = `bun test` + `cargo test --workspace`; per-crate/app filters via `cargo test --package <c>` and `bun run --filter <pkg> test`). Writes code in `tests/` or `#[cfg(test)]` mods and in `apps/**/*.test.ts[x]`; may append short status lines to `TEST.md` per scenario. Does not write production code — that's the `atmos-specs-impl` skill.
code-review-expert
Expert code review of current git changes with a senior engineer lens. Detects SOLID violations, security risks, and proposes actionable improvements.
fullstack-reviewer
This skill should be used when the user asks to review code, review my changes, code review, review this project, check code quality, security review, find bugs, or requests a comprehensive, structured code review covering both frontend and backend.
project-wiki
This skill should be used when the user asks to "generate project wiki", "create project documentation", "document the codebase", "generate a wiki for this project", "create docs from code", or wants to produce a comprehensive, navigable documentation set from source code stored locally as Markdown files in `.atmos/wiki/`.
project-wiki-specify
This skill should be used when the user wants to add a specified topic to the Project Wiki. It generates a focused wiki article on a user-provided theme (e.g., "explore how X feature works", "research why X technology was chosen"), placing it in a dedicated Specify Wiki section separate from Getting Started and Deep Dive.
project-wiki-update
This skill should be used when the user wants to incrementally update an existing Project Wiki. It detects code changes since the wiki was generated, identifies affected wiki pages, and only regenerates those pages while preserving unchanged content.
typescript-react-reviewer
Expert code reviewer for TypeScript + React 19 applications. Use when reviewing React code, identifying anti-patterns, evaluating state management, or assessing code maintainability. Triggers: code review requests, PR reviews, React architecture evaluation, identifying code smells, TypeScript type safety checks, useEffect abuse detection, state management review.
threejs-patterns
Vanilla Three.js patterns for Next.js App Router. Scene setup, GLTF loading, camera scroll animation, particle systems, environment lighting, post-processing, OrbitControls. Pin three@0.169.0. Import from 'three/addons/'.
templatecentralscaffold
Use when creating a new FastAPI, NestJS, Next.js, or Vite+React project from scratch.
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
claude-api
Build, debug, and optimize Claude API / Anthropic SDK apps. Apps built with this skill should include prompt caching. Also handles migrating existing Claude API code between Claude model versions (4.5 → 4.6, 4.6 → 4.7, retired-model replacements). TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`; user asks for the Claude API, Anthropic SDK, or Managed Agents; user adds/modifies/tunes a Claude feature (caching, thinking, compaction, tool use, batch, files, citations, memory) or model (Opus/Sonnet/Haiku) in a file; questions about prompt caching / cache hit rate in an Anthropic SDK project. SKIP: file imports `openai`/other-provider SDK, filename like `*-openai.py`/`*-generic.py`, provider-neutral code, general programming/ML.
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.
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
slack-gif-creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
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.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
perfect-ui
Design and build cohesive web pages with custom visual identity — landing pages and portfolios get rich anatomy + section archetypes; any other page type (blog, about, pricing, contact, coming-soon, dashboard, admin, e-commerce, custom) is supported through generic anatomy + skeleton. Use this skill whenever the user mentions: landing page, portfolio, personal site, hero section, marketing page, product page, sales page, splash page, blog page, about page, pricing page, contact page, coming-soon, waitlist, dashboard, admin panel, e-commerce store, redesign my site, design my portfolio, build a portfolio, work showcase, hire-me page, perfect-ui, perfect landing, or asks to create any web page surface. Two tiers: special (landing | portfolio — rich treatment) and generic (everything else — universal craft toolkit). Self-contained 8-phase pipeline: vibe discovery → visual direction (color/typography/mood) → custom icon set (NO emoji, NO icon library) → AI-generated visuals → optional shader effects layer → inlin
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).
tasks
Exibe o estado atual das tasks em .claude/tasks.json. Util para checar progresso entre sessoes.
multi-tenant-architecture
Guidelines for building a white-label, multi-tenant church platform using Next.js App Router, Middleware, and Supabase RLS. Use when setting up subdomains, dynamic theming, or tenant isolation.
clone-website
Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
rsc-data-optimizer
Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"
codebase-auditor
Scan a repository against curated coding standards and produce a structured audit report, issue set, refactor plan, and sprint-based remediation roadmap. Use when the user invokes /vibe.audit or asks to review the codebase against established rules. Operates in full autopilot mode from repository scan to sprint plan output.
documentation-lookup
Load when a workflow-router-selected owner workflow needs current library, framework, SDK, API, CLI, or cloud-service documentation; fetch docs instead of relying on training data or ordinary repo evidence.
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.
xcloud-docker-deploy
Deploy any project to xCloud hosting — auto-detects stack (WordPress, Laravel, PHP, Node.js, Next.js, NestJS, Python, Go, Rust), routes to native or Docker deployment, generates production-ready Dockerfile, docker-compose.yml, GitHub Actions CI/CD, and .env.example. Works from zero Docker setup.
deep-learning-pipeline
Use when publishing a 深度学习系列 episode (deep-learning topic deep-dive — interview / paper / framework / debate) end-to-end with editorial polish. Pipeline: signature visual style (one per episode, never reuse) → HTML body → dedicated CF Pages subdomain → triple-format screenshot (4K + mobile + WeChat JPEG) → GDrive structured archive. Trigger: 深度学习管线 / learning pipeline / 专题报告 / 系列报告 / 出一期 / 新一期 / 下一期 / 第N期 / 罗福莉式 / hermes-agent式. NOT for: passive content summary (use deep-learning-skill for body generation; this skill orchestrates the full delivery pipeline around it). Mode: pipeline (sequential A→B→C→D→E).
ft-business-analyst
Use when: understanding business scenarios, identifying tax-related events, decomposing business flows. Trigger: 业务分析, 经营场景, 涉税事项, 业务拆解, 新客户接入. NOT for: specific tax calculations, filing, accounting entries.
ft-compliance-auditor
Use when: risk identification, compliance checking, Golden Tax IV alerts, audit preparation, internal control review. Trigger: 合规, 风险, 稽查, 预警, 金税四期, 内控, 质检. NOT for: external audit opinions, legal proceedings.
ft-compliance-checklist
Use when: generating compliance checklists, monthly/quarterly/annual review lists, industry-specific compliance requirements. Trigger: 合规清单, 检查清单, 月度检查, 季度检查, 年度检查. NOT for: actual compliance checking (use ft-compliance-auditor).
ft-internal-audit
Use when: user needs internal control evaluation, process audit, fraud detection, COSO framework application, or audit workpaper preparation. Trigger: '内部审计', '内控', '舞弊', 'COSO', '审计底稿', '职责分离', '控制缺陷'. NOT for: external audit (CPA statutory audit) or financial statement audit opinion — those require registered CPA.
ft-risk-assessment
Use when: evaluating tax compliance risk, benchmarking financial indicators against industry standards, detecting anomalous patterns in financial data, or generating early warning reports. Trigger: risk assessment, tax risk, anomaly detection, industry benchmark, risk rating, early warning, compliance check, tax burden rate. NOT for: tax planning design, legal dispute resolution, or routine bookkeeping.
ft-tax-advisor
Use when: tax type determination, tax rate application, tax filing, VAT/CIT/PIT calculation, tax policy interpretation. Trigger: 税种, 税率, 申报, 纳税, 增值税, 企业所得税, 个人所得税, 附加税. NOT for: tax planning optimization, international tax, legal disputes.
ft-tax-planner
Use when: client needs tax optimization strategy, comparing tax burden across business structures, or evaluating legitimacy of tax planning schemes. Trigger: tax planning, tax optimization, tax savings calculation, business structure comparison, anti-avoidance boundary. NOT for: routine tax filing, historical tax declaration corrections, or transfer pricing documentation.
gsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
pm-cmd-setup-metrics
Design a product metrics dashboard with North Star metric, input metrics, health metrics, and alert thresholds
ux-ui-exp
UI/UX design intelligence with Bootstrap 5, Font Awesome, SweetAlert2. Use: /ux-ui-exp {command}
hive-workers
Execute tasks using hive mind orchestration with parallel agents, automatic code review, and documentation updates. Use for feature execution, epic completion, or complex multi-task work.
launchpad
End-to-end planning and execution orchestrator. Chains SPARC or wave-planner (Stage 1), plan-review, linear, and hive-workers-skill into a single workflow. Automatically routes infra changes through SPARC research instead of wave-planner. Use when starting a new initiative, executing a set of Linear issues, or running plan-to-deployment.
linear
Managing Linear issues, projects, and teams. Use when working with Linear tasks, creating issues, updating status, querying projects, or managing team workflows.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
sanity-best-practices
Sanity development best practices — schemas, GROQ, TypeGen, Visual Editing, Functions, Blueprints, and framework integrations. Use when working with Sanity content, schemas, queries, or Studio.
vulk-accessibility
Accessibility and semantic HTML patterns. Triggers: accessible, a11y, aria, semantic, screen reader, keyboard
gsap-react
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
api-test-suite-builder
当需要为 REST API 批量补齐集成/契约测试时使用；扫描 Next.js/Express/FastAPI/Django REST 路由并生成覆盖鉴权、入参校验、错误码、分页、文件上传、限流的可运行测试套件（Vitest+Supertest 或 Pytest+httpx）；不适用于纯前端 UI、单元测试或 GraphQL/gRPC；触发词：生成 API 测试、集成测试套件、契约测试
codebase-to-prd
当拿到现有前端/后端/全栈代码库、需要逆向产出产品需求文档（PRD）或功能清单时使用；做三阶段扫描（全局扫描→逐页深析→结构化文档生成）并产出可让工程师或 AI 完整重建每个页面与接口的业务可读 PRD（README+分页文档+枚举/接口/页面关系附录）；不适用于无源码的纯需求规划、UI 视觉走查或单纯代码审查。触发词：生成PRD、逆向需求文档、代码转文档、梳理页面字段与接口
best-practice
Cross-cutting best practices enforcement across code, templates, skills, prompts, scripts, documentation, pages, and design. The enforcement layer that catches violations any specialist might miss. Do NOT use for deep code review methodology (use code-review), application security depth (use owasp-security), accessibility implementation depth (use a11y), or specialist design-system work (use design-system-architecture, color-system-design, or typography-system). Do NOT use for designing the color system and contrast model (use color-system-design). Do NOT use for implementing font loading and vertical rhythm (use typography-system). Do NOT use for designing a skill's comprehension or application eval suite (use agent-eval-design).
nextjs-server-action-validation
Use when writing a Next.js Server Action that accepts user-submitted form data, mutation parameters, or any client-originated input. Every Server Action is a public HTTP endpoint regardless of how it is called — validate with Zod and check authentication as the first two operations before touching the database. Do NOT use for GET route handlers or Server Components that fetch data (those have no user-supplied input); do NOT use for Stripe webhook handlers (use stripe-webhook-signature-verification instead).
stripe-webhook-signature-verification
Use when validating incoming Stripe webhook requests in a Node.js or Next.js backend before processing any payment event. Verifies the `stripe-signature` header against `STRIPE_WEBHOOK_SECRET` using Stripe's HMAC-SHA256 scheme, and rejects replays older than 300 seconds. Do NOT use for general HTTP signature validation (use a generic crypto-signature skill), for processing the webhook payload after signature is confirmed (use payment-provider-router), or for Stripe API calls that are not webhook-driven.
automation-opportunity-finder
Helps students identify their first automation Quick Win through discovery questions, role-based suggestions, and industry-specific patterns. Inspired by Allie K. Miller's practical, accessible approach to AI education. Use when students need help finding automation opportunities.
content-formatter
Transforms dense lesson content into beautiful, web-ready, student-friendly format suitable for Notion, slides, or course platforms. Makes content scannable, visual, and easy to understand. Use when converting lesson content for student delivery.
templates
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
deploy
Multi-target deploy router for SkynetLabs with deploy gotchas baked in as hard rules. Detect the deploy target from the repo, route to the correct procedure, and BLOCK the wrong path before it ships. Targets in active use: - Vercel — React/Next sites (your-site-react, your-app) via `vercel` CLI / git push - Hostinger manual ZIP — example.com (Next.js standalone on Hostinger Node app). HARD RULE: deploys via manual ZIP archive upload, NOT GitHub auto-deploy, NOT Vercel. Warn + refuse if anyone routes it to GitHub push or Vercel. - WordPress theme/plugin — ZIP upload or Hostinger MCP deployWordpressTheme/Plugin - Static site — plain HTML/CSS via Hostinger MCP deployStaticWebsite Runs a pre-deploy gate (build passes, no exposed secrets, security review, git committed), executes the routed procedure, then verifies the URL is live and records the rollback path. Trigger when user says: "deploy", "ship to prod", "push live", "/deploy", "deploy my site", "deploy to vercel/hostinger", "upload the theme", "publish the
api-doc-generator
Use when user wants to generate API documentation, create OpenAPI/Swagger specs, document REST or GraphQL endpoints, auto-generate docs from code, or produce interactive API reference pages
requirements
Generate a requirements document with user stories, acceptance criteria, and constraints. Use when defining features, writing specs, or running /requirements before implementation.
atmos-web-app-deploy
Deploy the Atmos web app (`apps/web`) to Cloudflare Pages for this repository. Use when the user asks to deploy `app.atmos.land`, publish the web app, or create and push a `deploy-web-app-*` deployment tag.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
shop-brief
Triage an Epodsystem storefront issue: read the brief, pull store context, and inventory the current theme/products/menus so planning starts from real state. Use at the triage stage of a website-kind project. Triggers on: storefront/website issues, 'redesign the shop', 'add products', 'new landing page', 'change palette'.
shop-customize-draft
Build Epodsystem storefront changes on the DRAFT theme — sections, layout, palette, typography — via the shop MCP tools. Use at the code stage of a website-kind project. Triggers on: implementing a storefront redesign, editing theme sections, applying a palette, customize_theme.
shop-design-spec
Clarify an Epodsystem storefront issue into a concrete design spec (sections, products, menus, palette) and confirm the draft-theme build target before coding. Use at the clarify stage of a website-kind project. Triggers on: storefront design clarification, 'what should the page look like', verifying a redesign brief.
shop-menus
Edit Epodsystem store navigation menus reliably, working around the stale-storeMenu read bug (always re-query after mutating). Use at the code stage of a website-kind project. Triggers on: 'change the menu', adding/removing nav items, reordering navigation.
shop-products
Add or update Epodsystem products and collections so they render correctly in grids and cards (EAV images + reindex, smart-collection rules, visibility). Use at the code stage of an ecommerce website-kind project. Triggers on: 'add N products', updating a collection, fixing products that don't show in a grid.
shop-publish
Publish an Epodsystem storefront: snapshot the current live theme as a rollback backup, promote the verified DRAFT theme to main (live), clear the storefront cache, and confirm the live URL reflects the change. Use at the release stage of a website-kind project after shop-verify-draft passes. Triggers on: 'publish the storefront', 'go live', promote draft to main, release a theme change.
shop-rollback
Roll back an Epodsystem storefront after a bad publish by re-publishing the independent backup theme that shop-publish retained (NOT by re-activating the old main id — publishing can destroy it). Use at the fix stage of a website-kind project, or invoked by shop-publish on a failed live check. Triggers on: 'roll back the storefront', 'revert the theme', publish broke the live site.
shop-verify-draft
Verify Epodsystem storefront changes on the draft theme — load the live/draft URL, assert sections render, links return 200, products/menus bind real data — and FAIL the stage on mismatch. Use at the test stage of a website-kind project. Triggers on: verifying a storefront change, QA of a theme draft, checking a redesign.
react-nextjs-patterns
Modern React + Next.js patterns. Use when building Next.js apps (App Router, Server Components, streaming, parallel routes), implementing React state management (Redux Toolkit, Zustand, Jotai, React Query), or applying Next.js framework best practices (file conventions, RSC boundaries, metadata, image/font optimization).
frontend-quality
Enforce frontend quality bar — accessibility (WCAG 2.2 AA), performance (Core Web Vitals: LCP/INP/CLS), semantic HTML, image optimization, bundle size, mobile-first, loading/empty/error states. Use this skill on any PR that touches React/Next.js/Astro/Svelte/Vue components, CSS/Tailwind, layout files, or anything in `app/`, `components/`, `pages/`, `src/`. Critical for [Project A] (Argentine mobile users on slow 3G/4G) and [Company] docs site (developer audience expects fast). Auto-triggers on `*.tsx`, `*.jsx`, `*.svelte`, `*.vue`, `*.astro`, `*.css`.
landing-page-fast
Ship a high-quality landing page in 4-8 hours using Astro + Tailwind + shadcn-style components — opinionated defaults, proven section structures, performance and SEO baked in. Use when launching a new product ([Project A], [Project B]), validating a hackathon idea, refreshing a [Company] product page, or any time the user asks to "build a landing", "make a landing page", "set up a landing for X". Output: a deployed landing page on Vercel with form capture, analytics, and proper meta. Bakes in `frontend-quality` rules.
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
internal-comms
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
security-review
Checklist-driven security review pass for pull requests.
cost-estimate
Estimate development cost of a codebase based on lines of code and complexity
nx-generate
Generate code using nx generators. INVOKE IMMEDIATELY when user mentions scaffolding, setup, structure, creating apps/libs, or setting up project structure. Trigger words - scaffold, setup, create a ... app, create a ... lib, project structure, generate, add a new project. ALWAYS use this BEFORE calling nx_docs or exploring - this skill handles discovery internally.
saas-reverse
Reverse-engineer any SaaS into a venture-analyst-grade build blueprint. Scrapes the domain, gathers multi-source intelligence (reviews, HN, Reddit, job listings), and outputs a production-ready blueprint with moat analysis, churn vectors, upgrade gates, and a build prompt.
firebase-deploy
Deploy the oh-my-ontology static site to Firebase Hosting from this repo. Use when the user asks to deploy, redeploy, publish the site, update Firebase Hosting, or verify the live web.app URL. The workflow must read `.env.prod`, build the static export, deploy only Hosting, and verify the live URL. Never commit `.env.prod` or introduce Firebase backend services.
ontology-bootstrap
Bootstrap an empty (or near-empty) oh-my-ontology vault from the surrounding codebase — call analyze_repo_structure once, show the proposed candidates, and selectively land the accepted ones via add_concepts / add_relations (batch writers). Use when the user says "이 codebase 분석해줘" / "bootstrap the ontology" / "fill the vault from the code", or when you notice the vault has only the 5 starter nodes and the user has asked you to do anything ontology-related. Skip when the vault already has 20+ user-curated nodes — bootstrap is for the cold-start case only.
ontology-extract
User gave you prose — a meeting note, a PR description, an RFC draft, a chat log, a paragraph from a Notion page — and asks "extract ontology from this" or similar. Read the prose, cross-check the existing vault with `similar_nodes` / `find_evidence`, then propose a small set of candidate nodes/edges, ask the user to pick which to land, and only then call `add_concept` / `add_relation` / `patch_concept`. Skip when the prose is just a personal note with no ontology-shaped concepts.
ontology-sync
After a code change, sync the project's ontology vault — read what's already there, identify new capabilities / elements / domains introduced by the change, and write them back via the MCP server (or fall back to the CLI). Use this at the end of any task that introduces a new feature, refactors a module, or renames a unit. Skip when the change is purely a typo, style nudge, or test fixture tweak.
firebase-deploy
Deploy the ontology-atlas static site to Firebase Hosting from this repo. Use when the user asks to deploy, redeploy, publish the site, update Firebase Hosting, or verify the live web.app URL. The workflow must read `.env.prod`, build the static export, deploy only Hosting, and verify the live URL. Never commit `.env.prod` or introduce Firebase backend services.
ontology-bootstrap
Bootstrap an empty (or near-empty) ontology-atlas vault from the surrounding codebase — call analyze_repo_structure once, show the proposed candidates, and selectively land the accepted ones via add_concepts / add_relations (batch writers). Use when the user says "이 codebase 분석해줘" / "bootstrap the ontology" / "fill the vault from the code", or when you notice the vault has only the 5 starter nodes and the user has asked you to do anything ontology-related. Skip when the vault already has 20+ user-curated nodes — bootstrap is for the cold-start case only.
ontology-extract
User gave you prose — a meeting note, a PR description, an RFC draft, a chat log, a paragraph from a Notion page — and asks "extract ontology from this" or similar. Read the prose, cross-check the existing vault with `similar_nodes` / `find_evidence`, then propose a small set of candidate nodes/edges, ask the user to pick which to land, and only then call `add_concept` / `add_relation` / `patch_concept`. Skip when the prose is just a personal note with no ontology-shaped concepts.
ontology-sync
After a code change, sync the project's ontology vault — read what's already there, identify new capabilities / elements / domains introduced by the change, and write them back via the MCP server (or fall back to the CLI). Use this at the end of any task that introduces a new feature, refactors a module, or renames a unit. Skip when the change is purely a typo, style nudge, or test fixture tweak.
database-designer
Database schema design, migration planning, and RLS policies. Use when: schema design, 'design database', table relationships, row-level security. NOT for: query optimization (use postgresql-best-practices).
governance
Enforces engineering standards and code quality policies. Use during code reviews, before commits, when discussing standards or compliance, for quality audits, and when running retrospectives. Trigger phrases include 'run a retro', 'retrospective', 'code review', 'run review', or 'audit standards'.
plan-review
Multi-perspective plan review with VP Product, VP Engineering, and VP Design. Use when reviewing implementation plans, design docs, architecture proposals, or wave plans for blockers, anti-patterns, conflicts, and regressions.
wave-planner
Transform project issues into execution-ready implementation plans with risk prediction, wave-based organization, specialist agents, and TDD workflow
worktree-manager
Manage git worktrees for parallel development with conflict prevention and wave-aware execution strategy. Use when creating feature branches, starting parallel work sessions, merging worktree PRs, or coordinating multiple Claude sessions.
ckmbanner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
ckmdesign
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
ckmdesign-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
vercel-deployment
Fix Next.js and Vercel deployment failures, environment issues, build output problems, and production routing regressions.
course-material-creator
Creates interactive tutorials teaching Claude Code to business leaders. Covers skills, agents, hooks, plugins, commands, MCP, memory, and settings. Use when building course content, lessons, training materials, or educational resources about Claude Code.
nodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
deploy-checklist
Verification workflow before shipping to production. Tests / lints / migrations / rollback plan / env config / secret rotation / observability spot-check — gated steps with explicit user approval before destructive actions.
fullstack-dev
Server-first development workflow for Next.js + TypeScript projects. Encodes patterns for Server Components, route handlers, type-safe data flows, and testing strategy across the front-end / back-end boundary.
astro
Astro framework: content-first sites, islands architecture, MDX collections, Cloudflare Workers/Pages deployment, View Transitions, SEO
better-auth
Better Auth: the open-source auth framework for Next.js/TypeScript — session management, OAuth, 2FA, RBAC, Drizzle/Prisma adapters, no vendor lock-in
bun
Bun runtime: build fast Node.js-compatible APIs with Bun's built-in server, bundler, test runner, and package manager — Elysia framework, SQLite, and edge-optimised patterns
express
Express.js REST API: routing, middleware chains, error handling, validation with Zod, authentication with JWT, and production patterns for Node.js services
fastify
Fastify REST API: schema-first validation, plugin architecture, hooks lifecycle, TypeScript, Pino logging, JWT auth, Swagger, and production patterns for high-throughput Node.js services
firebase
Firebase: Firestore database, Authentication, Realtime Database, Cloud Functions, Firebase Storage, and security rules — for web and mobile apps
graphql-client-integration
- Setting up a GraphQL client in a React or Next.js project - Consuming a GraphQL API with typed queries - Configuring Apollo Client, urql, or Tanstack Query with GraphQL - Adding GraphQL Code Generat
hono
Hono framework: build ultra-fast REST APIs and middleware for Cloudflare Workers, Bun, Deno, and Node.js — routing, validation with Zod, RPC client, and edge deployment patterns
nestjs
NestJS modules, controllers, services, guards, interceptors, TypeORM, CQRS, microservices, Jest testing
nextjs
Next.js App Router patterns: Server Components, Server Actions, route handlers, middleware, parallel routes, ISR
payload-cms
Payload CMS: TypeScript-first headless CMS, collection schemas, access control, hooks, REST+GraphQL APIs, Next.js App Router integration
playwright-pro
Playwright E2E testing: page object model, fixture setup, network interception, visual regression, CI integration, and debugging flaky tests — production-grade browser automation
rbac
RBAC multi-tenant patterns: role tables, permission checks, row-level scoping, organization isolation, middleware guards for Next.js and Express/FastAPI
saas-scaffolder
SaaS project scaffolder: generate a complete production-ready SaaS codebase from a description — Next.js, auth, database, payments, email, and deployment configured
vercel-ai-sdk
Vercel AI SDK: streaming AI responses to Next.js, useChat/useCompletion hooks, tool calls, generative UI, multi-provider routing (Claude, OpenAI, Gemini)
vibe-proof
Security-focused hardening for vibe-coded full-stack apps. Runs parallel audits across frontend, backend, and config layers, then fixes issues systematically by severity. Covers injection, PII exposure, missing headers, error leakage, dead code, and credential hygiene.
uiux-guidelines
UI/UX best practices and guidelines for professional web applications
zod-4
Zod 4 schema validation patterns. Trigger: When using Zod for validation - breaking changes from v3.
ansoff-matrix
Generate an Ansoff Matrix analysis mapping growth strategies across market penetration, market development, product development, and diversification. Use when considering growth options, planning market expansion, or evaluating strategic growth paths.
bigdata-machine-learning
Machine learning toolkit for big data teams. Includes scikit-learn, PyTorch Lightning, Transformers, SHAP for model training, deployment, and interpretation. Use when building ML pipelines, training models, or explaining predictions.
bigdata-processing
Core big data processing toolkit for data teams. Includes Polars, Dask, Vaex for large-scale data processing, ETL pipelines, and distributed computing. Use when working with datasets larger than memory, building data pipelines, or optimizing data processing performance.
bigdata-visualization
Data visualization toolkit for big data teams. Includes Matplotlib, Seaborn, Plotly for static and interactive charts. Use when creating dashboards, reports, or exploring data visually.
business-model
Generate a Business Model Canvas with all 9 building blocks. Use when creating a business model, documenting how a business creates value, or analyzing an existing business model.
design-taste-frontend
Use for opinionated UI engineering standards: variance/motion/density baselines, component architecture rules, CSS hardware acceleration. Best for refining or auditing existing UI. NOT for greenfield builds (use frontend-design). NOT for design thinking (use qiaomu-design-advisor).
industry-forces
Perform Five Forces analysis — competitive rivalry, supplier power, buyer power, threat of substitutes, and threat of new entrants. Use when analyzing industry dynamics, assessing competitive forces, or evaluating market attractiveness.
lean-canvas
Use when exploring startup hypotheses, testing business model viability, or comparing venture ideas on a single page. Trigger: user says 'lean canvas', 'business model', 'startup hypothesis', 'one-page business plan', or when validating whether an idea is worth pursuing before building anything.
metrics-dashboard
Define and design a product metrics dashboard with key metrics, data sources, visualization types, and alert thresholds. Use when creating a metrics dashboard, defining KPIs, setting up product analytics, or building a data monitoring plan.
north-star-metric
Define a North Star Metric and 3-5 supporting input metrics that form a metrics constellation. Classify the business game (Attention, Transaction, Productivity) and validate against 7 criteria for an effective North Star. Use when choosing a North Star Metric, setting up a metrics framework, learning about the North Star Framework, or deciding what to measure.
pestle-analysis
Perform a PESTLE analysis covering Political, Economic, Social, Technological, Legal, and Environmental factors. Use when assessing the macro environment, doing strategic planning, or evaluating external factors affecting your business.
product-strategy
Create a comprehensive product strategy using the 9-section Product Strategy Canvas — vision, segments, costs, value propositions, trade-offs, metrics, growth, capabilities, and defensibility. Use when building a product strategy, creating a strategic plan, or defining product direction.
redesign-existing-projects
Use when an existing website or app has generic/tired design and needs premium polish without rewriting the codebase. Trigger: 'redesign this', 'upgrade the UI', 'make it look professional', 'fix the generic AI look', existing project with working functionality but poor visual quality. NOT for: green-field designs (use frontend-design), design system creation (use visual-style), or user research phases (use stitch-design-pipeline).
sql-queries
Generate SQL queries from natural language descriptions. Supports BigQuery, PostgreSQL, MySQL, and other dialects. Reads database schemas from uploaded diagrams or documentation. Use when writing SQL, building data reports, exploring databases, or translating business questions into queries.
swot-analysis
Perform a detailed SWOT analysis — strengths, weaknesses, opportunities, and threats with actionable recommendations. Use when doing strategic assessment, competitive analysis, or evaluating a product or business position.
systematic-debugging
Use when encountering a bug, test failure, crash, or unexpected behavior. Enforces root-cause investigation before any fix attempt. NOT for writing new features. Trigger: bug, error, failing test, broken, unexpected, crash, regression.
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code
value-proposition
Design a detailed value proposition using a 6-part JTBD template — Who, Why, What before, How, What after, Alternatives. Use when creating a value proposition, analyzing customer value delivery, or articulating why customers should choose your product.
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.
vercel
Deploy and configure applications on Vercel. Use when deploying Next.js apps, configuring serverless functions, setting up edge functions, or managing Vercel projects. Triggers on Vercel, deploy, serverless, edge function, Next.js deployment.
claude-md-optimizer
Optimize oversized CLAUDE.md files using progressive disclosure. Analyzes content tiers, detects encryption constraints, creates sub-documents, and rewrites the main file with a Sub-Documentation Table. Triggers: optimize CLAUDE.md, reduce CLAUDE.md size, CLAUDE.md too long, apply progressive disclosure to CLAUDE.md
docker
Container-based development for isolated, reproducible environments. Use when running npm commands, installing packages, executing code, or managing project dependencies. Trigger phrases include "npm install", "run the build", "start the server", "install package", or any code execution request.
session-cleanup
End-of-session housekeeping for git repositories. Use when the user asks to 'end of session', 'clean up session', 'session housekeeping', 'clean up branches', 'clean up worktrees', or 'clean up remote branches'.
varlock
Secure environment variable management with Varlock. Use when handling secrets, API keys, credentials, or any sensitive configuration. Ensures secrets are never exposed in terminals, logs, traces, or Claude's context. Trigger phrases include "environment variables", "secrets", ".env", "API key", "credentials", "sensitive", "Varlock".
lang-typescript
Use when writing or reviewing TypeScript/JavaScript (.ts/.tsx/.js/.mjs/.cts) or Node/Next.js/React/Nest/Express code — idiomatic style, strict typing, async error handling, and the language's top security pitfalls. Triggers on tsconfig, package.json, ESLint/Prettier, Vitest/Jest, pnpm/npm/yarn projects.
vibe-frontend-design
Design and implement distinctive, production-grade screen UI for vibe-coding workflows: loose prompts, taste-driven iteration, and fast frontend polishing that still respects usability, layout discipline, and real code constraints. Use this skill whenever the user wants a frontend to feel more polished, modern, premium, cohesive, bold, or simply "better", including landing pages, dashboards, app screens, forms, lists, onboarding, settings, and component restyling. Also use it for vague requests like "make this UI nicer", "give this more personality", "make it feel expensive", or "vibe code this screen." Preserve existing design systems when they are good; introduce a clearer visual and interaction system when they are weak or absent.
sanity-best-practices
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the App SDK. Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, Sanity Functions, documentEventHandler, defineDocumentFunction, defineMediaLibraryAssetFunction, @sanity/functions, @sanity/blueprints, sanity.blueprint.ts, event-driven content automation, or when reviewing and fixing a Sanity codebase.
better-auth-setup
Production-ready Better Auth integration for fullstack projects. Covers both the backend (Bun + Hono + Drizzle + PostgreSQL) and the frontend reverse proxy architecture (Next.js, Cloudflare Workers, or any framework proxying auth requests to a separate backend). Sets up email/password auth, session cookies, OAuth providers (Google, GitHub), API key auth, organization/multi-tenant support, email verification, CORS, security headers, auth middleware, tenant context, proxy forwarding headers, dynamic baseURL with allowedHosts, cookie prefix handling, and test infrastructure — all in one pass with zero gotchas. Use this skill whenever setting up Better Auth, adding OAuth/social login, configuring a reverse proxy for auth, debugging redirect_uri_mismatch errors, fixing state_mismatch cookie issues, session cookies not persisting after OAuth callback, or when the user mentions Better Auth, OAuth proxy, auth setup, login, signup, session management, API keys, multi-tenant auth, or "session cookie not working".
cloudflare-nextjs-setup
Set up Cloudflare Workers deployment for an existing Next.js project using OpenNext. Triggers on "deploy to Cloudflare", "set up Cloudflare Workers", "Cloudflare deployment", "add Cloudflare to this project".
scaffold
One-shot a new product — folders, Next.js starter, product.config.json, CLAUDE.md, scope.md, PRD skeleton, SETUP.md checklist. The Lovable-like ignition.
clerk-security
Security audit for applications using Clerk authentication including session management, webhook signature verification, JWT template configuration, organization/role setup, publishable vs secret keys, allowed origins/redirect URLs, custom session claims, and Clerk-specific patterns. Use this skill whenever the user mentions Clerk, @clerk/nextjs, @clerk/clerk-sdk-node, ClerkProvider, useUser, useAuth, clerkClient, Clerk webhooks, svix, or asks "audit my Clerk setup", "Clerk security", "is my Clerk webhook safe". Trigger when the codebase contains `@clerk/*` packages or `CLERK_*` environment variables.
cloudflare-workers-security
Security audit for Cloudflare Workers applications covering bindings (KV, D1, R2, Durable Objects, Queues, Vectorize), secrets vs vars in wrangler.toml, Worker routes and zones, request origin validation, CORS, mTLS to origin, Smart Placement, and Workers-specific runtime concerns. Use this skill whenever the user mentions Cloudflare Workers, wrangler, wrangler.toml, KVNamespace, D1Database, R2Bucket, DurableObjectNamespace, Env bindings, c.env, env.MY_KV, or asks "audit my Cloudflare Worker", "Workers security review", "wrangler secrets". Trigger when the codebase contains `wrangler` or `@cloudflare/workers-types` in package.json.
nextauth-security
Security audit for NextAuth.js / Auth.js applications including provider configuration, JWT vs database session strategy, callback safety (jwt, session, signIn, redirect), CSRF, NEXTAUTH_SECRET handling, OAuth client secrets, custom adapters, and Auth.js-specific patterns. Use this skill whenever the user mentions NextAuth, NextAuth.js, Auth.js, next-auth, @auth/core, authjs, NEXTAUTH_SECRET, [...nextauth].ts, providers, callbacks, signIn/signOut, or asks "audit my NextAuth setup", "Auth.js security review". Trigger when the codebase contains `next-auth` or `@auth/*` packages.
nextjs-security
Security audit specific to Next.js applications including App Router and Pages Router, Server Actions, middleware, Route Handlers, Server Components, environment variable exposure (NEXT_PUBLIC_), getServerSideProps/getStaticProps secret leakage, Image Optimization SSRF, and Next.js-specific authentication patterns. Use this skill whenever the user mentions Next.js, App Router, Pages Router, Server Actions, RSC, server components, middleware.ts, route handlers, NEXT_PUBLIC_, Vercel deployment patterns, next.config.js, or asks "audit my Next.js app", "is my middleware safe", "Server Actions security", "Next.js auth review". Trigger when the codebase contains a `next.config.js`/`next.config.mjs`/`next.config.ts` file, `app/` directory with `page.tsx` files, or `pages/` directory with Next.js conventions.
nodejs-express-security
Security audit for Node.js HTTP servers using Express, Koa, Hapi, or plain http/https — covering middleware ordering, body parser config, helmet usage, session management with express-session, CORS configuration, error handling, file upload patterns (multer/busboy), and common Node-specific vulnerabilities like prototype pollution, ReDoS, and event loop blocking. Use this skill whenever the user mentions Express, Koa, Hapi, express-session, helmet, multer, body-parser, Node.js server, npm packages with known CVEs, or asks "audit my Express app", "Node.js security review", "is my Express middleware safe", "Koa security". Trigger when the codebase contains `require('express')`, `from 'express'`, `express()`, `new Koa()`, or similar Node HTTP server patterns.
prisma-orm-security
Security audit specific to Prisma ORM usage including raw query escape hatches ($queryRaw, $executeRaw, $queryRawUnsafe), mass assignment via spreading user input into create/update, missing tenant scoping on findFirst/findMany, IDOR through Prisma query construction, schema-level access control gaps, and Prisma Accelerate/Pulse security considerations. Use this skill whenever the user mentions Prisma, prisma/client, schema.prisma, $queryRaw, the prisma.modelName.create / update / findMany pattern, or asks "audit my Prisma queries", "Prisma security review", "raw query safety", "Prisma mass assignment". Trigger when the codebase contains @prisma/client, schema.prisma, or any prisma. query calls.
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.
trpc-security
Security audit for tRPC applications covering procedure auth via middleware, input validation with Zod, protectedProcedure vs publicProcedure patterns, router composition, context creation, batching abuse, output sanitization, and tRPC-specific patterns across Next.js, Express, Fastify, and standalone adapters. Use this skill whenever the user mentions tRPC, @trpc/server, @trpc/client, @trpc/react-query, createTRPCRouter, protectedProcedure, publicProcedure, t.procedure, ctx, or asks "audit my tRPC app", "tRPC security", "tRPC middleware safe". Trigger when the codebase contains `@trpc/server` or `@trpc/client` in package.json.
auto-project-builder
인터랙티브 설정(플랫폼·기술스택·서비스 유형·개수)을 거쳐 트렌드 조사·경쟁 분석·아이디어 평가를 자율 수행하고, 자동 QA 루프로 실제 동작하는 프로젝트를 완성까지 구현하는 완전 자동화 스킬. 체크포인트 재개, 완료 알림, 날짜별 리포트, overview.html 포함.
idea-generator
멀티소스 페인 마이닝 → 병렬 3역할 적대적 평가 → YC 스타일 go/no-go 판정으로 높은 품질의 프로젝트 아이디어를 생성. auto-project-builder Phase 1에서 호출되거나 단독으로 사용 가능.
nextjs
Write and review modern Next.js App Router code with secure RSC boundaries, direct server data access, async route APIs, Server Actions, rendering/cache strategy, and legacy Pages Router awareness.
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.
api-security
API security review against OWASP API Top 10 2023. Covers auth (OAuth2/JWT/API-keys), object-level authorization (BOLA/IDOR), schema validation, rate-limiting, CORS, SSRF, and GraphQL-specific concerns (introspection, query depth, batching).
nextjs-security
Next.js security review — middleware auth-bypass patterns (CVE-2025-29927), Server Actions auth/CSRF, Server/Client Component boundary and SSR data leaks, auth.js (NextAuth) config, route handlers as API, Image Optimization SSRF, security headers via middleware.
sast-orchestrator
SAST orchestration for Semgrep, CodeQL and SonarQube. Covers tool selection, ruleset curation, PR-comment integration, noise reduction with baselines, and language-specific linters (bandit, gosec, brakeman, eslint-security) when they add coverage.
secure-coding
Language-agnostic secure-coding patterns — input validation, injection-safe APIs, authN/authZ, crypto, secrets, dependency hygiene. The default lens when no framework-specific skill applies.
security-review
Security review workflow for a PR, feature or codebase — scope, automated scans, manual OWASP/CWE pattern-check, prioritize and report. Uses secure-coding as pattern library.
algolia-search
Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.
anime.js-best-practices
This skill should be used when the user asks to "animate elements", "add animations", "create transitions", "use anime.js", "implement motion", "add scroll animations", "create timeline animations", "stagger animations", "animate SVG", "add draggable elements", or needs guidance on anime.js v4 patterns, easing, performance, or React/Next.js animation integration.
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.
adding-a-rollup-aware-collection
Use when the user wants to add a new household-level collection that has owner-keyed members (e.g. life insurance policies, future trust distributions, custodial accounts, side businesses). The include-in-rollup flag must cascade through the new collection just like it does for accounts, liabilities, budget items, and income streams. There's a failure-driven checklist test (lib/rollupContract.test.ts) that catches new collections that ignore the flag — this skill walks through adding to it.
adding-an-asset-class
Use when the user wants to add a new asset class (e.g. carbon credits, private credit, gold-backed tokens) to the holding taxonomy. Walks through the four files that must change in lockstep — lib/types.ts (extend AssetClass union), lib/portfolio/holdingKinds.ts (kind metadata), lib/portfolio/holdingFactory.ts (builder), and one or more form components under app/_components/holdings/holding-creator/. Skip when the change is just adding a new ETF preset to an existing class — use the presets file directly.
agent-team-orchestration
Use for multi-phase work that warrants a coordinator + independent review of each phase. The team-lead subagent decomposes the work, delegates implementation to feature-builder, gates each phase through code-reviewer, and verifies green at phase boundaries. Two operational modes — hub-and-spoke (standard Claude Code) and persistent team (experimental agent-teams feature) — pick by capability available; see below. Skip for single-file fixes or focused engine changes — main agent in-conversation is faster.
capturing-readme-walkthroughs
Use when the user asks to regenerate the README's comprehensive tour video, add a new feature flow to that tour, refresh it after a UI change, or otherwise work with the Playwright capture pipeline. Produces one animated WebP (~1-2 MB) that inline-renders on GitHub README + a WebM source file. Covers when to regenerate (which UI changes drift the capture), how to add a new feature flow section, and the pacing pattern that makes the video read well. Skip for general Playwright work (smoke tests, visual regression, e2e flows) — those live under e2e/ separately.
investigating-a-ci-failure
Use when a GitHub Actions PR webhook reports a CI failure on this repo (lint / test / build / visual / lighthouse / e2e). Triages by failure class, identifies whether the cause is environmental (CI runner difference), a recent code change, or a flaky test. Returns either a one-line "this is the fix" plan or a clarifying question. Don't use to investigate local-only test failures — those are usually faster to debug interactively.
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.
jikime-platform-supabase
Supabase specialist covering PostgreSQL 16, pgvector, RLS, real-time subscriptions, Edge Functions, and Postgres performance optimization. Use when building full-stack apps with Supabase backend or optimizing database performance.
skill-creator
Authors and structures professional-grade agent skills following the agentskills.io spec. Use when creating new skill directories, drafting procedural instructions, or optimizing metadata for discoverability. Don't use for general documentation, non-agentic library code, or README files.
nextjs-import-enforcer
Automatically enforce consistent import patterns using Next.js path aliases and proper organization. Use when writing imports, creating new files, or organizing code structure.
react-accessibility-validator
Automatically validate React/Next.js components meet WCAG 2.1 AA standards. Use when creating components, forms, buttons, modals, navigation, or any interactive UI elements.
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.
tdd-planner
This skill should be used when the user asks to "plan a feature", "prepare for dev loop", "structure TDD approach", "break down this task", "create development plan", or when generating structured prompts for iterative development. Creates dev-loop-ready plans with TDD phases, file tables, code snippets, and framework-specific guidance.
webcloner
Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
aws
AWS hosting and deployment patterns covering compute (EC2, ECS, Lambda), networking (ALB, CloudFront, Route 53, API Gateway), databases (RDS, ElastiCache), infrastructure-as-code (CDK), IAM, monitoring (CloudWatch), and cost optimization. Use when deploying applications to AWS or designing cloud architecture. Triggers on AWS, EC2, ECS, Fargate, Lambda, CloudFront, CDK, API Gateway, Route 53, RDS, IAM.
generate-image
Generates images from text prompts using MuAPI. Use when the user asks to create, generate, or make an image, picture, illustration, or artwork from a text description.
generate-video
Generates videos from text prompts using MuAPI. Use when the user asks to create, generate, or make a video, animation, or motion clip from a text description.
media-help
Helps users explore and choose the best MuAPI models for their media generation needs. Use when the user asks what models are available, wants recommendations, or needs help deciding between image and video generation options.
ab-test-setup
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program," or "experiment playbook." Use this whenever someone is comparing two approaches and wants to measure which performs better, or when they want to build a systematic experimentation practice. For tracking implementation, see analytics-tracking. For page-level conversion optimization, see page-cro.
ad-creative
When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.
ai-seo
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' 'zero-click search,' 'how do I show up in AI answers,' 'LLM mentions,' or 'optimize for Claude/Gemini.' Use this whenever someone wants their content to be cited or surfaced by AI assistants and AI search engines. For traditional technical and on-page SEO audits, see seo-audit. For structured data implementation, see schema-markup.
analytics-tracking
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see ab-test-setup.
aso-audit
When the user wants to audit or optimize an App Store or Google Play listing. Also use when the user mentions 'ASO audit,' 'app store optimization,' 'optimize my app listing,' 'improve app visibility,' 'app store ranking,' 'audit my listing,' 'why aren't people downloading my app,' 'improve my app conversion,' 'keyword optimization for app,' or 'compare my app to competitors.' Use when the user shares an App Store or Google Play URL and wants to improve it.
churn-prevention
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers or wants to build systems to prevent it. For post-cancel win-back email sequences, see email-sequence. For in-app upgrade paywalls, see paywall-upgrade-cro.
ckmbrand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
co-marketing
When the user wants to find co-marketing partners, plan joint campaigns, or brainstorm partnership opportunities. Use when the user says 'co-marketing,' 'partner marketing,' 'joint campaign,' 'who should we partner with,' 'integration marketing,' 'cross-promotion,' 'collaborate with another company,' 'partnership ideas,' or 'co-brand.' For customer referral programs, see referral-program. For launch-specific partnerships, see launch-strategy.
cold-email
Write B2B cold emails and follow-up sequences that get replies. Use when the user wants to write cold outreach emails, prospecting emails, cold email campaigns, sales development emails, or SDR emails. Also use when the user mentions "cold outreach," "prospecting email," "outbound email," "email to leads," "reach out to prospects," "sales email," "follow-up email sequence," "nobody's replying to my emails," or "how do I write a cold email." Covers subject lines, opening lines, body copy, CTAs, personalization, and multi-touch follow-up sequences. For warm/lifecycle email sequences, see email-sequence. For sales collateral beyond emails, see sales-enablement.
community-marketing
Build and leverage online communities to drive product growth and brand loyalty. Use when the user wants to create a community strategy, grow a Discord or Slack community, manage a forum or subreddit, build brand advocates, increase word-of-mouth, drive community-led growth, engage users post-signup, or turn customers into evangelists. Trigger phrases: "build a community," "community strategy," "Discord community," "Slack community," "community-led growth," "brand advocates," "user community," "forum strategy," "community engagement," "grow our community," "ambassador program," "community flywheel."
competitor-alternatives
When the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs page,' 'competitor comparison,' 'comparison page,' '[Product] vs [Product],' '[Product] alternative,' 'competitive landing pages,' 'how do we compare to X,' 'battle card,' or 'competitor teardown.' Use this for any content that positions your product against competitors. Covers four formats: singular alternative, plural alternatives, you vs competitor, and competitor vs competitor. For sales-specific competitor docs, see sales-enablement.
competitor-profiling
When the user wants to research, profile, or analyze competitors from their URLs. Also use when the user mentions 'competitor profile,' 'competitor research,' 'competitor analysis,' 'profile this competitor,' 'analyze competitor,' 'competitive intelligence,' 'competitor deep dive,' 'who are my competitors,' 'competitor landscape,' 'competitor dossier,' 'competitive audit,' or 'research these competitors.' Input is a list of competitor URLs. Output is structured competitor profile markdown files. For creating comparison/alternative pages from profiles, see competitor-alternatives. For sales-specific battle cards, see sales-enablement.
content-strategy
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," "content planning," "editorial calendar," "content marketing," "content roadmap," "what content should I create," "blog topics," "content pillars," or "I don't know what to write." Use this whenever someone needs help deciding what content to produce, not just writing it. For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit. For social media content specifically, see social-content.
copy-editing
When the user wants to edit, review, or improve existing marketing copy, or refresh outdated content. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' 'copy sweep,' 'tighten this up,' 'this reads awkwardly,' 'clean up this text,' 'too wordy,' 'sharpen the messaging,' 'refresh this content,' 'update this page,' 'this content is outdated,' or 'content audit.' Use this when the user already has copy and wants it improved or refreshed rather than rewritten from scratch. For writing new copy, see copywriting.
copywriting
When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see email-sequence. For popup copy, see popup-cro. For editing existing copy, see copy-editing.
customer-research
When the user wants to conduct, analyze, or synthesize customer research. Use when the user mentions "customer research," "ICP research," "talk to customers," "analyze transcripts," "customer interviews," "survey analysis," "support ticket analysis," "voice of customer," "VOC," "build personas," "customer personas," "jobs to be done," "JTBD," "what do customers say," "what are customers struggling with," "Reddit mining," "G2 reviews," "review mining," "digital watering holes," "community research," "forum research," "competitor reviews," "customer sentiment," or "find out why customers churn/convert/buy." Use for both analyzing existing research assets AND gathering new research from online sources. For writing copy informed by research, see copywriting. For acting on research to improve pages, see page-cro.
directory-submissions
When the user wants to submit their product to startup, SaaS, AI, agent, MCP, no-code, or review directories for backlinks, domain rating, and discovery. Also use when the user mentions "directory submissions," "submit to directories," "backlinks from directories," "list my product," "submit to Product Hunt," "BetaList," "TAAFT," "Futurepedia," "G2 listing," "Capterra listing," "AlternativeTo," "SaaSHub," "AI directories," "MCP registry," "agent directory," "dofollow backlinks," "launch directories," or "directory tracker." Use this whenever someone is planning the directory layer of a product launch or an ongoing backlink campaign. For the broader launch moment, see launch-strategy. For programmatic SEO pages that should live behind these backlinks, see programmatic-seo. For AI citation optimization, see ai-seo.
email-sequence
When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," "lifecycle emails," "trigger-based emails," "email funnel," "email workflow," "what emails should I send," "welcome series," or "email cadence." Use this for any multi-email automated flow. For cold outreach emails, see cold-email. For in-app onboarding, see onboarding-cro.
form-cro
When the user wants to optimize any form that is NOT signup/registration — including lead capture forms, contact forms, demo request forms, application forms, survey forms, or checkout forms. Also use when the user mentions "form optimization," "lead form conversions," "form friction," "form fields," "form completion rate," "contact form," "nobody fills out our form," "form abandonment," "too many fields," "demo request form," or "lead form isn't converting." Use this for any non-signup form that captures information. For signup/registration forms, see signup-flow-cro. For popups containing forms, see popup-cro.
free-tool-strategy
When the user wants to plan, evaluate, or build a free tool for marketing purposes — lead generation, SEO value, or brand awareness. Also use when the user mentions "engineering as marketing," "free tool," "marketing tool," "calculator," "generator," "interactive tool," "lead gen tool," "build a tool for leads," "free resource," "ROI calculator," "grader tool," "audit tool," "should I build a free tool," or "tools for lead gen." Use this whenever someone wants to build something useful and give it away to attract leads or earn links. For downloadable content lead magnets (ebooks, checklists, templates), see lead-magnets.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
image
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'Ideogram,' 'Gemini image,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
performance-profiling
Guides active performance investigation with measure-identify-fix-measure cycle for both frontend and backend. Triggers chrome-devtools for frontend profiling. Use when profiling performance, investigating slow code, optimizing speed, performance issues, slow page, slow API, latency problems, or when something feels sluggish.
aio-neobrutalism
Apply neobrutalism design to a web project — detects tech stack, generates CSS tokens, and transforms existing UI components.
code-review
Reviews code changes for quality, security, and best practices. Auto-invoke when implementation is complete and the workflow reaches the review step (step 9), or when changes are ready for pre-PR review.
nextjs-image-usage
Implement proper Next.js 16 Image component usage with configuration for remote domains, responsive images, and breaking changes from previous versions
agent-payment-x402
Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol.
prototype-react-iterate
Generate and iterate on React/Tailwind/ShadCN prototypes with Persona-driven feedback loops. Creates multiple variants, serves them, uses VLM to simulate user feedback based on Persona traits (Federated Taxonomy), and iterates on the code.
backend-design
Design and scaffold a backend for an existing frontend. Activate on "/backend-design", "build a backend for this frontend", "generate the API and database for this app", "design a backend from the UI", or similar intent. The user sees two checkpoints — a reviewable design doc (endpoints, DB schema, auth), then scaffolded code after they approve.
humanizer
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
idea-choice
Weigh one or more ideas/concepts with a structured pros-and-cons analysis. Runs a clarity-council pass to surface arguments on both sides, optionally grills the user to expose hidden assumptions, scores each point on Impact × Confidence, and renders a markdown table per idea plus an overall recommendation (Go / Go with caveats / Don't / Needs more analysis). Use when the user wants to evaluate an idea before committing, compare two or more options on the merits, build a pros/cons list, score tradeoffs, justify a decision in writing, or asks "should I do X" / "is X worth it" / "weigh the tradeoffs" / "pros and cons of X". Differs from idea-decision-maker (which forces a fast binary pick) and idea-generate (which generates new options) — this skill deliberates on options the user already has.
flow-inventory-codebase-scan
Retrofit-mode inventory generator for the flow-architecture plugin (implements CDR-023). Mines code signals (routes, server actions, dialogs, menu items, API endpoints) from an existing Next.js App Router codebase and synthesizes the proposed inventory. Six phases — Phase 0 (PROJECT-INTENT priority filter) -> Phase 1 (app-classifier interview, shared with Q19 greenfield) -> Phase 2 (pattern-driven candidates, shared) -> Phase 3 (deterministic code scan, retrofit-only) -> Phase 4 (synthesis with 4-tag implementation-status taxonomy + value-priority) -> Phase 5 (user confirmation, shared). Framework locked to Next.js App Router for v1. Triggered by `/flow:retrofit-project` when `flow-preflight` mode classifier returns `retrofit`.
react-nextjs
React 19.2 + Next.js 16 development - Server Components, Cache Components, proxy.ts, View Transitions, App Router, TypeScript 6, and Tailwind CSS v4. Use when building frontend apps, creating components, or asking "how do I set up X?"
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.
using-context7
Use when working with any library/framework/SDK to fetch current docs. Beats training-data memory which is stale.
using-context7
Use when working with any library/framework/SDK to fetch current docs. Beats training-data memory which is stale.
conductor-setup
Set up Conductor (conductor.build) for a repository. Creates conductor.json, setup scripts for .env symlinking, and configures dev server run commands. Use when the user asks to "set up Conductor", "configure Conductor", "add conductor.json", "create conductor config", or mentions Conductor workspaces for a new or existing repo.
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.
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
ab-test-analyst-delivery-review
Delivery Review Workflow
ab-test-analyst-quality-gate
Quality Gate Workflow
ab-test-analyst-scope-contract
Scope Contract Workflow
algorithm-engineer-delivery-review
Delivery Review Workflow
algorithm-engineer-quality-gate
Quality Gate Workflow
algorithm-engineer-scope-contract
Scope Contract Workflow
bigdata-engineer-delivery-review
Delivery Review Workflow
bigdata-engineer-quality-gate
Quality Gate Workflow
bigdata-engineer-scope-contract
Scope Contract Workflow
data-analyst-delivery-review
Delivery Review Workflow
data-analyst-quality-gate
Quality Gate Workflow
data-analyst-scope-contract
Scope Contract Workflow
executive-strategist-delivery-review
Delivery Review Workflow
executive-strategist-quality-gate
Quality Gate Workflow
executive-strategist-scope-contract
Scope Contract Workflow
infra-engineer-delivery-review
Delivery Review Workflow
infra-engineer-quality-gate
Quality Gate Workflow
infra-engineer-scope-contract
Scope Contract Workflow
internal-control-specialist-delivery-review
Delivery Review Workflow
internal-control-specialist-quality-gate
Quality Gate Workflow
anime.js-best-practices
This skill should be used when the user asks to "animate elements", "add animations", "create transitions", "use anime.js", "implement motion", "add scroll animations", "create timeline animations", "stagger animations", "animate SVG", "add draggable elements", or needs guidance on anime.js v4 patterns, easing, performance, or React/Next.js animation integration.
aws
AWS hosting and deployment patterns covering compute (EC2, ECS, Lambda), networking (ALB, CloudFront, Route 53, API Gateway), databases (RDS, ElastiCache), infrastructure-as-code (CDK), IAM, monitoring (CloudWatch), and cost optimization. Use when deploying applications to AWS or designing cloud architecture. Triggers on AWS, EC2, ECS, Fargate, Lambda, CloudFront, CDK, API Gateway, Route 53, RDS, IAM.
dev-builder
全栈开发工程师技能包，负责根据产品需求文档和原型图实现功能代码。涵盖技术栈选择、项目初始化、功能实现、代码质量控制和功能验证。
react
React/Next.jsのプロジェクトで、UI=計算モデル（コンポーネント/状態/レンダリング）を軸に、設計・実装・レビュー・性能改善の判断を整理する。doc/input/rdd.md に「技術スタック React」または「技術スタック Next.js」があるリポジトリ、あるいはReactの状態管理/レンダリング/Server Components/SSR/Streaming/バンドル/パフォーマンス相談で使う。
template-ui
startup-saas-template UI-specific patterns. For generic patterns, see: typescript, react-19, nextjs-15, tailwind-4. Trigger: When working inside ui/ on template-specific conventions (shadcn, folder placement, actions, shared types/hooks/stores).
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.
frontend-filter
Generates URL-based filter systems for frontend data listing pages. Use when: user asks to create filters, filter sidebar, search filters, data filtering, or mentions "filter" for narrowing data in lists/tables. Supports: Text, dropdown, date range, category filters with URL state. Frameworks: TanStack Start, React (Vite), Next.js, Remix.
performance-profiler
Performance Profiler
brand-design
When the user wants to create visual creative assets — LinkedIn ads, carousel images, social graphics, banners, display ads, presentation slides, or any visual marketing content. Also use when the user mentions 'design,' 'creative,' 'ad image,' 'carousel,' 'banner,' 'social graphic,' 'slide,' 'visual asset,' 'LinkedIn ad,' or 'display ad.' This skill ensures all visual output follows the brand system.
hubspot-landing-page
Build HubSpot landing page templates for the Design Manager. Use when the user wants to create, edit, or troubleshoot HubSpot landing page templates. Also use when the user mentions 'HubSpot landing page,' 'landing page template,' 'HubL template,' 'Design Manager,' or 'HubSpot CMS.' For CTA buttons, see hubspot-cta. For page conversion optimization, see page-cro.
branch-create
Create an isolated database branch for feature development
clone-production
Clone a production database with automatic PII anonymization
migration-complete
Finish an ongoing migration by running the contract phase
migration-rollback
Undo an in-progress migration that hasn't been completed yet
migration-start
Begin a zero-downtime schema migration using pgroll
setup
Connect this project to your Xata account, initialize pgroll and run migrations
frontend-performance
フロントエンドパフォーマンス最適化ガイド。Core Web Vitals改善、バンドルサイズ削減、レンダリング最適化、画像最適化など、高速なWebアプリケーション構築のベストプラクティス。
nextjs-development
Next.js App Router開発ガイド。Server Components、ルーティング、データフェッチング、キャッシング、デプロイなど、Next.js開発のベストプラクティス。
web-development
Fundamentals of modern web development. Framework selection (React, Vue, Next.js), project architecture, state management, routing, build tools, and CSS strategy best practices.
nextjs-expert
Expert Next.js 14+ developer specializing in App Router, React Server Components, Server Actions, TypeScript, and modern full-stack patterns. Use when building Next.js applications or debugging Next.js-specific issues.
start-work
/start-work - Begin Working on a GitHub Issue
devops-engineer
Senior DevOps Engineer persona — CI/CD, infrastructure as code, deployment automation
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
brandkit
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
code-reviewer
Code review automation for TypeScript, JavaScript, Python, Go, Swift, Kotlin. Analyzes PRs for complexity and risk, checks code quality for SOLID violations and code smells, generates review reports. Use when reviewing pull requests, analyzing code quality, identifying issues, generating review checklists.
competitive-teardown
Analyzes competitor products and companies by synthesizing data from pricing pages, app store reviews, job postings, SEO signals, and social media into structured competitive intelligence. Produces feature comparison matrices scored across 12 dimensions, SWOT analyses, positioning maps, UX audits, pricing model breakdowns, action item roadmaps, and stakeholder presentation templates. Use when conducting competitor analysis, comparing products against competitors, researching the competitive landscape, building battle cards for sales, preparing for a product strategy or roadmap session, responding to a competitor's new feature or pricing change, or performing a quarterly competitive review.
database-schema-designer
Use when the user asks to create ERD diagrams, normalize database schemas, design table relationships, or plan schema migrations.
design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
dispatching-parallel-agents
Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
emil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
executing-plans
Use when you have a written implementation plan to execute in a separate session with review checkpoints
experiment-designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.
finishing-a-development-branch
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
focused-fix
Use when the user asks to fix, debug, or make a specific feature/module/area work end-to-end. Triggers: 'make X work', 'fix the Y feature', 'the Z module is broken', 'focus on [area]'. Not for quick single-bug fixes — this is for systematic deep-dive repair across all files and dependencies.
full-output-enforcement
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
full-page-screenshot
Use when the user asks to capture a full-page screenshot, long screenshot, or complete page capture of a web page. Handles SPA scroll containers, lazy-loaded images, and very tall pages via Chrome DevTools Protocol with zero external dependencies.
gpt-taste
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
high-end-visual-design
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
imagegen-frontend-mobile
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
imagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
industrial-brutalist-ui
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
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.
pagou-pix-integrator
Analisa projetos existentes (Next.js, Laravel, WordPress, WooCommerce ou genéricos) e implementa uma integração PIX completa via Pagou.ai — cliente, serviço, endpoint, webhook com deduplicação por event_id, reconciliação, testes e relatório com score. Invocação canónica via slash command `/pagou-pix-integrator`. Também responde quando o utilizador pedir em linguagem natural para "integrar PIX", "adicionar Pagou", "implementar pagamento PIX", "webhook Pagou" ou similar num projeto existente.
web-scraper-seo
Scrape and clone websites into a navigable local mirror with rewritten links and inline CSS, then analyze them for SEO, WCAG 2.1 accessibility, and design tokens (colors, typography, spacing). Use when the user provides a URL and wants to capture, clone, reverse-engineer, or audit a site — including JavaScript-rendered SPAs (React, Next.js, Vue, Angular) — or wants design inspiration, design-token extraction, broken-link detection, or keyword-density analysis from live pages.
tunneling
Create free SSH tunnels to expose local ports to the internet using tinyfi.sh. Use when you need to share a locally running app, test webhooks, demo a prototype, or get a public HTTPS URL for any local service — no signup or authentication required.
zeoel
Zeoel is an AI agency that can plan, coordinate, and execute software projects using a multi-agent orchestrated pipeline. Specialized in Next.js + Laravel + PostgreSQL SaaS development with SEO-first architecture. Enforces mandatory testing, documentation, and progress tracking at every step. Use this to lead brainstorming, plan sprints, and dispatch specialized agents.
evolve
Blueprint-Gesundheitscheck. TRIGGER bei "Blueprint prüfen", "ist das Blueprint aktuell", "was fehlt noch im Blueprint", oder periodisch wenn länger nicht gepflegt.
apex-pipeline
Unified application security testing workflow — combines recon, SAST, DAST, manual hunting, validation, and reporting into a single orchestrated pipeline. Runs as an "app" with automated phase transitions. Supports web apps (React, Next.js, Django, Flask, Laravel, Spring, Rails, Express), mobile APIs, GraphQL, REST, gRPC, and microservices. Phases — Phase 0 (target intake + scope lock), Phase 1 (passive recon + tech fingerprint), Phase 2 (SAST deep scan via semgrep/grep/trufflehog), Phase 3 (DAST active probing — nuclei/ffuf/dalfox), Phase 4 (manual hunt — IDOR/SSRF/XSS/SQLi/auth-bypass/race/business-logic/LLM), Phase 5 (chain building + impact escalation), Phase 6 (7-Question Gate validation), Phase 7 (report generation). Use when starting a full security assessment on any application, when asked to "test this app", "audit this codebase", "find bugs in this project", or when you need an end-to-end security workflow that combines static and dynamic analysis with manual expertise.
openproxy
Install, initialize, and operate OpenProxy from the CLI — either guiding a human through setup or driving it fully autonomously as an agent. Use whenever the user asks to install the openproxy binary, start the local AI router on 127.0.0.1:4623, configure providers / combos / keys, or wire an AI coding CLI (Claude Code, Codex, Cursor, Cline, OpenClaw, Copilot, …) into OpenProxy.
testing-combo-fallback
End-to-end test the OpenProxy combo fallback dispatch path (Rust BE + Astro FE) and seed the dashboard with mock data. Use whenever validating combo/provider/media changes or producing a UI tour.
generate-ai-prototype
Generate v0.dev, Lovable, or Bolt.new prompts for AI-powered prototyping
frontend-patterns-typescript
React、Next.js、状態管理、パフォーマンス最適化、UI ベストプラクティスのためのフロントエンド開発パターン。TypeScript、Framer Motion を使用。
api-design-reviewer
API Design Reviewer
email-template-builder
Email Template Builder
context-research
Researches a topic, library, or API using available tools (Context7, Firecrawl, WebSearch) and produces a persistent context brief in .context/ that informs future coding sessions. Use when the user wants to pre-research a technology before coding with it.
do
외부에서 작성된 백엔드 기술 기획서(Tech Spec)를 입력으로 받아 즉시 구현 가능한 작업 항목과 코드 스켈레톤을 생성합니다. Express/Node 백엔드 한정. dev의 spec → plan과 다름 (do는 외부 spec 입력 전용, dev의 spec은 사용자와 대화로 정의).
backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
deployment-skill
Deployment skill
frontend-arch-skill
Frontend arch skill
vercel-inline-cms
Install a lightweight inline-editing CMS into any Vercel-deployed project — content store + EditableText component + cookie-auth admin shell + Vercel KV/Upstash/Blob storage. Auto-detects the framework and installs natively for Next.js (App Router & Pages Router) and Vite + React. For SvelteKit, Astro, Nuxt, or plain static, prints a manual-port guide. Use when the user asks to add a CMS, inline editing, editable text, an admin panel, or "make this site editable."
staging-ui-first
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
vercel
Deploys applications to Vercel including serverless functions, edge functions, environment variables, and CI/CD. Use when deploying Next.js applications, frontend projects, or serverless APIs.
mobile-bottom-navbar
Standardized mobile bottom navigation implementation for internal Next.js applications. Provides role-based filtering, smooth animations, persistent state, and submenu expansion with accordion-based More menu. Supports Next.js 15+ with App Router, TypeScript, Zustand state management, and Framer Motion animations. Includes complete ready-to-use components with icon grid layouts, comprehensive documentation, and customization guides.
sam
Commercialization and platform partnership strategy for org run sam requests. Use when asked to evaluate APIs, integrations, pricing, or go-to-market opportunities.
vercel
Deploys applications to Vercel including serverless functions, edge functions, environment variables, and CI/CD. Use when deploying Next.js applications, frontend projects, or serverless APIs.
pr-with-docs
Creates production-ready pull requests with automatically updated AGENTS.md and project docs. Use when the user asks to create a PR, make a PR, is ready to merge, has finished a feature and wants a PR, or says they're done for the day with changes to commit.
framer-motion
Production-grade animation patterns for React and Next.js using Motion (formerly Framer Motion). Use this skill whenever the user asks to animate components, add transitions, create scroll-triggered effects, implement page transitions, layout animations, gesture interactions, or any kind of motion/animation in a React or Next.js project. Also trigger when code imports 'framer-motion', 'motion/react', or 'motion/react-client', or when the user mentions: animation, transition, fade-in, slide, parallax, scroll animation, exit animation, AnimatePresence, motion.div, spring, gesture, drag, hover animation, stagger, whileInView, or layout animation.
convex-quickstart
Initializes a new Convex project from scratch or adds Convex to an existing app. Use this skill when starting a new project with Convex, scaffolding with npm create convex@latest, adding Convex to an existing React, Next.js, Vue, Svelte, or other frontend, wiring up ConvexProvider, configuring environment variables for the deployment URL, or running npx convex dev for the first time, even if the user just says "set up Convex" or "add a backend."
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-builder
Build API routes, server actions, data adapters, and validation logic in web/. Use when creating or editing backend web code, API endpoints, or data-loading functions.
vercel-deploy
Deploy applications to Vercel with edge functions, serverless, and ISR.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
synapse-applications
Build a new Synapse App as an OCI image and publish it to the Datamaker registry so the workspace can install it via the App Store. Use when the user asks to create/scaffold a Synapse App, sub-app, plugin, iframe app, or embedded dashboard, or mentions synapse-app.yaml, /plugins registry, apiVersion synapse.datamaker.io/v1, or the iframe bridge. Supports React, Vue, Next.js, Nuxt 3, Gradio, Streamlit, Static HTML, Django, FastAPI (priority in that order).
saddmulti-agent-patterns
Design multi-agent architectures for complex tasks. Use when single-agent context limits are exceeded, when tasks decompose naturally into subtasks, or when specializing agents improves quality.
firebase
Firebase gives you a complete backend in minutes - auth, database, storage, functions, hosting. But the ease of setup hides real complexity. Security rules are your last line of defense, and they'r...
mobile-bottom-navbar
Standardized mobile bottom navigation implementation for internal Next.js applications. Provides role-based filtering, smooth animations, persistent state, and submenu expansion with accordion-based More menu. Supports Next.js 15+ with App Router, TypeScript, Zustand state management, and Framer Motion animations. Includes complete ready-to-use components with icon grid layouts, comprehensive documentation, and customization guides.
mobile-bottom-navbar
Standardized mobile bottom navigation implementation for internal Next.js applications. Provides role-based filtering, smooth animations, persistent state, and submenu expansion with accordion-based More menu. Supports Next.js 15+ with App Router, TypeScript, Zustand state management, and Framer Motion animations. Includes complete ready-to-use components with icon grid layouts, comprehensive documentation, and customization guides.
mobile-bottom-navbar
Standardized mobile bottom navigation implementation for internal Next.js applications. Provides role-based filtering, smooth animations, persistent state, and submenu expansion with accordion-based More menu. Supports Next.js 15+ with App Router, TypeScript, Zustand state management, and Framer Motion animations. Includes complete ready-to-use components with icon grid layouts, comprehensive documentation, and customization guides.
aws-serverless
Deploy any web project to AWS serverless infrastructure (S3 + CloudFront for static sites, Lambda + API Gateway for containers) at ~$1-3/month with automatic HTTPS and CI/CD
llm-evaluate
Evaluate LLM models for cost/performance ratio. Fetches current pricing and recommends optimal model for your use case. Use during project init or when optimizing costs.
accessibility-specialist
Expert in web accessibility, WCAG compliance, screen reader optimization, keyboard navigation, ARIA attributes, and inclusive design. Activates for accessibility improvements, WCAG compliance, a11y audits, and inclusive design tasks.
clawid
ClawID is a universal identity and verification protocol for AI agents. Use this skill to register your agent, get a ClawID, verify other agents before interacting with them, and authenticate with ClawID-enabled services.
mobile-bottom-navbar
Standardized mobile bottom navigation implementation for internal Next.js applications. Provides role-based filtering, smooth animations, persistent state, and submenu expansion with accordion-based More menu. Supports Next.js 15+ with App Router, TypeScript, Zustand state management, and Framer Motion animations. Includes complete ready-to-use components with icon grid layouts, comprehensive documentation, and customization guides.
glapi-backend-guidelines
GLAPI backend development guide for Next.js + TRPC + Drizzle ORM + PostgreSQL + Clerk. TRPC for internal type-safety, REST API exposure via OpenAPI. Covers layered architecture (routers → services → Drizzle), dual TRPC/REST endpoints, Clerk authentication, and testing strategies.
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.
law-of-demeter
Use when accessing nested object properties. Use when chaining method calls. Use when reaching through objects to get data.
dev-builder
全栈开发工程师技能包，负责根据产品需求文档和原型图实现功能代码。涵盖技术栈选择、项目初始化、功能实现、代码质量控制和功能验证。
monitoring_kerja_sg
Next.js project for monitoring kerja SG with Prisma ORM and PostgreSQL
vercel-deploy
Deploy applications to Vercel with edge functions, serverless, and ISR.
auth-security-audit
专项审计认证流程和 RBAC 权限体系。验证登录、角色切换、路由保护、API 权限边界。当 version-release-protocol 的 Step 0 Gate 0.3 调用时触发。
staging-ui-first
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
Integration detected automatically from skill content. Some results may be false positives.