📦 Component Library Audit — 组件库审计

v1.0.0

审计 React, Vue, or Svelte 组件 libraries — find unused 组件s, inconsistent props, missing documentation, 访问ibility issues, missing tests, and...

0· 26·0 当前·0 累计

by @charlie-morrison

测试工具文档工具安全加密微信

下载技能包

安全扫描

VirusTotal

无害

查看报告

OpenClaw

安全

medium confidence

The 技能's instructions match its 状态d purpose (审计ing 组件 libraries) and 请求 no 凭证s or 安装s, but the 运行time shell 检查s are fragile (depend on ripgrep, POSIX 工具s, and may mishandle filenames) and some clAImed 检查s (访问ibility) are not visible in the provided excerpt.

评估建议

This 技能应用ears to do what it says: 运行 local shell 搜索es to 审计 a 组件库 and it 请求s no secrets. Before 安装ing/using it, be aware that: - The scripts require ripgrep (rg) and standard POSIX 工具s (find, awk, sed, grep, wc). If rg is missing the commands will fAIl. - The shell loops are line-based and may mis-handle filenames with spaces or newlines; 运行 it in a 清理仓库 or a copy/CI job, not directly on sensitive production directories. - Some clAImed 检查s (访问ibility) are not visible in the provided excerpt —...

详细分析 ▾

✓ 用途与能力

The name/description (审计 React/Vue/Svelte 组件 libraries for unused 组件s, prop inconsistencies, docs, and tests) aligns with the 技能.md: discovery, unused-组件检测ion, docs 检查s, prop consistency heuristics, and test 检测ion are implemented. The description mentions 访问ibility issues but the provided instructions do not show concrete 访问ibility 检查s (the 技能.md 应用ears t运行cated), which is an inconsistency to note.

ℹ 指令范围

All 运行time instructions are local file-系统 code 搜索es and analyses (find, rg, awk, sed, wc, etc.) limited to the 仓库 tree (explicitly excludes node_模块s, dist, build). The 技能 does not 请求 or use external 凭证s or network calls in the visible instructions. However, the shell scripts assume POSIX 环境, the presence of 'rg' (ripgrep) and other utilities, and use line-based 'while read' loops which can mishandle files with spaces or newlines; these are implementation fragilities rather than scope creep.

✓ 安装机制

There is no 安装 spec (instruction-only), so nothing will be written to disk by an 安装er. This is low-risk from an 安装-mechanism perspective. Note: the instructions depend on external binaries (e.g., rg) that are not declared or 安装ed by the 技能.

✓ 凭证需求

The 技能 declares no required 环境 variables, no 凭证s, and no config paths. The instructions operate only on 仓库 files; there is no unjustified 请求 for secrets or unrelated 服务凭证s.

✓ 持久化与权限

always:false and no 安装/persistence behavior are present. disable-模型-invocation is false (normal), which allows autonomous invocation but is the 平台 default and not by itself a red flag. The 技能 does not attempt to modify other 技能s or 系统-wide configs in the visible instructions.

安全有层次，运行前请审查代码。

运行时依赖

无特殊依赖

安装命令

点击复制

官方npx clawhub@latest install component-library-audit

镜像加速npx clawhub@latest install component-library-audit --registry https://cn.longxiaskill.com

技能文档

组件库审计

Analyze a front-end 组件库 for 质量, consistency, and completeness. Finds unused 组件s, prop inconsistencies, missing docs, 访问ibility gaps, and 测试 holes.

Use when: "审计 our 组件s", "find unused 组件s", "检查组件质量", "组件库健康", "are our 组件s consistent", "which 组件s need tests", or mAIntAIning a de签名系统.

Commands

审计 — Full 组件库审计

运行 all 检查s and produce a 健康报告.

Step 1: Discover 组件s echo "=== 组件 Discovery ==="

# React 组件s (.tsx/.jsx) echo "--- React 组件s ---" find . -type f $ -name ".tsx" -o -name ".jsx" $ \ -not -path '/node_模块s/' -not -path '/dist/' -not -path '/build/' \ -not -name '.test.' -not -name '.spec.' -not -name '.stories.' \ 2>/dev/null | while read f; do # 检查 if it 导出s a 组件 (function 启动ing with uppercase or default 导出) if rg -q "导出 (default |)(function |const )[A-Z]|导出 default class [A-Z]" "$f" 2>/dev/null; then COMP=$(rg -o "(function|const|class) ([A-Z][a-zA-Z]+)" "$f" 2>/dev/null | head -1 | awk '{print $2}') echo " $f → ${COMP:-Unnamed组件}" fi done

# Vue 组件s (.vue) echo "--- Vue 组件s ---" find . -type f -name ".vue" \ -not -path '/node_模块s/' -not -path '/dist/' \ -not -name '.test.' -not -name '.stories.' \ 2>/dev/null | while read f; do NAME=$(basename "$f" .vue) echo " $f → $NAME" done

