让AI写出地道的前端代码——这个Skill给框架之争画了个句号

写前端代码这件事，框架之争从来没停过——React、Vue 3、Svelte 5、Angular，每个都有一堆最佳实践，每个团队都有自己的”老规矩”。但你有没有发现，让 AI 来写前端代码时，它经常写出”四不像”？要么是 React 里混着 Vue 的写法，要么 TypeScript 类型一塌糊涂。

问题的核心不是 AI 不够聪明，而是它没有一份清晰的”前端开发规范”可以参照。frontend-development 这个 Skill 做的事很简单：给 AI 装上一套跨框架的前端开发指南，让它在任何框架下都能写出符合该框架惯例的代码。

覆盖四大主流框架

这个 Skill 的核心价值是”框架感知”。它不是教你”怎么写前端”，而是教你”怎么用 React 写前端”、”怎么用 Vue 写前端”、”Svelte 和 Angular 又该怎么处理”。

具体来说，它覆盖了：

• 状态管理：React 的 useState/useReducer、Vue 的 Pinia、Zustand、Svelte 的 stores、Angular 的 signals，按框架选择最合适的方案
• 路由：TanStack Router、Vue Router、SvelteKit routing、Angular Router，不混用
• 数据获取：TanStack Query、Vue composables、SvelteKit load functions，框架对什么就用什么
• 性能优化：React.memo、useMemo、useCallback vs Vue 的 v-memo、shallowRef、Svelte 的自动优化，工具选对不选贵

TypeScript 和架构原则

除了框架特定写法，这个 Skill 还强调跨框架通用原则：组件设计、TypeScript 最佳实践、代码复用、框架迁移路径。甚至还包括”怎么根据项目需求选框架”这种高阶问题。

简单说，它是一份前端开发的”通识课”——先把框架无关的原理搞懂，再针对具体框架用对应的工具。

安装即用

安装方式很标准：

npx skills add https://github.com/samhvw8/dot-claude --skill frontend-development

装好后，每次你在 Claude Code 里处理前端任务，它会自动识别用哪个框架，然后加载对应的开发规范。50 次安装，GitHub 10 颗星——属于小而美的工具型 Skill。

如果你经常让 AI 帮你写前端代码，这款 Skill 值得一试。

GitHub：https://github.com/samhvw8/dot-claude

GitHub: https://github.com/samhvw8/dot-claude