How do I install the Component Library skill?

Run npx skillmds@latest add tomevault-io/component-library-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Component Library skill do?

Scaffold component library structure with Storybook and documentation Use when this capability is needed. It is listed under Web & Frontend on SkillMD.

Is Component Library safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Component Library?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Component Library free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Component Library?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Component Library by tomevault-io — Agent Skill

Name: Component Library
Author: tomevault-io

Component Library Scaffolding

I'll help you set up a complete component library with Storybook, testing, documentation, and build configuration.

Arguments: $ARGUMENTS - library type or framework (e.g., "react", "vue", "web-components", "storybook")

Strategic Planning Process

Framework Selection
- React, Vue, Angular, Svelte, Web Components?
- TypeScript or JavaScript?
- What's the target environment? (browser, Node.js, both)
- Design system or utility components?
Build & Distribution
- How will components be bundled? (Rollup, Vite, esbuild)
- What formats? (ESM, CJS, UMD)
- Tree-shaking support needed?
- CSS bundling strategy
- Type definitions generation
Documentation & Development
- Storybook for component showcase
- Documentation site (Docusaurus, VitePress, etc.)
- Live playground/examples
- Design tokens documentation
- Accessibility guidelines
Quality Assurance
- Unit testing (Jest, Vitest)
- Visual regression testing (Chromatic)
- Accessibility testing (axe, jest-axe)
- Build validation
- Bundle size tracking
Publishing Strategy
- npm package setup
- Versioning strategy (semantic versioning)
- Changelog generation
- CI/CD for releases

Phase 1: Project Detection & Setup

MANDATORY FIRST STEPS:

Detect existing project or create new structure
Identify framework and build tool preferences
Determine component library scope
Check for existing Storybook installation

Let me analyze your project:

# Detect framework and setup
echo "=== Component Library Setup Analysis ==="

# Check for existing framework
FRAMEWORK=""
if grep -q "\"react\"" package.json 2>/dev/null; then
    FRAMEWORK="React"
    echo "Detected: React"
elif grep -q "\"vue\"" package.json 2>/dev/null; then
    FRAMEWORK="Vue"
    echo "Detected: Vue"
elif grep -q "@angular/core" package.json 2>/dev/null; then
    FRAMEWORK="Angular"
    echo "Detected: Angular"
elif grep -q "\"svelte\"" package.json 2>/dev/null; then
    FRAMEWORK="Svelte"
    echo "Detected: Svelte"
else
    echo "No framework detected - will set up for your choice"
fi

# Check for TypeScript
if [ -f "tsconfig.json" ]; then
    echo "TypeScript: ✓"
else
    echo "TypeScript: ✗"
fi

# Check for Storybook
if [ -d ".storybook" ]; then
    echo "Storybook: Already installed"
    ls -la .storybook/
else
    echo "Storybook: Not installed (will configure)"
fi

# Check for build tools
if [ -f "vite.config.js" ] || [ -f "vite.config.ts" ]; then
    echo "Build tool: Vite"
elif [ -f "rollup.config.js" ]; then
    echo "Build tool: Rollup"
elif [ -f "webpack.config.js" ]; then
    echo "Build tool: Webpack"
else
    echo "Build tool: None detected (will configure)"
fi

# Check for existing components
if [ -d "src/components" ]; then
    echo ""
    echo "Existing components:"
    find src/components -type f -name "*.tsx" -o -name "*.jsx" -o -name "*.vue" 2>/dev/null | head -10
fi

Phase 2: Component Library Structure

I'll create a comprehensive component library structure:

Directory Structure:

component-library/
├── src/
│   ├── components/          # Component source files
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   ├── Button.module.css
│   │   │   └── index.ts
│   │   ├── Input/
│   │   │   ├── Input.tsx
│   │   │   ├── Input.test.tsx
│   │   │   ├── Input.stories.tsx
│   │   │   └── index.ts
│   │   └── index.ts         # Main exports
│   ├── hooks/               # Shared React hooks
│   ├── utils/               # Utility functions
│   ├── types/               # TypeScript types
│   └── index.ts             # Library entry point
├── .storybook/              # Storybook configuration
│   ├── main.ts
│   ├── preview.ts
│   └── theme.ts
├── docs/                    # Documentation
│   ├── getting-started.md
│   ├── components/
│   └── design-tokens.md
├── dist/                    # Build output
│   ├── esm/                 # ES Modules
│   ├── cjs/                 # CommonJS
│   └── types/               # Type definitions
├── package.json
├── tsconfig.json
├── tsconfig.build.json
├── vite.config.ts           # Build configuration
├── vitest.config.ts         # Test configuration
├── .npmignore
└── README.md

