메뉴
[UI/UX] Visualizes user flows and screen transitions as ASCII diagrams. Represents navigation flows, user journeys, and screen-to-screen paths. Use when requesting 'flow diagram', 'user journey visualization', or 'navigation flow'.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
[Utility] Analyzes user prompts and efficiently loads only relevant rule documents. Auto-generates category-document mapping config file on first invocation by scanning project documents. Supports both automatic and manual invocation. (project)
[Dev] Extracts and organizes best practices for a given topic into a minimal tree structure (max depth 3, max 5 children per node). Use during task planning when writing subtasks in Docs/{name}_Task.md - output is added under each subtask as a concise reference guide. Pure reasoning task with strict formatting rules: keywords/noun phrases only, no prose. (project)
[Utility] Analyzes user prompts and efficiently loads only relevant rule documents. Auto-generates category-document mapping config file on first invocation by scanning project documents. Supports both automatic and manual invocation. (project)
[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'.
[Aesthetics] Positions aesthetics within art/design history, identifies what traditions it echoes, and spots clichés, generic trends, and AI-slop patterns to avoid. Outputs Critical Notes as Memo nodes in Brain canvas.
[Aesthetics] Maps aesthetic briefs to cultural references: art movements, photography, film, architecture, music, fashion. Outputs reference lists with visual language analysis. Organizes findings as Image and Memo nodes in Brain canvas.
| name | ux-flow-diagram |
| description | [UI/UX] Visualizes user flows and screen transitions as ASCII diagrams. Represents navigation flows, user journeys, and screen-to-screen paths. Use when requesting 'flow diagram', 'user journey visualization', or 'navigation flow'. |
A skill that visualizes user flows and screen transitions as ASCII diagrams.
┌─────────┐
│ Screen │ ← Screen/Page
└─────────┘
╔═════════╗
║ Screen ║ ← Start/End screen (emphasis)
╚═════════╝
((Action)) ← User action
<Decision?> ← Condition/Branch point
[Process] ← System process
───→ Unidirectional flow
←──→ Bidirectional flow
- - → Optional/conditional flow
═══→ Main flow (emphasis)
╔═══════════╗ ┌───────────┐ ╔═══════════╗
║ Start ║───→│ Step 1 │───→║ End ║
╚═══════════╝ └───────────┘ ╚═══════════╝
Yes ┌───────────┐
┌────────→│ Path A │────┐
┌───────────┐ │ └───────────┘ │ ┌───────────┐
│ Screen │───→<Decision?> ├───→│ Result │
└───────────┘ │ ┌───────────┐ │ └───────────┘
└────────→│ Path B │────┘
No └───────────┘