Backstage Style Web Skill
概述
这个skill基于backstage-style-web目录中的企业级设计系统，帮助用户生成现代化的React网站应用。该设计系统基于Radix UI、Tailwind CSS和TypeScript构建，提供了完整的组件库和设计规范。
功能特性
🎨 设计系统
- 完整的色彩体系（11级品牌色 + 功能色）
- 响应式排版系统（Inter/Poppins字体）
- 统一的间距和阴影规范
- 支持亮色/暗色主题切换
🧩 组件库
- 47+ 企业级React组件
- 基于Radix UI的可访问性支持
- TypeScript类型安全
- CVA变体系统
📱 响应式设计
- 移动优先的设计方法
- 自适应布局组件
- 智能侧边栏（桌面折叠，移动抽屉）
- 容器查询支持
♿ 可访问性
- ARIA标准支持
- 键盘导航
- 屏幕阅读器兼容
- 焦点管理
应用类型
1. 管理后台 (Admin Dashboards)
- 数据可视化面板
- 用户管理系统
- 分析报告界面
- 实时监控台
2. 开发者工具 (Developer Tools)
- API文档界面
- 配置管理工具
- 构建和部署面板
- 团队协作平台
3. 数据管理应用 (Data Management)
- CRUD操作界面
- 高级筛选和搜索
- 批量操作功能
- 数据导出工具
4. 内容管理系统 (CMS)
- 内容创建和编辑
- 工作流程管理
- 用户权限控制
- 发布控制台
技术栈
React 18+ + TypeScript
├── UI框架: Radix UI Primitives
├── 样式: Tailwind CSS + CVA
├── 表单: React Hook Form + Zod
├── 图标: Lucide React
├── 主题: CSS Variables
└── 构建: Next.js / Vite
文件结构
.claude/skills/backstage-style-web/
├── SKILL.md # 主要skill描述
├── README.md # 说明文档
├── assets/
│ └── component_templates.md # 组件模板库
├── references/
│ └── design_system_guide.md # 设计系统指南
└── examples/
└── admin_dashboard_example.md # 完整示例项目
使用方法
1. 启用Skill
# 在Claude Code中使用
/skill backstage-style-web
2. 常见用法示例
创建管理后台
请帮我创建一个用户管理的管理后台，需要包含：
- 用户列表和搜索功能
- 添加/编辑用户表单
- 用户状态管理
- 权限角色分配
使用Backstage style。
创建数据分析面板
需要一个数据分析面板，包括：
- 关键指标卡片
- 趋势图表
- 实时数据更新
- 导出功能
使用Backstage design system。
创建设置页面
帮我创建一个设置页面，包含：
- 个人资料管理
- 通知偏好设置
- 主题切换
- 安全设置
使用Backstage风格。
核心组件示例
页面布局
<SidebarProvider>
<Sidebar>
<SidebarHeader>App Name</SidebarHeader>
<SidebarContent>Navigation</SidebarContent>
</Sidebar>
<main>
<PageLayout title="Dashboard">
{content}
</PageLayout>
</main>
</SidebarProvider>
数据展示
<Card>
<CardHeader>
<CardTitle>Analytics</CardTitle>
<CardAction>
<Button>Export</Button>
</CardAction>
</CardHeader>
<CardContent>
<DataTable data={data} />
</CardContent>
</Card>
表单处理
<Form {...form}>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</Form>
设计原则
1. 一致性优先
- 统一的设计语言
- 可预测的交互模式
- 标准化的组件API
2. 可访问性
- 遵循WCAG 2.1标准
- 键盘和屏幕阅读器支持
- 语义化HTML结构
3. 性能优化
- 组件懒加载
- 代码分割
- 优化的包大小
4. 开发体验
- TypeScript类型安全
- 清晰的组件文档
- 一致的命名约定
主题配置
色彩系统
/* 品牌色 */
--brand-500: #6a4040; /* 主色 */
--brand-600: #553333; /* 悬停色 */
/* 功能色 */
--success: emerald色系
--warning: amber色系
--danger: rose色系
--info: blue色系
间距系统
/* 4px基础单位 */
spacing/1: 4px /* XS */
spacing/4: 16px /* 组件间距 */
spacing/6: 24px /* 标准间距 */
spacing/8: 32px /* 区块间距 */
最佳实践
1. 组件设计
- 优先使用复合组件模式
- 保持props接口简洁
- 支持as polymorphic属性
2. 样式管理
- 使用Tailwind utility classes
- CVA处理组件变体
- CSS变量支持主题切换
3. 状态管理
- React Hook Form处理表单
- Context API共享状态
- URL状态管理筛选器
4. 性能优化
- memo化昂贵组件
- 虚拟化长列表
- 代码分割路由
更新日志
v1.0.0 (2025-10-29)
- ✅ 初始版本发布
- ✅ 完整的47个组件库
- ✅ 设计系统文档
- ✅ 管理后台示例
- ✅ 组件模板库
- ✅ 响应式设计支持
- ✅ 可访问性实现
技术支持
如果在使用过程中遇到问题：
- 查看
references/design_system_guide.md了解设计规范 - 参考
assets/component_templates.md获取组件模板 - 查看
examples/admin_dashboard_example.md获取完整示例 - 确保已安装所需的依赖包
许可证
基于原始的backstage-style-web设计系统，遵循相同的开源许可证。