docs
文档页面组件规范。Use when creating documentation pages or editing files in **/docs/** directory. Triggers on: creating docs pages, DocsSection, DocsPageLayout usage.
When & Why to Use This Skill
This Claude skill streamlines the creation and maintenance of structured documentation pages by enforcing standardized React component specifications. It ensures architectural consistency across the /docs/ directory by providing precise templates for DocsPageLayout and DocsSection, facilitating the seamless integration of technical content, syntax-highlighted code blocks, and automated navigation anchors for a professional developer experience.
Use Cases
- Standardizing Technical Docs: Rapidly generate new documentation pages that strictly adhere to the project's UI/UX guidelines and TypeScript component architecture.
- Automated Navigation Integrity: Ensure sub-section navigation remains functional by automatically matching anchor IDs between content sections and navigation components.
- Efficient Content Updates: Streamline the process of updating existing documentation files while maintaining the required structural patterns and helper component usage like CodeBlock and DocsTable.
| name | docs |
|---|---|
| description | 文档页面组件规范。Use when creating documentation pages or editing files in **/docs/** directory. Triggers on: creating docs pages, DocsSection, DocsPageLayout usage. |
Docs Components Guide
文档页面组件规范。
DocsSection Type
type DocsSection = {
value: string; // Anchor ID
title: string; // Section title
content: ReactNode; // Content
children?: { value: string; title: string }[];
};
Usage Pattern
Content File
// app/(main)/docs/privacy/content.tsx
export const LAST_UPDATED = "2024-12-29";
export const sections: DocsSection[] = [
{
value: "introduction",
title: "Introduction",
content: <p>Content here...</p>,
},
{
value: "data-collection",
title: "Data Collection",
content: (
<>
<h3 id="personal-data">Personal Data</h3>
<p>...</p>
</>
),
children: [
{ value: "personal-data", title: "Personal Data" },
],
},
];
Page File
// app/(main)/docs/privacy/page.tsx
import { DocsPageLayout } from '@/components/common/docs/docs-page-layout';
import { LAST_UPDATED, sections } from './content';
export default function PrivacyPage() {
return (
<DocsPageLayout
title="Privacy Policy"
lastUpdated={LAST_UPDATED}
sections={sections}
/>
);
}
Sub-section Navigation
<h3 id="xxx"> must match children[].value:
content: <h3 id="personal-data">Personal Data</h3>,
children: [{ value: "personal-data", title: "Personal Data" }],
Helper Components
CodeBlock- Code blocks with syntax highlightingDocsTable- Formatted tables