Back to Details

component-analysis

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Component Analysis Skill

组件分析技能

Analyze components for coding standards compliance and provide actionable improvements.
分析组件是否符合编码规范，并提供可落地的改进建议。

When to Use

使用场景

  • Refactoring discussions
  • Before major component changes
  • When asked to "analyze" or "audit" a component
  • Code review of specific files
  • 重构讨论时
  • 组件重大变更前
  • 当需要“分析”或“审计”组件时
  • 特定文件的代码评审时

Analysis Process

分析流程

1. Identify Component

1. 识别组件

Get from user or extract:
  • Component Path: Full file path
  • Component Name: The component name
从用户处获取或提取以下信息：
  • 组件路径：完整文件路径
  • 组件名称：组件的名称

2. Initial Examination

2. 初步检查

Read file and check:
  • Code structure and organization
  • Purpose and functionality
  • Immediate issues
  • Total lines (check 200-line rule)
读取文件并检查：
  • 代码结构与组织方式
  • 用途与功能
  • 明显问题
  • 总行数（检查200行规则）

3. Coding Guidelines Check

3. 编码规范检查

CheckWhat to Look For
Size< 200 lines (refactor if exceeded)
Single ResponsibilityDoes one thing well
TypeScriptProper types, interfaces for props
NamingPascalCase components, camelCase functions, handle* events
HooksProper use of React hooks and effects
DocumentationTSDoc/JSDoc comments
ImportsOrganized, no unused imports
检查项检查内容
代码规模少于200行（若超出则需重构）
单一职责组件仅专注于完成一件事
TypeScript规范使用正确的类型，为props定义接口
命名规范组件使用PascalCase命名，函数使用camelCase命名，事件处理函数以handle*开头
Hooks使用正确使用React Hooks与副作用
文档规范添加TSDoc/JSDoc注释
导入规范导入语句有序，无未使用的导入

4. Styling Check

4. 样式检查

CheckWhat to Look For
Tailwind v4Using @theme integration
Color TokensUsing primary, accent, semantic tokens
ResponsiveMobile-first (sm:, md:, lg:)
Dark Modedark: variants
PerformanceAvoiding expensive backdrop-filter
检查项检查内容
Tailwind v4规范使用@theme集成
颜色令牌使用primary、accent、语义化令牌
响应式设计采用移动优先原则（使用sm:、md:、lg:前缀）
暗黑模式使用dark:变体
性能优化避免使用性能开销大的backdrop-filter

5. Mobile-First Check

5. 移动优先检查

  • Mobile-first breakpoints
  • Touch-friendly interactions
  • Responsive typography
  • Container responsiveness
  • 移动优先断点
  • 便于触摸的交互设计
  • 响应式排版
  • 容器响应式

6. Generate Report

6. 生成报告

markdown
undefined
markdown
undefined

Component Analysis: [Name]

Component Analysis: [Name]

File: 
[path]
Lines: [X] / 200 max Score: [X]/10
File: 
[path]
Lines: [X] / 200 max Score: [X]/10

✅ Compliant

✅ Compliant

  • [Things done well]
  • [Things done well]

⚠️ Warnings

⚠️ Warnings

  • [Minor issues]
  • [Minor issues]

❌ Violations

❌ Violations

  • [Critical issues]
  • [Critical issues]

📋 Recommendations

📋 Recommendations

High Priority

High Priority

  1. [Critical fix]
  1. [Critical fix]

Medium Priority

Medium Priority

  1. [Improvement]
  1. [Improvement]

🔧 Suggested Fixes

🔧 Suggested Fixes

[Before/After code examples]
undefined
[Before/After code examples]
undefined

7. Offer Next Steps

7. 提供后续步骤

  • A) Implement high-priority fixes
  • B) Create feature documentation
  • C) Refactor if > 200 lines
  • A) 实施高优先级修复
  • B) 编写功能文档
  • C) 若代码超过200行则进行重构

Severity Levels

严重程度分级

  • 🔴 Critical: Breaking functionality, security issues
  • 🟡 Major: Performance, accessibility violations
  • 🟢 Minor: Code style, documentation
  • 🔴 严重：影响功能正常运行、存在安全问题
  • 🟡 主要：性能问题、可访问性违规
  • 🟢 次要：代码风格问题、文档缺失

Common Violations

常见违规情况

  1. No TypeScript interface for props → Define 
    interface ComponentProps
  2. useEffect missing dependencies → Add to dependency array
  3. Hardcoded colors → Use Tailwind tokens
  4. No dark mode → Add 
    dark:
    variants
  5. Missing alt text → Add descriptive alt attributes
  1. 未为props定义TypeScript接口 → 定义
    interface ComponentProps
  2. useEffect缺失依赖项 → 添加到依赖数组中
  3. 硬编码颜色值 → 使用Tailwind令牌
  4. 未支持暗黑模式 → 添加
    dark:
    变体
  5. 缺少alt文本 → 添加描述性的alt属性