Frontend Components

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

When to use this skill

• When creating or modifying React (.jsx, .tsx), Vue (.vue), or other framework component files
• When implementing functional components with hooks (useState, useEffect, custom hooks)
• When using Vue Composition API or Single File Components (SFC)
• When defining component props, interfaces, or TypeScript types for components
• When managing component state (local state, lifted state, context, or global state)
• When building reusable UI components (buttons, cards, forms, modals, dropdowns)
• When implementing component composition or compound component patterns
• When organizing components in feature-based or atomic design structures
• When creating custom hooks (React) or composables (Vue) for shared logic
• When implementing component lifecycle logic, side effects, or data fetching
• When optimizing component rendering with memoization (React.memo, useMemo, useCallback)
• When working with component styling (CSS modules, styled-components, scoped styles)
• When implementing controlled vs. uncontrolled component patterns for forms
• When creating container/presentational component separation for better maintainability

Instructions

For details, refer to the information provided in this file: frontend components