form-patterens-and-best-practices
This skill provides guidance for creating consistent, well-structured forms in Next.js/react applications using shadcn UI components, react-hook-form, and Zod validation.
tanstack-forms
This skill should be used when the user asks about "React Query with forms", "form submission with useMutation", "form state vs server state", "defaultValue from query", "form reset after mutation", "double submit prevention", or needs guidance on integrating TanStack Query with forms.
astro-frontend-ui
Build the Astro frontend with Tailwind CSS v4 via the Vite plugin, a WPGraphQL data layer, and React islands (shadcn/ui) only where needed. Use when implementing or fixing frontend files under frontend/ for this WordPress headless repo.
pages-deployment
Cloudflare Pages のデプロイメントガイド。Pages Functions、フレームワーク対応（Next.js, Nuxt, Astro, SvelteKit, Remix, Hono）、ビルド設定、プレビュー環境について提供。Use when user asks about Pages deployment, Pages Functions, framework support, Next.js, Nuxt, Astro, SvelteKit, Remix, or Hono on Cloudflare. Also use when user says Pages デプロイ, フレームワーク, SSR, 静的サイト.
awwwards-landing-page
Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.
javascript-in-rails
Guidance for integrating JavaScript in Rails: import maps, jsbundling-rails (Bun/esbuild/Rollup/Webpack), Turbo helpers, request.js, and UJS replacements. Use when the user asks about JavaScript setup, bundlers, or client-side behavior in Rails.
component-integration
React, MDX, and Tailwind CSS integration patterns for Astro websites. Use when adding React components, configuring MDX content, setting up Tailwind styling, integrating component libraries, building interactive UI elements, or when user mentions React integration, MDX setup, Tailwind configuration, component patterns, or UI frameworks.
nuxt-ui-theming
Help customize Nuxt UI component themes and colors. Use when users ask about styling, theming, or customizing component appearance.
vue-expert
Provides Vue 3 expertise including Composition API, reactivity system, component patterns, performance optimization, state management with Pinia, and Nuxt.js integration. Use this skill for Vue component issues, reactivity problems, re-rendering issues, or state management challenges.
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.
moai-library-nextra
Enterprise Nextra documentation framework with Next.js
tailwind-css
Tailwind CSS utility-first CSS framework. Covers layout, styling, responsive design, and customization.
tanstack-router
TanStack Start specialist for file-based routing, SSR, and server functions with React
web-frameworks
Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.
frontend-ultimate
Ultimate 25+ years expert-level frontend skill covering Next.js, React, TypeScript, Tailwind CSS, styled-components, Redux, Zustand, Webpack, Vite, Parcel, Jest/Vitest testing, performance optimization, and ALL security aspects comprehensively (XSS, CSRF, injection, data privacy, CSP, dependency security, etc.). Covers all use cases (SPAs, PWAs, e-commerce, dashboards, real-time apps, mobile-responsive). Advanced features include A11y, Core Web Vitals, SEO, i18n, error handling, monitoring, component architecture, design patterns. Maximum security hardening, genius-level optimization, modernized development standards. Use when building ANY frontend application requiring enterprise security, performance, and scalability.
web-development
Web development patterns including frontend templates, CSS architecture, and server-side rendering infrastructure. Includes PageDef and TemplateSet for Go template rendering. Triggers: Web Components, al-* components, templates, Vite, TypeScript, custom elements, shadow DOM, frontend, client-side, CSS classes, PageDef, TemplateSet, PageData, server-side rendering, Go templates. File patterns: web/**/*.ts, web/**/*.html, web/**/*.css, web/**/*.go, pkg/web/*.go
mantis-react-admin
React 19 admin dashboard with Material UI v7, Vite 7, and MUI X Charts.
astro
Use when integrating Bknd with Astro for content-focused websites with SSR, setting up API routes, server-side data fetching, admin UI, PostgreSQL adapters, type generation, and deploying to Vercel/Netlify/Cloudflare. Covers both page-based and middleware integration patterns.
react-create-layout
Creates production-ready React layouts with proper Tailwind CSS practices. Use when building UI layouts, landing pages, dashboards, or any React component that requires styling and structure.
supabase-bootstrap
Bootstrap toolkit for new Supabase projects. Use when: (1) Setting up a new Supabase project, (2) Configuring sqlfluff for SQL formatting, (3) Setting up mise task runner, (4) Configuring MCP server for schema access, (5) Initializing project structure
moai-lang-typescript
TypeScript 5.9+ development specialist covering React 19, Next.js 16 App Router, type-safe APIs with tRPC, Zod validation, and modern TypeScript patterns. Use when developing TypeScript applications, React components, Next.js pages, or type-safe APIs.
