web-component-design

此技能为现代 JavaScript 和 TypeScript 生态系统中构建高质量、可维护的 UI 组件提供了全面的框架。它专为需要构建可重用组件库、建立一致性设计系统或将遗留代码库重构为现代模块化架构的前端开发人员和架构师而设计。该技能涵盖了 React、Vue 和 Svelte 的深层技术模式，重点在于最大限度地提高组件的可重用性、开发体验和运行时性能。

• 高级组合模式：实现复杂结构，利用复合组件 (Compound Components)、渲染属性 (Render Props) 和插槽 (Slots) 来创建灵活且解耦的接口。

• API 设计最佳实践：开发直观、类型安全的组件属性接口，实现语义化命名规范，并为公开的组件 API 提供合理的默认值。

• CSS-in-JS 与样式编排：评估并整合多种样式解决方案，包括 Tailwind CSS、CSS Modules、styled-components、Emotion 以及像 Vanilla Extract 这样的零运行时解决方案。

• 可访问性与一致性：确保 UI 组件符合现代网页可访问性 (A11y) 标准，同时在大型应用程序中保持视觉一致性。

• 渐进式重构：将遗留 UI 组件迁移到现代框架模式的策略，且不破坏现有功能或设计的一致性。

• 框架特定实现：提供关于 React Hooks、基于上下文的模式、Vue 3 Composables 和 Svelte 5 Runes 的专家指导，以实现组件内高效的状态管理。

• 目标受众：前端工程师、UI/UX 开发人员以及负责设计系统的技术负责人。

• 使用场景：构建企业级 UI 组件库、创建 Storybook 文档化模块以及标准化前端架构模式。

• 输入：代码库架构需求、设计令牌 (Design Tokens) 和现有的组件逻辑。

• 输出：符合 DRY 原则的可扩展、经过测试且文档完善的组件代码。

• 约束：专注于现代框架；需要理解 TypeScript 以及当前的编译时或运行时样式编写方法。