Phase 3: Storybook Setup

I'll configure Storybook for component development:

Install Storybook:

# Initialize Storybook (auto-detects framework)
npx storybook@latest init

# Or manual installation for specific framework
npm install --save-dev @storybook/react @storybook/react-vite
npm install --save-dev @storybook/addon-essentials @storybook/addon-a11y
npm install --save-dev @storybook/addon-interactions @storybook/test

Storybook Configuration (.storybook/main.ts):

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    '@storybook/addon-links',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
};

export default config;

Storybook Preview (.storybook/preview.ts):

import type { Preview } from '@storybook/react';
import '../src/styles/global.css';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    backgrounds: {
      default: 'light',
      values: [
        { name: 'light', value: '#ffffff' },
        { name: 'dark', value: '#1a1a1a' },
      ],
    },
  },
};

export default preview;

Phase 4: Component Templates

I'll create example component templates:

Button Component (src/components/Button/Button.tsx):

import React from 'react';
import styles from './Button.module.css';

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /**
   * Button variant
   */
  variant?: 'primary' | 'secondary' | 'outline';
  /**
   * Button size
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Loading state
   */
  loading?: boolean;
  /**
   * Full width button
   */
  fullWidth?: boolean;
}

/**
 * Primary UI component for user interaction
 */
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      variant = 'primary',
      size = 'medium',
      loading = false,
      fullWidth = false,
      children,
      disabled,
      className,
      ...props
    },
    ref
  ) => {
    const classes = [
      styles.button,
      styles[variant],
      styles[size],
      fullWidth && styles.fullWidth,
      className,
    ]
      .filter(Boolean)
      .join(' ');

    return (
      <button
        ref={ref}
        className={classes}
        disabled={disabled || loading}
        {...props}
      >
        {loading ? <span className={styles.spinner} /> : children}
      </button>
    );
  }
);

Button.displayName = 'Button';

Button Stories (src/components/Button/Button.stories.tsx):

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'outline'],
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
    },
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Button',
  },
};

export const Large: Story = {
  args: {
    size: 'large',
    children: 'Large Button',
  },
};

export const Loading: Story = {
  args: {
    loading: true,
    children: 'Loading...',
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
    children: 'Disabled',
  },
};

Button Test (src/components/Button/Button.test.tsx):

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { Button } from './Button';

describe('Button', () => {
  it('renders children correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('applies variant class', () => {
    render(<Button variant="secondary">Button</Button>);
    const button = screen.getByRole('button');
    expect(button).toHaveClass('secondary');
  });

  it('handles click events', async () => {
    const handleClick = vi.fn();
    render(<Button

    await userEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('disables button when loading', () => {
    render(<Button loading>Loading</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });

  it('disables button when disabled prop is true', () => {
    render(<Button disabled>Disabled</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });
});

Phase 5: Build Configuration

I'll set up build configuration for library distribution:

Vite Config (vite.config.ts):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
      include: ['src/**/*'],
      exclude: ['**/*.test.tsx', '**/*.stories.tsx'],
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'ComponentLibrary',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
        assetFileNames: 'assets/[name][extname]',
        chunkFileNames: 'chunks/[name].[hash].js',
      },
    },
    sourcemap: true,
    emptyOutDir: true,
  },
  css: {
    modules: {
      localsConvention: 'camelCase',
    },
  },
});

Package.json Configuration:

{
  "name": "@your-org/component-library",
  "version": "1.0.0",
  "description": "A React component library",
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    },
    "./styles": "./dist/style.css"
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "lint": "eslint src --ext ts,tsx",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "prepublishOnly": "npm run build"
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@storybook/react": "^7.6.0",
    "@storybook/react-vite": "^7.6.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.0.0",
    "@types/react": "^18.2.0",
    "@vitejs/plugin-react": "^4.2.0",
    "typescript": "^5.3.0",
    "vite": "^5.0.0",
    "vite-plugin-dts": "^3.7.0",
    "vitest": "^1.0.0"
  }
}

