navbar-configuration
Configure navbar menu items, logo, buttons, and styling. Sets up navigation from sitemap.md, ensures dropdown z-index is above content, configures buttons, and updates i18n. Dynamically finds navbar*.tsx component.
tanstack-mutations
This skill should be used when the user asks about "useMutation", "mutations", "query invalidation", "optimistic updates", "cache updates", "setQueryData", "invalidateQueries", "onMutate", "onSettled", or needs guidance on mutation patterns, cache synchronization, and optimistic UI in TanStack Query.
react-hook-form
Builds performant forms with React Hook Form including validation, error handling, and schema integration. Use when creating forms, validating inputs, integrating with Zod, or handling complex form state.
write-hook
Write React hooks following the Epic architecture patterns. Use when creating custom hooks for state management, server action calls, optimistic updates, and validation. Triggers on "create a hook", "add a hook", or "write a hook for".
create-standalone-component
API나 Figma 없이 독립 컴포넌트를 새로 제작합니다. Components/ 폴더에 재사용 가능한 컴포넌트를 만들 때 사용합니다. Use when creating reusable components from scratch, building UI components without Figma designs, or developing components independently of API definitions.
coding-with-tailiwnd
Use this skill when you need to code with tailwind css
frontend-responsive
Implement mobile-first responsive designs using fluid layouts, relative units, responsive images, and touch-friendly interfaces. Use this skill when creating layouts that adapt across screen sizes, implementing breakpoints, or optimizing for mobile and tablet devices. When working on responsive component layouts, Tailwind responsive utility classes (sm:, md:, lg:, xl:), CSS media queries and breakpoints, fluid typography with clamp() or viewport units, responsive images with srcset and sizes attributes, mobile navigation menus and hamburger patterns, touch target sizing for mobile devices, responsive grid and flexbox layouts, container queries for component-based responsiveness, or viewport meta tags and mobile optimization.
drag-and-drop
Implement drag and drop using @atlaskit/pragmatic-drag-and-drop. Use when implementing sortable lists, reorderable items, kanban boards, or any drag-drop interactions. Covers draggable setup, drop targets, edge detection, drag previews, and critical state management patterns to avoid performance issues.
react-native-i18n-workflow
Manages internationalization strings and translation workflows using i18next and react-i18next. Use when adding new text, supporting additional languages, or implementing pluralization and interpolation in Fitness Tracker App.
symfony-skcss-component
Create CSS/SCSS styles for components. Use for visual styling.
frontend-design
Use for any frontend UI implementation - orchestrates tailwind-ui, shadcn, and radix-ui in the correct order
open-props
Use Open Props CSS custom properties for consistent design tokens. Use when setting up design systems, choosing spacing/color values, or wanting battle-tested CSS variables without heavy dependencies.
frontend-css
Write and structure CSS using consistent methodology (Tailwind, BEM, CSS Modules, styled-components), maintain design system tokens, minimize custom CSS, and optimize performance. Use this skill when writing or modifying stylesheets, CSS files, or styled components. Use when working with .css, .scss, .sass, .module.css files, Tailwind utility classes, CSS-in-JS libraries (styled-components, emotion, JSS), or component styling. Use when establishing design tokens for colors, spacing, and typography, when avoiding framework style overrides, when implementing CSS purging or tree-shaking for production, or when maintaining consistent styling methodology across the project. Use when working with global styles, component-scoped styles, or utility class systems.
vue-component-patterns
Vue.js 2.7 组件开发模式，包含 Element UI 使用、状态管理、表单处理和最佳实践。在创建或修改 Vue 组件时使用。
typescript-react-patterns
TypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns.
noir-design
Enforces the "Noir" aesthetic standards for THE LOST+UNFOUNDS. Use when creating or modifying UI components.
chatbot-component
ChatBotプロジェクトに新しいUIコンポーネントを追加するためのスキル。コンポーネント作成手順、CSS構成ルール、イベントハンドリングパターンを提供します。新しいUIコンポーネントを作成する時、モーダルを追加する時、CSSスタイルを追加する時、UIイベントを処理する時に使用してください。
tanstack-query-core
Use when asking about "TanStack Query", "React Query", "useQuery", "query keys", "staleTime", "query client setup", "query factories", or "queryOptions"
shadcn-customization
Use when building React UIs with shadcn/ui that need cohesive, distinctive styling beyond defaults - provides systematic approach to theme tokens, component variants, related component groups, animations, and design system coherence. Transforms uniform shadcn into memorable branded experiences.
customer-ui-components
Componentes de UI para clientes seguindo o padrão de components do Easy Budget.
generate-form
Generate form component with validation, state management, and submit handling. Use when creating new data entry forms.
