重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
fumadocs-component-docs by theorcdev/8bitcn-ui
npx skills add https://github.com/theorcdev/8bitcn-ui --skill fumadocs-component-docs为 8-bit 组件创建遵循标准结构的全面文档。
使用真实数据将组件示例包装在 ComponentPreview 中:
<ComponentPreview title="8-bit ComponentName component" name="component-name">
<div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
<div>
<p className="text-sm text-muted-foreground mb-2">
第一个变体的描述
</p>
<ComponentName prop={value} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">
第二个变体的描述
</p>
<ComponentName prop={value} variant="retro" />
</div>
</div>
</ComponentPreview>
对于像 Button 这样的基础组件:
<ComponentPreview title="8-bit button component" name="button">
<Button>Button</Button>
</ComponentPreview>
对于包含多个子组件的组件,例如 Sheet:
<ComponentPreview title="8-bit Sheet component" name="sheet">
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription className="text-xs">
在此处更改您的个人资料。
</SheetDescription>
</SheetHeader>
<div className="p-4 flex flex-col gap-4">
<Label>Name</Label>
<Input placeholder="Project name" />
</div>
<SheetFooter className="flex-row-reverse">
<SheetClose asChild>
<Button size="sm">Save changes</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
</ComponentPreview>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
单一导入(简单组件):
```tsx
import { Button } from "@/components/ui/8bit/button"
**多个导入**(复杂组件):
```mdx
```tsx
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/8bit/sheet"
### 属性文档
对于带有属性表格的组件,使用表格:
```mdx
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | `string` | `"default"` | 视觉样式变体 |
| size | `string` | `"default"` | 按钮的尺寸 |
| asChild | `boolean` | `false` | 是否将属性合并到子元素上 |
在预览中展示多个变体:
<ComponentPreview title="8-bit Health Bar component" name="health-bar">
<div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
<div>
<p className="text-sm text-muted-foreground mb-2">
默认生命条
</p>
<HealthBar value={75} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">
复古风格生命条
</p>
<HealthBar value={45} variant="retro" />
</div>
</div>
</ComponentPreview>
放置在 ComponentPreview 之前:
<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
<CopyCommandButton
copyCommand="pnpm dlx shadcn@latest add @8bitcn/component-name"
command="pnpm dlx shadcn@latest add @8bitcn/component-name"
/>
</div>
@/components/ui/8bit/ 导入content/docs/components/button.mdx - 简单组件模式content/docs/components/health-bar.mdx - 变体演示content/docs/components/sheet.mdx - 复杂子组件模式每周安装量
66
代码仓库
GitHub 星标数
1.8K
首次出现
Jan 23, 2026
安全审计
安装于
codex60
opencode55
github-copilot54
gemini-cli53
cursor49
claude-code49
Create comprehensive documentation for 8-bit components following the standard structure.
Wrap component examples in ComponentPreview with realistic data:
<ComponentPreview title="8-bit ComponentName component" name="component-name">
<div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
<div>
<p className="text-sm text-muted-foreground mb-2">
Description of first variant
</p>
<ComponentName prop={value} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">
Description of second variant
</p>
<ComponentName prop={value} variant="retro" />
</div>
</div>
</ComponentPreview>
For basic components like Button:
<ComponentPreview title="8-bit button component" name="button">
<Button>Button</Button>
</ComponentPreview>
For components with multiple sub-components like Sheet:
<ComponentPreview title="8-bit Sheet component" name="sheet">
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription className="text-xs">
Make changes to your profile here.
</SheetDescription>
</SheetHeader>
<div className="p-4 flex flex-col gap-4">
<Label>Name</Label>
<Input placeholder="Project name" />
</div>
<SheetFooter className="flex-row-reverse">
<SheetClose asChild>
<Button size="sm">Save changes</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
</ComponentPreview>
Single import (simple components):
```tsx
import { Button } from "@/components/ui/8bit/button"
**Multiple imports** (complex components):
```mdx
```tsx
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/8bit/sheet"
### Props Documentation
For components with props tables, use tables:
```mdx
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | `string` | `"default"` | Visual style variant |
| size | `string` | `"default"` | Size of the button |
| asChild | `boolean` | `false` | Whether to merge props onto child |
Show multiple variants in preview:
<ComponentPreview title="8-bit Health Bar component" name="health-bar">
<div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
<div>
<p className="text-sm text-muted-foreground mb-2">
Default health bar
</p>
<HealthBar value={75} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">
Retro health bar
</p>
<HealthBar value={45} variant="retro" />
</div>
</div>
</ComponentPreview>
Place before ComponentPreview:
<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
<CopyCommandButton
copyCommand="pnpm dlx shadcn@latest add @8bitcn/component-name"
command="pnpm dlx shadcn@latest add @8bitcn/component-name"
/>
</div>
@/components/ui/8bit/content/docs/components/button.mdx - Simple component patterncontent/docs/components/health-bar.mdx - Variant demonstrationcontent/docs/components/sheet.mdx - Complex sub-component patternWeekly Installs
66
Repository
GitHub Stars
1.8K
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex60
opencode55
github-copilot54
gemini-cli53
cursor49
claude-code49
Vercel React 最佳实践指南 | Next.js 性能优化与代码规范
10,600 周安装
design-optimize 代码配置优化工具 - 提升开发效率与代码质量
1 周安装
design-normalize:代码规范与设计系统配置工具,提升开发一致性
1 周安装
design-delight - 提升代码编辑器设计体验的配置工具,优化开发工作流
1 周安装
design-colorize 代码着色工具 - 提升代码可读性的设计插件 | derklinke/codex-config
1 周安装
design-clarify - 代码配置与设计澄清工具,提升开发效率与代码质量
1 周安装
API网关配置指南:Kong、Nginx、AWS实战与微服务架构最佳实践
63 周安装