web-component-design
Skill140 starsChanged 8 months agoMITView on GitHub
当需要构建 Web 组件体系（React/Vue/Svelte 组件模式与 API 设计）时使用。
6 other projects use a version of this.
Adopted by
Most recently taken up by
- Samueladewole/claude-skillstheir own version, first seen Oct 13, 2026
- enes9103/my-claude-agents-skillstheir own version, first seen Sep 28, 2026
- roshankodi/agent-skillstheir own version, first seen Sep 22, 2026
- shaunburdick/skillstheir own version, first seen Apr 19, 2026
- CodeWithBehnam/cc-docstheir own version, first seen Mar 15, 2026
- Aver005/agent-skillstheir own version, first seen Feb 14, 2026
Other versions6 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 6
- Aver005/agent-skills★ 2same name
- CodeWithBehnam/cc-docs★ 2same name
- roshankodi/agent-skills★ 2same name
- shaunburdick/skills★ 1same name
- enes9103/my-claude-agents-skills★ 0same name
- Samueladewole/claude-skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository43 other files it gives its agents.
- AGENTS.mdAGENTS.md
- docs/agents.mdAGENTS.md
- .cursor/rules/vibe-learn-craft.mdcCursor rule
- .cursor/rules/xrk-core-code.mdcCursor rule
- .cursor/rules/xrk-dev-requirements.mdcCursor rule
- .cursor/rules/xrk-infrastructure.mdcCursor rule
- .cursor/rules/xrk-project.mdcCursor rule
- .cursor/rules/xrk-third-party-plugins.mdcCursor rule
- accessibility-complianceSkill
- design-system-patternsSkill
- fronted-designSkill
- immersive-short-videoSkill
- interaction-designSkill
- mobile-android-designSkill
- mobile-ios-designSkill
- react-native-designSkill
- responsive-designSkill
- ui-ux-pro-maxSkill
- visual-design-foundationsSkill
- xrk-agent-runtimeSkill
- xrk-ai-workflowSkill
- xrk-app-devSkill
- xrk-authSkill
- xrk-coding-styleSkill
- xrk-configSkill
- xrk-crawlSkill
- xrk-dockerSkill
- xrk-docsSkill
- xrk-github-researchSkill
- xrk-http-apiSkill
- xrk-infrastructureSkill
- xrk-llmSkill
- xrk-mcpSkill
- xrk-node-runtimeSkill
- xrk-pluginsSkill
- xrk-project-overviewSkill
- xrk-rendererSkill
- xrk-runtime-utilSkill
- xrk-subserverSkill
- xrk-system-coreSkill
- xrk-taskerSkill
- xrk-v3-apiSkill
- xrk-www-compatSkill
The file
Files
权威入口
.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 过度灵活，导致行为不可预测。
- 样式穿透过深，后续维护成本高。
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.