40 lines
2.2 KiB
Markdown
40 lines
2.2 KiB
Markdown
---
|
|
name: interface-kit
|
|
description: >
|
|
Implement or polish accessible UI using existing project components, design tokens, and platform conventions when asked to build or style an interface.
|
|
scope: global
|
|
---
|
|
|
|
# Interface implementation
|
|
|
|
1. Inspect the target flow, components, tokens, and platform. Preserve the established
|
|
design even when no `DESIGN.md` exists. User instructions and existing conventions
|
|
take precedence over recipe defaults.
|
|
2. Build the requested behavior and states: loading, empty, success, error, and
|
|
disabled states where relevant. Use native semantics and the project's primitives;
|
|
do not add React, Radix, shadcn, or another stack just to follow a recipe.
|
|
3. Make the changed flow keyboard accessible with visible focus, meaningful labels,
|
|
appropriate contrast, and correct focus restoration. Respect reduced motion.
|
|
4. Fit layout and content to supported viewport sizes. Use existing spacing/type
|
|
scales and readable hierarchy; choose a coherent direction only for new designs.
|
|
Fonts, borders, shadows, and easing are choices, not universal bans or mandates.
|
|
5. Inspect the rendered result and exercise the changed interaction using the available
|
|
product browser/device tools. Check relevant keyboard and responsive behavior.
|
|
Apply [shared verification](../../protocols/workflow.md#verification); do not impose
|
|
every reference checklist on a small UI edit.
|
|
6. Report the working result and verification limits.
|
|
|
|
## References on demand
|
|
|
|
- [Design recipes](references/design-recipes.md): typography, spatial choices,
|
|
color, motion, and component examples. Adapt them to the existing design.
|
|
- [Accessibility](references/accessibility-checklist.md): relevant semantic,
|
|
keyboard, focus, contrast, and motion checks.
|
|
- [Components](references/component-patterns.md): optional React recipes.
|
|
- [Animation](references/animation-playbook.md): optional advanced motion.
|
|
- [Review checklist](references/review-checklist.md): use selected items for a
|
|
requested polish/audit pass, not as mandatory gates.
|
|
|
|
Aim for comfortable touch targets, often 44px. WCAG 2.2 AA target-size minimum is
|
|
24px with defined exceptions; distinguish that standard from stricter design goals.
|