前端开发 Skill技能列表
Tamagui最佳实践指南Skill tamagui-best-practices
Tamagui跨平台UI框架高级开发指南,涵盖配置v4、编译器优化、样式化上下文、复合组件、主题系统、性能优化和常见反模式。适用于React Native和Web应用开发,提供TypeScript最佳实践、设计令牌管理和跨平台适配方案。
React专家Skill react-specialist
React 专家技能专注于提供 React 18+、Next.js 生态系统和现代 React 模式的深度开发支持。核心能力包括使用 Hooks、并发渲染、状态管理(如 Zustand、TanStack Query)以及性能优化,旨在构建高性能、可扩展且类型安全的 React 应用程序。适用于前端开发、组件库构建、性能调优和复杂状态管理场景。 关键词:React 开发,React 18,Next.js,状态管理,Zustand,TanStack Query,性能优化,TypeScript,前端开发,组件设计
设计到生产Skill design-to-production
这是一个将HTML设计原型自动化转换为生产级React组件的引导式工作流工具。它支持玻璃态拟物化(Glassmorphism)UI设计风格,通过5步标准化流程(分析→映射→脚手架→实现→验证)确保代码质量。关键词:HTML转React、设计原型实现、玻璃态拟物化、组件脚手架、前端开发工作流、UI组件转换、代码质量验证、shadcn/ui集成
自动动画Skill auto-animate
AutoAnimate 是一个零配置的前端动画库,适用于 React、Vue、Svelte 等框架,可自动为列表过渡、手风琴、提示消息等添加平滑动画效果。它轻量级、易于集成,并支持 SSR 安全。关键词:自动动画,零配置动画,React动画,Vue动画,轻量动画,前端开发,动画库。
Piniav3-Vue状态管理Skill pinia-v3
Pinia v3是Vue.js的官方状态管理库,用于在Vue 3应用中管理全局状态。它支持defineStore、getters、actions等功能,适用于Vue 3存储、Nuxt SSR、Vuex迁移、存储组合、状态水合、测试等场景。关键词:Pinia, Vue状态管理, defineStore, 状态管理, Vue 3, SSR, Nuxt, 测试, 插件, 可组合。
ChromeDevTools调试Skill chrome-devtools-debugging
Chrome DevTools调试技能允许开发者通过Chrome DevTools协议连接来调试和分析Web应用程序,主要功能包括查看控制台日志、监控网络请求、性能分析以及执行JavaScript代码,特别适用于调试需要认证的会话。
PiniaColada数据获取技能Skill pinia-colada
Pinia Colada 是一个用于 Vue 和 Nuxt 的智能数据获取库,提供 useQuery 和 useMutation 等功能,用于处理异步状态、查询缓存、服务器端渲染(SSR)、查询失效、乐观更新等。关键词:Pinia Colada, Vue, Nuxt, 数据获取, 缓存, SSR, 异步状态管理, useQuery, useMutation。
Vue3与Nuxt3专家Skill vue-nuxt-expert
此技能专注于使用Vue 3和Nuxt 3进行前端开发,构建类型安全、高性能的Web应用程序。涵盖Vue 3 Composition API、Nuxt 3服务器端渲染(SSR)、静态站点生成(SSG)、Pinia状态管理、性能优化和客户端安全。适用于开发现代、响应式的前端项目。关键词:Vue 3, Nuxt 3, 前端开发, Composition API, TypeScript, 性能优化, 网络安全。
性能优化Skill performance-optimization
此技能专注于Web性能优化,通过技术如代码分割、懒加载、图像优化、缓存策略和核心网页指标监控,以提升网站加载速度、用户体验和SEO排名,适用于前端开发和性能工程领域。关键词包括:Web性能优化、代码分割、懒加载、图像优化、缓存策略、核心网页指标、前端开发、性能监控。
Context7高效文档获取器Skill context7-efficient
Context7高效文档获取器是一个智能开发工具,通过shell管道过滤技术实现86.8%的令牌节省,专门用于快速获取JavaScript、Python、Go、Rust等编程语言的库文档、代码示例和API参考。该工具支持React、Next.js、Prisma、Express等主流框架,提供智能过滤、代码示例提取和API签名识别功能,帮助开发者高效学习和使用各种开发库。
前端样式设计Skill styling
这个技能用于指导如何编写和维护CSS及Tailwind样式代码,包括最小化包装元素以提升代码质量,采用最佳实践来提高开发效率和UI一致性。它涵盖了样式优化、工具类使用、颜色规范和主题管理,适用于前端开发者和UI设计师。关键词:前端开发、CSS、Tailwind、样式设计、代码优化、UI组件。
用户界面设计系统工具包Skill ui-design-system
这是一个专为高级UI设计师和前端开发团队打造的专业工具包,用于高效创建、管理和维护企业级UI设计系统。核心功能包括自动化设计令牌生成(色彩、字体、间距)、组件库架构设计、响应式布局计算、无障碍合规性检查以及开发交接文档生成。该工具能显著提升设计一致性,加速设计与开发协作流程,适用于构建品牌视觉规范、设计系统文档和前端组件库。关键词:UI设计系统,设计令牌,组件库,响应式设计,设计开发协作,前端开发,视觉一致性,设计工具包。