TypeScript Configuration (tsconfig.json):

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "**/*.stories.tsx", "**/*.test.tsx"]
}

Phase 6: Documentation Setup

I'll create comprehensive documentation:

README.md:

# Component Library

A modern React component library built with TypeScript, Storybook, and Vite.

## Installation

```bash
npm install @your-org/component-library
# or
yarn add @your-org/component-library

Usage

import { Button } from '@your-org/component-library';
import '@your-org/component-library/styles';

function App() {
  return (
    <Button variant="primary" size="large">
      Click me
    </Button>
  );
}

Components

Button - Versatile button component with variants and sizes
Input - Form input with validation support
Card - Container component for content
[See full component list in Storybook]

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Run tests
npm test

# Build library
npm run build

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT


**Getting Started Guide (docs/getting-started.md):**
```markdown
# Getting Started

## Installation

Install the component library in your React project:

```bash
npm install @your-org/component-library

Basic Setup

Import components and styles:

import { Button, Input, Card } from '@your-org/component-library';
import '@your-org/component-library/styles';

TypeScript Support

The library is written in TypeScript and includes type definitions:

import type { ButtonProps } from '@your-org/component-library';

const MyButton: React.FC<{ onClick: () => void }> = ({ onClick }) => {
  return <Button variant="primary"
};

Theming

Customize component styles with CSS variables:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --border-radius: 4px;
}

Next Steps

Browse components in Storybook
Read component documentation
Check out examples


## Token Optimization

**Status:** ✅ Fully Optimized (Phase 2 Batch 4B, 2026-01-27)

**Target:** 70-85% reduction (4,000-6,000 → 800-1,500 tokens)

### Optimization Strategies

**1. Template-Based Scaffolding (80% savings)**
```typescript
// Cache structure in .claude/cache/component_library/
{
  "framework_templates": {
    "react": {
      "button": "prebuilt template",
      "input": "prebuilt template",
      "card": "prebuilt template"
    },
    "vue": { /* ... */ },
    "angular": { /* ... */ }
  },
  "directory_structure": {
    "react": ["src/components", "src/hooks", "src/utils", ".storybook"],
    // ...
  }
}

Before (4,000+ tokens):

# Detect framework
grep -r "react" package.json
# Read package.json
cat package.json
# Read tsconfig.json
cat tsconfig.json
# Check for Storybook
ls -la .storybook/
cat .storybook/main.ts
# Check existing components
find src/components -type f
cat src/components/Button/Button.tsx
# ... many more reads

After (800 tokens):

# Single framework detection with cached template
if grep -q "\"react\"" package.json 2>/dev/null; then
  # Use cached React template - no reads needed
  TEMPLATE="react"
elif grep -q "\"vue\"" package.json 2>/dev/null; then
  TEMPLATE="vue"
fi

# Apply template directly - no verification reads

2. Framework Detection Cache (90% savings)

Detect framework ONCE, cache the result
All subsequent operations use cached framework choice
No repeated package.json reads

Before (2,000 tokens):

# Phase 1: Detect framework
cat package.json | grep "react"
# Phase 2: Detect framework again
cat package.json | grep "react"
# Phase 3: Detect framework yet again
cat package.json | grep "react"

After (200 tokens):

# Detect once, use cache
FRAMEWORK=$(grep -q "\"react\"" package.json && echo "react" || echo "vue")
# Store in .claude/cache/component_library/config.json
# All subsequent operations: read cache

3. Batch File Generation (75% savings)

Generate ALL component files in ONE pass
Use Write tool for multiple files sequentially
NO verification reads after generation

Before (3,000+ tokens):

# Generate Button.tsx
cat > Button.tsx << 'EOF'
...
EOF
# Read back to verify
cat Button.tsx

# Generate Button.test.tsx
cat > Button.test.tsx << 'EOF'
...
EOF
# Read back to verify
cat Button.test.tsx

# Generate Button.stories.tsx
# ... repeat for EVERY file

After (750 tokens):

