网页组件设计与复用

原名：web-component-design

为 React、Vue 或 Svelte 组件明确职责、接口和组合方式，减少重复实现。

中文 Skills 技能说明

一人公司的产品开始重复出现表单、弹窗和列表时，可让前端开发工程师整理组件。输入现有代码、框架版本和重复场景，技能分析组件边界、属性、状态与样式封装，交付组件接口草稿、重构建议及测试点。先遵守项目已有约定，不把上游 React 示例强行换进 Vue 项目，也不无边界地抽象所有页面。实际编码和构建需桌面端权限，重构前检查调用方，发布前验证原功能与可访问性。

上游能力依据

上游原始适用说明：Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

上游 SKILL.md 主要章节（保留原文标题）：

• When to Use This Skill
• Core Concepts
• 1. Component Composition Patterns
• 2. CSS-in-JS Approaches
• 3. Component API Design
• Quick Start: React Component with Tailwind
• Framework Patterns
• React: Compound Components
• Vue 3: Composables
• Svelte 5: Runes

使用边界

先核对上游说明、依赖、输入资料和所需权限。涉及写入、删除、发布、支付或外部发送时，必须在执行前人工确认。

作者、翻译与许可证

原作者

Seth Hobson（wshobson）与 agents contributors

中文翻译

CEOFans翻译

许可证

MIT

上游来源

https://github.com/wshobson/agents/tree/46891e7e60da0e52baf1050b7b6391b64e84c6d9/plugins/ui-design/skills/web-component-design

适用范围

平台：linux、macos、windows；标签：设计与前端、网页组件设计与复用、开源技能

安全提示

基础静态扫描不等于绝对安全。技能可能调用命令、浏览器、云服务或本地文件，请在最小权限环境中使用，高风险操作必须人工确认。

如发现侵权、许可证或安全问题，可在本页前台提交投诉，管理员复核后可立即下架。