{
  "id": "skill-area:react-components",
  "_kind": "SkillArea",
  "_file": "domain/skill-areas/skill-areas-frontend.yaml",
  "_cluster": "domain",
  "attributes": {
    "displayName": "React Component Design",
    "description": "Designing reusable React components: composition vs inheritance,\nhooks discipline, accessibility, controlled/uncontrolled patterns,\nand performance via memo/useMemo/useCallback.\n",
    "domains": [
      "specialization:web-development"
    ],
    "requiresFrameworks": [
      "framework:react"
    ],
    "expertiseLevels": [
      "novice",
      "intermediate",
      "expert"
    ]
  },
  "outgoingEdges": [
    {
      "from": "skill-area:react-components",
      "to": "specialization:web-development",
      "kind": "applies_to",
      "attributes": {
        "confidence": "primary"
      }
    },
    {
      "from": "skill-area:react-components",
      "to": "framework:react",
      "kind": "uses_framework"
    },
    {
      "from": "skill-area:react-components",
      "to": "framework:react",
      "kind": "uses_framework",
      "attributes": {}
    },
    {
      "from": "skill-area:react-components",
      "to": "skill-area:react-state-management",
      "kind": "prerequisite_for_learning",
      "attributes": {
        "strength": "recommended"
      }
    }
  ],
  "incomingEdges": [
    {
      "from": "framework:react",
      "to": "skill-area:react-components",
      "kind": "used_by_skill_area",
      "attributes": {}
    },
    {
      "from": "skill-area:ui-component-libraries",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "skill-area:frontend-development",
      "to": "skill-area:react-components",
      "kind": "prerequisite_for_learning",
      "attributes": {
        "strength": "recommended"
      }
    },
    {
      "from": "skill-area:server-components",
      "to": "skill-area:react-components",
      "kind": "prerequisite_for_learning",
      "attributes": {
        "strength": "helpful"
      }
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:micro-frontend",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:backend-for-frontend",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:browser-extension",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:nextjs-supabase-stripe",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:mern-stack",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:t3-stack",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "skill:react-component-generation",
      "to": "skill-area:react-components",
      "kind": "addresses",
      "attributes": {}
    },
    {
      "from": "lib-agent:web-development--component-developer",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 1
      }
    },
    {
      "from": "lib-agent:web-development--component-documentation",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-agent:web-development--forms-developer",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-agent:web-development--hooks-developer",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-agent:web-development--micro-frontend-architect",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-agent:web-development--react-developer",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-process:web-development--svelte-sveltekit-development",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 1
      }
    },
    {
      "from": "lib-process:web-development--typescript-configuration",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 1
      }
    },
    {
      "from": "lib-process:web-development--vue-app-development",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 1
      }
    },
    {
      "from": "lib-skill:web-development--lit",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-skill:web-development--react-development",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "lib-skill:web-development--react-hooks",
      "to": "skill-area:react-components",
      "kind": "lib_requires_skill_area",
      "attributes": {
        "weight": 0.7
      }
    },
    {
      "from": "role:fullstack-engineer",
      "to": "skill-area:react-components",
      "kind": "requires_expertise",
      "attributes": {}
    },
    {
      "from": "role:frontend-engineer",
      "to": "skill-area:react-components",
      "kind": "requires_expertise",
      "attributes": {}
    }
  ]
}