mcpField
C
component-docs

component-docs

github.com/motormetrics开发2256 次安装3 天前更新
代码仓库

关于 component-docs

component-docs 是用于编写本地 UI 组件及封装文档的技能，面向维护组件库或应用界面的开发者。它提供文档模板，并指导编写 JSDoc、示例、无障碍说明和 Storybook 故事。

主要功能

  1. 01Markdown 组件文档模板
  2. 02JSDoc 注释与用法示例
  3. 03属性和变体说明
  4. 04无障碍说明
  5. 05Storybook 故事编写指导
  6. 06链接至 HeroUI v3 官方文档

适用场景

  1. 01为可复用的本地组件编写文档
  2. 02记录组件属性和变体
  3. 03添加用法示例和无障碍说明
  4. 04为组件创建 Storybook 故事

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/motormetrics/motormetrics --skill component-docs

安装后在 Claude Code 中输入/component-docs确认已加载。

详细介绍

组件文档编写技能

组件文档应与本地组件一同放在 apps/web/src/components 或相关路由段中。对于 HeroUI 组件，请链接到官方 HeroUI v3 文档，而不是编写第三方内部实现的文档。

组件文档模板

# Button

A reusable local component or wrapper used by MotorMetrics.

## Usage

\`\`\`tsx
import { Button } from "@heroui/react";

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

## Variants

\`\`\`tsx
<Button variant="primary">Primary</Button>
<Button variant="danger">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 | `"primary" \| "danger" \| "outline"` | `"primary"` | 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 注释

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

Storybook 故事

// apps/web/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: ["primary", "danger", "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 Danger: Story = { args: { variant: "danger", children: "Delete" } };

文档检查清单

  • 为组件和 props 编写 JSDoc 注释
  • 编写包含用法示例的 Markdown 文档
  • 包含 props 表格
  • 记录各个变体
  • 提供无障碍说明
  • 编写 Storybook 故事（如使用 Storybook）

最佳实践

  1. 清晰的示例：提供完整且可运行的代码
  2. Props 文档：记录每个 prop 的类型和说明
  3. 无障碍性：加入无障碍说明
  4. 保持更新：组件变更时更新文档

参考资料

评论

支持 Markdown