component-building-playbook

Guides an agent through designing, building, and reviewing UI components in React, Vue 3, and Svelte 5. Covers surveying a codebase for its existing conventions, choosing a folder layout and a composition style, writing typed prop contracts, placing each piece of state correctly, fixing measured render-performance problems with memoization, list virtualization, and lazy loading, and meeting accessibility basics with semantic HTML, ARIA, and keyboard support that respects natural focus movement. Use when the user asks to create, refactor, reorganize, or review a component, a component library, or a component hierarchy, or to diagnose slow renders or prop drilling. Not for backend or API design, build tooling, design-token pipelines, or projects with no UI component layer.

Version

v1.0.0

Size

18 KB

Updated

2026-10-10

Your client verifies the signature before reading. This explicit manual read is available on every plan. Free automatically loads five chosen skills; paid plans automatically load relevant skills across the library.