Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From shipshitdev-library
Guides creating, refactoring, and reviewing React/Next.js UI components for monorepos with patterns for naming, structure, performance, and accessibility.
How this skill is triggered — by the user, by Claude, or both
Slash command
/shipshitdev-library:component-libraryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use when you're:
Use when you're:
Button.tsx)ComponentNameProps interfaceuse- prefix (use-auth.ts)'use client'; // Only if needed
// Imports: types → hooks → utils → components
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }
React.memo for pure componentsuseMemo / useCallback for expensive operationslazy + Suspense for code splittingreact-window for virtualizationbutton, nav, not div)npx claudepluginhub shipshitdev/skills --plugin worktreeDesigns scalable React components using functional components, hooks, composition patterns, and TypeScript. For building reusable component libraries and maintainable UI systems.
Provides patterns and references for building composable, accessible UI components: composition APIs, polymorphism, design tokens, publishing to npm/registry, and documentation.
React component structure, hooks rules, file naming, project layout, composition patterns, performance idioms, and effects discipline. Apply when implementing or modifying React SPA code. Use this skill to: - Structure a new component or feature folder. - Apply hooks correctly (rules, naming, dependency arrays). - Compose components via children, render props, or compound patterns. - Write effects only when needed (and avoid common misuses). - Pick performance escape hatches (memo, useMemo, useCallback) when justified. Do NOT use this skill for: - State management lib choice (see react-state-management). - Routing primitives (see react-routing). - Form patterns (see react-forms). - Testing (see react-testing).