Command query visualization pattern
Skill kjuhwa/skills-hub/skills/design/command-query-visualization-pattern
Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.
npx -y skills add kjuhwa/skills-hub --skill command-query-visualization-patternAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Split-pane UI that visually separates command write paths from query read paths in CQRS systems
SKILL.md
2.0 KB, 332 tokens by cl100k_base, as published. Nobody here has run it
command-query-visualization-pattern
For command-query visualization, use a horizontally or vertically split canvas where the left/top half renders the command side (write model, aggregate, event store) and the right/bottom half renders the query side (read model, projections, denormalized views). Draw a prominent vertical divider labeled with the segregation boundary, and animate commands as colored pulses (e.g., red/orange) flowing left-to-right only through the write lane, while queries appear as distinct pulses (e.g., blue/green) that never cross into the write lane. Event propagation from write to read should be rendered as a dashed arrow crossing the divider with a visible delay indicator to reinforce eventual consistency.
Each node should expose its current state badge: commands show "pending/validating/applied/rejected", queries show "cache-hit/projecting/stale", and projections show lag in ms or event-count behind. Use consistent iconography — a gear or pen for commands, a magnifying glass or eye for queries, a funnel for projectors — so users build intuition across the three apps. Hover tooltips should reveal the exact command/query payload, the target aggregate ID, and the resulting event(s) emitted, letting learners trace cause-and-effect without losing the system-wide view.
Provide a timeline scrubber or step controller beneath the canvas so users can pause, rewind, and replay the flow. When scrubbed, both panes must stay synchronized to the same logical timestamp, and the read model should visibly "catch up" frame-by-frame as events are replayed into projectors. This makes the otherwise-invisible gap between write commit and read availability tangible.