# Svelte 组件s (.svelte) echo "--- Svelte 组件s ---" find . -type f -name ".svelte" \ -not -path '/node_模块s/' -not -path '/dist/' \ -not -name '.test.' -not -name '.stories.' \ 2>/dev/null | while read f; do NAME=$(basename "$f" .svelte) echo " $f → $NAME" done

# Count TOTAL=$(find . -type f $ -name ".tsx" -o -name ".jsx" -o -name ".vue" -o -name ".svelte" $ \ -not -path '/node_模块s/' -not -path '/dist/' -not -path '/build/' \ -not -name '.test.' -not -name '.spec.' -not -name '.stories.' 2>/dev/null | wc -l) echo "Total 组件s found: $TOTAL"

Step 2: Find Unused 组件s echo "" echo "=== Unused 组件s ==="

# 获取 all 组件 names 组件S=$(find . -type f $ -name ".tsx" -o -name ".jsx" -o -name ".vue" -o -name ".svelte" $ \ -not -path '/node_模块s/' -not -path '/dist/' \ -not -name '.test.' -not -name '.spec.' -not -name '.stories.' 2>/dev/null)

echo "$组件S" | while read f; do NAME=$(basename "$f" | sed 's/\.[^.]$//') # Skip 索引 files [ "$NAME" = "索引" ] && continue

# Count 导入s of this 组件 (excluding its own file and tests) 导入_COUNT=$(rg -c "导入.$NAME|from./$NAME['\"]|<$NAME[ />]" \ -g '.{tsx,jsx,vue,svelte,ts,js}' -g '!node_模块s' -g '!dist' \ --type-not binary 2>/dev/null | \ grep -v "$(basename "$f")" | \ awk -F: '{s+=$2} END {print s+0}')

if [ "$导入_COUNT" -eq 0 ]; then LINES=$(wc -l < "$f" 2>/dev/null || echo "?") echo " ⚠️ UNUSED: $NAME ($f) — $LINES lines" fi done

Step 3: 检查 Documentation echo "" echo "=== Documentation 检查 ==="

echo "$组件S" | while read f; do NAME=$(basename "$f" | sed 's/\.[^.]$//') DIR=$(dirname "$f")

# 检查 for JSDoc/TSDoc comments HAS_JSDOC=$(rg -c "/\\" "$f" 2>/dev/null || echo "0")

# 检查 for Storybook stories HAS_STORY=$(find "$DIR" -maxdepth 1 $ -name "${NAME}.stories." -o -name "${NAME}.story." $ 2>/dev/null | head -1)

# 检查 for README in 组件 directory HAS_README=$(find "$DIR" -maxdepth 1 -name "README" 2>/dev/null | head -1)

if [ "$HAS_JSDOC" = "0" ] && [ -z "$HAS_STORY" ] && [ -z "$HAS_README" ]; then echo " ❌ $NAME — no docs, no stories, no README" elif [ -z "$HAS_STORY" ]; then echo " ⚠️ $NAME — no Storybook story" fi done

Step 4: Prop Consistency Analysis echo "" echo "=== Prop Consistency ==="

# Find common prop naming patterns echo "--- Common Props Across 组件s ---" rg -o "interface \w+Props \{[^}]\}" -g '.tsx' -g '!node_模块s' --multiline 2>/dev/null | \ rg -o "\w+[?]?:" | sed 's/[?:]//g' | 排序 | uniq -c | 排序 -rn | head -20

# 检查 for inconsistent naming echo "" echo "--- Potential Naming Inconsistencies ---" # on命令行工具ck vs onPress vs handle命令行工具ck rg -l "onPress" -g '.{tsx,jsx}' -g '!node_模块s' 2>/dev/null | head -5 rg -l "on命令行工具ck" -g '.{tsx,jsx}' -g '!node_模块s' 2>/dev/null | head -5

# isVisible vs visible vs show rg -o "(is[A-Z]\w+|visible|show|hidden|disabled|enabled|active|selected|检查ed|open|closed)" \ -g '.{tsx,jsx}' -g '!node_模块s' 2>/dev/null | 排序 | uniq -c | 排序 -rn | head -20

# className vs class vs style rg -c "className" -g '.{tsx,jsx}' -g '!node_模块s' 2>/dev/null | awk -F: '{s+=$2} END {print "className:", s+0}' rg -c "class=" -g '*.{vue,svelte}' -g '!node_模块s' 2>/dev/null | awk -F: '{s+=$2} END {print "class:", s+0}'

# Size props: small/medium/large vs sm/md/lg echo "Size prop

数据来源：ClawHub ↗ · 中文优化：龙虾技能库