AgentSkillsCN

dogfood-components

在文档站点内部使用库组件时，应遵循相关指南，以确保一致性，并充分展示真实场景中的应用案例。

SKILL.md
--- frontmatter
name: dogfood-components
description: Guidelines for using library components within the documentation site itself to ensure consistency and showcase real-world usage.

Dogfooding Components Skill

Use this skill whenever you are modifying the documentation site structure, headers, or layout. The goal is to maximize the use of our own UI components within the documentation logic itself (dogfooding).

Workflow

1. Analysis

  • •Identify Ad-hoc UI: Look for custom HTML, Tailwind classes, or static elements in the docs site (src/App.tsx, src/components/docs/, src/pages/) that replicate component functionality.
  • •Check Library availability: Verify if a corresponding component exists in src/components/ui/ (e.g., Breadcrumbs, Tabs, Alerts, Badges).

2. Implementation

  • •Prioritize Library Components: Replace custom implementations with components from @/components/ui/.
  • •Pass Real State: Connect these components to the documentation's state (e.g., using activeItem with Breadcrumb or Tabs).
  • •Consistent Styling: Use the same variants and props that we recommend to our users.

3. Validation

  • •Functional Check: Ensure the component behaves correctly within the documentation context (e.g., navigation links work).
  • •Visual Check: Use browser subagents to verify the component renders with the correct theme and layout in the docs.

Checklist

  • • Identified custom UI elements that can be replaced.
  • • Used components from src/components/ui/ instead of ad-hoc HTML/CSS.
  • • Component is correctly wired to relevant documentation state.
  • • Verified that navigation and interaction remains functional.
  • • yarn lint and npx tsc --noEmit pass.