前端开发 Skill技能列表
React状态管理Skill state-management
React状态管理技能涉及使用不同的状态管理库和模式来处理React应用中的本地和全局状态。关键词包括React State, React Context, Zustand, Redux Toolkit, TanStack Query, Jotai。
ClaudeAIHTML工件构建器Skill artifacts-builder
这个技能是一套前端开发工具，专门用于构建Claude.ai平台的HTML工件，集成React、TypeScript、Vite、Tailwind CSS和shadcn/ui等现代技术，支持状态管理、路由和复杂组件开发，最终打包成单HTML文件分享。关键词：Claude AI, HTML工件, 前端开发, React, TypeScript, Vite, Tailwind CSS, shadcn/ui, 工具套件, 打包工具
Next.jsAppRouter模式精通Skill nextjs-mastery
这个技能专注于掌握 Next.js 14+ 框架的 App Router 模式，包括服务器组件（RSC）、增量静态再生（ISR）、中间件、并行路由和数据获取。它帮助开发者构建高性能、可维护的 Web 应用程序，优化 SEO 和用户体验。关键词：Next.js、App Router、Server Components、ISR、Middleware、并行路由、数据获取、前端开发、Web 开发。
熊猫CSSSkill panda-css
熊猫CSS是一个前端CSS框架，用于通过CSS-in-JS技术管理Web样式，提高开发效率和性能。关键词：前端开发，CSS框架，CSS-in-JS，原子CSS，Web性能。
ArkUISkill ark-ui
Ark UI是一个用于快速开发Web用户界面的前端框架，提供丰富的UI组件和工具，支持响应式设计和跨平台兼容性。它帮助开发者简化界面构建过程，提升开发效率和应用性能。关键词：Ark UI, 前端开发, UI框架, 组件库, Web应用, 响应式设计, 开源框架
图像优化Skill image-optimization
该技能专注于实现响应式图像、优化图像格式和处理图像管道，包括生成srcset、转换到WebP/AVIF、懒加载和提供图像转换API，适用于无头CMS和现代Web开发。关键词：图像优化，响应式图像，WebP转换，AVIF转换，懒加载，图像处理API，焦点裁剪，性能优化。
设计主题系统Skill design-theme-system
这个技能用于为多站点/多租户 CMS 设计和实现主题化架构，包括设计 tokens、CSS 变量、Tailwind 配置等，支持品牌定制和前端开发集成。适用于网站主题管理、品牌一致性维护和用户体验优化。关键词：主题设计、设计 tokens、CSS 变量、Tailwind、多站点、CMS、前端开发。
定义字体排版系统Skill define-typography
此技能用于定义和生成全面的字体排版系统，包括字体比例、文本样式、响应式规则和CSS代码。它支持模块化、音乐和自定义比例，适用于博客、应用和营销等场景，确保可访问性和设计一致性。关键词：字体排版、模块化比例、文本样式、响应式设计、CSS、前端开发、设计系统、可访问性。
创建样式指南Skill create-style-guide
这个技能用于从设计令牌和主题配置生成全面的样式指南文档，支持markdown、HTML和Figma Tokens格式。关键词包括样式指南、设计令牌、主题配置、前端开发、文档生成。
快速类型生成器Skill quicktype
这个技能用于从 JSON 数据快速生成编程语言类型定义，支持 TypeScript、Go、Python 等多种语言，适用于 API 响应类型、配置文件定义等开发场景。关键词：JSON 转换、类型生成、开发工具、代码生成、API 类型定义、快速类型。
Chrome开发者工具自动化技能Skill chrome-devtools
Chrome DevTools Agent 是一个用于浏览器自动化、调试和性能分析的技能，支持网页交互、截图、网络流量分析和性能剖析，适用于前端开发和测试。关键词：浏览器自动化、调试、性能分析、Chrome DevTools、前端开发。
最佳实践Skill best-practices
这个技能用于应用现代网页开发的最佳实践，专注于安全、浏览器兼容性和代码质量改进。关键词：网页开发、前端安全、兼容性优化、代码审核、HTTPS、CSP、语义HTML、错误处理、性能优化。