vue-composables
Use when creating reusable composables, managing reactive state, or implementing the Composition API. Load for useX patterns, Pinia store patterns, withLoadingState helper, lifecycle management, and type-safe state patterns. Covers composable structure, error handling, and testing composables.
fvtt-canvas
This skill should be used when working with the Foundry canvas, PIXI.js rendering, canvas layers, placeable objects (tokens, tiles, drawings), render flags for performance, or canvas lifecycle hooks like canvasReady.
frontend-components
Structure React 19+ components following best practices for organization, state management, props handling, and code readability with top-down structure and single responsibility principle. Use this skill when creating new React components, refactoring existing components, organizing component logic, managing component state, defining prop interfaces (IComponentProps with I prefix), or implementing component patterns. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend component implementations. This skill ensures predictable top-down structure (imports → types/interfaces → component → hooks → derived values → JSX), proper props destructuring with defaults in function signature, manageable component size (split at >300 lines), composition via Shadcn Slot pattern (asChild prop), React 19 patterns (use() hook for promises, useActionState for forms, useOptimistic for immediate feedback), no manual useMemo/useCallback (React Compiler handles memoization), Server Compo
tailwind-css
Use when implementing Tailwind CSS styling. Prefer utility-first composition and responsive patterns.
zod-react-hook-form
Form validation combining Zod schemas with React Hook Form, including localized error messages, Server Action integration, and shadcn/ui Form components. Use when building forms, validating user input, handling form submissions, or implementing Server Actions with validation.
syncfusion-styling
Use when styling or laying out SyncFusion components. Critical for understanding what CSS classes exist vs don't exist. Prevents using fake utility classes that break layout. Auto-activates when working with SF component styling, layout, spacing, colors, or icons.
solid-react
SOLID principles for React 19. Files < 100 lines, hooks separated, interfaces in src/interfaces/, JSDoc mandatory. Use for React architecture and code quality.
angular-core
Guía esencial de Angular 17+ (Standalone, Signals, Inject).
diagrammer-tailwind-style
MANDATORY for any web UI or styling change. Must be followed whenever touching web/src UI, layout, or CSS. Absolutely no shadows, glows, or flares; keep everything flat and token-driven.
create-form
Cria formulários com React Hook Form, validação Zod e shadcn/ui. Use quando precisar criar ou modificar formulários seguindo os padrões Bewear.
rimitive-behavior
Create headless behaviors in Rimitive. Use when creating reusable state logic, hooks, or headless UI patterns like toggles, forms, disclosure, or any portable reactive logic.
creating-zustand-stores
Creating Zustand stores for StickerNest state management. Use when the user asks to create a store, add state management, build a new store, manage global state, persist state, or add new application state. Covers store structure, persist middleware, devtools, selectors, and actions.
using-typescript-types
Guides TypeScript type usage: type vs interface decision, avoiding any, and Zod runtime validation. Use when defining types, choosing type patterns, or validating external data. Triggers: "type vs interface", "any", "unknown", "Zod", "运行时验证", "类型".
budget-ui-components
Componentes de UI para orçamentos seguindo o padrão de components do Easy Budget.
nextjs-pathname-id-fetch
Fetch data using URL parameter. Create app/[id]/page.tsx, await params to get ID, fetch API, render. Server Component (no 'use client').
designing-ui
ユーザーインターフェースの設計とコンポーネント設計を支援します。ワイヤーフレーム、レイアウト設計、デザインシステム構築、レスポンシブデザイン、インタラクションパターンを提供します。美しく機能的で実装可能なインターフェース設計が必要な場合に使用してください。
vue-component-generator
Generate Vue 3 components with Composition API TypeScript and scoped styles. Triggers on "create vue component", "generate vue file", "vue 3 component", ".vue component".
html-dev
HTML structure, semantics, accessibility, and SEO best practices. WHEN: Writing semantic HTML, implementing ARIA accessibility, creating forms/tables, adding SEO meta tags, structuring HTML documents, template sections in Vue/React. WHEN NOT: CSS styling (use tailwind-css-dev), JavaScript logic (use js-dev), Vue-specific patterns (use vuejs-dev).
component-scaffold
Scaffold and conventions to create a new UI component following project patterns (no Shadow DOM, static stylesheet registration, pixEngine templates). Use when adding a new custom element to the app.
frontend-engineer
前端 UI/UX 设计开发专家代理，擅长将设计转化为精美的界面实现。当用户需要以下帮助时使用：(1) 创建新的 UI 组件 (2) 改进界面视觉效果 (3) 实现动画和交互 (4) 响应式设计 (5) 设计系统构建 (6) 即使没有设计稿也能创造美观界面。触发词包括：「UI」「界面」「组件」「样式」「动画」「好看」「美化」「设计」等前端视觉相关请求。
