2026-03-06

分享前端项目常用的三个Skills--Vue、React 与 UI 核心 Skills

前言

在过去几年里，前端开发经历了从手写每一行 HTML/CSS，或使用组件库（Ant Design、Element Plus），到 AI 辅助编程（GitHub Copilot、Cursor）的巨大跨越。
而 2025 年以来的技术浪潮，正把我们推向新阶段：从 “AI 辅助” 向 “AI Agent（智能体）” 转型。

在这种模式下，开发者不再只是接收代码建议，而是为 AI 提供一系列 “技能包（Skills）”，让 AI 能理解复杂框架逻辑、项目结构乃至视觉审美。

一句话概括：Skills = 领域专业知识 + 你的项目偏好 + 严厉的审查官

1. 为什么需要 Skills？

在 AI 编程语境下，Skills 的出现，是为了解决大模型（LLM）“博而不精”的天然缺陷。

1.1 通才 AI：知识的“图书馆”

一个没有安装 Skills 的大模型（如 GPT-5、Claude 4.5）像一个读过全世界代码的毕业生：

广度惊人：知道几百种编程语言，甚至能背出 2014 年的过时语法
深度断层：不知道你公司封装规范、组件命名习惯，更不知道项目里“不能动的老 Bug”
执行模糊：给一个需求，可能从 100 种解法里随机挑一种，不一定符合当前工程环境

1.2 专才 AI：自带“十年工龄”的骨干

安装 Skills 后，AI（Agent）完成从“大模型”到 “领域智能体” 的进化。
它不再“满嘴跑火车”，而是被你强制要求“必须按这套规约写代码”的资深开发。

特性	通才 AI（Generalist）	专才 AI（Specialist with Skills）
思维边界	无边界，容易幻觉	有界思维：严格锁定当前技术栈
项目理解	盲人摸象，只看当前文件	全局视野：理解路由、状态、样式体系
输出质量	“大概能跑”	“符合工程直觉”的生产级代码
角色定位	知识检索器	虚拟技术负责人（Virtual Lead）

2. Skills 里面到底装了什么？

一个 Skills 文件夹通常不是深奥代码，而是三样东西：

规约（Rules）：告诉 AI “允许做什么、严禁做什么”的指令（.cursorrules / .md）
上下文（Context）：项目特殊结构（路由在哪、接口怎么封装等）
工具（Tools）：自动化脚本（如 AI 写完代码后自动执行 npm lint）

如果说通才 AI 提供的是“概率”（它觉得像是对的），那么 Skills 提供的是“确定性”。
它把顶级架构师经验封装成 AI 可复用的“条件反射”。

本文聚焦三个高频技能包：

vue-skills
react-skills（agent-skills）
ui-skills（uipro-cli）

一、Vue-Skills

Vue-Skills 覆盖 Vue 3 最佳实践、TypeScript 类型安全增强、IDE 性能优化与现代编码模式，解决大型 Vue 项目常见痛点（IDE 卡顿、类型推断错误、构建配置、可维护性问题）。

1.1 核心规则（5 大方向）

1) 开发体验与 IDE 性能优化（IDE & Performance）

codeactions-save-performance.md：解决大型 Vue 项目保存耗时（30s+）问题
volar-3-breaking-changes.md：适配 Volar 升级变更
vue-directive-comments.md：介绍 @vue-ignore、@vue-skip、@vue-expect-error 等模板注释

2) TypeScript 类型安全与配置（Type Safety & Configuration）

vue-tsc-strict-templates.md：建议开启 strictTemplates
vue-router-typed-params.md：修复路由参数类型丢失问题
data-attributes-config.md：支持 data-* 属性类型检查
module-resolution-bundler.md：建议 tsconfig.json 使用 "moduleResolution": "bundler"
with-defaults-union-types.md：修复联合类型 + withDefaults 的虚假警告

3) Vue 3 现代编码模式（Modern Patterns）

define-model-update-event.md：推荐 Vue 3.4 defineModel()
extract-component-props.md：将复杂 defineProps 类型提取为独立接口
script-setup-jsdoc.md：规范 <script setup> 中 JSDoc 使用
fallthrough-attributes.md：inheritAttrs: false 与透传属性最佳实践

4) 运行时陷阱与调试（Runtime Caveats & Debugging）

deep-watch-numeric.md：数字数组 watch + deep: true 陷阱
duplicate-plugin-detection.md：防止插件重复注册（如 Pinia）
hmr-vue-ssr.md：SSR 场景 HMR 问题处理

