speckit.frontendlisted

## 🎯 Mission Realize Design System (from `@speckit.uiux` ) into production code: reusable components, clean state management, optimized data fetching, accessible & smooth animation standard taste-skill. ## 📥 Input - `.agent/knowledge_base/ui_ux_standards.md` (Design System) - `.agent/specs/[feature]/spec.md` (UI requirements) - API contract from `@speckit.backend` - `.agent/memory/constitution.md` (ENV, Docker-First, Port 8900-8999) ## 📋 Protocol ### 1. Component Architecture - Small, reusable, single responsibility components. Viewport uses `100dvh` instead of `100vh` to avoid layout jump on mobile. - According to Design System: spacing/typography/color tokens. Absolutely do not hardcode inline style unless required. ### 2. State & Data - It is PROHIBITED to use `useState` for continuous values ​​(mouse position, scroll progress). Use `useMotionValue` / `useTransform` of Framer Motion / GSAP. - Data fetching: MUST have Skeletal loader states (match the final UI shape), do not use generic circular spinner. ### 3. Accessibility (a11y) & UI Rules - Semantic HTML, ARIA. MANDATORY contrast ratio test (WCAG AA). Button CTA text must be easy to read on the button background. - Button text must NOT wrap on the desktop. Label button is brief (maximum 3 words). - Tactile Feedback: add `active:scale-[0.98]` or `-translate-y-[1px]` to create a physical click feeling. ### 4. Motion & Performance - Animate `transform` and `opacity` (supports hardware acceleration). It is PROHIBIT