Opinionated constraints for building better interfaces with agents. Use when building UI components, implementing animations, designing layouts, reviewing frontend accessibility, or working with Tailwind CSS, motion/react, or accessible primitives like Radix/Base UI.
shadcn/ui components - Button, Card, Dialog, Form, Input, Table. Use when building UI with shadcn/ui in React apps.
Build accessible user interfaces using semantic HTML, ARIA attributes, keyboard navigation, and WCAG compliance. Use this skill when creating or modifying UI components, forms, interactive elements, navigation menus, modals, or any user-facing interface code. When working on Astro component files (.astro), React/Vue/Svelte component files, HTML template files, form components with inputs and labels, navigation menus and interactive widgets, modal dialogs and accordions, image components with alt text, button and link implementations, focus management code, or screen reader announcement logic.
Guia refatoração de componentes React seguindo padrões do Plataforma B2B de treinamento técnico corporativo, reduzindo duplicação e criando componentes genéricos reutilizáveis
Scaffold a new custom React hook inside an existing feature module, with templates for data fetching, state management, or utility hooks, and update the feature hooks barrel export.
Erstellt produktionsreife Frontend-Komponenten mit dem PferdeWert Design-System. Automatisch verwenden bei UI-Entwicklung, Styling, Component-Erstellung.
Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.
Use this skill when creating dropdowns, context menus, or overlays that need a polished UX (open/close animation, click-outside, Escape, etc.).
React components, UI library, state management ve user experience geliştirmek için kullanılır. Zustand, TanStack Query, Tailwind CSS ve accessibility konularında uzman.
Teaches when to use local state vs global state (Context) in React 19. Use when deciding state management strategy, avoiding prop drilling, or architecting component state.
Design-focused grid layout system with fluid scaling, responsive columns, and resolution-independent patterns. Use when creating page layouts, card grids, or multi-column designs.
Use Mintlify components correctly when writing StackOne documentation in group-documentation/docs/
Audit and refactor CSS to comply with Game Loopers design system and BEM methodology
React hooks for local user authentication UI including login, signup, password reset, MFA, and account management. Use when building authentication pages for email/password authentication instead of OAuth providers.
Performance rules for React and Effect. Use for caching, rendering, data flow.
Style the dev-quiz-battle app using Tailwind CSS v4 with OKLCH colors, dark mode support, and modern design patterns. Use when creating responsive layouts, applying themes, and implementing visual components.
Comprehensive React component coding guidelines, refactoring principles, and architectural patterns. **CRITICAL**: Focuses on patterns AI commonly fails to implement correctly, especially testability, props control, and component responsibility separation. Reference this skill when implementing or refactoring React components during Phase 2.
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
ReactUMG Slot 布局/定位系统指南。在配置 CanvasPanel、设置组件位置/坐标/尺寸/大小、使用锚点/Anchors/Offsets、或实现居中/全屏/侧边栏等布局需求时激活。CanvasPanelSlot 有特殊的 Position→Offsets 映射规则，其他 17 种 Slot 直接使用。
Server-Side + Client-Side Data Fetching with Orval + TanStack Query HydrationBoundary Pattern. ALWAYS use Orval - NEVER manual fetch()!
Integrate Zod v4 with React Hook Form, Next.js, Express, tRPC, and other frameworks for type-safe validation