5) 测试与样式（Testing & Styling）

pinia-store-mocking.md：测试中正确 Mock Pinia Store
strict-css-modules.md：开启 CSS Modules 严格模式

1.2 安装方法

npx add-skill hyf0/vue-skills

执行后会自动检查 IDE 与终端环境，并提示：

安装到当前项目或全局生效
选择软链接方式或复制规则文件到项目

1.3 实战案例：封装组件时的 Props 继承

场景：基于 BaseButton.vue 封装 ProButton.vue，要求继承原有 Props 并新增 loading。

优化前（常见“盲写”）

<!-- ProButton.vue -->
<script setup lang="ts">
// ❌ 错误做法 1：手动重复定义，维护成本高
interface Props {
  text: string;
  color?: string;
  loading: boolean;
}

// ❌ 错误做法 2：用 InstanceType，混入大量 Vue 内部属性
import type BaseButton from "./BaseButton.vue";
type BaseProps = InstanceType<typeof BaseButton>["$props"];

defineProps<BaseProps & { loading: boolean }>();
</script>

优化后（使用 `vue-component-type-helpers`）

<!-- ProButton.vue -->
<script setup lang="ts">
import type { ComponentProps } from "vue-component-type-helpers";
import BaseButton from "./BaseButton.vue";

// ✅ 精确提取子组件 Props 类型
type BaseButtonProps = ComponentProps<typeof BaseButton>;

interface Props extends BaseButtonProps {
  loading?: boolean;
  size?: "sm" | "md" | "lg";
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  size: "md",
});
</script>

<template>
  <div class="pro-button">
    <BaseButton v-bind="$attrs" :loading="loading">
      <slot />
    </BaseButton>
  </div>
</template>

核心价值

维度	传统方式	Skills 方案（Vue Best Practices）
开发效率	需翻源码找 Props	自动提取，AI 自动桥接
类型提示	混入大量 `$props` 内部属性	纯净提示，仅业务属性
维护性	子组件改 Prop 需手动同步	类型自动同步更新
工程质量	Hack 与冗余较多	标准工程化，符合官方模式

二、React-Skills（agent-skills）

2.1 核心功能

1) React 组件组合模式（`vercel-composition-patterns`）

适用：

布尔属性爆炸（isLoading、isSmall...）导致难维护
企业级组件库开发
Tabs / Select / Menu 等强父子联动场景

规则重点：

组合优先于布尔堆叠
Provider 管理状态，子组件通过 Context 交互
用显式变体替代大量布尔值（如 PrimaryButton、IconButton）
优先 children 组合而非庞大配置对象

2) React & Next.js 性能最佳实践（`vercel-react-best-practices`）

适用：

页面慢、LCP 长、交互延迟
Next.js App Router 全栈架构
大规模并行数据获取场景

规则重点：

消除瀑布流（Waterfalls）
禁用 Barrel Files，强化 Tree-shaking；使用 next/dynamic 代码分割
用 React.cache() 去重请求，减少客户端序列化数据
避免 Effect 做同步状态，必要时 startTransition

3) React Native & Expo（`vercel-react-native-skills`）

适用：

iOS/Android 列表与手势性能优化
JS/UI 线程通信瓶颈
原生能力高性能接入

规则重点：

强制 FlashList 替代 FlatList
动画只在 transform / opacity 上
图片用 expo-image，交互优先 Pressable
文本必须包裹在 Text 内；避免条件渲染 &&（防止渲染 0）

4) Web 设计规范（`web-design-guidelines`）

适用：

发布前 UI/UX 审计
A11y 合规
Code Review 阶段自动化审查

规则重点：

动态拉取最新设计系统规则
强制检查对比度、ARIA、键盘导航
精确定位未使用 Design Tokens 等问题

2.2 安装方法

npx add-skill vercel-labs/agent-skills

可只安装某个规则集（如 vercel-react-best-practices）。

2.3 用法示例：Next.js 并行获取与流式渲染

优化前：串行瀑布流

// ❌ 串行阻塞
export default async function ProfilePage() {
  const user = await fetchUser();
  const orders = await fetchOrders(user.id);
  const coupons = await fetchCoupons();

  return (
    <div>
      <UserInfo user={user} />
      <OrderList orders={orders} />
      <CouponList coupons={coupons} />
    </div>
  );
}

优化后：并行 + 组件组合 + Suspense

import { Suspense } from "react";

