home / skills / shipshitdev / library / component-library

component-library skill

safe

/bundles/frontend/skills/component-library

This skill helps you design reusable React/Next.js components in monorepos, applying consistent patterns, accessibility, and performance best practices.

npx playbooks add skill shipshitdev/library --skill component-library

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

1.6 KB

---
name: component-library
description: Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components for monorepo projects
version: 1.0.0
tags:
  - react
  - nextjs
  - components
  - design-system
  - typescript
  - performance
  - patterns
---

# Component Library Standards Skill

Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components.

## When to Use This Skill

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)

Overview

This skill helps you design and maintain consistent, reusable React and Next.js component libraries for monorepo projects. It codifies naming, structure, patterns, performance, and accessibility guidance so teams can deliver predictable UI primitives. Use it to enforce best practices across shared packages and to accelerate component development with robust defaults.

How this skill works

The skill inspects component design choices and recommends concrete conventions for files, props, hooks, and exports. It evaluates composition patterns, performance optimizations, and accessibility requirements, then suggests actionable refactors or templates. Outputs include naming conventions, structure templates, and pattern recommendations tailored for monorepos.

When to use it

When creating new shared UI components or libraries in a monorepo.
When refactoring components to improve reusability and maintainability.
When establishing or reviewing component architecture and package boundaries.
When onboarding team members to a consistent component pattern.
When optimizing render performance or accessibility across components.

Best practices

Use PascalCase files and explicit Props interfaces (ComponentNameProps) for clarity and typing.
Prefer composition and compound components over large config objects for flexibility.
Use hooks with use- prefix and colocate logic for reuse (e.g., useAuth).
Wrap pure components with React.memo and useMemo/useCallback for expensive work.
Prefer semantic HTML and visible focus states; add ARIA labels for non-text controls.

Example use cases

Create a Button, Modal, and FormField set with consistent props and accessibility defaults.
Refactor disparate input components into a single controlled Input + Validation pattern.
Set up a shared component package in a monorepo with clear export surfaces and types.
Introduce code-splitting with lazy/Suspense for large widgets and virtualization for long lists.
Review pull requests to enforce naming, folder layout, and performance guards.

FAQ

Should I always use React.memo?

Use React.memo for components that render the same output given the same props and that are expensive to render. Avoid it for trivial components where memo overhead outweighs benefits.

How do I balance generic types with ergonomics?

Expose generics where callers need type inference and provide sensible defaults. Keep common variants wrapped with simpler typed components to reduce boilerplate.