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

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

• Clear Examples: Provide complete, working code

• Props Documentation: Document every prop with type and description

• Accessibility: Include a11y notes

• Keep Updated: Update docs when components change

References

• packages/ui/CLAUDE.md for package details

• shadcn/ui: https://ui.shadcn.com