# Data Flow Designer

> Use when the team needs to understand how data moves through frontend, backend, database, jobs, auth, and external integrations. Trigger on requests to map data flow, event flow, or state transitions across the system.

- Skill: `saranskumar/data-flow-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add saranskumar/data-flow-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saranskumar/data-flow-designer/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: saranskumar (https://skillmd.com/u/saranskumar)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/saranskumar/data-flow-designer

---


# Goal
Make data movement and ownership explicit so architecture and debugging stay tractable.

# When to Use
- A feature spans multiple layers.
- Async jobs, webhooks, or AI processing complicate the path.
- Teams need clarity on where data is created, transformed, or persisted.

# Instructions
1. Identify source systems, transformations, and sinks.
2. Trace the happy path first, then failure and retry paths.
3. Mark trust boundaries, validation points, and persistence events.
4. Distinguish synchronous user-facing flow from asynchronous background flow.
5. Highlight points where duplication, staleness, or race conditions can occur.

# Constraints
- Do not confuse control flow with data flow.
- Keep ownership explicit at each hop.
- Include error and retry behavior when async work exists.

# Output Format
- Flow summary
- Step-by-step data path
- Validation/trust points
- Async and failure notes

# Examples
- "Map the data flow for report generation and email delivery."
- "How does data move through this Next.js plus Supabase stack?"