xiao0916/lm-skills · Archived

component-analyzer

React/Vue 组件代码分析器 - 分析已生成组件，输出依赖图、重复代码报告和拆分建议。Use when analyzing React or Vue component code to identify optimization opportunities, detect duplicate patterns, build dependency graphs, and generate refactoring suggestions.

First seen Mar 23, 2026

Installation

$ npx skills add xiao0916/lm-skills --skill component-analyzer

View on skills.sh ↗ GitHub repository ↗

Summary

React/Vue 组件代码分析器 - 分析已生成组件，输出依赖图、重复代码报告和拆分建议。Use when analyzing React or Vue component code to identify optimization opportunities, detect duplicate patterns, build dependency graphs, and generate refactoring suggestions.
Supports both JSON (machine-readable) and Markdown (human-readable) output formats.

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

psd-slicer Same source · more installs

xiao0916/lm-skills

将 Photoshop（.psd）文件的所有图层导出为独立的 PNG 图片。适用于从 PSD 文件提取图层图片、为网页…

75 installs

psd-layer-reader Same source · more installs

xiao0916/lm-skills

读取并导出 Photoshop（.psd）图层树为 JSON，?

65 installs

psd-to-preview Same source · more installs

xiao0916/lm-skills

从 PSD 设计文件到预览页面 + React 组件 + Vue 组件的完整转换工作流。

14 installs

psd-json-preview Same source · more installs

xiao0916/lm-skills

从 PSD 导出的 JSON 图层树和切片图片生成 HTML/CSS 预览。默认保留 PSD 的分组嵌套结构，用 --flatte…

6 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics

vercel-labs/agent-skills 697.8K installs

azure-hosted-copilot-sdk Shared topics

microsoft/azure-skills 440.4K installs

vercel-composition-patterns Shared topics

vercel-labs/agent-skills 326.5K installs

vercel-react-native-skills Shared topics

vercel-labs/agent-skills 205.5K installs

react:components Similar name

google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components using system-level networking an…

50.7K installs

building-components Similar name

vercel/components.build

Guide for building modern, accessible, and composable UI components. Use when building new comp…

12.5K installs

Also in this package

Other skills from xiao0916/lm-skills · top by installs.

npx skills add xiao0916/lm-skills

psd-slicer 75 psd-layer-reader 65 psd-to-preview 14 psd-json-preview 6 psd-component-splitter 4 venv-manager 3 psd-to-cocos 3 ocr-recognition 3 html-semantic-optimizer 2 docker-first-runner 2

Browse all from xiao0916/lm-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Repository health

Default branch main

Open issues 0

Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 3,848 B
docs SUMMARY.md 398 B

History

Mar 23, 2026 First seen on skills.sh
Sep 9, 2026 First recorded snapshot · 2 installs

SKILL.md

Component Analyzer - 组件代码分析器

用于分析 React/Vue 组件代码，自动解析组件结构、构建依赖关系图、检测重复模式，并生成智能的拆分建议。

快速开始

基本使用

# 分析 React 组件目录（JSON 格式输出）
py -3 .claude/skills/component-analyzer/scripts/analyze_components.py \
  --input ./react-components \
  --output ./analysis-report.json

# Markdown 格式报告
py -3 .claude/skills/component-analyzer/scripts/analyze_components.py \
  --input ./react-components \
  --format markdown

与 psd-component-splitter 配合使用

# 第一步：PSD 拆分为组件
py -3 .claude/skills/psd-component-splitter/scripts/split_components.py \
  --json layer-tree.json --images sliced-images/ \
  --out ./split-components/ --framework react

# 第二步：分析生成的组件
py -3 .claude/skills/component-analyzer/scripts/analyze_components.py \
  --input ./split-components/ --output ./component-analysis.json

命令行参数

参数	简写	必需	默认值	说明
`--input`	`-i`	✅	-	组件目录路径
`--output`	`-o`	❌	stdout	输出文件路径
`--format`	`-f`	❌	`json`	输出格式：`json` 或 `markdown`
`--framework`	-	❌	`react`	框架：`react` 或 `vue`
`--threshold`	`-t`	❌	`0.7`	相似度阈值（0.0-1.0）
`--verbose`	`-v`	❌	-	显示详细进度

核心功能

1. 组件结构分析

解析 Import/Export 语句
提取 Props 签名
分析 JSX 元素结构
检测 CSS Module 使用

2. 依赖图构建

扫描目录收集组件
解析组件间依赖关系
检测循环依赖
识别入口组件

3. 重复模式检测

Props 签名相似性（40%）
JSX 结构相似性（40%）
CSS Module 使用（20%）
层次聚类算法分组

4. 智能拆分建议

提取子组件 - 识别可复用的重复 JSX
合并组件 - 发现可合并的相似组件
Props 重构 - 统一组件接口
样式分离 - 提取共享样式
架构优化 - 检测深层嵌套

输出示例

JSON 格式

{
  "summary": {
    "total_components": 12,
    "patterns_detected": 4,
    "suggestions_count": 8
  },
  "dependency_graph": {
    "nodes": [...],
    "edges": [...]
  },
  "patterns": [...],
  "suggestions": [...]
}

Markdown 格式

包含概览统计、详细建议列表、依赖图可视化。

模块说明

scripts/

analyze_components.py - CLI 入口，整合所有功能
reactastparser.py - React 组件 AST 解析（正则实现）
dependency_graph.py - 依赖图构建与循环依赖检测
pattern_detector.py - 相似度计算与模式检测
split_suggester.py - 拆分建议生成与格式化输出

实现细节

详见 [references/IMPLEMENTATION.md](references/IMPLEMENTATION.md) 了解：

相似度计算算法
正则表达式解析模式
数据结构定义
扩展开发指南

局限性

解析能力：使用正则表达式，不支持完整 AST
框架支持：主要支持 React，Vue 支持有限
相似度计算：基于特征匹配，语义分析能力有限
性能：大型项目（>100 组件）分析可能较慢

前置依赖

Python 3.6+
输入：已生成的 React/Vue 组件目录

npx skills add xiao0916/lm-skills --skill component-analyzer