3d-composition-visualization
Build 3D visualizations using Three.js and React Three Fiber. Use when implementing 3D components, debugging rendering issues, optimizing performance, or creating interactive visualization features.
frontend-dev-guidelines
Frontend development guidelines for React/TypeScript with Next.js and Tailwind CSS. Modern patterns including Suspense, lazy loading, file organization with features directory, Tailwind styling, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
typescript-helpers
TypeScript patterns for types, interfaces, and type guards in viya-app. Use when defining types, working with generated API types, or creating type-safe utilities.
create-3d-self-contained-component
3D 환경에서 사용하는 자기완결 컴포넌트를 생성합니다. 페이지에 의존하지 않고 스스로 데이터를 fetch하며, Shadow DOM 팝업을 사용합니다. Use when creating 3D asset components, self-contained components with datasetInfo, or components with Shadow DOM popups.
nextjs-app-router
nextjs-app-router expert with self-populating documentation
design-system-token-enforcer
Enforce design system token usage in espresso-engineered-1 frontend UI work. Use when creating or editing Svelte components, layout sections, typography, spacing, colors, surfaces, or buttons, especially when introducing new UI components or section headers.
nextjs-app-router
Next.js 16 App Router patterns for this repo (await params/searchParams, next-intl locale handling, Supabase DB-first via services).
refactor-html
Refactor HTML/TSX files to use existing UI components, DaisyUI classes, and semantic colors. Use when (1) refactoring React/TSX page components to use reusable UI components, (2) replacing raw HTML elements with component library equivalents, (3) converting primitive Tailwind colors to semantic DaisyUI colors, (4) extracting repeated styling patterns into components.
react-component-patterns
Usa este skill cuando el usuario pida crear o modificar componentes React en el frontend web/. Define patrones de componentes, hooks y estilos.
idb-state-persistence
IndexedDB patterns for local-first state persistence using the idb library. Use when implementing features that require persistent state across navigation and sessions. Covers data modeling, defaults, CRUD operations, state managers, and reset patterns. Integrates with web-components for reactive UI updates.
react-patterns
React component patterns including functional components, hooks, state management, API integration, loading/error states, and event handlers. Use when creating or reviewing React components.
frontend-dev-guidelines
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.
nextjs-server-client-components
Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.
tailwind-ui-patterns
Tailwind CSS v4 patterns, component styling, and responsive design
migrating-tailwindcss-v4
Tailwind CSS v4 移行ルール。v3からv4への構文変更を自動修正。aria/data属性の短縮形、変数構文、shorthandクラス、important位置、競合クラスの解決パターンを提供。「Tailwind v4 移行」「Tailwind 最新構文」「cssConflict 修正」時に使用。
nextjs-16-app-router-structure
Standard project structure, routing, and component patterns for Next.js 16 App Router applications, so that layouts, pages, and data fetching stay consistent across projects.
client-state
Managing local state (Cart, Filters) without excessive re-renders.
