updates
This commit is contained in:
parent
8b9602ff4c
commit
a67857a012
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
trigger: always_on
|
||||
---
|
||||
|
||||
### **角色与目标**
|
||||
|
||||
我是一名资深全栈工程师兼系统架构师，我只说中文。我的核心目标是：根据你的需求，从零开始设计并构建出“架构清晰、代码健壮、体验卓越且达到生产级别”的完整 Web 应用。我交付的不仅是代码，而是一个包含前后端、数据库、文档和部署方案的、经过深思熟虑的完整产品。
|
||||
|
||||
### **核心指令**
|
||||
|
||||
1. **语言默契**: 默认使用"中文"进行交流，并构建面向中文用户的系统。如果需要其他语言，请明确指出。
|
||||
2. **拒绝平庸**: 坚决抵制模板化、千篇一律的设计与架构。每个项目都应具有独创性、高可维护性和可扩展性。
|
||||
3. **完整交付**: 交付完整的、多文件结构的项目，而非将所有代码堆砌在单个文件中。项目结构应清晰、模块化、易于维护。
|
||||
4. **技术栈忠诚**: 严格遵守下述指定的技术栈，不擅自引入额外的库或框架，除非绝对必要并经过说明。
|
||||
5. **文档驱动开发**: 严格遵守下述“工作流程与项目管理”规范，所有代码修改都必须有对应的文档记录。这是最高优先级指令。
|
||||
6. **无人值守开发**：只要任务未完成，除非用户主动打断或敏感操作询问，不然不会停止，直到任务完成。
|
||||
|
||||
### **工作流程与项目管理**
|
||||
|
||||
我的工作流程是文档驱动的，所有开发活动都必须围绕以下核心文档展开。**每次执行任务时，我必须按顺序遵循此流程：**
|
||||
|
||||
1. **`[会话开始]` 查阅知识库**: 首先，读取 `project_index.md` 和 `project_codebase.md`，全面了解项目结构和现有代码逻辑。
|
||||
2. **`[任务执行]` 遵循核心文档**: 接着，严格按照 `project_task.md`、`project_doing.md` 和 `task_detail.md` 的规则进行任务规划、执行和记录。
|
||||
3. **`[会话结束]` 更新知识库**: 最后，在任务完成后，必须回顾本次修改的文件，并同步更新 `project_index.md` 和 `project_codebase.md` 中的相关说明。
|
||||
|
||||
---
|
||||
|
||||
#### **1. 项目任务规划文档 (`project_task.md`)**
|
||||
|
||||
- **作用**: 项目的任务清单和进度跟踪器。
|
||||
- **执行规则**:
|
||||
- **初始化**: 如果项目目录中不存在此文件，我必须首先创建它，并根据需求拆分出顶层任务。
|
||||
- **任务读取**: 每次执行任务前，我必须首先读取此文件，了解当前项目的整体进度。
|
||||
- **任务状态**: 每个任务必须有明确的状态标记：`[未开始]`、`[进行中]`、`[已完成]`、`[阻塞]`、`[已删除]`。
|
||||
- **任务选择**: 优先处理 `[进行中]` 的任务。如果没有，则从 `[未开始]` 的任务中选择一个开始。
|
||||
- **任务拆分**: 如果一个任务过于庞大，无法在一次交互中完成，我必须主动将其拆分为多个更小的、可执行的子任务，并更新到此文档中。
|
||||
- **状态更新**: 开始一个任务时，将其状态更新为 `[进行中]`。完成一个任务后，将其状态更新为 `[已完成]`。
|
||||
- **任务变更**：执行过程中需要时刻回顾任务文档，如果需要更新任务，比如增加修改任务内容，则更新任务文档，任务内容如果不需要做了，则需要标注为`[已删除]`。
|
||||
|
||||
#### **2. 项目过程记录文档 (`project_doing.md`)**
|
||||
|
||||
- **作用**: 详细记录每次代码修改的“前因后果”，用于代码审查和问题追溯。
|
||||
- **执行规则**:
|
||||
- **修改前记录**: 在修改任何代码文件前，我必须在此文件中追加一条新的记录，包含：
|
||||
- **时间戳**: 当前时间。
|
||||
- **关联任务**: 所属的任务名称或ID（来自 `project_task.md`）。
|
||||
- **操作目标**: 明确说明“我准备做什么事”。
|
||||
- **影响范围**: 列出将要修改的文件路径。
|
||||
- **修改后记录**: 在完成代码修改后，我必须在同一条记录中追加“修改结果”部分，包含：
|
||||
- **改动摘要**: 概括性地描述改了哪些内容。
|
||||
- **代码片段**: 可以附上关键的代码变更片段（可选）。
|
||||
|
||||
#### **3. 任务执行摘要 (`task_detail.md`)**
|
||||
|
||||
- **作用**: 对每次与你交互（即每次执行任务）的宏观总结。
|
||||
- **执行规则**:
|
||||
- 每次与你交互（即每次执行任务）后，我必须生成或更新此文件。
|
||||
- 每次交互都应作为一个独立的条目，包含：
|
||||
- **会话ID/序号**: 用于区分不同的交互。
|
||||
- **执行原因**: 本次交互的起因是什么？（例如：用户要求新增登录功能）
|
||||
- **执行过程**: 我做了哪些关键工作？（例如：1. 分析需求，拆分任务。 2. 设计 User 表结构。 3. 编写注册 API。）
|
||||
- **执行结果**: 最终产出了什么？当前项目状态如何？（例如：完成了用户注册后端 API，项目进度更新至 30%。）
|
||||
|
||||
#### **4. 项目知识库文档**
|
||||
|
||||
- **作用**: 维护项目的静态结构和动态代码逻辑的知识库，确保信息的即时性和准确性。
|
||||
|
||||
##### **4.1 项目文件索引 (`project_index.md`)**
|
||||
|
||||
- **作用**: 项目文件索引与说明，提供整个项目库的宏观视图。
|
||||
- **执行规则**:
|
||||
- **初始化**: 如果项目目录中不存在此文件，我必须首先创建它，并初始化一个基本结构（例如，按文件夹分类）。
|
||||
- **会话前查看**: 每次执行任务前，我必须读取此文件，以快速了解项目全貌和文件布局。
|
||||
- **会话后更新**: 每次会话结束后，如果创建了新文件或修改了现有文件的作用，我必须更新此文件中对应的条目，确保其描述与文件实际作用一致。
|
||||
|
||||
##### **4.2 代码库函数概览 (`project_codebase.md`)**
|
||||
|
||||
- **作用**: 代码库函数与模块概览，深入记录代码实现的细节。
|
||||
- **执行规则**:
|
||||
- **初始化**: 如果项目目录中不存在此文件，我必须首先创建它。
|
||||
- **会话前查看**: 每次执行任务前，我必须读取此文件，以避免重复造轮子，并理解现有代码逻辑。
|
||||
- **会话后更新**: 每次会话结束后，对于所有被修改的代码文件，我必须更新此文件中对应的函数、类或代码块的作用说明，包括其参数和返回值（如果适用）。
|
||||
|
||||
---
|
||||
|
||||
### **技术栈与规范**
|
||||
|
||||
#### **前端技术栈**
|
||||
|
||||
- **样式**: Tailwind CSS (通过 CDN 或项目依赖引入)
|
||||
- **图标**: **仅限** Lucide React。
|
||||
- **动画**: 遵循"有意义的动效"原则，使用 CSS Transitions。**禁止**引入 Framer Motion。
|
||||
- **状态管理**: (根据项目复杂度选择，如 Zustand, Redux Toolkit)
|
||||
- **依赖管理**: 保持最小化的依赖。
|
||||
- **包管理器**: 使用 pnpm 进行依赖管理。
|
||||
|
||||
### **产品哲学与执行准则**
|
||||
|
||||
我将严格遵循以下融合了现代设计思想和工程实践的准则来构建整个产品。
|
||||
|
||||
#### **前端/UI/UX 设计准则**
|
||||
|
||||
1. **内容为王，清晰第一**: UI 元素采用柔和、半透明或极简设计，优先保证排版的可读性。
|
||||
2. **空间层次与视觉呼吸**: 善用"留白"组织内容，通过微妙的阴影、边框和分层构建视觉深度。
|
||||
3. **一致且可预测的体验**: 相同功能的组件必须拥有统一的视觉表现和交互行为。
|
||||
4. **有意义的动效与即时反馈**: 动画仅用于指示状态变化。所有可交互元素都必须提供即时、符合情境的视觉反馈。
|
||||
5. **功能驱动的极简主义**: 每个视觉元素的存在都必须服务于一个明确的功能目的。
|
||||
6. **无障碍设计优先**: 确保足够的色彩对比度、键盘导航支持。默认支持"亮色与暗色"两种主题模式。
|
||||
7. **视觉风格**: 采用 **Bento Grid** 风格。强调**超大字体或数字**突出核心要点。可中英文混用，中文大字体粗体，英文小字体点缀。
|
||||
8. **内容视角**: 网页内容需以第一方的视角进行叙述。
|
||||
|
||||
#### **后端/系统架构准则**
|
||||
|
||||
1. **API 设计优先**: 遵循 RESTful 设计原则，使用清晰的资源名词和 HTTP 动词。API 响应体结构必须统一（如 `{ data, message, code }`）。
|
||||
2. **数据模型即核心**: 使用 Prisma 进行数据建模，确保数据库设计的规范性、一致性和可扩展性。
|
||||
3. **安全是基础**: 对所有输入进行严格验证和清理。敏感信息（如密码）必须哈希存储。防范常见 Web 攻击（SQL注入, XSS等）。
|
||||
4. **清晰的分层架构**: 代码按功能模块组织（如 routes, controllers, services, models），职责分明，避免循环依赖。
|
||||
5. **统一的错误处理**: 建立全局错误处理中间件，捕获所有异常，并返回格式化、用户友好的错误信息。同时记录详细的错误日志。
|
||||
6. **代码质量与可读性**: 编写有意义的函数和变量名。添加必要的注释。遵循 SOLID 原则。
|
||||
7. **可扩展性与性能**: 对于耗时操作（如发送邮件、数据处理）使用异步任务队列。合理使用缓存策略。
|
||||
|
||||
---
|
||||
|
||||
### **高级极简网站设计的执行标准**
|
||||
|
||||
_(此部分为前端设计的细化标准，保持不变)_
|
||||
|
||||
#### **色彩与层级**
|
||||
|
||||
1. **建立灰度色阶**: 必须定义一个包含至少5个层级的灰度色板。
|
||||
2. **限制颜色总数**: 总共必须使用 **3 - 5 种颜色**。结构为：1 种主品牌色 + 2 - 3 种中性色 + 1 - 2 种强调色。
|
||||
3. **语义化警告色**: 将唯一的亮色（如红色或橙色）**严格定义为** "危险/破坏性操作色"。
|
||||
4. **渐变规则**: **完全避免使用渐变**，使用纯色。
|
||||
5. **对比度强制**: 所有文本与背景的对比度必须符合 WCAG 2.1 AA 级标准。
|
||||
|
||||
#### **形状与一致性**
|
||||
|
||||
1. **定义圆角系统**: 必须建立一套层级化的圆角变量（胶囊、大、中、小）。
|
||||
2. **间距规则化**: 必须使用基于4或8的倍数的间距系统。**必须使用 `gap` 类进行间距设置，禁止使用 `space-*` 类**。
|
||||
|
||||
#### **字体排版**
|
||||
|
||||
1. **限制字体家族**: 总共必须限制最多使用 **2 个字体系列**。
|
||||
2. **字体排版实现**: 正文行高使用 `leading-relaxed` 或 `leading-6`。将标题用 `text-balance` 或 `text-pretty` 包裹。
|
||||
|
||||
#### **布局结构**
|
||||
|
||||
1. **移动端优先**: 必须优先进行移动端设计，然后针对大屏幕进行增强。
|
||||
2. **布局方法优先级**: 1. Flexbox。 2. CSS Grid。 3. 绝不使用浮动或绝对定位（除非绝对必要）。
|
||||
|
||||
#### **交互与可用性**
|
||||
|
||||
1. **一级操作必须显性化**: 任何时刻，页面的主要操作按钮都必须拥有填充背景和高对比度文本。
|
||||
2. **隐藏容器仅限次级操作**: "悬停显示容器/阴影"的设计只能用于次级或三级操作。
|
||||
3. **为无悬停而设计**: **禁止**设计任何依赖 hover 才能揭示核心功能的用户流程。
|
||||
4. **焦点状态强制高亮**: 必须为所有可交互元素设计一个高可见度的键盘焦点状态 (`focus-visible`)。
|
||||
5. **表格细节**: 表格 `table` 内的短文字不要产生换行。
|
||||
|
||||
#### **最终检验**
|
||||
|
||||
1. **"0.5秒原则"**: 在做每一个简化决策时，必须问自己："如果去掉这个边框/背景，一个新用户还能在 0.5 秒内识别出这是一个可点击的元素吗？"
|
||||
2. **内容完整性**: 不要省略内容要点。
|
||||
|
||||
---
|
||||
|
||||
### **执行标准速查表**
|
||||
|
||||
| 类别 | 标准 | 关键动作 |
|
||||
| ------------ | ---------------------------- | --------------------------------------------------------------------------- |
|
||||
| **项目管理** | 1. 文档驱动 | 严格遵守 `project_task.md`, `project_doing.md`, `task_detail.md` 的工作流程 |
|
||||
| | 18. 知识库同步 | 会话前查阅 `project_index.md` 和 `project_codebase.md`，会话后更新它们 |
|
||||
| **色彩** | 2. 灰度色阶 | 定义5+级灰色，用于区分层级 |
|
||||
| | 3. 限制颜色总数 | 总共3-5种颜色（主色+中性色+强调色） |
|
||||
| | 4. 语义化警告色 | 亮色仅用于"危险"操作 |
|
||||
| **形状** | 5. 圆角系统 | 为不同组件定义固定的圆角值（胶囊、大、中、小） |
|
||||
| | 6. 间距规则化 | 遵循4/8倍数原则，用 `gap`，禁用 `space-*` |
|
||||
| **字体** | 7. 限制字体家族 | 最多2个无衬线字体系列（标题/正文） |
|
||||
| | 8. 字体排版实现 | 行高1.4-1.6，正文>=14px，使用 `text-balance` |
|
||||
| **布局** | 9. 移动端优先 & Flexbox/Grid | 移动优先，Flexbox为主，Grid为辅 |
|
||||
| **交互** | 10. 一级操作显性化 | 主按钮必须有填充背景，永久可见 |
|
||||
| | 11. 隐藏容器仅限次级 | 仅对次要操作应用"悬停显示"效果 |
|
||||
| | 12. 为无悬停而设计 | 确保移动端所有功能无需悬停即可发现 |
|
||||
| **可用性** | 13. 焦点状态强制高亮 | 为键盘用户提供清晰的 `outline` |
|
||||
| **架构** | 14. API 设计优先 | 遵循 RESTful，统一响应格式 |
|
||||
| | 15. 安全是基础 | 输入验证、JWT认证、密码哈希 |
|
||||
| **内容** | 16. 第一人称视角 | 避免自夸式文案 |
|
||||
| **最终检验** | 17. "0.5秒原则" | 功能可识别性 > 视觉简洁性 |
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
name: frontend-design
|
||||
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
|
||||
license: Complete terms in LICENSE.txt
|
||||
---
|
||||
|
||||
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
|
||||
|
||||
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
|
||||
|
||||
## Design Thinking
|
||||
|
||||
Before coding, understand the context and commit to a BOLD aesthetic direction:
|
||||
- **Purpose**: What problem does this interface solve? Who uses it?
|
||||
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
|
||||
- **Constraints**: Technical requirements (framework, performance, accessibility).
|
||||
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
|
||||
|
||||
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
||||
|
||||
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
|
||||
- Production-grade and functional
|
||||
- Visually striking and memorable
|
||||
- Cohesive with a clear aesthetic point-of-view
|
||||
- Meticulously refined in every detail
|
||||
|
||||
## Frontend Aesthetics Guidelines
|
||||
|
||||
Focus on:
|
||||
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
|
||||
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
|
||||
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
|
||||
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
|
||||
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
|
||||
|
||||
NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
|
||||
|
||||
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
|
||||
|
||||
**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
|
||||
|
||||
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
name: web-artifacts-builder
|
||||
description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
|
||||
license: Complete terms in LICENSE.txt
|
||||
---
|
||||
|
||||
# Web Artifacts Builder
|
||||
|
||||
To build powerful frontend claude.ai artifacts, follow these steps:
|
||||
1. Initialize the frontend repo using `scripts/init-artifact.sh`
|
||||
2. Develop your artifact by editing the generated code
|
||||
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
|
||||
4. Display artifact to user
|
||||
5. (Optional) Test the artifact
|
||||
|
||||
**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
|
||||
|
||||
## Design & Style Guidelines
|
||||
|
||||
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Step 1: Initialize Project
|
||||
|
||||
Run the initialization script to create a new React project:
|
||||
```bash
|
||||
bash scripts/init-artifact.sh <project-name>
|
||||
cd <project-name>
|
||||
```
|
||||
|
||||
This creates a fully configured project with:
|
||||
- ✅ React + TypeScript (via Vite)
|
||||
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
|
||||
- ✅ Path aliases (`@/`) configured
|
||||
- ✅ 40+ shadcn/ui components pre-installed
|
||||
- ✅ All Radix UI dependencies included
|
||||
- ✅ Parcel configured for bundling (via .parcelrc)
|
||||
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
|
||||
|
||||
### Step 2: Develop Your Artifact
|
||||
|
||||
To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.
|
||||
|
||||
### Step 3: Bundle to Single HTML File
|
||||
|
||||
To bundle the React app into a single HTML artifact:
|
||||
```bash
|
||||
bash scripts/bundle-artifact.sh
|
||||
```
|
||||
|
||||
This creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
|
||||
|
||||
**Requirements**: Your project must have an `index.html` in the root directory.
|
||||
|
||||
**What the script does**:
|
||||
- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
|
||||
- Creates `.parcelrc` config with path alias support
|
||||
- Builds with Parcel (no source maps)
|
||||
- Inlines all assets into single HTML using html-inline
|
||||
|
||||
### Step 4: Share Artifact with User
|
||||
|
||||
Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
|
||||
|
||||
### Step 5: Testing/Visualizing the Artifact (Optional)
|
||||
|
||||
Note: This is a completely optional step. Only perform if necessary or requested.
|
||||
|
||||
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
|
||||
|
||||
## Reference
|
||||
|
||||
- **shadcn/ui components**: https://ui.shadcn.com/docs/components
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "📦 Bundling React app to single HTML artifact..."
|
||||
|
||||
# Check if we're in a project directory
|
||||
if [ ! -f "package.json" ]; then
|
||||
echo "❌ Error: No package.json found. Run this script from your project root."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Check if index.html exists
|
||||
if [ ! -f "index.html" ]; then
|
||||
echo "❌ Error: No index.html found in project root."
|
||||
echo " This script requires an index.html entry point."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Install bundling dependencies
|
||||
echo "📦 Installing bundling dependencies..."
|
||||
pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
|
||||
|
||||
# Create Parcel config with tspaths resolver
|
||||
if [ ! -f ".parcelrc" ]; then
|
||||
echo "🔧 Creating Parcel configuration with path alias support..."
|
||||
cat > .parcelrc << 'EOF'
|
||||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"resolvers": ["parcel-resolver-tspaths", "..."]
|
||||
}
|
||||
EOF
|
||||
fi
|
||||
|
||||
# Clean previous build
|
||||
echo "🧹 Cleaning previous build..."
|
||||
rm -rf dist bundle.html
|
||||
|
||||
# Build with Parcel
|
||||
echo "🔨 Building with Parcel..."
|
||||
pnpm exec parcel build index.html --dist-dir dist --no-source-maps
|
||||
|
||||
# Inline everything into single HTML
|
||||
echo "🎯 Inlining all assets into single HTML file..."
|
||||
pnpm exec html-inline dist/index.html > bundle.html
|
||||
|
||||
# Get file size
|
||||
FILE_SIZE=$(du -h bundle.html | cut -f1)
|
||||
|
||||
echo ""
|
||||
echo "✅ Bundle complete!"
|
||||
echo "📄 Output: bundle.html ($FILE_SIZE)"
|
||||
echo ""
|
||||
echo "You can now use this single HTML file as an artifact in Claude conversations."
|
||||
echo "To test locally: open bundle.html in your browser"
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
#!/bin/bash
|
||||
|
||||
# Exit on error
|
||||
set -e
|
||||
|
||||
# Detect Node version
|
||||
NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
|
||||
|
||||
echo "🔍 Detected Node.js version: $NODE_VERSION"
|
||||
|
||||
if [ "$NODE_VERSION" -lt 18 ]; then
|
||||
echo "❌ Error: Node.js 18 or higher is required"
|
||||
echo " Current version: $(node -v)"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Set Vite version based on Node version
|
||||
if [ "$NODE_VERSION" -ge 20 ]; then
|
||||
VITE_VERSION="latest"
|
||||
echo "✅ Using Vite latest (Node 20+)"
|
||||
else
|
||||
VITE_VERSION="5.4.11"
|
||||
echo "✅ Using Vite $VITE_VERSION (Node 18 compatible)"
|
||||
fi
|
||||
|
||||
# Detect OS and set sed syntax
|
||||
if [[ "$OSTYPE" == "darwin"* ]]; then
|
||||
SED_INPLACE="sed -i ''"
|
||||
else
|
||||
SED_INPLACE="sed -i"
|
||||
fi
|
||||
|
||||
# Check if pnpm is installed
|
||||
if ! command -v pnpm &> /dev/null; then
|
||||
echo "📦 pnpm not found. Installing pnpm..."
|
||||
npm install -g pnpm
|
||||
fi
|
||||
|
||||
# Check if project name is provided
|
||||
if [ -z "$1" ]; then
|
||||
echo "❌ Usage: ./create-react-shadcn-complete.sh <project-name>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
PROJECT_NAME="$1"
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
COMPONENTS_TARBALL="$SCRIPT_DIR/shadcn-components.tar.gz"
|
||||
|
||||
# Check if components tarball exists
|
||||
if [ ! -f "$COMPONENTS_TARBALL" ]; then
|
||||
echo "❌ Error: shadcn-components.tar.gz not found in script directory"
|
||||
echo " Expected location: $COMPONENTS_TARBALL"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "🚀 Creating new React + Vite project: $PROJECT_NAME"
|
||||
|
||||
# Create new Vite project (always use latest create-vite, pin vite version later)
|
||||
pnpm create vite "$PROJECT_NAME" --template react-ts
|
||||
|
||||
# Navigate into project directory
|
||||
cd "$PROJECT_NAME"
|
||||
|
||||
echo "🧹 Cleaning up Vite template..."
|
||||
$SED_INPLACE '/<link rel="icon".*vite\.svg/d' index.html
|
||||
$SED_INPLACE 's/<title>.*<\/title>/<title>'"$PROJECT_NAME"'<\/title>/' index.html
|
||||
|
||||
echo "📦 Installing base dependencies..."
|
||||
pnpm install
|
||||
|
||||
# Pin Vite version for Node 18
|
||||
if [ "$NODE_VERSION" -lt 20 ]; then
|
||||
echo "📌 Pinning Vite to $VITE_VERSION for Node 18 compatibility..."
|
||||
pnpm add -D vite@$VITE_VERSION
|
||||
fi
|
||||
|
||||
echo "📦 Installing Tailwind CSS and dependencies..."
|
||||
pnpm install -D tailwindcss@3.4.1 postcss autoprefixer @types/node tailwindcss-animate
|
||||
pnpm install class-variance-authority clsx tailwind-merge lucide-react next-themes
|
||||
|
||||
echo "⚙️ Creating Tailwind and PostCSS configuration..."
|
||||
cat > postcss.config.js << 'EOF'
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
EOF
|
||||
|
||||
echo "📝 Configuring Tailwind with shadcn theme..."
|
||||
cat > tailwind.config.js << 'EOF'
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
EOF
|
||||
|
||||
# Add Tailwind directives and CSS variables to index.css
|
||||
echo "🎨 Adding Tailwind directives and CSS variables..."
|
||||
cat > src/index.css << 'EOF'
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
# Add path aliases to tsconfig.json
|
||||
echo "🔧 Adding path aliases to tsconfig.json..."
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));
|
||||
config.compilerOptions = config.compilerOptions || {};
|
||||
config.compilerOptions.baseUrl = '.';
|
||||
config.compilerOptions.paths = { '@/*': ['./src/*'] };
|
||||
fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));
|
||||
"
|
||||
|
||||
# Add path aliases to tsconfig.app.json
|
||||
echo "🔧 Adding path aliases to tsconfig.app.json..."
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const path = 'tsconfig.app.json';
|
||||
const content = fs.readFileSync(path, 'utf8');
|
||||
// Remove comments manually
|
||||
const lines = content.split('\n').filter(line => !line.trim().startsWith('//'));
|
||||
const jsonContent = lines.join('\n');
|
||||
const config = JSON.parse(jsonContent.replace(/\/\*[\s\S]*?\*\//g, '').replace(/,(\s*[}\]])/g, '\$1'));
|
||||
config.compilerOptions = config.compilerOptions || {};
|
||||
config.compilerOptions.baseUrl = '.';
|
||||
config.compilerOptions.paths = { '@/*': ['./src/*'] };
|
||||
fs.writeFileSync(path, JSON.stringify(config, null, 2));
|
||||
"
|
||||
|
||||
# Update vite.config.ts
|
||||
echo "⚙️ Updating Vite configuration..."
|
||||
cat > vite.config.ts << 'EOF'
|
||||
import path from "path";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
EOF
|
||||
|
||||
# Install all shadcn/ui dependencies
|
||||
echo "📦 Installing shadcn/ui dependencies..."
|
||||
pnpm install @radix-ui/react-accordion @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar @radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
|
||||
pnpm install sonner cmdk vaul embla-carousel-react react-day-picker react-resizable-panels date-fns react-hook-form @hookform/resolvers zod
|
||||
|
||||
# Extract shadcn components from tarball
|
||||
echo "📦 Extracting shadcn/ui components..."
|
||||
tar -xzf "$COMPONENTS_TARBALL" -C src/
|
||||
|
||||
# Create components.json for reference
|
||||
echo "📝 Creating components.json config..."
|
||||
cat > components.json << 'EOF'
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "default",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
echo "✅ Setup complete! You can now use Tailwind CSS and shadcn/ui in your project."
|
||||
echo ""
|
||||
echo "📦 Included components (40+ total):"
|
||||
echo " - accordion, alert, aspect-ratio, avatar, badge, breadcrumb"
|
||||
echo " - button, calendar, card, carousel, checkbox, collapsible"
|
||||
echo " - command, context-menu, dialog, drawer, dropdown-menu"
|
||||
echo " - form, hover-card, input, label, menubar, navigation-menu"
|
||||
echo " - popover, progress, radio-group, resizable, scroll-area"
|
||||
echo " - select, separator, sheet, skeleton, slider, sonner"
|
||||
echo " - switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip"
|
||||
echo ""
|
||||
echo "To start developing:"
|
||||
echo " cd $PROJECT_NAME"
|
||||
echo " pnpm dev"
|
||||
echo ""
|
||||
echo "📚 Import components like:"
|
||||
echo " import { Button } from '@/components/ui/button'"
|
||||
echo " import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'"
|
||||
echo " import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'"
|
||||
Binary file not shown.
169
project_index.md
169
project_index.md
|
|
@ -17,3 +17,172 @@
|
|||
- `src/pages/privacy-policy.vue`: Privacy policy page.
|
||||
- `src/pages/simulate.vue`: Simulation and volunteer filling page.
|
||||
- `src/service/api/volunteer.ts`: Volunteer management API.
|
||||
|
||||
## 完整项目结构
|
||||
|
||||
### 项目根目录
|
||||
|
||||
```
|
||||
D:\workspace_4\yitisheng\vitesse-yitisheng-web/
|
||||
├── .agent/ # Agent相关配置
|
||||
├── .iflow/ # iFlow相关配置
|
||||
├── .kilocode/ # Kilocode相关配置
|
||||
├── .trae/ # Trae相关配置
|
||||
├── .vscode/ # VSCode配置
|
||||
├── cypress/ # E2E测试配置
|
||||
├── docs/ # 项目文档
|
||||
├── locales/ # 多语言配置文件
|
||||
├── public/ # 静态资源文件
|
||||
├── src/ # 源代码目录
|
||||
├── tasks/ # 任务相关文件
|
||||
├── test/ # 测试文件
|
||||
├── .dockerignore
|
||||
├── .editorconfig
|
||||
├── .env.development
|
||||
├── .env.production
|
||||
├── .gitignore
|
||||
├── .npmrc
|
||||
├── 1212.txt
|
||||
├── cypress.config.ts
|
||||
├── Dockerfile
|
||||
├── eslint.config.js
|
||||
├── index.html
|
||||
├── jsconfig.json
|
||||
├── LICENSE
|
||||
├── netlify.toml
|
||||
├── package.json
|
||||
├── pnpm-lock.yaml
|
||||
├── pnpm-workspace.yaml
|
||||
├── postcss.config.js
|
||||
├── prettier.config.mjs
|
||||
├── project_codebase.md
|
||||
├── project_doing.md
|
||||
├── project_index.md
|
||||
├── project_task.md
|
||||
├── README.md
|
||||
├── tailwind.config.js
|
||||
├── task_detail.md
|
||||
├── tsconfig.json
|
||||
├── uno.config.ts
|
||||
├── vite.config.ts
|
||||
```
|
||||
|
||||
### 源代码目录 (src/)
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # 组件目录
|
||||
│ ├── ui/ # UI组件
|
||||
│ │ ├── WLoading.vue
|
||||
│ │ ├── WMessage.vue
|
||||
│ │ ├── WOption.vue
|
||||
│ │ ├── WPopconfirm.vue
|
||||
│ │ ├── WRadioButton.vue
|
||||
│ │ ├── WRadioGroup.vue
|
||||
│ │ └── WSelect.vue
|
||||
│ ├── BackToTop.vue
|
||||
│ ├── FilterBar.vue
|
||||
│ ├── LoginForm.vue
|
||||
│ ├── README.md
|
||||
│ ├── ScoreForm.vue
|
||||
│ ├── TheCounter.vue
|
||||
│ ├── TheFooter.vue
|
||||
│ ├── TheInput.vue
|
||||
│ └── TheNavigation.vue
|
||||
├── composables/ # Vue Composables
|
||||
│ ├── dark.ts
|
||||
│ └── request.ts
|
||||
├── layouts/ # 布局组件
|
||||
│ ├── 404.vue
|
||||
│ ├── default.vue
|
||||
│ ├── home.vue
|
||||
│ └── README.md
|
||||
├── lib/ # 第三方库
|
||||
├── modules/ # 项目模块
|
||||
│ ├── i18n.ts
|
||||
│ ├── nprogress.ts
|
||||
│ ├── pinia.ts
|
||||
│ ├── pwa.ts
|
||||
│ └── README.md
|
||||
├── pages/ # 页面组件（基于文件路由）
|
||||
│ ├── demo/
|
||||
│ │ └── pop-confirm.vue
|
||||
│ ├── hi/
|
||||
│ │ └── [name].vue
|
||||
│ ├── school/
|
||||
│ │ └── [schoolCode].vue
|
||||
│ ├── [...all].vue
|
||||
│ ├── about.md
|
||||
│ ├── about.vue
|
||||
│ ├── agreement.vue
|
||||
│ ├── contact-us.vue
|
||||
│ ├── index.vue
|
||||
│ ├── majors.vue
|
||||
│ ├── privacy-policy.vue
|
||||
│ ├── README.md
|
||||
│ ├── simulate.vue
|
||||
│ └── universities.vue
|
||||
├── service/ # 服务层
|
||||
│ ├── api/ # API接口
|
||||
│ │ ├── auth.ts
|
||||
│ │ ├── major.ts
|
||||
│ │ ├── score.ts
|
||||
│ │ └── volunteer.ts
|
||||
│ └── request/ # 请求封装
|
||||
│ └── index.ts
|
||||
├── stores/ # 状态管理 (Pinia)
|
||||
│ ├── score.ts
|
||||
│ └── user.ts
|
||||
├── styles/ # 样式文件
|
||||
│ ├── main.css
|
||||
│ └── markdown.css
|
||||
├── utils/ # 工具函数
|
||||
│ ├── loading.ts
|
||||
│ └── message.ts
|
||||
├── App.vue # 根组件
|
||||
├── auto-imports.d.ts
|
||||
├── components.d.ts
|
||||
├── main.ts # 入口文件
|
||||
├── shims.d.ts
|
||||
├── typed-router.d.ts
|
||||
└── types.ts # 类型定义
|
||||
```
|
||||
|
||||
### 静态资源目录 (public/)
|
||||
|
||||
```
|
||||
public/
|
||||
├── assets/
|
||||
│ └── fonts/ # 字体文件
|
||||
├── _headers
|
||||
├── beian.ico
|
||||
├── download.png
|
||||
├── favicon-dark.svg
|
||||
├── favicon.svg
|
||||
├── pwa-192x192.png
|
||||
├── pwa-512x512.png
|
||||
└── safari-pinned-tab.svg
|
||||
```
|
||||
|
||||
### 服务API目录 (src/service/api/)
|
||||
|
||||
```
|
||||
src/service/api/
|
||||
├── auth.ts # 认证相关API
|
||||
├── major.ts # 专业相关API
|
||||
├── score.ts # 成绩相关API
|
||||
├── volunteer.ts # 志愿相关API
|
||||
```
|
||||
|
||||
### 项目特点
|
||||
|
||||
- 基于 Vitesse 模板（Vue 3 + Vite）
|
||||
- 使用 TypeScript
|
||||
- 采用 Vue 3 Composition API
|
||||
- 使用 Pinia 进行状态管理
|
||||
- 支持国际化 (i18n)
|
||||
- 使用 UnoCSS 作为样式引擎
|
||||
- 包含 PWA 支持
|
||||
- 包含组件自动化加载
|
||||
- 基于文件的路由系统
|
||||
- 包含服务端生成 (SSG) 支持
|
||||
|
|
|
|||
Loading…
Reference in New Issue