modern-react-ts-frontend

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)

在生成代码时，应遵循以下设计原则以确保现代感：

1. 极简布局：大量使用留白，避免信息过载。
2. 高对比度排版：使用 text-foreground 和 text-muted-foreground 区分层级。
3. 柔和阴影与圆角：使用 shadow-sm 或 shadow-md 配合 rounded-xl。
4. 平滑过渡：为悬停、加载和状态切换添加动画。

参考资料：详细的设计规范请阅读 /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，支持键盘导航。