component-library

Original：🇺🇸 English

Translated

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

32installs

Sourceshipshitdev/library

Added on2026-02-04

NPX Install

npx skill4agent add shipshitdev/library component-library

SKILL.md Content

View Translation Comparison →

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