commit 7df054b028d632360c4bf5b43bb6bd421eaf5028 Author: Zhongwei Li Date: Sun Nov 30 08:36:12 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..e363db9 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,15 @@ +{ + "name": "design-skills", + "description": "Modern web design and UI development tools for creating professional websites, landing pages, and interactive experiences", + "version": "0.0.0-2025.11.28", + "author": { + "name": "Kuse AI", + "email": "contact@kuse.ai" + }, + "skills": [ + "./skills/modern-web-design", + "./skills/landing-page-creator", + "./skills/ui-component-builder", + "./skills/backstage-style-web" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..1333e24 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# design-skills + +Modern web design and UI development tools for creating professional websites, landing pages, and interactive experiences diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..1ed8245 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,88 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:kuse-ai/kuse-skills:design-skills", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "96c12d2d5eb6be5bf0f5f98bb7ff69d48c48c55a", + "treeHash": "2437f4226b1471abc8f3d14bd1693744055458e8faf5c1907bca4816a28ccd93", + "generatedAt": "2025-11-28T10:20:00.573378Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "design-skills", + "description": "Modern web design and UI development tools for creating professional websites, landing pages, and interactive experiences" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "f78d50f3c58df546fcad39166bab236dfd210d1bb214958fc28e1f7ffa9be29c" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "41186e28bf1533b7f30f5238f76a660601b3ce33a16dc530b7084599054cee5c" + }, + { + "path": "skills/modern-web-design/SKILL.md", + "sha256": "8585481f926c5fc006d8e5853e624e83f83748127d2200c8378a2ddc9c0cc63a" + }, + { + "path": "skills/modern-web-design/references/design-systems.md", + "sha256": "bd5a632e318bfd1396fcb28663bff8dcff9f791426b6404f63ef934e15a15384" + }, + { + "path": "skills/modern-web-design/assets/component-templates.html", + "sha256": "8c7508f5b5d68060535ea2fd974615036ac44f265bde880efedc1cb400c993df" + }, + { + "path": "skills/backstage-style-web/README.md", + "sha256": "81f2c9064bd1461eaa3b6378d4f1f5e3c46d3a67334791f8e60725436c51a29c" + }, + { + "path": "skills/backstage-style-web/SKILL.md", + "sha256": "9ae0570b4fabfcf1c8e775cd731c90ab46a516182f60d44481867c9b7f729c6f" + }, + { + "path": "skills/backstage-style-web/references/InstrumentSerif-Italic.ttf", + "sha256": "9c86e4d5a47b50224a2463a9eca8535835257c8e85c470c2c6b454b1af6f046e" + }, + { + "path": "skills/backstage-style-web/references/InstrumentSerif-Regular.ttf", + "sha256": "56ac3be03ac3ba283196b3e77850ab2ffcf56cfb6fd3212c5620109a972f8c99" + }, + { + "path": "skills/backstage-style-web/references/design_system_guide.md", + "sha256": "470b8c265c779065f50a4ce25709d217c00da4dbb723b7480822f479f9dc6d46" + }, + { + "path": "skills/backstage-style-web/examples/admin_dashboard_example.md", + "sha256": "f156d9855b0ba039d9815eb584a9085fc4be55dc70b9f1a4d345a6c3f6e3cc4e" + }, + { + "path": "skills/backstage-style-web/assets/component_templates.md", + "sha256": "d662569a9b67a8d89752ba4064cacdd066948df246b0fc0ea495d4fc96c54b20" + }, + { + "path": "skills/ui-component-builder/SKILL.md", + "sha256": "277330440a191cd18b9106ec0b1e16d7e2def6074036f56a9ae452c4e3da827b" + }, + { + "path": "skills/landing-page-creator/SKILL.md", + "sha256": "eb74dcaa1dca697aebb550029fde3bea93b55b664bcf342c9634c633a6812f6b" + } + ], + "dirSha256": "2437f4226b1471abc8f3d14bd1693744055458e8faf5c1907bca4816a28ccd93" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/backstage-style-web/README.md b/skills/backstage-style-web/README.md new file mode 100644 index 0000000..5e9f95c --- /dev/null +++ b/skills/backstage-style-web/README.md @@ -0,0 +1,266 @@ +# 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 +```bash +# 在Claude Code中使用 +/skill backstage-style-web +``` + +### 2. 常见用法示例 + +#### 创建管理后台 +``` +请帮我创建一个用户管理的管理后台，需要包含： +- 用户列表和搜索功能 +- 添加/编辑用户表单 +- 用户状态管理 +- 权限角色分配 +使用Backstage style。 +``` + +#### 创建数据分析面板 +``` +需要一个数据分析面板，包括： +- 关键指标卡片 +- 趋势图表 +- 实时数据更新 +- 导出功能 +使用Backstage design system。 +``` + +#### 创建设置页面 +``` +帮我创建一个设置页面，包含： +- 个人资料管理 +- 通知偏好设置 +- 主题切换 +- 安全设置 +使用Backstage风格。 +``` + +## 核心组件示例 + +### 页面布局 +```typescript + + + App Name + Navigation + +
+ + {content} + +
+ +``` + +### 数据展示 +```typescript + + + Analytics + + + + + + + + +``` + +### 表单处理 +```typescript +
+ ( + + Email + + + + + + )} + /> + +``` + +## 设计原则 + +### 1. 一致性优先 +- 统一的设计语言 +- 可预测的交互模式 +- 标准化的组件API + +### 2. 可访问性 +- 遵循WCAG 2.1标准 +- 键盘和屏幕阅读器支持 +- 语义化HTML结构 + +### 3. 性能优化 +- 组件懒加载 +- 代码分割 +- 优化的包大小 + +### 4. 开发体验 +- TypeScript类型安全 +- 清晰的组件文档 +- 一致的命名约定 + +## 主题配置 + +### 色彩系统 +```css +/* 品牌色 */ +--brand-500: #6a4040; /* 主色 */ +--brand-600: #553333; /* 悬停色 */ + +/* 功能色 */ +--success: emerald色系 +--warning: amber色系 +--danger: rose色系 +--info: blue色系 +``` + +### 间距系统 +```css +/* 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个组件库 +- ✅ 设计系统文档 +- ✅ 管理后台示例 +- ✅ 组件模板库 +- ✅ 响应式设计支持 +- ✅ 可访问性实现 + +## 技术支持 + +如果在使用过程中遇到问题： + +1. 查看`references/design_system_guide.md`了解设计规范 +2. 参考`assets/component_templates.md`获取组件模板 +3. 查看`examples/admin_dashboard_example.md`获取完整示例 +4. 确保已安装所需的依赖包 + +## 许可证 + +基于原始的backstage-style-web设计系统，遵循相同的开源许可证。 \ No newline at end of file diff --git a/skills/backstage-style-web/SKILL.md b/skills/backstage-style-web/SKILL.md new file mode 100644 index 0000000..1e305e8 --- /dev/null +++ b/skills/backstage-style-web/SKILL.md @@ -0,0 +1,530 @@ +--- +name: backstage-style-web +description: Generate enterprise-grade web applications using Backstage Design System. Create admin dashboards, developer tools, and internal applications with modern React components, dark/light themes, and responsive design patterns based on Radix UI and Tailwind CSS. +--- + +# Backstage Style Web Generator + +## Overview + +Create professional, enterprise-grade web applications using the Backstage Design System. This skill generates modern React applications with TypeScript, featuring comprehensive UI components, dark/light theme support, responsive design, and accessibility-first patterns. Perfect for building admin dashboards, developer tools, internal applications, and data management interfaces. + +# Backstage Design System Implementation Guide + +## Core Architecture Overview + +The Backstage Design System is built on modern React patterns and industry-standard libraries: + +### Technology Stack +- **React 18+** with TypeScript +- **Radix UI Primitives** for accessible, headless components +- **Tailwind CSS** for utility-first styling +- **Class Variance Authority (CVA)** for type-safe component variants +- **React Hook Form** with Zod validation +- **Lucide React** for consistent iconography + +### Key Design Principles + +1. **Accessibility First**: Built on Radix UI primitives with ARIA support +2. **Type Safety**: Full TypeScript coverage with strict typing +3. **Composability**: Components designed for flexible composition +4. **Consistency**: Unified design tokens and patterns +5. **Performance**: Optimized for bundle size and runtime performance + +## Component Architecture Patterns + +### 1. Compound Components +Components are designed with multiple sub-components for maximum flexibility: + +```typescript +// Card component structure + + + Title + Description + Action buttons + + + Main content + + + Footer content + + +``` + +### 2. Variant-Based Styling +Using CVA for type-safe, predictable component variants: + +```typescript +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: "border border-input bg-background hover:bg-accent", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +); +``` + +### 3. Data Attributes for Styling +Consistent use of data attributes for component identification and styling: + +```typescript +
+
+ {/* Header content */} +
+
+``` + +## Theme System Implementation + +### 1. Color Architecture + +#### Brand Colors (11-step scale) +```css +:root { + --brand-050: #F5F1F0; /* 最浅背景色 */ + --brand-100: #E9DDDB; /* Hover background / light tint */ + --brand-200: #D6BEBB; /* Soft background */ + --brand-300: #B78F8A; /* Subtle brand tint */ + --brand-400: #94635E; /* Hover / outline */ + --brand-500: #6A4040; /* Primary brand color */ + --brand-600: #5B3535; /* Active / pressed */ + --brand-700: #4C2D2D; /* Stronger contrast */ + --brand-800: #3E2525; /* Deep background */ + --brand-900: #2E1C1C; /* Text on light */ + --brand-950: #1C1010; /* Text on dark / darkest tone */ +} +``` + +#### Semantic Color Tokens +```css + +:root { + /* === Light Mode === */ + --background: hsl(48, 33%, 98%); + --foreground: hsl(0, 25%, 33%); + --card: hsl(48, 33%, 98%); + --card-foreground: hsl(0, 25%, 33%); + --popover: hsl(48, 33%, 98%); + --popover-foreground: hsl(0, 25%, 33%); + --primary: hsl(222, 28%, 14%); + --primary-foreground: hsl(48, 33%, 98%); + --secondary: hsl(210, 25%, 96%); + --secondary-foreground: hsl(0, 25%, 33%); + --muted: hsl(210, 25%, 96%); + --muted-foreground: hsl(215, 9%, 46%); + --accent: hsl(210, 25%, 96%); + --accent-foreground: hsl(0, 25%, 33%); + --destructive: hsl(0, 82%, 67%); + --destructive-foreground: hsl(48, 33%, 98%); + --border: hsl(0, 14%, 94%); + --input: hsl(214, 27%, 91%); + --ring: hsl(0, 25%, 33%); +} + +[data-theme='dark'] { + /* === Dark Mode === */ + --background: hsl(0, 25%, 6%); + --foreground: hsl(48, 33%, 98%); + --card: hsl(0, 25%, 6%); + --card-foreground: hsl(48, 33%, 98%); + --popover: hsl(0, 25%, 6%); + --popover-foreground: hsl(48, 33%, 98%); + --primary: hsl(48, 33%, 98%); + --primary-foreground: hsl(0, 25%, 33%); + --secondary: hsl(0, 22%, 14%); + --secondary-foreground: hsl(48, 33%, 98%); + --muted: hsl(0, 22%, 14%); + --muted-foreground: hsl(0, 20%, 75%); + --accent: hsl(0, 22%, 14%); + --accent-foreground: hsl(48, 33%, 98%); + --destructive: hsl(0, 82%, 67%); + --destructive-foreground: hsl(48, 33%, 98%); + --border: hsl(0, 22%, 14%); + --input: hsl(0, 22%, 14%); + --ring: hsl(0, 25%, 33%); +} + + +``` + +### 2. Font Families +```css +/* Import custom fonts */ +@font-face { + font-family: 'Instrument Serif'; + src: url('./references/InstrumentSerif-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Instrument Serif'; + src: url('./references/InstrumentSerif-Italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} + +/* Typography Rules */ +/* Paragraph and text content */ +p, .text-body, .text-content { + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6, +.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 { + font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; + font-weight: 400; +} + +/* Prepositions in headings should use italic */ +h1 .preposition, h2 .preposition, h3 .preposition, +h4 .preposition, h5 .preposition, h6 .preposition, +.heading-1 .preposition, .heading-2 .preposition, .heading-3 .preposition, +.heading-4 .preposition, .heading-5 .preposition, .heading-6 .preposition { + font-style: italic; +} +``` + +### 3. Typography Scale +```css +.text-xxs { font-size: 8px; } /* Micro text */ +.text-xs { font-size: 10px; } /* Caption */ +.text-sm { font-size: 12px; } /* Secondary text */ +.text-base { font-size: 14px; } /* Default body */ +.text-lg { font-size: 16px; } /* Paragraph */ +.display-xl { font-size: 60px; } /* Hero headings */ +``` + +### 4. Spacing System (4px base unit) +```css +.space-1 { margin: 4px; } /* XS */ +.space-2 { margin: 8px; } /* SM */ +.space-3 { margin: 12px; } /* MD */ +.space-4 { margin: 16px; } /* LG - Component spacing */ +.space-6 { margin: 24px; } /* Standard spacing */ +.space-8 { margin: 32px; } /* Section padding */ +.space-16 { margin: 64px; } /* Large sections */ +``` + +## Responsive Design Strategy + +### 1. Breakpoint System +```css +/* Mobile-first approach */ +sm: '640px', /* Small devices */ +md: '768px', /* Tablets */ +lg: '1024px', /* Laptops */ +xl: '1280px', /* Desktops */ +2xl: '1536px' /* Large screens */ +``` + +### 2. Component Responsiveness +```typescript +// Example: Responsive grid +
+ {/* Cards automatically adapt */} +
+ +// Custom mobile hook +const isMobile = useIsMobile(); // 768px breakpoint +``` + +### 3. Sidebar Adaptation +```typescript +// Desktop: Collapsible sidebar +// Mobile: Transforms to sheet/drawer +{isMobile ? ( + + + + + +) : ( + + + +)} +``` + +## Accessibility Implementation + +### 1. ARIA Patterns +```typescript +// Proper ARIA labeling + + +// Form accessibility + + +
+ We'll never share your email +
+``` + +### 2. Keyboard Navigation +```typescript +// Custom keyboard event handling +useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + onClose(); + } + if (event.key === 'Enter' || event.key === ' ') { + onActivate(); + } + }; + + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); +}, [onClose, onActivate]); +``` + +### 3. Focus Management +```typescript +// Focus trap for modals +import { FocusTrap } from '@radix-ui/react-focus-trap'; + + +
+ {/* Modal content with proper focus order */} +
+ +``` + +## Form Architecture + +### 1. React Hook Form Integration +```typescript +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; + +const formSchema = z.object({ + email: z.string().email("Invalid email address"), + password: z.string().min(8, "Password must be at least 8 characters"), +}); + +type FormData = z.infer; + +const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + email: "", + password: "", + }, +}); +``` + +### 2. Form Field Component Pattern +```typescript + ( + + Email + + + + + We'll use this to send you updates + + + + )} +/> +``` + +## State Management Patterns + +### 1. Component State +```typescript +// Local state for UI interactions +const [isOpen, setIsOpen] = useState(false); +const [selectedItems, setSelectedItems] = useState([]); + +// Derived state +const hasSelection = selectedItems.length > 0; +const allSelected = selectedItems.length === items.length; +``` + +### 2. Context for Shared State +```typescript +// Theme context +const ThemeContext = createContext<{ + theme: Theme; + setTheme: (theme: Theme) => void; +} | null>(null); + +// Sidebar context +const SidebarContext = createContext<{ + state: "expanded" | "collapsed"; + open: boolean; + setOpen: (open: boolean) => void; + isMobile: boolean; +} | null>(null); +``` + +### 3. URL State Management +```typescript +// For filters, search, pagination +const [searchParams, setSearchParams] = useSearchParams(); + +const currentPage = Number(searchParams.get('page')) || 1; +const searchQuery = searchParams.get('q') || ''; + +const updateFilters = (filters: Record) => { + const newParams = new URLSearchParams(searchParams); + Object.entries(filters).forEach(([key, value]) => { + if (value) { + newParams.set(key, value); + } else { + newParams.delete(key); + } + }); + setSearchParams(newParams); +}; +``` + +## Performance Optimization + +### 1. Code Splitting +```typescript +// Lazy loading for routes +const Dashboard = lazy(() => import('./pages/Dashboard')); +const Settings = lazy(() => import('./pages/Settings')); + +// Wrap in Suspense +}> + + } /> + } /> + + +``` + +### 2. Memoization +```typescript +// Expensive calculations +const processedData = useMemo(() => { + return data.map(item => ({ + ...item, + computed: expensiveComputation(item) + })); +}, [data]); + +// Callback memoization +const handleItemClick = useCallback((id: string) => { + setSelectedItems(prev => + prev.includes(id) + ? prev.filter(item => item !== id) + : [...prev, id] + ); +}, []); + +// Component memoization +const MemoizedTableRow = memo(TableRow); +``` + +### 3. Virtual Scrolling (for large lists) +```typescript +import { FixedSizeList as List } from 'react-window'; + +const VirtualizedTable = ({ items }: { items: any[] }) => { + const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => ( +
+ +
+ ); + + return ( + + {Row} + + ); +}; +``` + +## Testing Patterns + +### 1. Component Testing +```typescript +import { render, screen, fireEvent } from '@testing-library/react'; +import { Button } from './button'; + +describe('Button', () => { + it('renders with correct variant styles', () => { + render(); + const button = screen.getByRole('button'); + expect(button).toHaveClass('bg-destructive'); + }); + + it('handles click events', () => { + const handleClick = jest.fn(); + render(); + fireEvent.click(screen.getByRole('button')); + expect(handleClick).toHaveBeenCalledTimes(1); + }); +}); +``` + +### 2. Accessibility Testing +```typescript +import { axe, toHaveNoViolations } from 'jest-axe'; + +expect.extend(toHaveNoViolations); + +it('should not have accessibility violations', async () => { + const { container } = render(); + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); +``` + +This implementation guide provides the foundation for building consistent, accessible, and performant applications using the Backstage Design System. diff --git a/skills/backstage-style-web/assets/component_templates.md b/skills/backstage-style-web/assets/component_templates.md new file mode 100644 index 0000000..cbab6a7 --- /dev/null +++ b/skills/backstage-style-web/assets/component_templates.md @@ -0,0 +1,980 @@ +# Backstage Style Component Templates + +## Core Page Templates + +### 1. Dashboard Page Template + +```typescript +"use client"; + +import { useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle, CardAction } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; +import { MoreHorizontal, Plus, Search, Filter, Download } from "lucide-react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +interface DashboardData { + id: string; + name: string; + status: "active" | "inactive" | "pending"; + value: number; + lastUpdated: string; +} + +export default function DashboardPage() { + const [searchTerm, setSearchTerm] = useState(""); + const [data, setData] = useState([ + // Sample data + { id: "1", name: "Project Alpha", status: "active", value: 12450, lastUpdated: "2 hours ago" }, + { id: "2", name: "Project Beta", status: "pending", value: 8900, lastUpdated: "1 day ago" }, + { id: "3", name: "Project Gamma", status: "inactive", value: 3200, lastUpdated: "3 days ago" }, + ]); + + const filteredData = data.filter(item => + item.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + const statusVariant = (status: string) => { + switch (status) { + case "active": return "default"; + case "pending": return "secondary"; + case "inactive": return "outline"; + default: return "secondary"; + } + }; + + return ( +
+ {/* Header */} +
+
+

Dashboard

+

+ Manage your projects and monitor performance +

+
+
+ + +
+
+ + {/* Stats Cards */} +
+ + + Total Projects + + +
24
+

+ +2 from last month +

+ + + + + + Active Projects + + +
18
+

+ +4 from last month +

+ + + + + + Total Value + + +
$24,550
+

+ +12% from last month +

+ + + + + + Completion Rate + + +
89%
+

+ +3% from last month +

+ + +
+ + {/* Data Table */} + + + Projects + +
+
+ + setSearchTerm(e.target.value)} + className="pl-8 w-[300px]" + /> +
+ +
+ + + +
+ + + + Name + Status + Value + Last Updated + Actions + + + + {filteredData.map((item) => ( + + {item.name} + + + {item.status} + + + ${item.value.toLocaleString()} + + {item.lastUpdated} + + + + + + + + Edit + Duplicate + + Delete + + + + + + ))} + +
+
+ + +
+ ); +} +``` + +### 2. Form Page Template + +```typescript +"use client"; + +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Switch } from "@/components/ui/switch"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { Label } from "@/components/ui/label"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { toast } from "@/components/ui/use-toast"; + +const formSchema = z.object({ + title: z.string().min(2, "Title must be at least 2 characters"), + description: z.string().min(10, "Description must be at least 10 characters"), + category: z.string().min(1, "Please select a category"), + priority: z.enum(["low", "medium", "high"]), + isPublic: z.boolean().default(false), + tags: z.array(z.string()).optional(), + email: z.string().email("Invalid email address"), +}); + +type FormData = z.infer; + +export default function FormPage() { + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + title: "", + description: "", + category: "", + priority: "medium", + isPublic: false, + tags: [], + email: "", + }, + }); + + function onSubmit(values: FormData) { + toast({ + title: "Form submitted successfully!", + description: "Your data has been saved.", + }); + console.log(values); + } + + return ( +
+
+
+

Create New Item

+

+ Fill out the form below to create a new item +

+
+
+ +
+ {/* Main Form */} +
+ + + Item Details + + Provide the basic information for your new item + + + +
+ + ( + + Title + + + + + This will be the display name for your item. + + + + )} + /> + + ( + + Description + + +
+
+ +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/skills/modern-web-design/references/design-systems.md b/skills/modern-web-design/references/design-systems.md new file mode 100644 index 0000000..83c69f1 --- /dev/null +++ b/skills/modern-web-design/references/design-systems.md @@ -0,0 +1,310 @@ +# Modern Web Design Systems + +## Design Categories + +### 1. Minimalist Professional + +#### Color Palette +```css +/* Primary Colors */ +--primary-50: #f8fafc; +--primary-100: #f1f5f9; +--primary-500: #64748b; +--primary-900: #0f172a; + +/* Accent Colors */ +--accent-500: #3b82f6; +--accent-600: #2563eb; + +/* Semantic Colors */ +--success: #10b981; +--warning: #f59e0b; +--error: #ef4444; +``` + +#### Typography Scale +```css +/* Font Family */ +--font-sans: 'Inter', system-ui, sans-serif; +--font-mono: 'JetBrains Mono', monospace; + +/* Font Sizes */ +--text-xs: 0.75rem; /* 12px */ +--text-sm: 0.875rem; /* 14px */ +--text-base: 1rem; /* 16px */ +--text-lg: 1.125rem; /* 18px */ +--text-xl: 1.25rem; /* 20px */ +--text-2xl: 1.5rem; /* 24px */ +--text-3xl: 1.875rem; /* 30px */ +--text-4xl: 2.25rem; /* 36px */ +``` + +#### Spacing System +```css +--space-1: 0.25rem; /* 4px */ +--space-2: 0.5rem; /* 8px */ +--space-4: 1rem; /* 16px */ +--space-6: 1.5rem; /* 24px */ +--space-8: 2rem; /* 32px */ +--space-12: 3rem; /* 48px */ +--space-16: 4rem; /* 64px */ +--space-20: 5rem; /* 80px */ +``` + +### 2. Modern SaaS + +#### Color Palette +```css +/* Primary Gradient */ +--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +--primary-500: #667eea; +--primary-600: #5a67d8; + +/* Background Colors */ +--bg-primary: #ffffff; +--bg-secondary: #f7fafc; +--bg-tertiary: #edf2f7; + +/* Interactive Colors */ +--interactive-hover: #e2e8f0; +--interactive-active: #cbd5e0; +``` + +#### Component Elevation +```css +/* Shadow System */ +--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); +--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); +--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); +--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1); +``` + +#### Animation Timing +```css +--duration-fast: 150ms; +--duration-normal: 250ms; +--duration-slow: 350ms; +--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); +``` + +### 3. Creative Portfolio + +#### Experimental Color Scheme +```css +/* Vibrant Palette */ +--primary-pink: #ec4899; +--primary-purple: #8b5cf6; +--primary-blue: #06b6d4; +--primary-green: #10b981; + +/* Dark Mode */ +--dark-bg: #0f0f23; +--dark-surface: #1a1a3e; +--dark-text: #e2e8f0; +``` + +#### Creative Typography +```css +/* Display Fonts */ +--font-display: 'Playfair Display', serif; +--font-creative: 'Space Grotesk', sans-serif; + +/* Font Weights */ +--weight-light: 300; +--weight-normal: 400; +--weight-medium: 500; +--weight-bold: 700; +--weight-black: 900; +``` + +### 4. E-commerce Optimized + +#### Trust & Conversion Colors +```css +/* Primary Brand */ +--brand-primary: #059669; +--brand-secondary: #0d9488; + +/* Conversion Elements */ +--cta-primary: #dc2626; +--cta-secondary: #ea580c; +--trust-green: #059669; +--urgency-orange: #ea580c; +``` + +#### Product Display +```css +/* Product Card */ +--product-bg: #ffffff; +--product-border: #e5e7eb; +--product-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + +/* Price Display */ +--price-primary: #1f2937; +--price-sale: #dc2626; +--price-original: #9ca3af; +``` + +## Layout Systems + +### Grid Patterns + +#### 12-Column Grid +```css +.container { + max-width: 1280px; + margin: 0 auto; + padding: 0 1rem; +} + +.grid-12 { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 1.5rem; +} +``` + +#### Card Grid System +```css +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} +``` + +### Responsive Breakpoints +```css +/* Mobile First */ +@media (min-width: 640px) { /* sm */ } +@media (min-width: 768px) { /* md */ } +@media (min-width: 1024px) { /* lg */ } +@media (min-width: 1280px) { /* xl */ } +@media (min-width: 1536px) { /* 2xl */ } +``` + +## Component Patterns + +### Button Variants +```css +/* Primary Button */ +.btn-primary { + background: var(--primary-500); + color: white; + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + transition: all var(--duration-normal) var(--ease-in-out); +} + +.btn-primary:hover { + background: var(--primary-600); + transform: translateY(-1px); + box-shadow: var(--shadow-lg); +} +``` + +### Card Components +```css +.card { + background: var(--bg-primary); + border-radius: 0.75rem; + box-shadow: var(--shadow-md); + overflow: hidden; + transition: all var(--duration-normal) var(--ease-in-out); +} + +.card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} +``` + +### Input Styling +```css +.input-field { + width: 100%; + padding: 0.75rem 1rem; + border: 2px solid var(--gray-200); + border-radius: 0.5rem; + font-size: var(--text-base); + transition: border-color var(--duration-fast); +} + +.input-field:focus { + outline: none; + border-color: var(--primary-500); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} +``` + +## Animation Library + +### Micro-interactions +```css +/* Hover Lift */ +.hover-lift { + transition: transform var(--duration-normal) var(--ease-in-out); +} +.hover-lift:hover { + transform: translateY(-2px); +} + +/* Scale on Hover */ +.hover-scale { + transition: transform var(--duration-normal) var(--ease-in-out); +} +.hover-scale:hover { + transform: scale(1.05); +} +``` + +### Loading States +```css +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.loading { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} +``` + +### Scroll Animations +```css +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fade-in-up { + animation: fadeInUp 0.6s ease-out; +} +``` + +## Accessibility Standards + +### Color Contrast +- AA Standard: 4.5:1 for normal text +- AA Standard: 3:1 for large text +- AAA Standard: 7:1 for normal text + +### Focus States +```css +.focus-visible { + outline: 2px solid var(--primary-500); + outline-offset: 2px; +} +``` + +### Screen Reader Support +- Use semantic HTML elements +- Include ARIA labels where needed +- Maintain logical heading hierarchy +- Provide alt text for images \ No newline at end of file diff --git a/skills/ui-component-builder/SKILL.md b/skills/ui-component-builder/SKILL.md new file mode 100644 index 0000000..eaa2ed1 --- /dev/null +++ b/skills/ui-component-builder/SKILL.md @@ -0,0 +1,87 @@ +--- +name: ui-component-builder +description: Build reusable UI components with modern frameworks like React, Vue, and vanilla JavaScript. Creates accessible, responsive, and customizable interface elements including buttons, forms, modals, navigation, and complex widgets. +--- + +# UI Component Builder + +Create modern, reusable UI components with clean code, accessibility features, and responsive design for web applications and design systems. + +## When to Use This Skill + +Use this skill for: +- Building design system components +- Creating reusable interface elements +- Developing interactive widgets +- Prototyping new UI patterns +- Converting designs to code +- Building accessible components +- Creating component libraries + +## Component Categories + +### Basic Components +- **Buttons**: Primary, secondary, outline, icon, loading states +- **Inputs**: Text, email, password, textarea, select, checkbox, radio +- **Typography**: Headings, paragraphs, lists, code blocks +- **Images**: Responsive images, avatars, thumbnails, galleries +- **Icons**: SVG icons, icon fonts, custom graphics + +### Layout Components +- **Grid Systems**: Flexible grid layouts with breakpoints +- **Containers**: Wrappers, sections, cards, panels +- **Navigation**: Headers, sidebars, breadcrumbs, pagination +- **Spacing**: Margins, padding, dividers, spacers + +### Interactive Components +- **Modals**: Dialogs, popups, overlays, confirmations +- **Dropdowns**: Menus, selects, autocomplete, combobox +- **Tabs**: Tab panels, accordion, collapsible sections +- **Forms**: Complete forms, validation, multi-step wizards + +### Advanced Components +- **Data Display**: Tables, charts, progress bars, badges +- **Media**: Video players, audio controls, image carousels +- **Feedback**: Alerts, notifications, tooltips, loading states +- **Navigation**: Mega menus, sidebar navigation, mobile menus + +## Technical Standards + +### Framework Support +Generate components for: +- **React**: Modern hooks, TypeScript support, proper props +- **Vue**: Composition API, TypeScript, reactive properties +- **Vanilla JS**: Modern ES6+, Web Components, no dependencies +- **Svelte**: Reactive declarations, component lifecycle +- **Angular**: Component architecture, reactive forms + +### Accessibility Features +All components include: +- **ARIA Labels**: Proper labeling for screen readers +- **Keyboard Navigation**: Tab order, focus management +- **Color Contrast**: WCAG AA compliance (4.5:1 ratio) +- **Semantic HTML**: Proper element usage and structure +- **Focus Indicators**: Visible focus states for all interactive elements + +### Responsive Design +Components work across: +- **Mobile First**: Optimized for small screens +- **Breakpoint System**: sm, md, lg, xl viewport sizes +- **Touch Friendly**: Adequate touch targets (44px minimum) +- **Flexible Layouts**: Adapts to container constraints + +## Implementation Features + +### Customization Options +- **Theme Variables**: CSS custom properties for easy theming +- **Size Variants**: Small, medium, large sizing options +- **Color Schemes**: Primary, secondary, success, warning, error +- **Style Variants**: Filled, outlined, text, ghost styles + +### Code Quality +- **Clean Structure**: Semantic HTML with proper nesting +- **Efficient CSS**: Modern CSS with minimal specificity +- **Performance**: Optimized for fast rendering and interaction +- **Documentation**: Inline comments and usage examples + +Create production-ready components that enhance user experience and development efficiency. \ No newline at end of file