// ✅ 并行获取与解耦渲染
export default async function ProfilePage() {
  const userPromise = fetchUser();
  const couponsPromise = fetchCoupons();

  const user = await userPromise;

  return (
    <div>
      <UserInfo user={user} />

      <Suspense fallback={<Skeleton />}>
        <OrderDataLayer userId={user.id} />
      </Suspense>

      <Suspense fallback={<Skeleton />}>
        <CouponDataLayer promise={couponsPromise} />
      </Suspense>
    </div>
  );
}

async function OrderDataLayer({ userId }) {
  const orders = await fetchOrders(userId);
  return <OrderList orders={orders} />;
}

async function CouponDataLayer({ promise }) {
  const coupons = await promise;
  return <CouponList coupons={coupons} />;
}

核心价值

优化点	传统方案	Skills 方案（Vercel Best Practices）
请求速度	累加耗时（Waterfall）	并发执行，耗时显著降低
用户感知	全黑屏等待	Streaming 局部先出
代码结构	逻辑堆主页面	原子化组件，数据与渲染内聚
AI 表现	随机生成	确定性重构，遵循性能规约

结论：注入 vercel-react-best-practices 后，AI 从“代码生成器”进化为“性能自觉的架构师”。

三、UI-Skills（uipro-cli）

前两类技能解决“逻辑”，uipro-cli 及相关 ui-skills 解决“审美与交付”。
它让 AI 不只会写代码，还能像资深设计师一样思考。

3.1 核心功能

67 种视觉风格：Glassmorphism、Claymorphism、Minimalism、Brutalism、Neumorphism、Bento Grid、AI-Native UI 等
96 行业色板 + 57 字体配对：覆盖 SaaS、电商、医疗、金融、美妆等
13 种技术栈适配：React、Next.js、Vue、Nuxt、Astro、Svelte、shadcn/ui、RN、Flutter、SwiftUI 等
100+ UX 准则与推理规则：包含反模式规避、A11y、行业审美约束与自动自检

3.2 安装方法

npm install -g uipro-cli

# 为 Claude Code 初始化
uipro init --ai claude

# 为 Cursor 初始化
uipro init --ai cursor

# 为所有支持的 AI 助手初始化
uipro init --ai all

3.3 实战案例：AI 内容平台 Dashboard

传统 AI 生成（平庸）

// ❌ 基础 Grid，设计表现弱
export default function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-4 p-4">
      <Card title="总收入" value="$12,000" />
      <Card title="活跃用户" value="1,240" />
      <Card title="API 调用" value="45.2k" />
      <div className="col-span-3">主要统计图表</div>
    </div>
  );
}

UI/UX Pro Max 介入后（具备审美自觉）

// ✅ Bento Grid + Glassmorphism + 高级配色
export function BentoDashboard() {
  return (
    <section className="bg-slate-950 p-8 min-h-screen font-sans text-slate-100">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="md:col-span-2 md:row-span-2 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-3xl p-8 hover:bg-slate-800/60 transition-all duration-300 group">
          <header className="flex justify-between">
            <h3 className="text-xl font-bold tracking-tight">创作产出分析</h3>
            <div className="h-2 w-2 bg-cyan-400 rounded-full animate-pulse" />
          </header>
          <MainAnalyticChart color="#22d3ee" />
        </div>

        <div className="bg-slate-900/50 backdrop-blur-md rounded-3xl p-6 border border-white/5">
          <Subtitle>API 余额</Subtitle>
          <Value className="text-3xl font-mono">84.2%</Value>
        </div>

        <div className="bg-cyan-500/10 rounded-3xl p-6 border border-cyan-500/20 text-cyan-400">
          <div className="text-sm font-semibold mb-2">服务状态</div>
          <div className="text-lg">系统运行正常</div>
        </div>
      </div>
    </section>
  );
}

核心价值

维度	传统构建	UI/UX Pro Max（uipro）
布局逻辑	1/2 或 1/3 等分	非对称动态布局（Bento/Masonry）
色彩应用	基础色值、较单调	分层色彩、渐变、阴影、半透明
细节打磨	基础功能	微交互、骨架屏、平滑过渡
设计自检	依赖人工多轮返工	内置反模式自检，首次更接近可交付

结语：前端开发者的角色转变

随着 vue-skills、react-skills、ui-skills 的普及，前端角色正从 “代码编写者（Coder）” 向 “AI 指令师（Prompt Engineer）” 和 “技术评审员（Reviewer）” 转变。

