技能 web-component-design

📦

web-component-design

Name: web-component-design
Author: wshobson

内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问⚡ 包含脚本

设计可复用 Web 组件

随着产品增长，前端团队需要能够保持一致性的组件。此技能指导 Claude、Codex 和 Claude Code 处理组件 API、组合模式、样式选择和无障碍检查。

支持: Claude Codex Code(CC)

📊 75 合格

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "web-component-design" from https://skillstore.io/skills/wshobson-web-component-design.md and its manifest at https://skillstore.io/api/skills/wshobson-web-component-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/wshobson-web-component-design.md 已签名 manifest GET /api/skills/wshobson-web-component-design/manifest 已签名 lockfile GET /api/skills/wshobson-web-component-design/lockfile

测试它

正在使用“web-component-design”。为设计系统设计一个可复用的 React tabs 组件。

预期结果:

一份组件方案，包含 root 和 child parts、受控和非受控状态选项、ARIA roles、键盘行为和样式 variants。

正在使用“web-component-design”。为多品牌组件库选择一种样式方案。

预期结果:

对 CSS Modules、utility classes、CSS-in-JS 和零运行时样式的比较，并为 theme tokens 推荐一种方案。

正在使用“web-component-design”。改进自定义 dropdown menu 的无障碍性。

预期结果:

一份检查清单，涵盖焦点处理、roles、键盘导航、labels、disabled 状态和屏幕阅读器行为。

安全审计

安全

v4 • 2026/7/8 打开版本化报告

AI review found the static alerts are false positives from markdown examples, TypeScript template literals, accessibility key handling, local imports, and documentation links. No prompt injection, data exfiltration intent, shell execution, or secret material was found in the referenced files.

已扫描文件

1,952

分析行数

复核项

已忽略误报

风险因素

⚙️ 外部命令 (48)

🌐 网络访问 (6)

references/component-patterns.md:189 SKILL.md:275 SKILL.md:276 SKILL.md:277 SKILL.md:278 SKILL.md:279

⚡ 包含脚本 (2)

references/css-styling-approaches.md:586 SKILL.md:240

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/wshobson-web-component-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-web-component-design/security.svg)](https://skillstore.io/skills/wshobson-web-component-design?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/wshobson-web-component-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-web-component-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/wshobson-web-component-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

wshobson. (2026). web-component-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-web-component-design/audits/4

BibTeX 引用

@techreport{wshobson-wshobson-web-component-design-2026,
  author = {wshobson},
  title = {web-component-design security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/wshobson-web-component-design/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-component-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-web-component-design/audits/4"
identifiers:
  - type: other
    value: "skillstore:wshobson-web-component-design:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

架构

可维护性

内容

社区

规范符合性

你能构建什么

创建设计系统组件

为可复用的 button、dialog、tab 或 form control 定义 variants、props、无障碍行为和样式规则。

标准化组件 API

审查现有组件，并在产品代码库中对齐命名、defaults、组合和 override 模式。

比较框架模式

在 React、Vue 和 Svelte 之间转换 UI 模式，同时保留状态流和无障碍行为。

试试这些提示

设计基础组件

使用 web-component-design skill 为 [framework] 设计一个可复用的 [component name]。包括 props、variants、无障碍行为和样式指导。

重构现有组件

使用 web-component-design skill 审查这个 [framework] 组件。建议更清晰的组件 API、组合模型和样式方案。

构建设计系统模式

使用 web-component-design skill 设计一个 [pattern] 组件家族。包括 root、subcomponents、状态所有权、键盘支持和使用示例。

评估跨框架架构

使用 web-component-design skill 比较 React、Vue 和 Svelte 针对 [component pattern] 的实现。推荐一种架构并解释权衡。

最佳实践

在添加视觉 variants 之前，先从语义化 HTML 和无障碍行为开始。
保持组件 API 小巧、类型化，并在整个设计系统中保持一致。
使用键盘导航、响应式布局和真实内容来测试示例。

避免

当组合能更清晰地表达相同行为时，不要添加大量一次性的 props。
在未验证允许的 URLs 和数据处理方式之前，不要将 fetch 示例复制到生产环境。
在检查无障碍性和交互状态之前，不要认为视觉样式已经完成。

常见问题

此技能会创建生产就绪的组件吗？

它提供可靠的实现模式和示例。你仍然需要项目测试、无障碍检查和视觉审查。

它涵盖哪些框架？

它涵盖 React、Vue 和 Svelte，并为共享设计系统理念提供额外指导。

它能帮助选择 CSS 策略吗？

可以。它比较 utility classes、CSS Modules、CSS-in-JS 和零运行时样式方案。

它包含无障碍指导吗？

可以。它包括 dialogs、dropdowns、comboboxes、forms、focus traps 和对比度检查的模式。

此技能可以安全发布吗？

是的。审计未发现恶意意图、凭据访问、shell 执行或 prompt injection。

为什么风险等级是低而不是安全？

这些文件包含用于说明的 fetch 和 dynamic import 示例。它们是良性的，但复制的代码仍应经过审查。

开发者详情

作者

wshobson

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

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

引用

64ca8af0f54a325752f08bd54e52151061ea659a

维护新鲜度

2026/7/21

使用量

17 次下载 · 347 次浏览

文件结构

📁 references/

📄 accessibility-patterns.md

📄 component-patterns.md

📄 css-styling-approaches.md

📄 SKILL.md