sb-flows

Extract route maps, navigation edges, and UI chrome from React and Vite codebases.

18|Updated Jun 16, 2026
One-click install
npx skills add https://github.com/strongeron/storybook-workbench --skill sb-flows
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sb-flows
Source: https://github.com/strongeron/storybook-workbench/tree/main/skills/sb-flows
Command: npx skills add https://github.com/strongeron/storybook-workbench --skill sb-flows

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, python3, node, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the visibility gap in large React applications by automatically mapping routes, navigation edges, and persistent UI chrome, ensuring your audit covers the entire user journey rather than just isolated screens.

Core Features & Use Cases

  • Automated Flow Mapping: Generates a comprehensive graph of your application's routes, redirects, and navigation sources.
  • Deep-Edge Tracing: Identifies navigation triggers fired from stores or services, tracing them back to their originating pages.
  • Role-Based Audit: Visualizes how different user roles (Public, User, Admin) interact with the application graph to identify unauthorized access paths.

Quick Start

Run the sb-flows skill to extract the application routes and generate the visual flow graph for your current project.

Frequently Asked Questions about sb-flows

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map React application routes and navigation edges automatically?

You can trace store-driven navigation in React by running this Skill to perform deep-edge tracing. It identifies navigation triggers fired from stores or services and traces them back to their originating pages within the application graph.

Can I audit role-based access control across my React application graph?

Yes, you can audit role-based access across your React application graph. This Skill visualizes how different user roles like Public, User, and Admin interact with the extracted routes to identify any unauthorized access paths.

Do I need bash and python3 to extract a Vite application flow graph?

Yes, you need bash and python3 to extract a Vite application flow graph. The Skill requires both dependencies to execute its internal extraction scripts and generate the flow graph JSON artifacts for your codebase.

What is the best way to visualize persistent UI chrome and redirects in a React codebase?

The best way to visualize persistent UI chrome and redirects in a React codebase is to use an automated flow mapping tool. This Skill generates a comprehensive graph of your application's routes, redirects, and navigation sources for full visibility.

Why does my React application audit miss navigation logic fired from services?

Your React application audit misses navigation logic fired from services because isolated screens lack deep-edge tracing. This Skill solves the visibility gap by extracting store-driven navigation edges and mapping them back to their originating pages.