clean-code-inspector
npx skills add https://github.com/gihwan-dev/claude-code-gui --skill clean-code-inspector
Agent 安装分布
Skill 文档
-
Identify Changes:
- Run
git statusto see the current state. - Run
git diff --name-only(orgit diff --cached --name-onlyif changes are staged) to get the list of modified files. - Focus on React components and logic files (
.tsx,.ts,.jsx,.js).
- Run
-
Analyze Code (adaptive parallelism):
ë³ê²½ íì¼ ìì ë°ë¥¸ ë¶ì ì ëµ:
3ê° ì´í: ìì°¨ ë¶ì (기존 ë°©ì)
ê° íì¼ì ì§ì
git diffë¡ ê²ì¬íê³ Scorecard íë ììí¬ì ë°ë¼ íê°í©ëë¤.4ê° ì´ì: ë³ë ¬ ë¶ì
2-A: íì¼ ê·¸ë£¹í ë³ê²½ë íì¼ë¤ì ëë í 리/ê¸°ë¥ ììë³ë¡ 그룹íí©ëë¤:
- ê°ì ëë í 리ì íì¼ë¤ â íëì 그룹
- ê´ë ¨ ì»´í¬ëí¸ + í + íì â íëì 그룹
- ë 립ì ì¸ íì¼ â ê°ë³ 그룹
2-B: ë³ë ¬ ë¶ì ê° ê·¸ë£¹ì Task sub-agentë¡ ëì ë¶ìí©ëë¤:
Task call: subagent_type: "general-purpose" model: "sonnet" description: "Analyze code quality for [ê·¸ë£¹ëª ]" run_in_background: true prompt: | You are a React Clean Code Inspector. Analyze the following files for code quality using the React Clean Code Scorecard framework. Files to analyze: [íì¼ ëª©ë¡] Run `git diff -- [íì¼]` for each file to see the changes. Evaluate strictly based on these metrics: - Cyclomatic Complexity (CC): branch count in JSX, nested ternaries - Component Responsibility Score (CRS): LoC + CC + State Count + Dependency Count - Cohesion (LCOM4): hook and state connectivity - Interface Quality: props count, boolean props, naming conventions - State Architecture: colocation, global state density For each file, provide: 1. Per-metric scores with measured values 2. Status (ìí¸/주ì/ìí) for each metric 3. Specific recommendations Output as structured markdown with the Scorecard table format.모ë 그룹 ë¶ì Taskê° ìë£ë ëê¹ì§ ë기í í 결과를 ìì§í©ëë¤.
2-C: ê²°ê³¼ íµí© ì¤ì¼ì¤í¸ë ì´í°ê° 모ë 그룹ì ë¶ì 결과를 íµí©íì¬ ì ì²´ Scorecard를 ìì±í©ëë¤:
- ê·¸ë£¹ë³ ê²°ê³¼ë¥¼ ë³í©
- í¬ë¡ì¤-íì¼ ì´ì ìë³ (그룹 ê° ê²°í©ë, ê³µíµ í¨í´ ìë° ë±)
- ì ì²´ ì¢ í© ì ì ì°ì¶
CRITICAL: You must evaluate the code strictly based on the “React Clean Code Scorecard” framework provided below. Do not use generic “clean code” advice; use these specific metrics.
<FRAMEWORK_START>
리ì¡í¸ ì í리ì¼ì´ì ì ìí¤í ì² ê±´ì ì± ë° í´ë¦° ì½ë íì§ íê°ë¥¼ ìí ì ëì ì§í íë ììí¬
1. ìë¡
주ê´ì ì¸ “í´ë¦° ì½ë”ê° ìë, ì ëì ì´ê³ ê°ê´ì ì¸ ìì§ëì´ë§ ì§íë¡ íê°í©ëë¤.
2. 구조ì ë³µì¡ë (Structural Complexity)
- ìí ë³µì¡ë (CC): ì¡°ê±´ë¶ ë ëë§ ê²½ë¡, ë¶ê¸° ì 측ì .
- JSX ë´ ì¼í ì°ì°ì ì¤ì²© ë± ë¶ê¸° íë° íì¸.
- ì ì: 1
10(ìì ), 1120(주ì), 21~50(ìí), >50(ë¶ê°).
- ì¸ì§ ë³µì¡ë: ì¤ì²©ë í /ì½ë°±, JSX ê¹ì´(max-depth > 3~4 주ì), ìì¡´ì± ë°°ì´ í¬ê¸°(>5 ìí).
3. ì»´í¬ëí¸ ì± ì ì ì (CRS)
- CRS = w1(LoC) + w2(CC) + w3(SC) + w4(DC)
- Line of Code (LoC): >200ì¤ ìí, 100ì¤ ì´ë´ ê¶ì¥.
- State Count (SC): useState ê°ì. 0
3(ê±´ê°), 46(주ì), >6(ìí). - Dependency Count (DC): import ê°ì. >10ê° ì£¼ì.
- CRS ê²°ê³¼: <50(Atomic), 50-100(Boundary), >100(God Component – Refactor Alert).
4. ìì§ë(Cohesion)ì ê²°í©ë(Coupling)
- Props Drilling: Depth > 3 ì´ë©´ ë¶íìí ê²°í©.
- LCOM4 (React Hook Cohesion): ë´ë¶ ìíì ë©ìë(Effect/Callback)ê°ì ì°ê²° ê·¸ëí ë¶ì.
- LCOM4 > 1 ì´ë©´ ë¡ì§ ë¶ë¦¬ íì (커ì¤í í ë±ì¼ë¡).
5. ì»´í¬ëí¸ ì¸í°íì´ì¤ íì§
- Props ê°ì: <5(ì´ìì ), 5~7(íì©), >7(Code Smell).
- Boolean Props: ë¤ìì boolean ëì Enum/Status 문ìì´ ì¬ì© ê¶ì¥.
- Naming:
onì ëì¬(Props) /handleì ëì¬(Implementation) ì¼ê´ì±.
6. ì ì ë¶ì ì§í (ESLint)
react-hooks/rules-of-hooks: 0 ìë°max-lines-per-function: < 100no-console: 0 ìë°TypeScript noImplicitAny: 0%
7. í ì¤í¸ ê°ë¥ì± (Mutation Score)
- ë¹ì¦ëì¤ ë¡ì§ í /ì í¸ë¦¬í°ì ê²½ì° Mutation Score > 80% 목í.
8. ìí ìí¤í ì²
- State Colocation: ìíê° ì¬ì©ëë 곳과 ì¼ë§ë ê°ê¹ì´ê°.
- Global State Density: ê¼ íìí ì ì ìíì¸ì§ íì¸.
9. ì¢ í© ì¤ì½ì´ì¹´ë
íê° ê²°ê³¼ë ìë í íìì í¬í¨íì¬ ì 리í´ì¼ í©ëë¤.
ì¹´í ê³ ë¦¬ íê° í목 측ì /ê´ì°° ê° ìí (ìí¸/주ì/ìí) ë¹ê³ ë³µì¡ë ìí ë³µì¡ë (CC) … … … ê·ëª¨ ë¼ì¸ ì (LoC) … … … ì¸í°íì´ì¤ Props ê°ì … … … ê²°í©ë Props ëë¦´ë§ ê¹ì´ … … … ìì§ë LCOM4 (ì¶ì ) … … … ìì í ìì¡´ì± ì¤ì … … … <FRAMEWORK_END>
-
Generate Report:
- Create a file named
clean-code-inspect-result.mdin the project root. - Language: Korean (íêµì´). All analysis, summaries, and recommendations must be written in Korean.
- Format: Markdown.
- Content:
- Summary: High-level assessment of the changes.
- Detailed Analysis: For each modified component, provide the CRS breakdown, complexity analysis, and specific metric violations.
- Scorecard: The table defined in Section 9 of the framework.
- Recommendations: Specific refactoring actions based on the “Quality Impact” guidance.
- (ë³ë ¬ ë¶ì ì) ë¶ì ë°©ì: 그룹 구ì±ê³¼ ë³ë ¬ ë¶ì ê²°ê³¼ ìì½ í¬í¨.
- Create a file named