component-placementEntry point BEFORE creating ANY React component, in any React codebase — search for an existing one first, decide placement (primitive / feature / layout / page-local), then route to the matching per-type skill. Framework-agnostic: governs component ARCHITECTURE, not any specific UI or styling libra
component-structureUse when creating, editing, restructuring, or reviewing a React frontend component \u2014 including its folder layout and file organization (tsx/scss/index), where a component or sub-component should live, BEM class naming, SCSS styling, rem sizing, i18n of user-visible strings, barrel exports, and
feature-componentsRules for FEATURE components in a React codebase — domain-coupled blocks that compose primitives and hold business logic/data. Activate when building or editing a domain feature (a panel/table/editor tied to your business data), or adding a new domain area. Framework-agnostic. Reached via frontend-r
hooks-registryUse when about to add, hand-roll, rename, move, or remove a custom React `use*` hook.
layout-componentsRules for LAYOUT / app-chrome components in a React codebase — the shell, top bar, sidebar, command palette, and global overlays that frame every page. Activate when editing or adding app chrome. Framework-agnostic. Reached via frontend-react:component-placement.
skeleton-componentsWhen building or editing a React component that renders asynchronously-loaded data, decide whether it needs a loading skeleton — and if so, build a separate skeleton component colocated next to it from the shared Skeleton primitive. Activate whenever a component gains a loading state, shows a blank/
storybook-storiesUse this skill whenever writing, adding, or asking about a Storybook story for a React/UI component \u2014 including \"add a story for X\", \"write a .stories file\", questions about which states/variants a story should cover (default, empty, error, loading, disabled), how to show a component's skel
ui-primitive-reuseBefore creating ANY shared/reusable UI primitive in a React codebase (button, input, checkbox, radio, switch, select, textarea, dialog, tooltip, dropdown, badge, card, separator…), search the project's primitive library first to avoid duplicates — reuse or extend what exists; build new only when tru