sunflowermm/web-component-design
.trae/skills/web-component-design/SKILL.md
当需要构建 Web 组件体系（React/Vue/Svelte 组件模式与 API 设计）时使用。
$ install --global
skillsauthnpx skillsauth add sunflowermm/XRK-AGT web-component-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 29, 2026, 11:02 PM5.5s1 file scanned
SKILL.md
- name:
- web-component-design
- description:
- 当需要构建 Web 组件体系（React/Vue/Svelte 组件模式与 API 设计）时使用。
权威入口
.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 过度灵活，导致行为不可预测。
- 样式穿透过深，后续维护成本高。
Related Skills
sunflowermm/answer-format
development
VerifiedTrustedCommunity
统一回复版式：短、结构化、可复制；减少空话
145SKILL.mdUpdated Jun 12, 2026
sunflowermm/agent-tools
tools
VerifiedTrustedCommunity
MCP 工具地图：默认工作流、web_search、何时启用 desktop/browser/memory
145SKILL.mdUpdated Jun 12, 2026
sunflowermm/agent-search
development
VerifiedTrustedCommunity
检索栈：web_search（13 提供商 + parallel-free 免费通道）、web_fetch、与 office-research 分工
145SKILL.mdUpdated Jun 12, 2026
sunflowermm/agent-memory
data-ai
VerifiedTrustedCommunity
工作区 Markdown 记忆 + memory 工作流向量记忆的使用边界
145SKILL.mdUpdated Jun 12, 2026