Next.js
FrontendCommonly used with
Skills using Next.js (30)
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.
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.
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.
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.
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.
upgrade-otel
Upgrade OpenTelemetry instrumentations across the Sentry JavaScript SDK. Use when bumping OTel instrumentation packages to their latest versions.
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)
playwright-skill
Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, fixtures, POM, network mocking, auth flows, debugging, CI/CD (GitHub Actions, GitLab, CircleCI, Azure, Jenkins), framework recipes (React, Next.js, Vue, Angular), and migration guides from Cypress/Selenium. TypeScript and JavaScript.
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?"
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)
community-browse
Browse community discussions for relevant Gene strategies and updates.
playwright-core
Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, assertions, fixtures, network mocking, auth flows, debugging, and framework recipes for React, Next.js, Vue, and Angular. TypeScript and JavaScript.
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
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.
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.
feishu-bitable
飞书多维表格（Bitable）的创建、查询、编辑和管理工具。包含 27 种字段类型支持、高级筛选、批量操作和视图管理。 **当以下情况时使用此 Skill**： (1) 需要创建或管理飞书多维表格 App (2) 需要在多维表格中新增、查询、修改、删除记录（行数据） (3) 需要管理字段（列）、视图、数据表 (4) 用户提到"多维表格"、"bitable"、"数据表"、"记录"、"字段" (5) 需要批量导入数据或批量更新多维表格
feishu-create-doc
创建飞书云文档。从 Lark-flavored Markdown 内容创建新的飞书云文档，支持指定创建位置（文件夹/知识库/知识空间）。
webiny-api-event-publisher-catalog
api/event-publisher — 2 abstractions.
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".
best-choice
Select the best technology for any project automatically during planning. Never ask users to choose technology. Activates whenever technical decisions are needed.
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.
perseus-logic
Business logic, race conditions, and AI security analysis
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.
create-spec
ユーザーと対話しながら機能仕様を策定し、Notion に自動でドキュメント化するスキル。「仕様を作ろう」「スペックを書いて」「仕様を詰めよう」などの指示で呼び出される。
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.
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.
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".
Integration detected automatically from skill content. Some results may be false positives.