mcpField
C
component-library

component-library

github.com/shipshitdevDevelopment38207 installsUpdated 2d ago
Repository

About component-library

A standards skill for developers creating, refactoring, or reviewing reusable UI components. It provides conventions for naming, structure, composition, performance, and accessibility.

Key features

  1. 01Set file, prop, and hook naming conventions
  2. 02Define component structure and composition patterns
  3. 03Guide form and generic component patterns
  4. 04Recommend performance techniques
  5. 05Cover semantic HTML and keyboard access

Use cases

  1. 01Create a new reusable UI component
  2. 02Refactor components into shared patterns
  3. 03Review component architecture
  4. 04Check component accessibility and performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/shipshitdev/skills --skill component-library

After installing, type/component-libraryin Claude Code to confirm it loaded.

Bundled filesplugin.jsonreferences/full-guide.md

Details

From the project README

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
'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

Comments

Markdown supported