Agent Skills
返回列表
TypeScript 前端开发

TypeScript 前端开发

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_15292d5a/yjkj-typescript-dev。

技能介绍

解决的问题

在 TypeScript 和 React 前端项目里，工具版本、插件配置和默认行为会相互影响：Vite 插件顺序可能影响路由生成和 HMR，React Compiler 会改变手动 memoization 的写法，Tailwind CSS v4 已从 tailwind.config.js 转向 CSS-first 配置，Biome 把格式化、lint 和 import 整理合到一条命令，TypeScript 6.0 也改变了 strict、module 与 types 等默认值。单独阅读某一个工具文档通常不难，难的是这些工具在真实项目里同时生效时，谁先运行、谁覆盖谁、哪里需要显式配置，很容易形成隐蔽的构建或渲染问题。

核心能力与关键步骤

这个技能围绕 Vite 8、React 19.2、TypeScript 6.0、Tailwind CSS 4.3、shadcn/ui、Biome 2.4 和 Vitest 4 给出一组配套规则，重点是跨工具边界的处理：

  • Vite 与 React：框架插件放在前面，react() 放在后面，让 Fast Refresh 看到最终代码；React Compiler 通过 Babel 插件接入，减少手写 useMemo 和 useCallback。
  • 样式层：Tailwind v4 使用 CSS-first 配置，通过 @theme、@utility 等定义 token 和工具类；组件样式配合 shadcn/ui、CVA、data-slot 和 cn() 处理默认值与覆盖顺序。
  • TypeScript 与 Biome：TypeScript 6.0 下利用默认 strict，并配合 module: preserve、moduleResolution: bundler；Biome 用 biome check 一次完成格式化、lint 和 import 整理，用 files.includes 排除生成文件。
  • 测试与工程：Vitest 复用 Vite 配置，让测试看到相同的 alias 和 transform；组件测试使用 jsdom 或 happy-dom，CI 中跑 vitest run。

适用边界与注意点

该技能适合做类型安全的前端 React 应用，尤其是希望同时管理构建、样式、lint、类型和测试配置的项目。若仓库仍依赖旧版 Tailwind JS 配置、旧版 Vite 插件写法或非 Vite 构建链，需要先迁移。注意不要动态拼接 Tailwind 类名，Node 全局类型需要显式加入 types，涉及代码改写的工具建议固定版本，避免升级带来意外 diff。

使用场景

  • 新建 Vite React 项目，配置 Vite 8、React 19、TypeScript 6 和 Vitest，使开发、构建、测试复用同一套别名与转换。
  • 迁移旧组件到 React Compiler，删除多余 useMemo/useCallback，调整 Vite Babel 插件，避免 HMR 与路由转换异常。
  • 用 Tailwind v4 和 shadcn/ui 搭组件，用 @theme 定义 token，并用 CVA、data-slot 和 cn() 管理默认样式与覆盖。
  • 统一前端检查，用 Biome 一次完成格式化、lint 和 import 整理，并排除生成文件。

适合人员

  • 负责中后台 React 页面的前端工程师，需要在 Vite 8 和 React 19 下稳定接入 TypeScript 6 与测试。
  • 维护组件库的前端开发，需要用 Tailwind v4、shadcn/ui 和 CVA 管理设计 token、变体与默认样式覆盖。
  • 接手旧项目的技术负责人，需要把 lint、格式化、import 整理和类型检查收敛到 Biome 与 TypeScript 6。
  • 做 SSR 或路由应用的前端工程师，需要处理 Vite 插件顺序、React Compiler 和 Vitest 复用构建配置的问题。