# Generate all Button files in sequence - NO reads
# Write tool: Button.tsx
# Write tool: Button.test.tsx
# Write tool: Button.stories.tsx
# Write tool: Button.module.css
# Write tool: index.ts
# Trust template generation - no verification needed

4. No Verification Reads (85% savings)

Trust template generation
Skip reading back generated files
Only report what was created

Before (5,000+ tokens):

# Generate component
cat > Button.tsx << 'EOF'
...
EOF

# Verify it was created correctly
cat Button.tsx  # 1,000+ tokens

# Generate story
cat > Button.stories.tsx << 'EOF'
...
EOF

# Verify story
cat Button.stories.tsx  # 1,000+ tokens

After (750 tokens):

# Generate all files - NO verification
# Report: "✓ Created Button.tsx (component)"
# Report: "✓ Created Button.stories.tsx (story)"
# Report: "✓ Created Button.test.tsx (test)"
# NO reads - trust the templates

5. Cached Storybook Config (80% savings)

Pre-cached Storybook configurations for each framework
NO reads of Storybook documentation
Direct template application

Cache structure:

{
  "storybook_configs": {
    "react": {
      "main.ts": "prebuilt config",
      "preview.ts": "prebuilt config",
      "dependencies": ["@storybook/react", "@storybook/react-vite"]
    },
    "vue": { /* ... */ }
  }
}

Before (3,000+ tokens):

# Check Storybook docs
cat .storybook/main.ts
cat .storybook/preview.ts
# Read examples
cat examples/storybook-config.ts
# Generate configuration

After (600 tokens):

# Use cached template directly
# .claude/cache/component_library/storybook_react_main.ts
# Apply without reads

Token Usage Breakdown

Baseline (Unoptimized): 4,000-6,000 tokens

Framework detection: 500 tokens (repeated reads)
Existing file analysis: 2,000 tokens (read all components)
Template generation: 1,500 tokens (verbose explanations)
Verification reads: 1,500 tokens (read back all generated files)
Configuration setup: 500 tokens (read configs)

Optimized: 800-1,500 tokens

Cached framework detection: 50 tokens (single grep, cache read)
Skip existing file reads: 0 tokens (use cache or Glob patterns only)
Batch template generation: 400 tokens (Write tool calls only)
No verification: 0 tokens (trust templates)
Cached configs: 100 tokens (apply from cache)
Status reporting: 250 tokens (concise summary)

Savings: 70-85% reduction

Implementation Patterns

Pattern 1: Framework Detection with Cache

# Check cache first
CACHE_FILE=".claude/cache/component_library/config.json"
if [ -f "$CACHE_FILE" ]; then
  FRAMEWORK=$(jq -r '.framework' "$CACHE_FILE")
else
  # Detect once
  if grep -q "\"react\"" package.json; then
    FRAMEWORK="react"
  elif grep -q "\"vue\"" package.json; then
    FRAMEWORK="vue"
  fi
  # Cache result
  echo "{\"framework\": \"$FRAMEWORK\"}" > "$CACHE_FILE"
fi

Pattern 2: Template Application

# Use cached template - NO reads
TEMPLATE_PATH=".claude/cache/component_library/templates/$FRAMEWORK/button.tsx"
if [ -f "$TEMPLATE_PATH" ]; then
  # Apply template directly
  cp "$TEMPLATE_PATH" "src/components/Button/Button.tsx"
else
  # Use embedded template (fallback)
  # Generate from prebuilt structure
fi

Pattern 3: Batch Component Generation

// Generate all component files in one batch
const components = ['Button', 'Input', 'Card'];
const files = ['tsx', 'test.tsx', 'stories.tsx', 'module.css', 'index.ts'];

// Single loop - NO verification reads
for (const component of components) {
  for (const file of files) {
    // Write tool call
    // NO Read tool call after
  }
}

// Report creation summary
console.log(`✓ Created ${components.length} components`);

Pattern 4: Storybook Setup from Cache

# Check for cached Storybook config
STORYBOOK_CACHE=".claude/cache/component_library/storybook/$FRAMEWORK"
if [ -d "$STORYBOOK_CACHE" ]; then
  # Copy entire config - NO reads
  cp -r "$STORYBOOK_CACHE/" .storybook/
