sunflowermm 权威入口
.cursor/skills/web-component-design/references/component-patterns.md.cursor/skills/web-component-design/references/css-styling-approaches.md.cursor/skills/web-component-design/references/accessibility-patterns.md
适用场景
- 需要设计可复用组件与稳定组件 API。
- 需要统一样式方案（CSS Modules/CSS-in-JS/原子类）。
- 需要提升组件无障碍与可测试性。
非适用场景
- 不用于替代页面级视觉创意设计。
- 不用于服务端业务逻辑或数据建模问题。
执行步骤
- 确定组件职责边界与组合关系。
- 设计 props/slots/events 等对外接口。
- 统一样式策略与主题扩展方式。
- 补齐可访问性属性与键盘交互。
- 输出使用示例与反例，约束误用场景。
常见陷阱
- 组件承担过多业务职责，难以复用。
- API 过度灵活，导致行为不可预测。
- 样式穿透过深，后续维护成本高。