| name | modern-react-ts-frontend |
| description | 现代审美 React + TypeScript 前端开发 Skill。用于生成具有现代设计感、高性能且类型安全的 React 19 应用。适用于：构建落地页、仪表盘、组件库及交互式 Web 应用。 |
现代 React + TypeScript 前端开发 (Modern React + TS Frontend)
本 Skill 旨在指导 Manus 如何利用当前最先进的前端技术栈（React 19, TypeScript, Tailwind CSS, shadcn/ui）构建具有现代审美和卓越性能的 Web 应用。
核心技术栈 (Core Stack)
| 技术 | 用途 | 优势 |
|---|
| React 19 | 核心框架 | 引入 Actions, use API, Server Components 等新特性。 |
| TypeScript | 编程语言 | 严格的类型检查，提升代码健壮性和开发体验。 |
| Vite | 构建工具 | 极速的热更新 (HMR) 和现代化的构建流程。 |
| Tailwind CSS | 样式处理 | 原子化 CSS，高度可定制，支持响应式和暗色模式。 |
| shadcn/ui | 组件库 | 基于 Radix UI 的无头组件，支持完全的样式控制。 |
| Framer Motion | 动画库 | 声明式动画，轻松实现平滑的过渡和微交互。 |
| Lucide React | 图标库 | 简洁、一致的现代图标系统。 |
现代审美指南 (Aesthetic Guidelines)
在生成代码时，应遵循以下设计原则以确保现代感：
- 极简布局：大量使用留白，避免信息过载。
- 高对比度排版：使用
text-foreground 和 text-muted-foreground 区分层级。
- 柔和阴影与圆角：使用
shadow-sm 或 shadow-md 配合 rounded-xl。
- 平滑过渡：为悬停、加载和状态切换添加动画。
参考资料：详细的设计规范请阅读 /home/ubuntu/skills/modern-react-ts-frontend/references/design-system.md。
设计风格选择 (Design Style Selection)
本 Skill 提供了三种预设的现代审美设计方案，以满足不同项目的视觉需求。在生成前端应用或组件时，Manus 将根据用户明确的指示或通过询问用户来选择合适的风格。
可用风格选项：
- 极简科技风 (Minimalist Tech)：强调简洁、高效和未来感，适合科技产品、工具类应用。
- 温暖人文风 (Warm Humanistic)：注重舒适、亲和与自然，适合内容展示、社区平台。
- 深色优雅风 (Dark Elegant)：营造高端、沉稳与专业氛围，适合数据仪表盘、管理后台。
指示 Manus：当您需要指定设计风格时，请在您的请求中明确提及，例如：“请使用极简科技风创建一个登录页面。” 如果未明确指定，Manus 可能会询问您的偏好。
开发流程与最佳实践 (Workflow & Best Practices)
1. 项目初始化
使用 webdev_init_project 工具并选择 web-static 或 web-db-user 模板。Manus 会自动配置 Vite、React、TypeScript 和 Tailwind CSS。
2. 组件开发
遵循单一职责原则，将复杂的 UI 拆分为小型、可复用的组件。
- 类型定义：为每个组件定义明确的 Props 接口。
- 样式控制：使用
cn() 工具函数（通常在 lib/utils.ts 中）合并 Tailwind 类名。
- 动画集成：使用
motion 组件增强交互感。
代码模板：参考 /home/ubuntu/skills/modern-react-ts-frontend/templates/component-template.tsx。
3. 状态管理与数据流
- 本地状态：优先使用
useState 和 useActionState (React 19)。
- 全局状态：推荐使用 Zustand，避免过度使用 Context。
- 异步数据：使用 TanStack Query 处理服务器状态。
技术细节：深入了解 React 19 + TS 最佳实践，请阅读 /home/ubuntu/skills/modern-react-ts-frontend/references/best-practices.md。
交付标准 (Delivery Standards)
生成的代码必须满足以下要求：
- 100% 类型安全：无
any 类型，严格的 Props 定义。
- 响应式设计：完美适配移动端、平板和桌面端。
- 暗色模式支持：所有组件应具备良好的暗色模式表现。
- 可访问性 (a11y)：遵循语义化 HTML，支持键盘导航。
