moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
accessibility-rules
Concise accessibility checklist and practices for components in the repository. Use when implementing UI to ensure keyboard, screen reader, and focus semantics.
nextjs-app-router
Guía para desarrollo frontend con Next.js 15, App Router, Server Actions y React Query.
javascript-modern
Implements modern JavaScript features from ES2020-ES2024 including optional chaining, nullish coalescing, private fields, Promise methods, and array transformations. Use when modernizing JavaScript code, using ES2024 features, or when user asks about latest ECMAScript standards.
store-slices
Create Zustand store slices for UI-only state management
following-the-rules-of-hooks
Fix React Rules of Hooks violations - conditional calls, hooks in loops/callbacks/classes
frontend-components
Design and build reusable, composable UI components with single responsibility, clear interfaces, and proper encapsulation. Use this skill when creating or editing React components, Vue components, Svelte components, or any modular UI building blocks. When defining component props, state management, component composition, or component APIs. When working with component files (e.g., `.jsx`, `.tsx`, `.vue`, `.svelte`), component libraries, design systems, or shared UI elements. When refactoring components, extracting reusable logic, or building component hierarchies.
frontend-responsive
Implement responsive designs using mobile-first development, fluid layouts, standard breakpoints, and relative units to ensure optimal viewing across all device sizes. Use this skill when creating layouts, implementing breakpoints, styling for different screen sizes, or ensuring mobile compatibility. When working with responsive CSS, media queries, viewport configurations, or mobile-optimized components. When testing across device sizes, implementing touch-friendly interfaces, or optimizing for mobile performance. When working in any frontend file that affects layout, spacing, typography, or visual presentation across different screen sizes.
nextjs-localstorage-persistence
Implement localStorage persistence in Next.js 14 App Router with SSR-safe patterns. Use when storing data in localStorage, handling hydration errors, implementing state persistence, or creating type-safe storage utilities.
manage-swr-data
useSWR/useSWRMutationでサーバーデータを管理します。データ取得、変更、SWRキー管理を含む、カスタムフックパターンを実装します。
ui-conventions
UI/UX patterns and conventions for this project. Use for any frontend work - components, layouts, styling, notifications, forms. Contains learned preferences for Quasar/Vue or Next.js/React patterns.
framer-motion-animations
Subtle animation patterns for hero sections, card reveals, page transitions, and scroll-triggered effects using Framer Motion. Use when adding animations to components, implementing scroll effects, or creating page transitions.
ts-dev
TypeScript patterns: type definitions, interfaces, generics, type guards, and utility types. WHEN: Writing .ts/.tsx files, defining interfaces/types, using generics, implementing type guards, configuring tsconfig.json, Vue script lang="ts". WHEN NOT: Plain JavaScript (use js-dev), runtime code without types, Python/PHP backend code.
buttons-ctas
Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions
report-ui-components
Componentes de UI para relatórios seguindo o padrão de components do Easy Budget.
moai-component-designer
Enterprise-grade component design and architecture with React 19, Vue 3.5, Atomic Design patterns, accessibility standards (WCAG 2.1 AA), design systems, and production-ready component libraries. Use when building reusable component systems, designing component libraries, implementing Atomic Design, ensuring accessibility compliance, or creating scalable UI architectures.
diamond-fysio-frontend
Review and write React/Next.js components for Diamond Fysio project. Use when reviewing components, adding features, or checking code quality. Enforces project patterns like Tailwind CSS, accessibility, Contentful integration, and i18n.
slow-800-1200ms
Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb