Build SvelteKit 5 frontend features with remote functions, Svelte 5 reactivity, shadcn/ui components, and proper data loading patterns. Use when creating pages, forms, components, or working with remote functions in the web app.
Comprehensive guidance for building and deploying static websites with the Astro framework. This skill should be used when asked to "create astro site", "deploy astro to firebase", "set up content collections", "add mermaid diagrams to astro", "configure astro i18n", "build static blog", or "astro markdown setup". Covers SSG fundamentals, Content Collections, Markdown/MDX, partial hydration, islands architecture, and deployment to Netlify, Vercel, GitHub Pages, or GCP/Firebase.
Full-stack development fundamentals - architecture, patterns, integration
Guide for building full-stack web applications using Reflex, a Python framework that compiles to React frontend and FastAPI backend. Use when creating, modifying, or debugging Reflex apps - covers state management, event handlers, components, routing, styling, and data integration patterns.
This skill should be used when the user asks about Hotwire, Turbo Drive, Turbo Frames, Turbo Streams, Stimulus controllers, frontend interactivity, server-rendered HTML updates, websocket updates, progressive enhancement, data attributes, importing JavaScript modules, or building interactive UIs without React/Vue. Also use when discussing the "HTML over the wire" approach or NO BUILD philosophy. Examples:
Tailwind CSS v4 patterns for styling Next.js applications. This skill should be used when styling components, creating responsive layouts, implementing design systems, or working with custom utilities. Covers v4-specific CSS-first configuration with @theme/@import/@utility directives, design tokens, responsive patterns, mobile-first design, and Atlas-specific conventions including 8px grid spacing system and accessibility patterns.
Use this skill whenever the user wants to set up, configure, or refactor shadcn/ui in a Vite + React + TypeScript project (non-Next.js), including Tailwind, components.json, theming, and component structure.
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
Guides Next.js 16 / React 19 development. Use when package.json contains 'next' or next.config.* is detected. Supports App Router, Server Components, Cache Components, strict TypeScript, Tailwind CSS v4, Prisma ORM, and Vitest.
Next.js App Router - Server components, layouts, routing patterns
Zod schema validation and React Hook Form integration for TypeScript frontends. This skill should be used when creating forms, defining API schemas, validating form data, implementing type-safe validation, using ZodResolver with React Hook Form, or migrating legacy forms to the Zod + React Hook Form pattern.
Use when implementing features, handling errors, adding validation, creating forms, writing database migrations. Enforces fail-fast (NO retry logic, circuit breakers), single entry point (unified data provider, Zod at API boundary), form defaults from schema (zodSchema.partial().parse), TypeScript (interface vs type), React Admin patterns. NEW (2024-12): Zod security (z.strictObject, string .max() limits, z.coerce for forms, z.enum allowlist), form performance (onSubmit/onBlur mode, useWatch not watch). BLOCKS anti-patterns, SUGGESTS best practices.
This skill should be used when creating new routes, configuring navigation layouts, implementing deep linking, or organizing the app/ directory structure in Expo Router projects. It provides best practices for file-based routing patterns.
Implement or review frontend features in this repo using Next.js App Router, React Server Components by default, Tailwind, and TypeScript. Use when changing UI, components, routes, or frontend architecture under web.
Master Redux Toolkit for production state management including slices, async thunks, RTK Query, and error handling
Modern React patterns, hooks, Server/Client components, performance
Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
App Router, React Server Components, Server Actions (2025 best practices)
Nuxt and app configuration files. Use when configuring nuxt.config.ts, app.config.ts, environment variables, runtime config, or understanding how configuration flows through the application.
Apply when working with modern frontend frameworks including React, Vue, Next.js, and TypeScript
Apply when building Next.js 13-16 applications with App Router for routing, layouts, data fetching, and server components.
Powerful data fetching and state management library for React applications with server state synchronization, caching, and background updates.
When building Next.js App Router pages and deciding between Server and Client Components.
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
