component-analysis
14
总安装量
8
周安装量
#23724
全站排名
安装命令
npx skills add https://github.com/jstarfilms/vibecode-protocol-suite --skill component-analysis
Agent 安装分布
opencode
7
gemini-cli
7
windsurf
7
github-copilot
7
codex
7
Skill 文档
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
Get from user or extract:
- Component Path: Full file path
- Component Name: The component name
2. Initial Examination
Read file and check:
- Code structure and organization
- Purpose and functionality
- Immediate issues
- Total lines (check 200-line rule)
3. Coding Guidelines Check
| Check | What to Look For |
|---|---|
| Size | < 200 lines (refactor if exceeded) |
| Single Responsibility | Does one thing well |
| TypeScript | Proper types, interfaces for props |
| Naming | PascalCase components, camelCase functions, handle* events |
| Hooks | Proper use of React hooks and effects |
| Documentation | TSDoc/JSDoc comments |
| Imports | Organized, no unused imports |
4. Styling Check
| Check | What to Look For |
|---|---|
| Tailwind v4 | Using @theme integration |
| Color Tokens | Using primary, accent, semantic tokens |
| Responsive | Mobile-first (sm:, md:, lg:) |
| Dark Mode | dark: variants |
| Performance | Avoiding expensive backdrop-filter |
5. Mobile-First Check
- Mobile-first breakpoints
- Touch-friendly interactions
- Responsive typography
- Container responsiveness
6. Generate Report
# Component Analysis: [Name]
**File:** `[path]`
**Lines:** [X] / 200 max
**Score:** [X]/10
## â
Compliant
- [Things done well]
## â ï¸ Warnings
- [Minor issues]
## â Violations
- [Critical issues]
## ð Recommendations
### High Priority
1. [Critical fix]
### Medium Priority
1. [Improvement]
## ð§ Suggested Fixes
[Before/After code examples]
7. Offer Next Steps
- A) Implement high-priority fixes
- B) Create feature documentation
- C) Refactor if > 200 lines
Severity Levels
- ð´ Critical: Breaking functionality, security issues
- ð¡ Major: Performance, accessibility violations
- ð¢ Minor: Code style, documentation
Common Violations
- No TypeScript interface for props â Define
interface ComponentProps - useEffect missing dependencies â Add to dependency array
- Hardcoded colors â Use Tailwind tokens
- No dark mode â Add
dark:variants - Missing alt text â Add descriptive alt attributes