web-component-design

此技能提供了一套完整的框架，用于在现代前端生态系统中构建专业、可维护且高度可重复使用的 UI 组件。专为前端工程师和系统架构师设计，重点在于框架特定模式与通用架构原则的结合。无论您是在启动新的设计系统还是重构遗留代码库，此技能都能让您实现一致的组件接口、管理复杂的状态关系，并透过现代 CSS-in-JS 解决方案优化样式工作流程。

• 进阶组件组合模式，包括用于封装功能的复合组件 (Compound Components)、用于灵活控制反转的 Render Props，以及用于动态内容注入的 Slots。

• 关于 Tailwind CSS、CSS Modules、styled-components、Emotion 和 Vanilla Extract 等样式架构的策略指导，在性能与开发者体验之间取得平衡。

• 强健的组件 API 设计原则，强调语义化命名、TypeScript 接口的属性验证，以及严格遵守以组合为优先的开发方式。

• 跨框架模式掌握，涵盖 React (Context/Hooks)、Vue 3 (Composables/Provide/Inject) 和 Svelte 5 (Runes/Snippets)，确保组件行为的一致性。

• 关于可访问性 (Accessibility)、响应式设计和设计系统可扩展性的最佳实践，确保您的组件库符合企业级质量标准。

• 目标用户：构建组件库或复杂界面模块的前端开发人员、UI/UX 工程师以及设计系统维护者。

• 预期输入：高阶 UI 需求、需要重构的遗留组件代码，或来自 Figma 等工具的设计规范。

• 预期输出：遵循框架特定惯例的干净、模块化、类型安全且文档完善的组件代码。

• 实作限制：强调适用的零运行时样式 (Zero-runtime styling)、依赖管理，以及为外部组件库消费者保持稳定的公共 API。

• 实用提示：优先考虑状态隔离，使用基于变体的样式 (例如 class-variance-authority) 来降低复杂度，并始终优先使用 children 组合而非层层传递属性 (Prop Drilling)。