前端开发 Skill技能列表
Zod数据验证Skill zod
这个技能用于使用Zod库进行数据验证和模式声明，专门针对TypeScript项目，帮助开发者确保数据的一致性和类型安全，适用于前端和后端开发中的表单验证、API数据处理等场景。关键词包括Zod、TypeScript、数据验证、模式验证、前端开发、后端开发、类型安全。
熊猫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应用, 响应式设计, 开源框架
熊猫CSSSkill panda-css
熊猫CSS是一个CSS框架，用于前端开发，通过提供实用类来简化网页样式编写，支持响应式设计和快速原型构建，提升开发效率和代码可维护性。关键词：CSS框架、前端开发、响应式设计、实用优先、网页样式、网页界面、快速开发。
泳道可视化Skill swimlane-visualization
泳道可视化技能用于设计泳道用户界面模式，以实时可视化AI Developer Workflow的执行。适用于构建观测性仪表板、监控代理工作流进度和创建实时状态显示。关键词包括：泳道可视化、UI设计、前端开发、实时更新、AI工作流、WebSocket集成、事件监控、工作流调试。
图像优化Skill optimize-images
该技能用于设计和实现响应式图像优化管道，支持多种现代图像格式（如AVIF和WebP），集成懒加载、srcset和CDN交付，适用于不同前端框架（如Next.js、Blazor），以提升网页性能、用户体验和SEO效果。关键词：图像优化、响应式设计、懒加载、srcset、WebP、AVIF、前端开发、性能优化。
图像优化Skill image-optimization
该技能专注于实现响应式图像、优化图像格式和处理图像管道，包括生成srcset、转换到WebP/AVIF、懒加载和提供图像转换API，适用于无头CMS和现代Web开发。关键词：图像优化，响应式图像，WebP转换，AVIF转换，懒加载，图像处理API，焦点裁剪，性能优化。
设计令牌管理Skill design-token-management
设计令牌管理技能用于实现和维护设计令牌系统，覆盖令牌模式、命名约定、转换管道和多平台交付，适用于设计系统的构建，提升UI/UX一致性和开发效率。关键词：设计令牌、CSS变量、样式字典、设计系统、前端开发、SEO优化。
设计主题系统Skill design-theme-system
这个技能用于为多站点/多租户 CMS 设计和实现主题化架构，包括设计 tokens、CSS 变量、Tailwind 配置等，支持品牌定制和前端开发集成。适用于网站主题管理、品牌一致性维护和用户体验优化。关键词：主题设计、设计 tokens、CSS 变量、Tailwind、多站点、CMS、前端开发。
设计导航架构Skill design-navigation
这个技能用于设计和实现网站和应用的导航系统，包括主菜单、页脚菜单、巨型菜单和面包屑导航。它提供全面的导航架构，确保可访问性和用户体验。关键词：导航设计，网站架构，用户体验，可访问性，菜单系统，面包屑导航，巨型菜单。
定义字体排版系统Skill define-typography
此技能用于定义和生成全面的字体排版系统，包括字体比例、文本样式、响应式规则和CSS代码。它支持模块化、音乐和自定义比例，适用于博客、应用和营销等场景，确保可访问性和设计一致性。关键词：字体排版、模块化比例、文本样式、响应式设计、CSS、前端开发、设计系统、可访问性。
创建样式指南Skill create-style-guide
这个技能用于从设计令牌和主题配置生成全面的样式指南文档，支持markdown、HTML和Figma Tokens格式。关键词包括样式指南、设计令牌、主题配置、前端开发、文档生成。