# jaehoonkim-x/claude-design-skills architecture

> Architecture diagram of the GitHub repository jaehoonkim-x/claude-design-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jaehoonkim-x/claude-design-skills
- Repository: https://github.com/jaehoonkim-x/claude-design-skills

## Overview

This repository is a collection of Claude Code design-review and annotation skills. A designer invokes a rubric skill—or a multi-skill wrapper—to assess a Pencil or Figma design and receive Korean Markdown findings; the annotation skill can then turn individual or aggregated findings into a visual canvas-side panel and mockups. The README documents the workflows and capabilities, but no source excerpts were provided, so the graph shows only documented relationships.

Main entry points: [`skills/design-review-all/SKILL.md`](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-review-all/SKILL.md) (Review All), [`skills/annotate-design/SKILL.md`](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/annotate-design/SKILL.md) (Design Annotator), [`skills/design-ux-nielsen-review/SKILL.md`](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-nielsen-review/SKILL.md) (Nielsen Review), [`skills/design-review-essential/SKILL.md`](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-review-essential/SKILL.md) (Review Essential)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["UI Review"]
  node_ui_critic["UI Critic<br/>[SKILL.md]"]
  node_ui_ixdf["IxDF Review<br/>[SKILL.md]"]
  node_ui_polish["UI Polish<br/>[SKILL.md]"]
  node_ui_checklist["UI Checklist<br/>[SKILL.md]"]
  node_ui_token["Token Drift<br/>[SKILL.md]"]
  node_ui_tufte["Dataviz Review<br/>[SKILL.md]"]
  node_ui_gestalt["Gestalt Review<br/>[SKILL.md]"]
  node_ui_wcag["WCAG Review<br/>[SKILL.md]"]
  node_ui_polaris["Polaris Review<br/>[SKILL.md]"]
  node_ui_erik["Erik Kennedy Review<br/>[SKILL.md]"]
end

subgraph group_ux["UX Review"]
  node_ux_laws["Laws of UX<br/>[SKILL.md]"]
  node_ux_nielsen["Nielsen Review<br/>[SKILL.md]"]
  node_ux_microcopy["Microcopy Review<br/>[SKILL.md]"]
  node_ux_norman["Norman Review<br/>[SKILL.md]"]
  node_ux_form["Form Review<br/>[SKILL.md]"]
  node_ux_states["States Review<br/>[SKILL.md]"]
  node_ux_flow["Flow Review<br/>[SKILL.md]"]
  node_ux_dark["Dark Pattern Review<br/>[SKILL.md]"]
  node_ux_walkthrough["Cognitive Walkthrough<br/>[SKILL.md]"]
  node_ux_pure["PURE Review<br/>[SKILL.md]"]
  node_ux_heart["HEART Review<br/>[SKILL.md]"]
  node_ux_toss["Toss Review<br/>[SKILL.md]"]
end

subgraph group_orchestration["Review Orchestration"]
  node_review_all["Review All<br/>[SKILL.md]"]
  node_review_essential["Review Essential<br/>[SKILL.md]"]
end

subgraph group_strategy["Strategy Review"]
  node_ceo["CEO Review<br/>[SKILL.md]"]
  node_jtbd["JTBD Review<br/>[SKILL.md]"]
end

subgraph group_annotation["Annotation"]
  node_annotate["Design Annotator<br/>[SKILL.md]"]
end

node_designer(("Designer"))
node_design_input["Design Input"]
node_review_report["Review Reports"]
node_canvas["Design Canvas"]
node_pencil["Pencil MCP"]
node_figma["Figma Console MCP"]

node_designer -->|"provides design"| node_design_input
node_designer -->|"runs reviews"| node_review_all
node_designer -->|"runs reviews"| node_review_essential
node_designer -->|"runs rubric"| node_ux_nielsen
node_design_input -->|"reviewed by"| node_review_all
node_design_input -->|"reviewed by"| node_review_essential
node_design_input -->|"reviewed by"| node_ux_nielsen
node_review_all -->|"dispatches rubric"| node_ui_critic
node_review_all -->|"dispatches rubric"| node_ui_ixdf
node_review_all -->|"dispatches rubric"| node_ui_polish
node_review_all -->|"dispatches rubric"| node_ui_checklist
node_review_all -->|"dispatches rubric"| node_ui_token
node_review_all -->|"dispatches rubric"| node_ui_tufte
node_review_all -->|"dispatches rubric"| node_ui_gestalt
node_review_all -->|"dispatches rubric"| node_ui_wcag
node_review_all -->|"dispatches rubric"| node_ui_polaris
node_review_all -->|"dispatches rubric"| node_ui_erik
node_review_all -->|"dispatches rubric"| node_ux_laws
node_review_all -->|"dispatches rubric"| node_ux_nielsen
node_review_all -->|"dispatches rubric"| node_ux_microcopy
node_review_all -->|"dispatches rubric"| node_ux_norman
node_review_all -->|"dispatches rubric"| node_ux_form
node_review_all -->|"dispatches rubric"| node_ux_states
node_review_all -->|"dispatches rubric"| node_ux_flow
node_review_all -->|"dispatches rubric"| node_ux_dark
node_review_all -->|"dispatches rubric"| node_ux_walkthrough
node_review_all -->|"dispatches rubric"| node_ux_pure
node_review_all -->|"dispatches rubric"| node_ux_heart
node_review_all -->|"dispatches rubric"| node_ux_toss
node_review_all -->|"dispatches rubric"| node_ceo
node_review_all -->|"dispatches rubric"| node_jtbd
node_review_all -->|"generates reports"| node_review_report
node_review_essential -->|"generates summary"| node_review_report
node_ux_nielsen -->|"writes findings"| node_review_report
node_designer -->|"runs annotation"| node_annotate
node_review_report -->|"provides findings"| node_annotate
node_annotate -->|"adds panel"| node_canvas
node_annotate -->|"writes via"| node_pencil
node_annotate -->|"writes via"| node_figma

