Frontend

Frontend Design guides the creation of distinctive, production-grade web interfaces with a deliberate visual direction. Use it when building components, pages, or applications that need working code and a strong aesthetic point of view.

Refero Design grounds UI, product, and landing-page work in reference research before implementation. It helps when you need visual direction, screen patterns, flow logic, or polished frontend styling without relying on generic design taste.

Frontend Component Generator creates React or Vue components with TypeScript, tests, styles, and barrel exports. Use it when you need a new component scaffold that follows the project’s existing patterns.

Frontend Technical Spec defines React environment, component architecture, state and data flow, and build verification from repository evidence. Use it when configuring or designing a React frontend, its build, or its runtime boundaries.

Frontend Technical Spec defines React environment, component architecture, state and data flow, build checks, and frontend nonfunctional criteria from repository evidence. Use it when designing or validating a React frontend, its build, or runtime boundaries.

Frontend TypeScript Rules applies React and TypeScript conventions for component design, state shape, and boundary type safety. Use it when implementing frontend components or reviewing how data and errors flow through a React app.

Accessibility provides patterns for WCAG 2.2 AA compliance, keyboard focus management, React Aria components, and honoring user preferences. Use it when building screen-reader support, keyboard navigation, dialogs, forms, or reduced-motion and contrast handling.

Animation And Motion Design covers Motion and the View Transitions API for component animations, page transitions, gestures, and exit effects. Use it when building interactive UIs or adding reduced-motion support.

Component Search finds production-ready React components in the 21st.dev registry from natural-language queries. Use it to look up UI building blocks, compare alternatives, and get install instructions.

Jimubi Bigscreen generates and edits full-screen data visualizations for big-screen layouts. Use it for 大屏, monitoring screens, sales displays, and other full-screen dashboard-style pages, not standard dashboards.

Logo Reveal creates a short 3D logo draw-on and brand intro video with backdrop, wordmark, and CTA. Use it for product launch clips, landing page intros, or any animated logo reveal.

Polish performs a final quality pass to fix alignment, spacing, consistency, and small visual issues before shipping. Use it after the work is functionally complete and you want a pre-launch review.