ux-sequence-diagram
Generates ASCII sequence diagrams for visualizing user-system interactions and API call flows. Shows participants, message types, and timing in text format. Useful for documenting interaction patterns without graphical tools.
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install cantagestudio-cosmicatlaspacker-ux-sequence-diagram
Repository
Skill path: .factory/skills/ux-sequence-diagram
Generates ASCII sequence diagrams for visualizing user-system interactions and API call flows. Shows participants, message types, and timing in text format. Useful for documenting interaction patterns without graphical tools.
Open repositoryBest for
Primary workflow: Research & Ops.
Technical facets: Tech Writer, Backend, Designer.
Target audience: Developers and UX designers who need quick sequence diagrams for documentation or planning.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: CANTAGESTUDIO.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install ux-sequence-diagram into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/CANTAGESTUDIO/CosmicAtlasPacker before adding ux-sequence-diagram to shared team environments
- Use ux-sequence-diagram for documentation workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
---
name: ux-sequence-diagram
description: "[UI/UX] Visualizes interaction sequences and system communications as ASCII diagrams. Represents user-system interactions, API call sequences, and event flows. Use when requesting 'sequence diagram', 'interaction flow', or 'API sequence'."
---
# UX Sequence Diagram
A skill that visualizes interaction sequences and system communications as ASCII diagrams.
## When to Use
- Defining user-system interaction sequences
- Documenting API call sequences
- Representing event flows between components
- Designing asynchronous operation sequences
## Sequence Diagram Symbols
### Participants
```
┌───────┐ ┌───────┐ ┌───────┐
│ User │ │ UI │ │Server │
└───┬───┘ └───┬───┘ └───┬───┘
│ │ │
```
### Message Types
```
────────→ Sync Request
← ─ ─ ─ ─ Sync Response
- - - - → Async Request
═══════→ Critical Message
──────X Failed/Cancelled
```
## Sequence Patterns
### Basic Request-Response
```
┌───────┐ ┌───────┐ ┌───────┐
│ User │ │ UI │ │Server │
└───┬───┘ └───┬───┘ └───┬───┘
│ │ │
│ Click Button │ │
│─────────────────→│ │
│ │ API Request │
│ │─────────────────→│
│ │ Response Data │
│ │← ─ ─ ─ ─ ─ ─ ─ ─ │
│ Update View │ │
│← ─ ─ ─ ─ ─ ─ ─ ─ │ │
↓ ↓ ↓
```
## Constraints
- Participants arranged left-to-right, closest to user first
- Time flows top-to-bottom
- Clearly distinguish sync/async messages