33 lines
1.2 KiB
YAML
33 lines
1.2 KiB
YAML
name: ui
|
|
extends: [performance, review-checklist, documentation] # from skills/core
|
|
description: |
|
|
Mode skill for user-facing UI work: layout, components, A11y, SEO, visual polish.
|
|
Applies to Next.js/React, Shopify theme (Liquid/JSON), and general frontend stacks.
|
|
used_by: [Nova, Skye, Finn]
|
|
triggers:
|
|
- touches_ui
|
|
- user_facing_change
|
|
- a11y_changes
|
|
- seo_changes
|
|
inputs_required:
|
|
- design_reference (Figma/URL/screenshot) optional
|
|
- target_devices (desktop/mobile)
|
|
- accessibility_budget (e.g., WCAG 2.1 AA)
|
|
- seo_targets (title/desc/canonical/open-graph)
|
|
outputs:
|
|
- ui-change-notes.md
|
|
- updated-components/
|
|
principles:
|
|
- Prefer accessible, semantic markup; ARIA only when necessary.
|
|
- Keep components pure and state minimal; co-locate styles/types.
|
|
- Enforce design tokens; no magic numbers.
|
|
checklist:
|
|
- [ ] Lighthouse A11y ≥ 95, Best Practices ≥ 95
|
|
- [ ] Keyboard and screen-reader flows validated
|
|
- [ ] Meta tags, canonical, OG/Twitter cards present
|
|
- [ ] CLS < 0.1, LCP within budget (desktop/mobile targets specified)
|
|
patterns:
|
|
- "Add an accessible label and role where semantics are insufficient."
|
|
- "Use CSS logical properties for RTL/i18n readiness."
|
|
hooks:
|
|
- before_merge |