else
  # Generate from embedded template
  # Use prebuilt config strings
fi

Cache Management

Cache Structure:

.claude/cache/component_library/
├── config.json                 # Framework, build tool choices
├── framework_templates.json    # Complete component templates
├── storybook_configs.json      # Storybook configurations
├── component_patterns.json     # Common patterns (Button, Input, etc.)
├── templates/
│   ├── react/
│   │   ├── button.tsx
│   │   ├── button.test.tsx
│   │   ├── button.stories.tsx
│   │   └── button.module.css
│   ├── vue/
│   └── angular/
└── storybook/
    ├── react/
    │   ├── main.ts
    │   └── preview.ts
    └── vue/

Cache Invalidation:

Framework change detected: Clear framework cache
Major version updates: Clear template cache
User request: Clear all caches

Progressive Disclosure

Minimal Initial Response:

# Detect framework: React ✓
# Using cached component templates
# Generating component library structure...

✓ Created src/components/Button/
✓ Created src/components/Input/
✓ Created src/components/Card/
✓ Configured Storybook
✓ Set up build with Vite

Ready: npm run storybook

Only if user asks for details:

Show file contents
Explain configuration choices
Provide customization options

Error Handling

Fast-fail patterns:

# Check prerequisites FIRST
[ -f "package.json" ] || { echo "No package.json found"; exit 1; }

# Detect framework quickly
FRAMEWORK=""
grep -q "\"react\"" package.json && FRAMEWORK="react"
[ -z "$FRAMEWORK" ] && { echo "No supported framework detected"; exit 1; }

# Continue with cached templates...

Integration with Other Skills

Synergistic Operations:

/scaffold - Use for individual components
/types-generate - Generate TypeScript types from schemas
/test - Run component tests after generation
/format - Format generated code
/docs - Enhance documentation

Token-efficient workflows:

# Component library setup (800 tokens)
/component-library react

# Test the library (400 tokens with cache)
/test src/components

# Generate documentation (300 tokens with cache)
/docs --update

Measurement & Validation

Success Metrics:

Token usage: 800-1,500 (target: 70-85% reduction)
Component generation: <2 seconds
Cache hit rate: >90%
User satisfaction: Complete library scaffold in single pass

Validation Steps:

Framework detected correctly
All component files created
Storybook configured
Build configuration valid
Tests runnable

Common Pitfalls to Avoid

Anti-patterns (HIGH COST):

# ❌ Reading every existing component
find src/components -type f -exec cat {} \;  # 10,000+ tokens

# ❌ Verifying every generated file
for file in src/components/**/*; do cat "$file"; done  # 5,000+ tokens

# ❌ Explaining every configuration detail
# Full explanation of Vite, Storybook, TypeScript...  # 3,000+ tokens

# ❌ Repeated framework detection
grep "react" package.json  # Multiple times = wasted tokens

Optimized patterns (LOW COST):

# ✓ Detect framework once, cache it
FRAMEWORK=$(grep -q "\"react\"" package.json && echo "react")

# ✓ Use templates, trust generation
# NO verification reads

# ✓ Concise status reporting
echo "✓ Component library ready: npm run storybook"

# ✓ Progressive disclosure
# Details only if user asks

Real-World Scenarios

Scenario 1: New React Component Library

Baseline: 5,500 tokens (full analysis, generation, verification)
Optimized: 900 tokens (cached templates, batch generation)
Savings: 84%

Scenario 2: Add Storybook to Existing Project

Baseline: 4,000 tokens (read existing components, configure Storybook)
Optimized: 700 tokens (cached config, minimal detection)
Savings: 82%

Scenario 3: Generate Multiple Components

Baseline: 6,000 tokens (individual generation, verification for each)
Optimized: 1,200 tokens (batch generation, no verification)
Savings: 80%

Expected Results

Before Optimization:

4,000-6,000 tokens per execution
Multiple reads of package.json, configs, existing components
Verification reads for every generated file
Verbose explanations and documentation

After Optimization:

800-1,500 tokens per execution
Single framework detection with cache
Batch file generation with no verification
Concise status reporting
70-85% token reduction achieved

Maintained Capabilities:

