component-breakdown-and-hierarchy

Component Breakdown and Hierarchy

Purpose

This skill produces the component hierarchy, responsibility matrix, file placement decisions, and the finalised prop model.

Priority Order (Non-Negotiable at Every Decision Point)

Dev Notes  →  Project Guidelines  →  Figma  →  React / Frontend Best Practices

⚠️ Dev Notes are SACRED LAW. Label every decision influenced by a Dev Note with its DN ID (e.g., "Per DN-002").

⚠️ ANALYSIS DEPTH vs OUTPUT WIDTH — READ FIRST

Perform every step in full. Placement reasoning, naming conventions, folder boundaries and export patterns are all still applied — you need them to derive correct file names for the Code Generation Plan. What changed is that the reference tables themselves are no longer emitted, because they are embedded in the Coding Agent's repository-structure-governance skill.