About

Imported from shipshitdev/skills (skills/component-library/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill component-library. Copyright stays with the author.

Component Library Standards Skill

Name: component-library
Author: shipshitdev

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

Full guide: Patterns, styling, TypeScript, testing, documentation

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-component-library/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-component-library.ocm.jsonjson

{
  "ocm": "1",
  "id": "shipshitdev-skills-component-library",
  "kind": "skill",
  "name": "component-library",
  "description": "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.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "react",
      "nextjs",
      "components",
      "design-system",
      "typescript",
      "performance",
      "patterns",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/component-library/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/component-library/SKILL.md",
      "key": "shipshitdev/skills/skills/component-library/SKILL.md"
    }
  },
  "instructions": "# Component Library Standards Skill\n\n## When to Use\n\nUse when you're:\n\n- Creating new UI components\n- Refactoring existing components for reusability\n- Reviewing component architecture\n- Setting up shared component patterns\n- Optimizing component performance\n\n## Quick Reference\n\n### Naming\n\n- Files: PascalCase (`Button.tsx`)\n- Props: `ComponentNameProps` interface\n- Hooks: `use-` prefix (`use-auth.ts`)\n\n### Structure\n\n```typescript\n'use client'; // Only if needed\n// Imports: types → hooks → utils → components\nexport interface MyComponentProps { ... }\nexport default function MyComponent({ ... }",
  "cost": {
    "context_tokens": 306
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-component-library/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.