传统 AI 辅助更像“搜索变种”，而 Skills 模式代表 “领域知识预装载”：

降低认知负荷：不用记住所有 Vue 新特性或 Tailwind 类名
统一代码风格：团队约定一套 Skill 脚本即可实现一致输出
缩短交付周期：从 MVP 到生产发布更快，把精力放在业务价值

掌握 Skills 不意味着放弃底层学习。相反，越懂 Vue/React 原理与 UI 规范，越能正确引导 AI，释放更高生产力。

文章参考

作者：去伪存真
原文链接：https://juejin.cn/post/7599641289887055918
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端

AI工具

作者：remember（联系作者）

发表时间：2026-03-06 11:18

公众号转载：请在文末添加作者公众号二维码

从 AI 辅助到 AI Agent：前端开发进入 Skills 时代

分享前端项目常用的三个Skills--Vue、React 与 UI 核心 Skills

前言

1. 为什么需要 Skills？

1.1 通才 AI：知识的“图书馆”

1.2 专才 AI：自带“十年工龄”的骨干

2. Skills 里面到底装了什么？

一、Vue-Skills

1.1 核心规则（5 大方向）

1) 开发体验与 IDE 性能优化（IDE & Performance）

2) TypeScript 类型安全与配置（Type Safety & Configuration）

3) Vue 3 现代编码模式（Modern Patterns）

4) 运行时陷阱与调试（Runtime Caveats & Debugging）

5) 测试与样式（Testing & Styling）

1.2 安装方法

1.3 实战案例：封装组件时的 Props 继承

优化前（常见“盲写”）

优化后（使用 `vue-component-type-helpers`）

核心价值

二、React-Skills（agent-skills）

2.1 核心功能

1) React 组件组合模式（`vercel-composition-patterns`）

2) React & Next.js 性能最佳实践（`vercel-react-best-practices`）

3) React Native & Expo（`vercel-react-native-skills`）

4) Web 设计规范（`web-design-guidelines`）

2.2 安装方法

2.3 用法示例：Next.js 并行获取与流式渲染

优化前：串行瀑布流

优化后：并行 + 组件组合 + Suspense

核心价值

三、UI-Skills（uipro-cli）

3.1 核心功能

3.2 安装方法

3.3 实战案例：AI 内容平台 Dashboard

传统 AI 生成（平庸）

UI/UX Pro Max 介入后（具备审美自觉）

核心价值

结语：前端开发者的角色转变

文章参考

评论

从 AI 辅助到 AI Agent：前端开发进入 Skills 时代

分享前端项目常用的三个Skills--Vue、React 与 UI 核心 Skills

前言

1. 为什么需要 Skills？

1.1 通才 AI：知识的“图书馆”

1.2 专才 AI：自带“十年工龄”的骨干

2. Skills 里面到底装了什么？

一、Vue-Skills

1.1 核心规则（5 大方向）

1) 开发体验与 IDE 性能优化（IDE & Performance）

2) TypeScript 类型安全与配置（Type Safety & Configuration）

3) Vue 3 现代编码模式（Modern Patterns）

4) 运行时陷阱与调试（Runtime Caveats & Debugging）

5) 测试与样式（Testing & Styling）

1.2 安装方法

1.3 实战案例：封装组件时的 Props 继承

优化前（常见“盲写”）

优化后（使用 vue-component-type-helpers）

核心价值

二、React-Skills（agent-skills）

2.1 核心功能

1) React 组件组合模式（vercel-composition-patterns）

2) React & Next.js 性能最佳实践（vercel-react-best-practices）

3) React Native & Expo（vercel-react-native-skills）

4) Web 设计规范（web-design-guidelines）

2.2 安装方法

2.3 用法示例：Next.js 并行获取与流式渲染

优化前：串行瀑布流

优化后：并行 + 组件组合 + Suspense

核心价值

三、UI-Skills（uipro-cli）

3.1 核心功能

3.2 安装方法

3.3 实战案例：AI 内容平台 Dashboard

传统 AI 生成（平庸）

UI/UX Pro Max 介入后（具备审美自觉）

核心价值

结语：前端开发者的角色转变

文章参考

评论

优化后（使用 `vue-component-type-helpers`）

1) React 组件组合模式（`vercel-composition-patterns`）

2) React & Next.js 性能最佳实践（`vercel-react-best-practices`）

3) React Native & Expo（`vercel-react-native-skills`）

4) Web 设计规范（`web-design-guidelines`）