53 lines
1.5 KiB
Markdown
53 lines
1.5 KiB
Markdown
|
# Component vocabulary
|
||
|
|
|
||
|
|
The named components for <PROJECT NAME>. Match names from `ia.md`
|
||
|
|
where applicable. Do not introduce new components without proposing
|
||
|
|
them here first.
|
||
|
|
|
||
|
|
This file is loaded automatically by the design-system skill — agents
|
||
|
|
generating UI should be aware of every component in this list and
|
||
|
|
prefer them to ad-hoc one-offs.
|
||
|
|
|
||
|
|
## Primitives
|
||
|
|
|
||
|
|
### Button
|
||
|
|
- **Variants**: primary | secondary | ghost | destructive | link
|
||
|
|
- **Sizes**: sm | md | lg
|
||
|
|
- **States**: default | hover | active | focus | disabled | loading
|
||
|
|
- **Anatomy**: optional leading icon · label · optional trailing icon
|
||
|
|
- **Motion**: <TBD>
|
||
|
|
|
||
|
|
### Input
|
||
|
|
- **Variants**: text | textarea | select | checkbox | radio | toggle
|
||
|
|
- **Sizes**: sm | md | lg
|
||
|
|
- **States**: default | focus | error | disabled | readonly
|
||
|
|
- **Anatomy**: label · field · helper text · error message
|
||
|
|
- **Validation pattern**: <TBD — see interaction-design skill>
|
||
|
|
|
||
|
|
### Card / Surface
|
||
|
|
- **Variants**: <flat | bordered | elevated — pick or list>
|
||
|
|
- **Anatomy**: <header? · body · footer?>
|
||
|
|
|
||
|
|
## Project-specific components
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Pulled from ia.md. One block each, with anatomy and any state-specific
|
||
|
|
notes that should always apply when this component is rendered.
|
||
|
|
-->
|
||
|
|
|
||
|
|
### <Component name>
|
||
|
|
|
||
|
|
- **Purpose**: <one line>
|
||
|
|
- **Anatomy**: <slots / regions>
|
||
|
|
- **States**: <list>
|
||
|
|
- **Notes**: <anything load-bearing>
|
||
|
|
|
||
|
|
## Patterns to avoid
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Things that come up often and should be vetoed. Saves the agent from
|
||
|
|
re-inventing them.
|
||
|
|
-->
|
||
|
|
|
||
|
|
- <TBD: e.g., "no nested cards", "no inline icons in body text", etc.>
|