Full component library scaffolding
Storybook configuration
Build setup with Vite/Rollup
Test configuration
Complete documentation
Progressive enhancement on request

Integration Points

Synergistic Skills:

/scaffold - General feature scaffolding
/types-generate - Generate TypeScript types
/docs - Documentation management
/test - Run component tests
/format - Format component code

Suggests /scaffold when:

Need to add new components quickly
Following existing patterns
Creating feature-specific components

Suggests /docs when:

Need to enhance documentation
Create API documentation
Build documentation site

Framework Support

React:

Component structure with TypeScript
Storybook with React
Jest/Vitest testing
CSS Modules or Styled Components

Vue:

Single File Components
Storybook for Vue
Vue Test Utils
Scoped styles

Web Components:

Custom Elements API
Lit or Stencil
Framework-agnostic approach
Shadow DOM styling

Svelte:

Svelte components
Storybook for Svelte
Svelte Testing Library
Component-scoped styles

Expected Outputs

Files Created:

Complete directory structure
Example components with stories
Storybook configuration
Build configuration (Vite/Rollup)
Test setup and examples
Documentation files
Package.json with scripts
TypeScript configurations
README and guides

Ready to Use:

npm run storybook - Start component development
npm test - Run tests
npm run build - Build library for distribution
npm publish - Publish to npm (after setup)

Safety Mechanisms

Protection Measures:

Create git checkpoint before scaffolding
Preview structure before creation
Non-destructive for existing files
Validate package names
Check for conflicts

Validation Steps:

Verify framework compatibility
Check TypeScript configuration
Validate build outputs
Test Storybook startup
Verify tests run

Common Scenarios

Scenario 1: New Component Library

Create complete structure from scratch
Set up all tooling
Create example components
Configure publishing

Scenario 2: Add to Existing Project

Integrate Storybook into existing codebase
Add missing configurations
Create component templates
Set up testing

Scenario 3: Migrate to Component Library

Extract components from application
Set up build for distribution
Add Storybook stories
Configure exports

Important Notes

I will NEVER:

Overwrite existing components without confirmation
Add AI attribution to component files
Break existing build configuration
Remove existing Storybook setup
Modify package.json without validation

Best Practices:

Follow framework conventions
Use semantic versioning
Document all components
Include accessibility features
Provide usage examples

Credits

Inspired by:

Shadcn/ui - Component library patterns
Radix UI - Accessible components
Chakra UI - Design system approach
Material-UI - Component library architecture
Storybook Best Practices

This skill helps you quickly scaffold a production-ready component library with all essential tooling configured.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

Component Library

File contents

Component Library Scaffolding

Strategic Planning Process

Phase 1: Project Detection & Setup

Phase 2: Component Library Structure

Phase 3: Storybook Setup

Phase 4: Component Templates

Phase 5: Build Configuration

Phase 6: Documentation Setup

Usage

Components

Development

Contributing

License

Basic Setup

TypeScript Support

Theming

Next Steps

Token Usage Breakdown

Implementation Patterns

Cache Management

Progressive Disclosure

Error Handling

Integration with Other Skills

Measurement & Validation

Common Pitfalls to Avoid

Real-World Scenarios

Expected Results

Integration Points

Framework Support

Expected Outputs

Safety Mechanisms

Common Scenarios

Important Notes

Credits

Frequently asked questions

Component Library

File contents

Component Library Scaffolding

Strategic Planning Process

Phase 1: Project Detection & Setup

Phase 2: Component Library Structure

Phase 3: Storybook Setup

Phase 4: Component Templates

Phase 5: Build Configuration

Phase 6: Documentation Setup

Usage

Components

Development

Contributing

License

Basic Setup

TypeScript Support

Theming

Next Steps

Token Usage Breakdown

Implementation Patterns

Cache Management

Progressive Disclosure

Error Handling

Integration with Other Skills

Measurement & Validation

Common Pitfalls to Avoid

Real-World Scenarios

Expected Results

Integration Points

Framework Support

Expected Outputs

Safety Mechanisms

Common Scenarios

Important Notes

Credits

Related skills

Frequently asked questions

How do I install the Component Library skill?

What does the Component Library skill do?

Is Component Library safe to use?

Which AI agents work with Component Library?

Is Component Library free to use?

Who published Component Library?