data-fetching
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
app/components の単体テストを作成・実行・修正する。React Testing Library + happy-dom を使用。
Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
Manage WebGL contexts and 3D scenes declaratively using React reconciliation.
Provides guidelines for using shared UI components and styling. This skill should be used when implementing UI features using Shadcn/Radix components and the shared @eridu/ui package.
Apply when diagnosing slow renders, optimizing list rendering, or preventing unnecessary re-renders in React applications.
CSS fundamentals - selectors, specificity, box model, positioning, units
This skill should be used when reviewing shadcn/ui component usage to ensure accessibility, consistency, and proper patterns. Applies when auditing UI code, checking component patterns, reviewing layout structure, identifying component extraction opportunities, or ensuring design system compliance. Trigger terms include audit UI, review components, check shadcn, accessibility audit, component review, UI patterns, design system compliance, layout review, refactor components, extract component.
Provides guidelines for using shared UI components and styling. This skill should be used when implementing UI features using Shadcn/Radix components and the shared @eridu/ui package.
Performant React forms with minimal re-renders and built-in validation
Implement reactive state management with Effect Atom for React applications
Implement F# frontend using Elmish MVU architecture with Feliz for React components. Use when: "add UI", "create component", "build form", "frontend", "client-side", "user interface", "view", "display", "render", "Elmish", "Feliz", "button", "input", "state management". Creates Model/Msg/update in src/Client/State.fs and views in src/Client/View.fs. Follows strict MVU pattern with RemoteData for async operations and TailwindCSS/DaisyUI for styling.
Use when building or styling React-based UIs with shadcn/ui and Tailwind CSS, including responsive layouts, accessible components, and theme customization.
React 컴포넌트를 Atomic Design 패턴에 따라 구조화하고 검증합니다. "아토믹 패턴 확인", "컴포넌트 구조 검토", "레이어 분류", "atomic design 적용" 요청 시 사용합니다.
一套用于构建复杂且多组件集成的 claude.ai HTML Artifacts(交互式组件)的工具集。该工具集采用现代前端技术栈,包括 React、Tailwind CSS 及 shadcn/ui。适用于需要状态管理、路由功能或集成 shadcn/ui 组件库的复杂项目,而非简单的单文件 HTML/JSX 组件。当用户需要构建具备深层交互逻辑、多视图导航或工业级 UI 标准的高级 Web 应用原型时,应调用该技能。
Create components that work with RadFlow visual editor and component discovery. Use when building new UI components for projects using RadFlow.
Create or update Reatom stores in this repo. Use when adding a new store under `src/stores`, changing store state shape, adding computed atoms, or creating/updating related store service functions.
TypeScript enum pattern with Castable interface for model integration. Use when creating enums with behavior methods (colors, labels), defining fixed value sets, or integrating enums with the model casting system.
Core JavaScript fundamentals including variables, data types, operators, control flow, and basic syntax. Essential foundation for all JavaScript development.