click node_ui_critic "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-critic-review/SKILL.md"
click node_ui_ixdf "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-ixdf-review/SKILL.md"
click node_ui_polish "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-polish-review/SKILL.md"
click node_ui_checklist "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-checklist-review/SKILL.md"
click node_ui_token "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-token-drift-review/SKILL.md"
click node_ui_tufte "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-tufte-dataviz-review/SKILL.md"
click node_ui_gestalt "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-gestalt-review/SKILL.md"
click node_ui_wcag "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-wcag-review/SKILL.md"
click node_ui_polaris "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-polaris-ecommerce-review/SKILL.md"
click node_ui_erik "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-erik-kennedy-review/SKILL.md"
click node_ux_laws "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-lawsofux-review/SKILL.md"
click node_ux_nielsen "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-nielsen-review/SKILL.md"
click node_ux_microcopy "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-microcopy-review/SKILL.md"
click node_ux_norman "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-norman-review/SKILL.md"
click node_ux_form "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-form-review/SKILL.md"
click node_ux_states "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-states-review/SKILL.md"
click node_ux_flow "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-flow-review/SKILL.md"
click node_ux_dark "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-dark-pattern-review/SKILL.md"
click node_ux_walkthrough "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-cognitive-walkthrough-review/SKILL.md"
click node_ux_pure "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-pure-review/SKILL.md"
click node_ux_heart "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-heart-review/SKILL.md"
click node_ux_toss "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-toss-review/SKILL.md"
click node_ceo "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ceo-review/SKILL.md"
click node_jtbd "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-jtbd-review/SKILL.md"
click node_review_all "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-review-all/SKILL.md"
click node_review_essential "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-review-essential/SKILL.md"
click node_annotate "https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/annotate-design/SKILL.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_ui_critic,node_ui_ixdf,node_ui_polish,node_ui_checklist,node_ui_token,node_ui_tufte,node_ui_gestalt,node_ui_wcag,node_ui_polaris,node_ui_erik,node_review_report toneBlue
class node_ux_laws,node_ux_nielsen,node_ux_microcopy,node_ux_norman,node_ux_form,node_ux_states,node_ux_flow,node_ux_dark,node_ux_walkthrough,node_ux_pure,node_ux_heart,node_ux_toss toneAmber
class node_review_all,node_review_essential toneMint
class node_ceo,node_jtbd toneRose
class node_annotate,node_designer,node_design_input,node_canvas,node_pencil,node_figma toneIndigo
```

## Components

### UI Review

- [UI Critic](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-critic-review/SKILL.md): `skills/design-ui-critic-review/SKILL.md`
- [IxDF Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-ixdf-review/SKILL.md): `skills/design-ui-ixdf-review/SKILL.md`
- [UI Polish](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-polish-review/SKILL.md): `skills/design-ui-polish-review/SKILL.md`
- [UI Checklist](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-checklist-review/SKILL.md): `skills/design-ui-checklist-review/SKILL.md`
- [Token Drift](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-token-drift-review/SKILL.md): `skills/design-ui-token-drift-review/SKILL.md`
- [Dataviz Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-tufte-dataviz-review/SKILL.md): `skills/design-ui-tufte-dataviz-review/SKILL.md`
- [Gestalt Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-gestalt-review/SKILL.md): `skills/design-ui-gestalt-review/SKILL.md`
- [WCAG Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-wcag-review/SKILL.md): `skills/design-ui-wcag-review/SKILL.md`
- [Polaris Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-polaris-ecommerce-review/SKILL.md): `skills/design-ui-polaris-ecommerce-review/SKILL.md`
- [Erik Kennedy Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ui-erik-kennedy-review/SKILL.md): `skills/design-ui-erik-kennedy-review/SKILL.md`

### UX Review

- [Laws of UX](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-lawsofux-review/SKILL.md): `skills/design-ux-lawsofux-review/SKILL.md`
- [Nielsen Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-nielsen-review/SKILL.md): `skills/design-ux-nielsen-review/SKILL.md`
- [Microcopy Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-microcopy-review/SKILL.md): `skills/design-ux-microcopy-review/SKILL.md`
- [Norman Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-norman-review/SKILL.md): `skills/design-ux-norman-review/SKILL.md`
- [Form Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-form-review/SKILL.md): `skills/design-ux-form-review/SKILL.md`
- [States Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-states-review/SKILL.md): `skills/design-ux-states-review/SKILL.md`
- [Flow Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-flow-review/SKILL.md): `skills/design-ux-flow-review/SKILL.md`
- [Dark Pattern Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-dark-pattern-review/SKILL.md): `skills/design-ux-dark-pattern-review/SKILL.md`
- [Cognitive Walkthrough](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-cognitive-walkthrough-review/SKILL.md): `skills/design-ux-cognitive-walkthrough-review/SKILL.md`
- [PURE Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-pure-review/SKILL.md): `skills/design-ux-pure-review/SKILL.md`
- [HEART Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-heart-review/SKILL.md): `skills/design-ux-heart-review/SKILL.md`
- [Toss Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-toss-review/SKILL.md): `skills/design-ux-toss-review/SKILL.md`

### Review Orchestration

- [Review All](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-review-all/SKILL.md): `skills/design-review-all/SKILL.md`
- [Review Essential](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-review-essential/SKILL.md): `skills/design-review-essential/SKILL.md`

### Strategy Review

- [CEO Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ceo-review/SKILL.md): `skills/design-ceo-review/SKILL.md`
- [JTBD Review](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/design-ux-jtbd-review/SKILL.md): `skills/design-ux-jtbd-review/SKILL.md`

### Annotation

- [Design Annotator](https://github.com/jaehoonkim-x/claude-design-skills/blob/master/skills/annotate-design/SKILL.md): `skills/annotate-design/SKILL.md`

### Other components

- **Designer**
- **Design Input**
- **Review Reports**
- **Design Canvas**
- **Pencil MCP**
- **Figma Console MCP**

## Connections

- Designer → Design Input: provides design (evidence: `README.md`)
- Designer → Review All: runs reviews (evidence: `README.md`)
- Designer → Review Essential: runs reviews (evidence: `README.md`)
- Designer → Nielsen Review: runs rubric (evidence: `README.md`)
- Design Input → Review All: reviewed by (evidence: `README.md`)
- Design Input → Review Essential: reviewed by (evidence: `README.md`)
- Design Input → Nielsen Review: reviewed by (evidence: `README.md`)
- Review All → UI Critic: dispatches rubric (evidence: `README.md`)
- Review All → IxDF Review: dispatches rubric (evidence: `README.md`)
- Review All → UI Polish: dispatches rubric (evidence: `README.md`)
- Review All → UI Checklist: dispatches rubric (evidence: `README.md`)
- Review All → Token Drift: dispatches rubric (evidence: `README.md`)
- Review All → Dataviz Review: dispatches rubric (evidence: `README.md`)
- Review All → Gestalt Review: dispatches rubric (evidence: `README.md`)
- Review All → WCAG Review: dispatches rubric (evidence: `README.md`)
- Review All → Polaris Review: dispatches rubric (evidence: `README.md`)
- Review All → Erik Kennedy Review: dispatches rubric (evidence: `README.md`)
- Review All → Laws of UX: dispatches rubric (evidence: `README.md`)
- Review All → Nielsen Review: dispatches rubric (evidence: `README.md`)
- Review All → Microcopy Review: dispatches rubric (evidence: `README.md`)
- Review All → Norman Review: dispatches rubric (evidence: `README.md`)
- Review All → Form Review: dispatches rubric (evidence: `README.md`)
- Review All → States Review: dispatches rubric (evidence: `README.md`)
- Review All → Flow Review: dispatches rubric (evidence: `README.md`)
- Review All → Dark Pattern Review: dispatches rubric (evidence: `README.md`)
- Review All → Cognitive Walkthrough: dispatches rubric (evidence: `README.md`)
- Review All → PURE Review: dispatches rubric (evidence: `README.md`)
- Review All → HEART Review: dispatches rubric (evidence: `README.md`)
- Review All → Toss Review: dispatches rubric (evidence: `README.md`)
- Review All → CEO Review: dispatches rubric (evidence: `README.md`)
- Review All → JTBD Review: dispatches rubric (evidence: `README.md`)
- Review All → Review Reports: generates reports (evidence: `README.md`)
- Review Essential → Review Reports: generates summary (evidence: `README.md`)
- Nielsen Review → Review Reports: writes findings (evidence: `README.md`)
- Designer → Design Annotator: runs annotation (evidence: `README.md`)
- Review Reports → Design Annotator: provides findings (evidence: `README.md`)
- Design Annotator → Design Canvas: adds panel (evidence: `README.md`)
- Design Annotator → Pencil MCP: writes via (evidence: `README.md`)
- Design Annotator → Figma Console MCP: writes via (evidence: `README.md`)