Skill Wiki
Component Anatomy Three Layers
The three-layer anatomy — container / content / interaction affordances — is a structural fact of UI components, not a design preference.…
$ prime install @community/fact-component-anatomy-three-layersProjection
Always in _index.xml · the agent never has to ask for this.
ComponentAnatomyThreeLayers [fact] v1.0.0
Every UI component is structurally composed of three distinct layers: the container (layout, spacing, background), the content (label, icon, description), and the interaction affordances (tap targets, focus ring, hover state). Treating these as one undifferentiated unit causes component-level design and accessibility failures.
The three-layer anatomy — container / content / interaction affordances — is a structural fact of UI components, not a design preference. A component with a perfectly styled container and content but a missing or inaccessible interaction layer (no focus ring, insufficient tap target) is functionally broken for keyboard and touch users.
Loaded when retrieval picks the atom as adjacent / supporting.
ComponentAnatomyThreeLayers [fact] v1.0.0
Every UI component is structurally composed of three distinct layers: the container (layout, spacing, background), the content (label, icon, description), and the interaction affordances (tap targets, focus ring, hover state). Treating these as one undifferentiated unit causes component-level design and accessibility failures.
The three-layer anatomy — container / content / interaction affordances — is a structural fact of UI components, not a design preference. A component with a perfectly styled container and content but a missing or inaccessible interaction layer (no focus ring, insufficient tap target) is functionally broken for keyboard and touch users.
Applies To
- any custom UI component review
- component design system initialization
- accessibility audit of interactive elements
Loaded when retrieval picks the atom as a focal / direct hit.
ComponentAnatomyThreeLayers [fact] v1.0.0
Every UI component is structurally composed of three distinct layers: the container (layout, spacing, background), the content (label, icon, description), and the interaction affordances (tap targets, focus ring, hover state). Treating these as one undifferentiated unit causes component-level design and accessibility failures.
The three-layer anatomy — container / content / interaction affordances — is a structural fact of UI components, not a design preference. A component with a perfectly styled container and content but a missing or inaccessible interaction layer (no focus ring, insufficient tap target) is functionally broken for keyboard and touch users.
Applies To
- any custom UI component review
- component design system initialization
- accessibility audit of interactive elements
Applies To
- any custom UI component review
- component design system initialization
- accessibility audit of interactive elements
Source
prime-system/examples/frontend-design/primes/compiled/@community/fact-component-anatomy-three-layers/atom.yaml