Special file conventions in Next.js 14+ App Router for pages, layouts, and API routes. PROACTIVELY activate for: (1) creating pages and layouts, (2) implementing loading and error states, (3) building API route handlers. Triggers: "new page", "layout", "api route"

Opinionated Next.js 14+ project structure and configuration for scaffolding new projects. PROACTIVELY activate for: (1) setting up new Next.js projects, (2) configuring tsconfig.json with strict mode, (3) establishing folder structure patterns. Triggers: "new project", "scaffold", "project structure"

How an AI agent plans, builds, and deploys a complete Ethereum dApp. The three-phase build system for Scaffold-ETH 2 projects. Use when building a full application on Ethereum — from contracts to frontend to production deployment on IPFS.

Run Lighthouse audits locally via CLI or Node API, parse and interpret reports, and set performance budgets. Use when measuring site performance, understanding Lighthouse scores, setting up budgets, or integrating audits into CI. Triggers on: lighthouse, run lighthouse, lighthouse score, performance audit, performance budget. Do NOT use for fixing specific performance issues (use perf-web-optimization or core-web-vitals) or Astro-specific optimization (use perf-astro).

Optimize frontend performance with bundle size reduction, lazy loading, and Core Web Vitals improvements. Use when improving page speed, reducing bundle size, or optimizing Core Web Vitals.

Using PolicyEngine web apps to analyze tax and benefit policy impacts - for users of policyengine.org. Triggers: "how to use PolicyEngine", "household calculator", "policy reform on website", "policyengine.org walkthrough", "web app guide"

Share brain pages as beautiful password-protected HTML with zero LLM calls

React gotchas and decision criteria covering stale closure bugs in useEffect, conditional rendering traps (falsy 0/empty string), state management selection (useState vs Context vs Zustand vs TanStack Query), and hooks rules. Use when writing React components, debugging re-renders, choosing state management, or encountering useEffect infinite loops.

React 19 specific patterns including React Compiler optimization, Server Actions, Forms, and new hooks. Use when implementing React 19 features, optimizing components, or choosing between Actions vs TanStack Query for mutations.

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

Teaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating interactive components while streaming the rest of the page.

Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser.

Hyper-opinionated Claude agent for building production-ready Next.js apps with DynamoDB. Enforces best practices, eliminates technology debates, and focuses on shipping functional apps fast. Use when building full-stack applications with Next.js 15 App Router and AWS DynamoDB.

Helps users create and initialize new Tauri v2 projects for building cross-platform desktop and mobile applications. Covers system prerequisites and setup requirements for macOS, Windows, and Linux. Guides through project creation using create-tauri-app or manual Tauri CLI initialization. Explains project directory structure and configuration files. Supports vanilla JavaScript, TypeScript, React, Vue, Svelte, Angular, SolidJS, and Rust-based frontends.

Fetch a URL or convert a local file (PDF/DOCX/HTML/etc.) into Markdown using `uvx markitdown`, optionally it can summarize

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).

Tailwind CSS utility patterns and best practices

Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.

Use when "evaluating technology", "choosing frameworks", "stack comparison", "technology decisions", or asking about "React vs Vue", "PostgreSQL vs MySQL", "AWS vs GCP", "build vs buy"

Generate an HTML transcript of a Claude Code or Claude web session using claude-code-transcripts. Use when the user says "generate a transcript," "save this session," "export this conversation," "make a transcript," or wants to convert a session to HTML.

Use when checking documentation system integrity — validates HTML-wrapped frontmatter, scope paths, cross-references, CLAUDE.md content, and detects orphaned or legacy-format docs. Supports --fix for safe automatic corrections.

Apply when implementing localization and translated copy in VTEX IO apps. Covers the `messages` builder, `/messages/*.json`, `context.json`, frontend message usage, and how VTEX apps integrate with `vtex.messages` for runtime translation. Use for storefront, admin, or backend flows that should use VTEX IO message infrastructure instead of hardcoded strings.

Install and configure Vercel Workflow SDK before it exists in node_modules. Use when the user asks to "install workflow", "set up workflow", "add durable workflows", "configure workflow sdk", or "init workflow" for Next.js, Express, Hono, Fastify, NestJS, Nitro, Nuxt, Astro, SvelteKit, or Vite.

