react-three-fiber
Build 3D applications with React Three Fiber (R3F), the React renderer for Three.js. Use this skill when building 3D scenes with React, using declarative JSX for 3D objects, integrating Three.js with React state/lifecycle, or using Drei helpers. Covers Canvas setup, hooks, Drei utilities, performance patterns, and state management for 3D React apps.
ui-guidelines
UIコンポーネントを新規作成・編集する際に使用。Emotion styled/テーマトークン/Atomic Designのルールを確認。
getx-state-management-patterns
GetX controllers, reactive state, dependency injection, bindings, navigation, and best practices
progressive-disclosure-systems
Design progressive disclosure UIs that reveal data and components in optimal sequences.
frontend-state-management
Provides comprehensive state management patterns for React applications. This skill should be used when deciding how to manage different types of state, choosing state management solutions, or implementing state logic.
design-system-implementation
Build or update frontend components and pages that strictly adhere to the project design system defined in design/design-system.json (and design/design.json when present).
create-route
Create React Router 7 routes with proper type imports, loaders, and actions. Use when adding new pages, API endpoints, layouts, or route files.
react-development-patterns
React 18+ development patterns including components, hooks, state management, API integration, and accessibility. Use when: (1) building React components, (2) designing user interfaces, (3) implementing state management, (4) writing frontend tests.
astro-i18n
Comprehensive internationalization for Astro.js and Next.js. Handles hreflang, x-default, SEO-optimized routing, translation files, language switcher, and Cloudflare Pages deployment. Zero hardcoded strings, fully static, lightfast.
kotlin-compose
Jetpack Compose - composables, state, effects, theming
query-patterns
Implement TanStack Query (React Query) patterns for data fetching, caching, mutations, and optimistic updates. Use when setting up API integration or data fetching strategies.
loading-states
Handle loading states in the portal app using Flask loaders. Use when adding loading indicators to buttons, cards, pages, or any async operations.
pwa-storage-patterns
Implement data persistence patterns for Progressive Web Apps. Use when working with browser storage APIs, implementing localStorage or IndexedDB, or managing client-side data persistence.
react-enterprise
React 19 with TypeScript 5.9.3, TanStack Query V5, Zustand, and modern patterns. React Compiler handles memoization automatically. No manual optimization needed.
react-native-async-patterns
Async/await correctness in React Native with Zustand. Use when debugging race conditions, missing awaits, floating promises, or async timing issues in Expo/React Native apps.
rxjs-patterns
Master RxJS in Angular with observables, operators, subjects, error handling, and reactive patterns for building responsive applications.
skeleton-svelte
Use this skill when working with Skeleton UI components in Svelte projects. It provides guidelines for Skeleton's component composition pattern, theme-aware color system, design presets, and layout patterns. Trigger when building UI components, styling elements, creating layouts, or working with Skeleton-specific features in Svelte 5 and SvelteKit 2+ projects.
hydration-safety
Next.js SSR hydration patterns and best practices. Use when fixing hydration mismatches, implementing client-only features, or working with localStorage/browser APIs.
mixmi-component-library
Component specifications, design patterns, and UI elements for the mixmi platform including TrackCard, grids, modals, and audio components
mvvm-development
Explain how to implement and evolve MVVM features using the repo’s `@web-loom/mvvm-core`, the shared `models`/`view-models` packages, and the reference MVVM apps (React/Angular/Vue). Use when Codex is asked about MVVM wiring, state management, or integrating the core packages with framework-specific UIs.
