vayu-ui

Enforce the standard Next.js/React consumer-app folder structure, naming, file placement, and data-flow rules for projects using Vayu UI. Use when creating, moving, naming, or reviewing pages, ui components, ui hooks, forms, modals, drawers, popovers, API services, TanStack Query hooks, WebSocket/Socket.io hooks and services, types, Zod schemas, table columns, sections, or project architecture. This skill answers "where does this go?" for app projects, not the Vayu UI toolkit monorepo.

Use the Vayu UI MCP server as the source of truth for choosing, installing, composing, and coding Vayu UI components/hooks. Trigger for selecting the right component or hook, exact props/variants/sizes/states/events, examples, accessibility, anti-patterns, registry installs, design tokens, scaffolding, or "when should I use which component?". This skill is for consuming MCP tools precisely, not maintaining the MCP server.

Enforce the standard Next.js/React consumer-app folder structure, naming, file placement, and data-flow rules for projects using Vayu UI. Use when creating, moving, naming, or reviewing pages, ui components, ui hooks, forms, modals, drawers, popovers, API services, TanStack Query hooks, WebSocket/Socket.io hooks and services, types, Zod schemas, table columns, sections, or project architecture. This skill answers "where does this go?" for app projects, not the Vayu UI toolkit monorepo.

Enforce strict layered HTTP API integration with service functions and TanStack Query hooks. Use when adding, refactoring, or reviewing API clients, axios/fetch wrappers, interceptors, request/response types, service functions, useQuery, useMutation, useInfiniteQuery, query keys, cache invalidation, enabled guards, API hooks, UI data consumption, loading/error/empty states, or mutation wiring. Do not use for server actions, tRPC, GraphQL, or non-HTTP data fetching patterns.

Enforce strict React/Next.js TypeScript code quality for Vayu UI consumer apps. Use when writing, reviewing, refactoring, or formatting code; creating pages, containers, components, hooks, API hooks/services, WebSocket/Socket.io hooks and services, forms, tables, or primitives; checking TypeScript safety; preventing hardcoded values; enforcing arrow functions, naming, no any, semantic HTML, stable React keys, memoization discipline, safe data rendering, and alignment with folder-structure and design-system skills.

Enforce Vayu UI design tokens, semantic layers, component variants, compound composition, and correct CSS ownership. Use when styling UI, changing colors, radius, shadows, blur, typography, animations, Tailwind classes, component variants, global tokens, or deciding whether CSS belongs in global.css, a primitive component, a variant map, a container, or one-off className usage. Do not use for unrelated CSS questions outside Vayu UI design-system decisions.

Enforces documentation standards for code, including README files, inline comments, and component documentation. Apply this skill whenever you are writing documentation, creating README files, adding code comments, or documenting component APIs. Also trigger when the user mentions "documentation", "readme", "comments", "jsdoc", "document code", "api docs", or asks about how to document their code. Do NOT trigger for general writing questions unrelated to code documentation.

Enforce React Hook Form + Zod + TanStack Query mutation patterns. Use when building or refactoring forms, modals, drawers, dialogs, pages with form state, Zod schemas, zodResolver wiring, submit handlers, POST/PUT/PATCH mutations, API payload mapping, query invalidation, toast feedback, server errors, edit-mode prefill, or enabled edit queries. Do not use for simple form layout-only questions without validation or submission logic.