메뉴
前端开发全栈技能。当用户开发网页、小程序、H5、APP界面时自动激活。 触发词：前端、页面、组件、Vue、React、小程序、uni-app、CSS、Tailwind、TypeScript、 H5、微信小程序、响应式、动画、表单、列表、登录页、首页、详情页、Dashboard。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
215个AI智能体角色库，覆盖17个部门。当用户开发项目需要特定角色能力时自动激活， 推荐最匹配的智能体角色来辅助开发。 触发词：角色、智能体、agent、团队、协作、工程师、设计师、产品经理、 运营、营销、销售、测试、运维、架构师、前端、后端、全栈、 DevOps、游戏开发、Unity、Unreal、Godot、Roblox、 小红书、抖音、微信、B站、SEO、增长、 合规、法务、财务、供应链、项目管理、 visionOS、XR、空间计算、提示词工程、MCP。
后端开发技能。当用户开发服务器、接口、数据库、业务逻辑时自动激活。 触发词：后端、接口、API、数据库、服务器、登录、认证、权限、CRUD、 Node.js、Python、Java、Go、RESTful、GraphQL、Redis、消息队列、微服务。
免费API+免费数据库+免费存储资源速查。当用户需要接入第三方服务、 查找API、Mock数据、AI能力、选择数据库、存储方案时自动激活。 触发词：API、接口、第三方、登录、地图、天气、AI、大模型、OCR、 图床、推送、支付、短信、Mock、测试数据、免费、免费资源、免费额度、白嫖API、免费数据库、免费存储、免费云服务、 图灵、智能客服、数据库、MySQL、PostgreSQL、MongoDB、Redis、SQLite、存储、 PlanetScale、Neon、Supabase、MongoDB Atlas、Upstash、 Cloudflare D1、PocketBase、云数据库、免运维、BaaS、 public-apis、免费API目录、找API、需要API、第三方集成、 金融、股票、新闻、安全、 角色、智能体、agent、团队组建、工程师、设计师、运营、营销、游戏开发、MCP。
全栈开发技能。当用户需要从零搭建完整项目、快速MVP验证、或同时涉及前后端时自动激活。 触发词：全栈、从零开始、MVP、快速原型、完整项目、Supabase、 Serverless、BaaS、部署、上线、Vercel、Cloudflare。
移动端开发技能。当用户开发APP、移动应用、鸿蒙应用时自动激活。 触发词：APP、移动端、iOS、Android、鸿蒙、React Native、Flutter、 uni-app App端、推送、离线、应用商店、上架。
项目架构与选型技能。当用户开始新项目、需要技术选型、系统设计、或遇到架构问题时自动激活。 触发词：新项目、技术选型、架构设计、系统设计、高并发、高可用、 微服务、数据库设计、项目结构、技术方案、重构、性能瓶颈、 架构评审、系统重构、高可用设计、容量规划、系统架构、架构咨询、性能瓶颈分析。
| name | frontend-dev |
| description | 前端开发全栈技能。当用户开发网页、小程序、H5、APP界面时自动激活。 触发词：前端、页面、组件、Vue、React、小程序、uni-app、CSS、Tailwind、TypeScript、 H5、微信小程序、响应式、动画、表单、列表、登录页、首页、详情页、Dashboard。 |
根据项目特征自动选择技术栈：
| 项目特征 | 推荐技术栈 |
|---|---|
| 纯Web应用 | React + Next.js 或 Vue + Nuxt.js |
| 小程序 | uni-app(Vue3) + uView Plus |
| H5移动端 | Vue3 + Vant + vw适配 |
| 管理后台 | React + Ant Design / Vue + Element Plus |
| 营销活动页 | Vue3/React + Tailwind CSS + GSAP动画 |
| 需要SEO | Next.js(SSR/SSG) 或 Nuxt.js |
| 创意动效/视觉冲击 | React + ReactBits (reactbits.dev) |
| 组件库 | Stars | 特点 | 适用场景 | 安装方式 |
|---|---|---|---|---|
| shadcn/ui | 82K+ | 无依赖复制、Tailwind原生、高度可定制 | 任何React项目首选 | npx shadcn@latest init |
| Ant Design 5 | 93K+ | 企业级、功能最全、中文友好 | 管理后台、企业应用 | npm i antd |
| MUI (Material UI) | 95K+ | Material Design、生态成熟 | 国际化项目、通用 | npm i @mui/material |
| Chakra UI | 39K+ | 可访问性优先、简洁API | 注重a11y的项目 | npm i @chakra-ui/react |
| Mantine | 27K+ | 100+ hooks+组件、TypeScript原生 | 全功能React项目 | npm i @mantine/core |
| Radix UI | 16K+ | 无样式原语、极致可访问性 | 自定义设计系统 | npm i @radix-ui/react-dialog |
| NextUI | 22K+ | 美观现代、Figma集成 | Next.js项目 | npm i @nextui-org/react |
| HeroUI | 20K+ | 原NextUI团队、更现代 | 现代Web应用 | npm i @heroui/react |
| 组件库 | Stars | 特点 | 适用场景 | 安装方式 |
|---|---|---|---|---|
| Element Plus | 24K+ | Vue3企业级标准、中文友好 | 管理后台、企业应用 | npm i element-plus |
| Vant 4 | 23K+ | 移动端首选、轻量高性能 | H5移动端、小程序 | npm i vant |
| Naive UI | 16K+ | TypeScript原生、Tree-shakable | 现代Vue3项目 | npm i naive-ui |
| PrimeVue | 11K+ | 90+组件、多主题 | 通用Vue3项目 | npm i primevue |
| Arco Design Vue | 2.7K+ | 字节跳动出品、设计精细 | 企业级应用 | npm i @arco-design/web-vue |
| TDesign Vue Next | 1.2K+ | 腾讯出品、企业级 | 企业级应用 | npm i tdesign-vue-next |
| uView Plus | 1K+ | uni-app首选、多端适配 | 小程序/跨端 | npm方式引入 |
| 组件库 | Stars | 特点 | 适用场景 | 安装方式 |
|---|---|---|---|---|
| ReactBits | 38.9K+ | 130+动画组件、即插即用 | 创意动效、视觉冲击 | npx shadcn@latest add @react-bits/... |
| Aceternity UI | 18K+ | 高端动效、Framer Motion | Landing Page、作品集 | 复制组件代码 |
| Magic UI | 15K+ | 精美动画组件、shadcn风格 | 营销页面、SaaS | npx shadcn@latest add ... |
| Framer Motion | 24K+ | React动画标准库 | 任何需要动画的项目 | npm i framer-motion |
| GSAP | 20K+ | 专业级动画引擎 | 复杂动画、滚动驱动 | npm i gsap |
| Lottie | 3K+ | AE动画导出播放 | 品牌动画、Loading | npm i lottie-react |
你的项目是什么类型？
├── 管理后台/企业应用
│ ├── React → Ant Design 5（功能最全）或 shadcn/ui（更灵活）
│ └── Vue → Element Plus（最成熟）或 Naive UI（更现代）
├── 移动端H5
│ ├── React → Ant Design Mobile 或 MUI
│ └── Vue → Vant 4（首选）
├── 小程序
│ └── uni-app → uView Plus（首选）
├── 创意/营销页面
│ └── React + shadcn/ui + ReactBits/Aceternity UI + Framer Motion
├── SaaS/产品级应用
│ └── React + shadcn/ui（高度可定制）+ Tailwind CSS
├── 快速MVP
│ ├── React → MUI 或 Chakra UI（开箱即用）
│ └── Vue → PrimeVue（组件最多）
└── 自定义设计系统
└── Radix UI（原语）+ Tailwind CSS（样式）
130+ 高度可定制的动画组件和背景，即插即用，让项目瞬间脱颖而出。
安装方式（shadcn CLI）：
npx shadcn@latest add @react-bits/<ComponentName>-<TS|JS>-<TW|CSS>
# 示例：安装 Aurora 背景（TypeScript + Tailwind 版本）
npx shadcn@latest add @react-bits/Aurora-TS-TW
组件分类：
| 分类 | 说明 | 典型组件 |
|---|---|---|
| Backgrounds | 全屏动态背景 | Aurora、Dot Field、Line Waves、Soft Aurora、Radar、Shape Grid、Grainient、Balatro、Ballpit、Beams |
| Text Animations | 文字动效 | Shiny Text、Split Text、Gradient Text、Blur Text、Count Up |
| Animations | 交互动画 | Blob Cursor、Splash Cursor、Magnet Lines、Antigravity、Pixel Trail、Magic Rings、Ribbons、Orbit Images、Metallic Paint |
| Components | UI 组件 | Dock、Card、Morphing Dialog、Tilted Card、Spotlight Card |
适用场景：
技术栈支持：JS + CSS / TS + CSS / JS + Tailwind / TS + Tailwind（四种组合可选）
官网：https://reactbits.dev/ GitHub：https://github.com/DavidHDev/react-bits (38.9K+ Stars)
高端动效组件库，基于 Framer Motion，适合打造视觉冲击力强的页面。
核心组件：3D Card Effect、Spotlight、Text Generate Effect、Background Beams、Moving Border、Tracing Beam、Hover Border Gradient、Meteor Effect、Wavy Background
官网：https://ui.aceternity.com/ GitHub：https://github.com/aceternity/aceternity-ui (18K+ Stars)
精美动画组件，shadcn/ui 风格，可直接用 CLI 安装。
核心组件：Marquee、Border Beam、Shimmer Button、Number Ticker、Dock、Globe、Particles、Beam、Animated Grid Pattern
官网：https://magicui.design/ GitHub：https://github.com/magicuidesign/magic-ui (15K+ Stars)
src/
├── api/ # 接口请求
├── assets/ # 静态资源
├── components/ # 公共组件
│ ├── common/ # 通用组件
│ └── business/ # 业务组件
├── composables/ # 组合式函数
├── pages/ # 页面
├── router/ # 路由
├── stores/ # Pinia状态
├── styles/ # 全局样式
├── types/ # TS类型定义
└── utils/ # 工具函数
src/
├── app/ # Next.js App Router
│ ├── (auth)/ # 路由组
│ ├── api/ # API Routes
│ └── layout.tsx
├── components/ # 组件
│ ├── ui/ # 基础UI组件
│ └── features/ # 业务组件
├── hooks/ # 自定义Hooks
├── lib/ # 工具库
├── stores/ # 状态管理
├── types/ # TS类型
└── styles/ # 全局样式
| 问题 | 解决方案 |
|---|---|
| 首屏白屏久 | SSR/SSG + 骨架屏 + 预加载 |
| 列表卡顿 | 虚拟滚动 + 分页加载 + 防抖搜索 |
| 样式闪烁 | CSS Modules + Tailwind JIT |
| 跨端样式不一致 | 条件编译 + CSS Reset + normalize |
| 小程序包体积超限 | 分包加载 + 图片CDN + 按需引入 |