OpenSkillIndex← back to search
claude-code

Claude-skill-registry component-docs

Generate or update component documentation with usage examples, props tables, and Storybook stories. Use when documenting new components, creating usage examples, or setting up Storybook stories.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/component-docs" ~/.claude/skills/majiayu000-claude-skill-registry-component-docs-0f8017 && rm -rf "$T"
manifest: skills/data/component-docs/SKILL.md
source content

Component Documentation Skill

Documentation lives in 

packages/ui/
.

Component Documentation Template

# Button

A customizable button component built with Radix UI primitives.

## Usage

\`\`\`tsx
import { Button } from "@sgcarstrends/ui";

<Button variant="default">Click me</Button>
\`\`\`

## Variants

\`\`\`tsx
<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
\`\`\`

## Sizes

\`\`\`tsx
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Icon /></Button>
\`\`\`

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | `"default" \| "destructive" \| "outline"` | `"default"` | Visual style |
| size | `"default" \| "sm" \| "lg" \| "icon"` | `"default"` | Button size |
| asChild | `boolean` | `false` | Render as child element |

## Accessibility

- Uses semantic `<button>` element
- Supports keyboard navigation (Enter, Space)
- Proper focus states

JSDoc Comments

/**
 * A customizable button component.
 *
 * @example
 * <Button variant="default">Click me</Button>
 */
export interface ButtonProps {
  /** Visual style variant @default "default" */
  variant?: "default" | "destructive" | "outline";
  /** Button size @default "default" */
  size?: "default" | "sm" | "lg" | "icon";
}

Storybook Stories

// packages/ui/src/components/button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./button";

const meta = {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    variant: { control: "select", options: ["default", "destructive", "outline"] },
    size: { control: "select", options: ["default", "sm", "lg", "icon"] },
  },
} satisfies Meta<typeof Button>;

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

export const Default: Story = { args: { children: "Button" } };
export const Destructive: Story = { args: { variant: "destructive", children: "Delete" } };

Documentation Checklist

  • JSDoc comments on component and props
  • Markdown documentation with usage examples
  • Props table included
  • Variants documented
  • Accessibility notes
  • Storybook stories (if using Storybook)
  • Exported from package index

Best Practices

  1. Clear Examples: Provide complete, working code
  2. Props Documentation: Document every prop with type and description
  3. Accessibility: Include a11y notes
  4. Keep Updated: Update docs when components change

References