WCAG 2.1 guidelines, screen reader compatibility, keyboard navigation, color contrast, semantic HTML, and ARIA attributes

Display HTML content on connected Moltbot nodes (Mac app, iOS, Android).

Scrape websites at scale using Scrapy, a Python web crawling and scraping framework. Use when: (1) Crawling multiple pages or entire sites, (2) Extracting structured data from HTML/XML, or (3) Building automated data pipelines from web sources.

Generate and open the harness run dashboard. Reads .harness/*.json state files, builds a self-contained HTML file, and opens it in the browser. Use when the user asks to see the dashboard, check run status, or view experiment history. For live monitoring during a run, suggest /loop 30s /harness:dashboard.

Generate PDF documents from HTML and upload to Unity Catalog volumes. Use for creating test PDFs, demo documents, reports, or evaluation datasets.

Easily display and interact with HTML content in your Flutter app using the `easy_web_view` package, which supports both web and mobile platforms.

Fetch web content in multiple formats using fetch MCP tools. Use when WebFetch fails with 403/access errors, when fetching HTML pages, JSON APIs, plain text, readable article content, or YouTube transcripts. Triggers on mentions of fetching URLs, web scraping, reading web pages, downloading content, or accessing online resources.

Sentry integration for error tracking across Next.js, Python, and Firebase. PROACTIVELY activate for: (1) Setting up Sentry SDK, (2) Configuring error boundaries, (3) Adding custom context to errors, (4) Source map configuration, (5) Release tracking. Triggers: "sentry", "error tracking", "error boundary", "exception monitoring", "crash reporting", "source maps"

Use when working with LiteJS build system — HTML build attributes (cat, min, drop, inline, exclude, banner), lj build / lj b commands, asset handling, or editing @litejs/cli/lib/build.js

Manage local Airflow environment with Astro CLI (Docker and standalone modes). Use when the user wants to start, stop, or restart Airflow, view logs, query the Airflow API, troubleshoot, or fix environment issues. For project setup, see setting-up-astro-project.

Look up library and framework documentation via Context7 MCP. Use for: 'how do I use React hooks', 'FastAPI middleware docs', 'pandas merge examples', 'Next.js app router API reference'. No auth required.

Expert in setting up Sentry error tracking and Google Analytics for NestJS and Next.js applications. Use this skill when users need monitoring, error tracking, or analytics configuration.

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.

Generates Next.js 13+ pages with App Router, Server Components, Client Components, API routes, and proper data fetching. Use when building Next.js applications.

Enforce the no-useEffect rule when writing or reviewing React code. ACTIVATE when writing React components, refactoring existing useEffect calls, reviewing PRs with useEffect, or when an agent adds useEffect "just in case." Provides the five replacement patterns and the useMountEffect escape hatch.

Convert markdown or conversation output to a clean HTML file and open it in the browser. Use when the user wants to copy content into Google Docs, share formatted output, preview content as a web page, or says things like "open that as HTML," "make that pasteable," "put that in a doc," or "open that in the browser."

Reviews pull requests and diffs with parallel specialist analysis: security, correctness, architecture, React patterns, and accessibility. Use when the user says "review this PR", "review my changes", "review the diff", or mentions a PR number. Also use when the user invokes /pr-review directly.

Decision framework for React Three Fiber projects. Routes to specialized R3F skills (fundamentals, geometry, materials, performance, drei) based on task requirements. Use when starting an R3F project or needing guidance on which R3F skills to combine.

React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-16.

Write modern React components with TypeScript, hooks, and best practices. Creates functional components, custom hooks, and follows composition patterns.

Architectural guidance for building node-based UIs with React Flow. Use when designing flow-based applications, making decisions about state management, integration patterns, or evaluating whether React Flow fits a use case.

React Native mobile patterns, platform-specific code

React best practices: hooks, composition, state management, performance optimization, Server Components, and testing patterns.

Running the frontend (React/Next.js/TS) dev cycle from a tasks.md or backend handoff: drives frontend agents through Gate 0 TDD plus accessibility/visual/E2E/perf checks, Gate 7 parallel review, and Gate 8 user validation, with rolling-wave phase boundaries. Use when starting or resuming a gated frontend dev cycle. Skip for backend (use ring:running-dev-cycle) or docs-only work.

RivetKit React client guidance. Use for React apps that connect to Rivet Actors with @rivetkit/react, create hooks with createRivetKit, or manage realtime state with useActor.

Use when writing tests for next-safe-action actions or hooks -- Vitest patterns for testing server actions directly, middleware behavior, hooks with React Testing Library, validation errors, and server errors

Leverage Vue components in Slidev slides. Use this skill to add interactivity with built-in components or create custom ones.

Style Slidev slides with UnoCSS and custom CSS. Use this skill for custom colors, typography, animations, and responsive designs.

Host static websites and assets via zip upload to Originless IPFS. Use when: (1) Deploying static sites, (2) Hosting HTML/CSS/JS projects, (3) Sharing web assets publicly, or (4) User asks to host static files.

Tailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with `hyperframes init --tailwind`, writing Tailwind utility classes in composition HTML, adding CSS-first Tailwind v4 theme tokens, debugging v3 vs v4 syntax, or deciding when to compile Tailwind to CSS instead of using the browser runtime.

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.

Headless utilities for building range and multi-range sliders in TS/JS, React, Vue, Solid, Svelte & Angular.

Telegram Mini Apps development - use for building Mini App frontend, WebApp API, initData authentication, and Telegram integration

Vitest unit testing patterns with React Testing Library. Trigger: When writing unit tests for React components, hooks, or utilities.

Write demo HTML files for custom elements that work with cem serve. Use when the user asks to "write a demo", "create a demo", "add a demo", "demo file", "demo page", or mentions "cem serve demos".

Zustand 5 state management patterns. Trigger: When managing React state with Zustand.

This snippet should be used when creating user-journey-optimized HTML documents that guide readers through a clear narrative arc with curated content and dark mode support.

Autonomous Frontend Code Generation Agent specialized in project-aware API integration. Use when user provides backend API specs needing frontend request code, mock data to convert to request types and handlers, API endpoints to add with types mocks and tests, or new API integration following existing project conventions. Automatically detects TypeScript, request patterns, mock infrastructure, and test frameworks to generate artifact-gated code.

Generate app icons for your React Native Expo app with iOS 26 support

Language-specific code style guidelines. Use when writing TypeScript, Python, Go, JavaScript, or HTML/CSS code to ensure consistent, idiomatic, and maintainable code following best practices.

Generate a .NET code coverage report scoped to files changed in the current branch. Runs tests with coverage collection and produces filtered HTML reports.

Automatically discover mobile development skills when working with iOS, Android, Swift, SwiftUI, React Native, mobile development, SwiftData, or app development. Activates for mobile development tasks.

Build and distribute Expo development clients locally or via TestFlight

Senior Frontend QA Engineer with 10+ years JavaScript/TypeScript testing experience. Use when writing unit tests for React components, creating integration tests with React Testing Library, testing custom hooks, mocking APIs, or following TDD for frontend.

Use when extracting knowledge from .lore/ artifacts into the reference wiki. Converts work artifacts (retros, specs, plans, research, notes) into structured HTML wiki pages grouped by knowledge type. Triggers include "ingest this", "extract knowledge from", "add this to the wiki", "update the reference from", and "populate the field guide".

Frontend structure conventions for Laravel Inertia React applications based on Spatie's production practices. Use when creating, scaffolding, or reviewing frontend code in a Laravel Inertia React project. Triggers on creating React components, pages, modules, organizing frontend directories, setting up Inertia pages, structuring a React frontend within Laravel, or when the user asks about frontend file organization in an Inertia app.

Guide for using Netlify Forms for HTML form handling. Use when adding contact forms, feedback forms, file upload forms, or any form that should be collected by Netlify. Covers the data-netlify attribute, spam filtering, AJAX submissions, file uploads, notifications, and the submissions API.

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

Next.js 15 App Router patterns. Trigger: When working with Next.js - routing, Server Actions, data fetching.

Next.js 15 App Router patterns - use for frontend pages, API routes, server components, client components, and middleware

Next.js App Router patterns: Server Components, data fetching, routing, middleware, caching, and deployment.

Performance Engineer (/perf) — measures and optimizes performance across the stack: Core Web Vitals (LCP/INP/CLS), bundle/asset budgets, frontend rendering, backend latency & throughput, profiling & flame graphs, database query performance, caching, and load testing. Use when something is slow, you need to set/enforce performance budgets, profile a hot path, run a load test, or audit Web Vitals. Invoke during /rev for perf review and alongside /sre for capacity. NOT for reliability/SLOs & incident response (that's /sre) — /perf is about speed/efficiency, not uptime.

Use when "building React artifacts", "creating HTML artifacts", "bundling React apps", "single HTML file", or asking about "artifact builder", "shadcn components", "Tailwind artifacts"

React Native / Expo patterns for Frappe-backed mobile apps. Reference for Axios API calls, React Query v4, Redux Toolkit, React Navigation, expo-location, NetworkContext, transport journey lifecycle, attendance flow, and EAS builds.

Planning a backend refactor: audits an existing Go or TypeScript backend against Ring/Lerian standards and produces a prioritized task list (findings.md + tasks.md) ready for ring:running-dev-cycle. Plans only — no edits. Use when an existing backend service needs to meet standards or an audit is requested. Skip for greenfield projects, single-file fixes, or frontend (use ring:planning-frontend-refactor).

Process, analyze, and transform SARIF files using Microsoft's sarif-tools CLI. Use when consolidating SARIF outputs from multiple scanners, generating CSV/HTML/Word reports, diffing scan results between builds, filtering findings, adding git blame information, or producing Code Climate reports for GitLab.

Tailwind CSS v4.1 core features, @theme, directives, migration guide

SpacetimeDB TypeScript/React client SDK reference. Use when building web clients that connect to SpacetimeDB.

This snippet should be used when creating technical execution plans in HTML format with mandatory quality review before display.

Build AI agents with Strands Agents SDK. Use when developing model-agnostic agents, implementing ReAct patterns, creating multi-agent systems, or building production agents on AWS. Triggers on Strands, Strands SDK, model-agnostic agent, ReAct agent.

Present HTML on connected OpenClaw node canvases, navigate/eval/snapshot, and debug canvas host URLs.

Discord message-tool ops: send/read/edit/delete, react, poll, pin, thread, search, presence, media/components.

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.

myfy FrontendModule for server-side rendering with Jinja2, Tailwind 4, DaisyUI 5, and Vite. Use when working with FrontendModule, templates, render_template, static files, Tailwind CSS, or Vite HMR.

Generate Astro page files from an existing gallery manifest. Internal step of /gallery workflow - use directly only to regenerate from completed manifests.

Guide feature development with architecture patterns for any tech stack. Covers frontend, backend, full-stack, and automation projects. Use when adding new features, modifying systems, or planning changes.

Review React/TypeScript code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Enforces TypeScript strict mode, GPU-accelerated animations, WCAG AA accessibility, bundle size limits, and surgical simplicity. Use when completing features, before commits, or reviewing pull requests.

Lightpanda headless browser CLI for fast web content extraction, searching, and fetching When browsing the web, fetching URLs, searching the web, extracting web page content, or needing rendered HTML from a URL

Check for broken links with lychee — fast Rust link checker for Markdown, HTML, and codebases. Use when validating URLs or finding dead links.

Develops high-performance Magento 2 storefronts using Hyvä theme framework. Use when working with Hyvä themes, Alpine.js, Tailwind CSS, or modern frontend development. Masters Alpine.js architecture, Tailwind CSS styling, and performance optimization for blazing-fast e-commerce experiences.

Ultra-performant HTML to Markdown Convertor Optimized for LLMs and llm.txt artifacts. ALWAYS use when writing code importing "mdream". Consult for debugging, best practices, or modifying mdream.

Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.

Next.js 14+ gotchas and decision criteria. Covers server/client boundary, caching strategy, and data fetching patterns Claude commonly gets wrong.