# Component Library

> Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components for monorepo projects. Use when creating or refactoring UI components, reviewing component architecture, or setting up shared component patterns in a monorepo.

- Skill: `shipshitdev/component-library` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add shipshitdev/component-library`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shipshitdev/component-library/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shipshitdev (https://skillmd.com/u/shipshitdev)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/shipshitdev/component-library

---


# Component Library Standards Skill

## When to Use

Use when you're:

- Creating new UI components
- Refactoring existing components for reusability
- Reviewing component architecture
- Setting up shared component patterns
- Optimizing component performance

## Quick Reference

### Naming

- Files: PascalCase (`Button.tsx`)
- Props: `ComponentNameProps` interface
- Hooks: `use-` prefix (`use-auth.ts`)

### Structure

```typescript
'use client'; // Only if needed
// Imports: types → hooks → utils → components
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }
```

### Patterns

- Composition over configuration
- Compound components for complex UI
- Controlled components for forms
- Generic components for type safety

### Performance

- `React.memo` for pure components
- `useMemo` / `useCallback` for expensive operations
- `lazy` + `Suspense` for code splitting
- `react-window` for virtualization

### Accessibility

- Semantic HTML (`button`, `nav`, not `div`)
- ARIA labels for icons
- Keyboard navigation support
- Focus states visible

## References

- [Full guide: Patterns, styling, TypeScript, testing, documentation](references/full-guide.md)