import type { SkillConfig } from "@/types"

/**
 * Frontend Development Patterns Skill
 * Expertise in React, Next.js, state management, performance optimization, and UI best practices
 */
const frontendPatternsSkill: SkillConfig = {
  id: "frontend-patterns",
  name: "Frontend Development Patterns",
  description: "Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices",
  category: "frontend",
  expertise: [
    "react-patterns",
    "nextjs-development",
    "state-management",
    "performance-optimization",
    "component-design",
    "custom-hooks",
    "accessibility",
    "animation-patterns"
  ],
  patterns: [
    "Component composition over inheritance",
    "Compound components for complex UI",
    "Render props pattern for flexible components",
    "Custom hooks for reusable logic",
    "Context + reducer pattern for state",
    "Memoization with useMemo and useCallback",
    "Code splitting and lazy loading",
    "Error boundaries for graceful failures"
  ],
  examples: [
    "Create compound components like Tabs with TabList and Tab",
    "Implement custom data fetching hook with loading states",
    "Set up virtualization for long lists performance",
    "Create accessible form components with proper keyboard navigation",
    "Implement animations with Framer Motion",
    "Use error boundaries to catch and handle component errors"
  ]
}

export default frontendPatternsSkill