前端开发 Skill技能列表
vue-router最佳实践Skill vue-router-best-practices
本技能包提供了 Vue Router 4 的核心最佳实践指南，涵盖导航守卫、路由参数处理、组件生命周期交互等关键主题。旨在帮助前端开发者解决路由跳转、参数更新、守卫异步操作、无限循环等常见问题，优化单页应用的路由性能和代码结构。关键词：Vue Router， 导航守卫， 路由生命周期， 单页应用， 前端路由， Vue.js， 路由参数， 组件交互。
TypeScript工具类型Skill typescript-utility-types
此技能专注于使用TypeScript的内置工具类型、映射类型、条件类型和高级类型操作技术，用于创建灵活、类型安全的TypeScript代码，提升开发效率和代码质量。关键词：TypeScript、工具类型、映射类型、条件类型、类型安全、代码生成、前端开发、类型推断、模板文字类型。
TypeScript异步编程模式Skill typescript-async-patterns
这个技能涵盖了TypeScript中的异步编程模式，包括Promises、async/await、异步迭代器、错误处理和高级模式，用于构建稳健的异步应用程序。它帮助开发者高效处理异步操作，特别适用于API调用、I/O操作和实时数据处理。关键词：TypeScript, 异步编程, Promises, async/await, 错误处理, 异步迭代器, 重试模式, 超时控制, 取消机制, API开发。
原子设计模板Skill atomic-design-templates
原子设计模板技能用于在前端开发中，基于原子设计方法论创建可重用的页面布局模板。它涉及定义内容区域、实现响应式设计、组合组件以提高开发效率和一致性。关键词包括原子设计、模板、页面布局、前端开发、React、CSS、响应式设计、组件组合。
React服务器端动作Skill react-server-actions
React服务器端动作是一种在Next.js 14+框架中实现的功能，用于安全处理表单提交和服务器端数据操作，无需API路由。它支持渐进增强、服务器端验证、文件上传和乐观UI更新，适用于现代Web开发中的表单处理、服务器突变和性能优化场景。关键词：React Server Actions, Next.js, 表单处理, 服务器端突变, 渐进增强, 安全性, 缓存重新验证, 文件上传, 乐观UI更新, Web开发。
前端可访问性Skill frontend-accessibility
前端可访问性技能涉及使用语义化HTML、ARIA、键盘导航和屏幕阅读器支持来构建符合WCAG标准的可访问Web应用程序，确保所有用户都能获得包容性的体验。
MUI无头UI组件库最佳实践Skill mui-base
这个技能提供了MUI Base UI的最佳实践指南，专为构建无头React组件库设计。它涵盖了组件模式、命名约定、组织方式、错误处理和样式规则，帮助开发者创建无样式UI组件、复合组件、实现无障碍优先模式，并支持受控和非受控组件模式。关键词：MUI, React, 组件库, 无头UI, 前端开发, 最佳实践。
NuxtContentv3内容管理系统Skill nuxt-content
Nuxt Content v3 是一个基于 Git 的内容管理系统（CMS），专为 Nuxt.js 项目设计，用于管理 Markdown、YAML、JSON 和 CSV 文件，提供类型安全查询、模式验证（支持 Zod 和 Valibot）、全文本搜索、导航工具和 SQL 存储。适用于构建博客、文档网站、内容驱动应用等，支持 Cloudflare 和 Vercel 部署，集成 Nuxt Studio 进行生产编辑。关键词：Nuxt Content, Git CMS, Markdown 管理, 类型安全查询, 全文本搜索, 前端开发, 内容集合, 部署优化
前端组件模式Skill frontend-component-patterns
前端组件模式技能专注于使用设计模式如复合组件、渲染属性、自定义钩子和高阶组件来构建高效、可维护的前端组件。适用于React、Vue和Angular框架，帮助开发者创建可重用UI库、优化组件架构和提升开发效率。关键词：前端开发、组件设计、React模式、Vue组件、Angular架构、可重用UI、性能优化、无障碍访问。
顶级设计Skill top-design
这个技能是一个获奖级网页设计框架，用于创建高端、沉浸式的网站和应用程序。它专注于排版、动画、颜色、滚动设计、性能和微交互，旨在实现10/10的设计质量，帮助设计师和开发者构建匹配Awwwards获奖标准的数字体验。关键词：网页设计、前端开发、动画、排版、Awwwards、性能优化、微交互、UI/UX设计。
Prettier插件Skill prettier-plugins
此技能专注于Prettier插件的各个方面，包括插件生态系统、自定义解析器和插件开发，旨在帮助开发者掌握代码格式化工具的高级应用。关键词：Prettier插件, 代码格式化, JavaScript开发, 前端工具, 插件开发, SEO
原子设计：有机体Skill atomic-design-organisms
原子设计有机体技能专注于构建用户界面中的复杂组件，如导航栏、内容卡片和表单部分。它基于原子设计方法论，通过组合原子和分子来创建可重用、状态管理的独立UI部分，提高前端开发效率和代码可维护性。关键词：原子设计、UI组件、前端开发、React、组件化、状态管理、可重用性。