Ux Sequence Diagram
by CANTAGESTUDIO
[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'.
Skill Details
Repository Files
1 file in this skill directory
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
Related Skills
Reactome Database
Query Reactome REST API for pathway analysis, enrichment, gene-pathway mapping, disease pathways, molecular interactions, expression analysis, for systems biology studies.
Mermaid Diagrams
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts,
Polars
Fast DataFrame library (Apache Arrow). Select, filter, group_by, joins, lazy evaluation, CSV/Parquet I/O, expression API, for high-performance data analysis workflows.
Reactome Database
Query Reactome REST API for pathway analysis, enrichment, gene-pathway mapping, disease pathways, molecular interactions, expression analysis, for systems biology studies.
Mermaidjs V11
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.
Monitoring Apis
|
Validating Performance Budgets
Validate application performance against defined budgets to identify regressions early. Use when checking page load times, bundle sizes, or API response times against thresholds. Trigger with phrases like "validate performance budget", "check performance metrics", or "detect performance regression".
Tracking Application Response Times
Track and optimize application response times across API endpoints, database queries, and service calls. Use when monitoring performance or identifying bottlenecks. Trigger with phrases like "track response times", "monitor API performance", or "analyze latency".
Databuddy
Integrate Databuddy analytics into applications using the SDK or REST API. Use when implementing analytics tracking, feature flags, custom events, Web Vitals, error tracking, LLM observability, or querying analytics data programmatically.
Datasette Plugin Writer
Guide for writing Datasette plugins. This skill should be used when users want to create or develop plugins for Datasette, including information about plugin hooks, the cookiecutter template, database APIs, request/response handling, and plugin configuration.