oc-pipeline
一个基于Vite、React和shadcn/ui的现代化前端项目模板。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：oc-pipeline。 它的用途是：一个基于Vite、React和shadcn/ui的现代化前端项目模板。 完整的 Skill 内容见：https://321skill.com/skills/oc-pipeline/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个管理后台的登录页面原型。”，它会引导你使用该模板，在`src/pages`下创建新页面，并从`@/components/ui`导入Button、Input、Card等shadcn组件快速搭建界面。或者，
对AI说：“帮我基于这个模板启动一个新项目。”，它会提供克隆、安装依赖和启动开发服务器的完整步骤。
介绍
这个Skill提供了一个开箱即用的前端项目模板，旨在帮助开发者快速启动基于React、TypeScript和shadcn/ui的现代化Web应用开发。它解决了从零开始配置Vite、集成shadcn/ui组件库和Tailwind CSS的繁琐问题，让开发者能立即专注于业务逻辑开发。
使用方式非常简单，克隆仓库后，通过pnpm i安装依赖，即可使用pnpm run dev启动开发服务器。所有shadcn/ui组件都已预先下载并放置在@/components/ui目录下，可直接在React组件中导入使用。
它非常适合希望快速构建美观、响应式UI界面的前端开发者、全栈开发者或高校学生，尤其适合用于开发个人项目、毕业设计或制作产品原型。
建议在使用前熟悉React和TypeScript基础。由于所有组件已本地化，你可以自由修改Tailwind配置和组件样式来定制UI。注意，@/路径别名指向src/目录，在TypeScript代码中应避免重复导出已导入的类型。
核心特点
与同类模板相比，它最大的特点是预先下载并集成了完整的shadcn/ui组件库，无需用户手动通过CLI逐一添加组件，实现了真正的开箱即用。同时，它基于Vite构建，提供了比传统Create React App更快的开发体验和构建速度。
注意事项
不适合需要高度定制化构建流程或使用其他UI框架（如Ant Design、Material-UI）的项目。
常见问题
如何添加新的shadcn/ui组件？
由于所有组件已预下载，你可以直接在`@/components/ui`中找到并使用现有组件。如需官方未包含的新组件，可能需要手动下载或使用shadcn CLI添加。
可以用于生产环境吗？
可以，这是一个标准的前端项目模板，使用`pnpm run build`命令即可构建用于生产环境的优化版本。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/oc-pipeline/raw/index.md 读取 oc-pipeline 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/oc-pipeline/raw/index.md（查看排版版本）