docs: Motion System v1 + Button gold standard + Component Template + Decision Tree
- Motion System v1 (chapter 5):
- Motion principles: when to animate, when NOT to animate
- Duration scale (instant to slower: 0ms to 500ms)
- Easing functions (linear, in, out, in-out, spring)
- Component-specific motion: Button, Modal, Drawer, Map, Skeleton,
Progress, Error/Success
- Reduced motion support (prefers-reduced-motion)
- Interruption rules (animations must be interruptible)
- Error/success animations (shake, checkmark, pulse)
- Button gold standard (chapter 8.3.1):
- Full specification: purpose, design goal, token dependencies,
layout, sizes, variants, states, keyboard, touch, accessibility,
anti-patterns, related components, DDR references
- Sets the bar for all future component specifications
- COMPONENT_TEMPLATE.md (v1.0, LOCKED):
- Standard template for all component specifications
- Sections: purpose, tokens, layout, sizes, variants, states,
keyboard, touch, accessibility, motion, acceptance criteria,
anti-patterns, related components, DDR references
- COMPONENT_DECISION_TREE.md (v1.0, LOCKED):
- Decision trees for: user actions, information display, user input,
feedback, navigation, Landvex-specific
- Quick reference table mapping needs to components
- Prevents invention of unnecessary components
Rationale: Motion before brand (affects every interaction). Button as
reference implementation. Template ensures consistency. Decision tree
guides AI agents and developers to correct component choice.
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
# COMPONENT TEMPLATE
|
||||
|
||||
**Template for All Component Specifications**
|
||||
|
||||
| | |
|
||||
|---|---|
|
||||
| **Version** | 1.0 |
|
||||
| **Status** | LOCKED |
|
||||
| **Scope** | All Landvex & quiXzoom components |
|
||||
|
||||
---
|
||||
|
||||
## Instructions
|
||||
|
||||
Copy this template for each new component. Remove sections that do not apply. Add sections that are component-specific.
|
||||
|
||||
---
|
||||
|
||||
## [Component Name]
|
||||
|
||||
**Purpose:** One sentence describing what this component does.
|
||||
|
||||
**Design Goal:** One sentence describing the ideal user experience.
|
||||
|
||||
**Tier:** [1 (Canonical) / 2 (Derived) / 3 (Domain)]
|
||||
|
||||
**Inherits From:** [Parent component, or "—" if canonical]
|
||||
|
||||
---
|
||||
|
||||
### Token Dependencies
|
||||
|
||||
| Token | Semantic Reference | Usage |
|
||||
|-------|-------------------|-------|
|
||||
| `component-token-1` | `semantic-token-1` | Description |
|
||||
| `component-token-2` | `semantic-token-2` | Description |
|
||||
|
||||
---
|
||||
|
||||
### Layout
|
||||
|
||||
- Dimensions
|
||||
- Padding
|
||||
- Margins
|
||||
- Border radius
|
||||
- Internal structure
|
||||
|
||||
---
|
||||
|
||||
### Sizes
|
||||
|
||||
| Size | Dimensions | Usage |
|
||||
|------|-----------|-------|
|
||||
| Small | [dimensions] | [context] |
|
||||
| Default | [dimensions] | [context] |
|
||||
| Large | [dimensions] | [context] |
|
||||
|
||||
---
|
||||
|
||||
### Variants
|
||||
|
||||
| Variant | Visual | Usage |
|
||||
|---------|--------|-------|
|
||||
| Variant 1 | [description] | [context] |
|
||||
| Variant 2 | [description] | [context] |
|
||||
|
||||
---
|
||||
|
||||
### States
|
||||
|
||||
| State | Visual | Motion |
|
||||
|-------|--------|--------|
|
||||
| Default | [description] | [animation] |
|
||||
| Hover | [description] | [animation] |
|
||||
| Focus | [description] | [animation] |
|
||||
| Active | [description] | [animation] |
|
||||
| Disabled | [description] | [animation] |
|
||||
| Loading | [description] | [animation] |
|
||||
| Error | [description] | [animation] |
|
||||
|
||||
---
|
||||
|
||||
### Keyboard
|
||||
|
||||
| Key | Action |
|
||||
|-----|--------|
|
||||
| `Tab` | [behavior] |
|
||||
| `Enter` / `Space` | [behavior] |
|
||||
| `Escape` | [behavior] |
|
||||
| Arrow keys | [behavior] |
|
||||
|
||||
---
|
||||
|
||||
### Touch
|
||||
|
||||
- Touch target size
|
||||
- Active state behavior
|
||||
- Gesture support (if any)
|
||||
|
||||
---
|
||||
|
||||
### Accessibility
|
||||
|
||||
- ARIA roles
|
||||
- ARIA states
|
||||
- Screen reader behavior
|
||||
- Focus management
|
||||
|
||||
---
|
||||
|
||||
### Motion
|
||||
|
||||
| Transition | Animation | Duration | Easing |
|
||||
|-----------|-----------|----------|--------|
|
||||
| [state change] | [description] | [duration] | [easing] |
|
||||
|
||||
---
|
||||
|
||||
### Acceptance Criteria
|
||||
|
||||
- [ ] Criterion 1
|
||||
- [ ] Criterion 2
|
||||
- [ ] Criterion 3
|
||||
|
||||
---
|
||||
|
||||
### Anti-Patterns
|
||||
|
||||
- ❌ [What not to do]
|
||||
- ❌ [What not to do]
|
||||
|
||||
---
|
||||
|
||||
### Related Components
|
||||
|
||||
- [Component A] — [relationship]
|
||||
- [Component B] — [relationship]
|
||||
|
||||
---
|
||||
|
||||
### DDR References
|
||||
|
||||
- DDR-XXX: [Decision rationale]
|
||||
Reference in New Issue
Block a user