这个技能是关于使用Next.js框架构建全栈Web应用程序的实践模式，涵盖App Router、服务器组件、数据获取、认证和部署等关键技术。适用于开发现代、高性能的React应用，关键词包括：Next.js, 全栈开发, React, TypeScript, 服务器组件, 数据获取, 认证, 部署, Web开发。

这个技能专注于使用Tailwind CSS创建和维护可重用的前端组件模式，涵盖组件提取策略、@apply指令的合理使用、设计系统集成以及最佳实践如Class Variance Authority和条件类管理。关键词：Tailwind CSS, 组件模式, 前端开发, 可重用组件, 设计系统, 实用程序优先。

这个技能是一个用于UI/UX设计的系统化迭代工具，通过截图分析、竞争对手研究和渐进改进来精炼web组件设计，提升视觉层次、布局平衡和整体美学。适用于设计感觉不佳时的深度优化，关键词包括UI/UX设计、设计迭代、前端开发、视觉优化、截图分析。

Figma MCP 是一个技能，用于通过 Figma MCP 服务器将 Figma 设计自动化转换为生产代码。它允许用户根据 Figma URL 或节点 ID 获取设计上下文、截图和资产，然后按照项目规范（如 React 和 Tailwind）实现代码，确保视觉和行为与设计一致。关键词：Figma, MCP, 设计到代码, 前端开发, React, Tailwind, 自动化集成。

这个技能旨在帮助开发者掌握现代React应用开发的核心模式和最佳实践。涵盖组件设计、Hook使用、状态管理、性能优化、TypeScript集成、错误处理和测试策略。适用于前端工程师和全栈开发者，提升React应用的可维护性、性能和开发效率。关键词：React, Hooks, 组件设计, 状态管理, TypeScript, 性能优化, 测试, 前端开发。

网页构件构建器是一个前端开发工具套件，专门用于创建复杂的Claude.ai HTML artifact。它利用React、TypeScript、Vite、Parcel、Tailwind CSS和shadcn/ui等现代技术，支持状态管理、路由和组件化开发，适合需要高级前端功能的项目。关键词：前端开发、React、HTML artifact、Claude.ai、状态管理、路由、shadcn/ui。

设计令牌管理技能用于实现和维护设计令牌系统，覆盖令牌模式、命名约定、转换管道和多平台交付，适用于设计系统的构建，提升UI/UX一致性和开发效率。关键词：设计令牌、CSS变量、样式字典、设计系统、前端开发、SEO优化。

这个技能提供了在基于Robrix和Moly代码库的Makepad应用中实现状态管理和持久化的最佳实践。它涵盖了应用状态结构设计、状态通过Scope在组件树中传播、持久化层实现（如保存和加载状态）、以及跨会话管理UI状态。关键词包括：状态管理、持久化、AppState、Scope、serde、主题切换、状态传播、保存状态、加载状态。

这个技能用于创建和维护 Storybook 故事，遵循 Component Story Format 3 (CSF3)，确保组件故事结构化、可维护，并正确展示组件变体。它适用于前端开发，提高组件文档和测试效率。关键词：Storybook、CSF3、前端开发、组件故事、类型安全、最佳实践、自动化测试。

此技能专注于开发独特、生产级的前端界面，强调高质量创意设计和避免通用AI美学。用于构建Web组件、页面或应用程序，提供精致代码和美学优化，提升用户体验和视觉吸引力。关键词：前端开发、创意设计、Web界面、美学优化、生产级代码。

此技能专注于创建独特、生产级的前端接口，强调高质量设计、创意美学和避免通用AI风格。适用于构建网页组件、页面、应用程序等，注重细节、字体、颜色、动效和空间构成，以实现令人难忘的用户体验。关键词：前端设计、UI设计、网页开发、创意接口、生产级、美学设计、UI/UX。

这个技能用于将OpenAPI 3.0规范转换为TypeScript接口和类型守卫，帮助开发者从API规范自动生成类型定义，提高开发效率和代码质量，适用于前端和后端开发。关键词：OpenAPI, TypeScript, 接口生成, API规范, 类型安全, 前端开发, 后端开发, 自动化代码生成