Skip to main content

code2flow-map-codebase

Map a Next.js App Router repo into a Code2Flow user-flow canvas end to end (init → run → read the summary → report), respecting the fixed localhost port and leaving no server running. Use when a PO or teammate asks "show me the flows / screens / how users move through this app", when a PRD needs checking against code, or before writing user stories for an existing product.

معلومات المصدر

المستودع
jangtrinh/design-os-code2flow
آخر نشاط في المصدر
٤ سبتمبر ٢٠٢٦ في ٠١:١٨
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٨
التفرعات
٤

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
name
code2flow-map-codebase
description
Map a Next.js App Router repo into a Code2Flow user-flow canvas end to end (init → run → read the summary → report), respecting the fixed localhost port and leaving no server running. Use when a PO or teammate asks "show me the flows / screens / how users move through this app", when a PRD needs checking against code, or before writing user stories for an existing product.
# code2flow-map-codebase Everything runs locally. The tool reads the target repo, drives its own dev server through a real Chrome, and writes only into `<repo>/.code2flow/` (generated, gitignored) plus the two config files below. ## Preconditions (check, do not assume) 1. `code2flow` prints its usage and exits 0 (installed globally from the tarball, or `npm run cli --` inside the tool repo). 2. The target is a Next.js App Router app (`app/` or `src/app/` with `page.tsx`). Anything else: stop and say so — other adapters are not shipped yet. 3. Google Chrome is installed (Playwright drives it; nothing is downloaded). 4. Port contract: read `<repo>/.project-agent.md` → `localhost_port`. That port, bound to `127.0.0.1`, is the only one the dev server may use. If something already answers there, report the PID (`lsof -nP -iTCP:<port> -sTCP:LISTEN`) and stop — never pick another port. ## Procedure 1. `code2flow init <repo>` — creates `code2flow.config.json` (serverUrl from the port contract), adds `.code2flow/` to `.gitignore`, appends a Code2Flow section to the repo's AGENTS.md/CLAUDE.md. Idempotent; run it every time. 2. Fill what static analysis cannot know, only when `scan` asks for it: `routeExamples` for dynamic routes (full paths such as `/products/omniact`, never bare slugs), `features` when the top URL segment is a poor grouping. 3. `code2flow run <repo>` — starts the dev server (config `devCommand`, default `npm run dev`; it is executed with the shell inside the target repo, so treat it like a package script and review it in an unfamiliar repo), then scan → snapshot → stories validate → lint → export, and stops the server. Pass `--url http://127.0.0.1:<port>` instead when the user already runs the server. Budget: 1–3 minutes for 20 screens; a cold Turbopack compile can add a minute. 4. Exit codes of `run`: **0** ran, no lint error · **1** ran, lint found a broken link · **2** did not run (no `serverUrl`, port already answers, dev server failed, malformed `code2flow.stories.json`) — on 2 there is no `run-summary.json`; fix the cause, do not retry blindly. Read `<repo>/.code2flow/run-summary.json` and the `scan` lines. Every parser gap is a counter, never a crash: `needs-sample` (dynamic route without URL), `capture-failed`, `login-redirect` (app behind a login → `code2flow login <repo> --url …` once, then `run` again), `route-example-not-matching-route`. 5. Deliver: the export path (`.code2flow/export/<repo>-flows.html`, opens offline, safe to send), or `code2flow serve <repo>` on `127.0.0.1:4317` for a live session; plus the lint summary (broken links = errors, orphans/dead-ends = warnings, low-confidence = review items with `file:line`). ## Reporting contract ``` Status: DONE | DONE_WITH_CONCERNS Screens: <routes> routes + <n> state screens · Edges: high/medium/low · Captured: x/y Gaps: <counters that need a human: needs-sample list, login-gated, capture-failed> Lint: <errors> errors (broken links), <warnings> warnings, <info> to review Export: <path> (<MB>) ``` ## Rules - Never edit the target's source to make the tool happier; record the pattern the parser missed in the report instead (it becomes a parser test). - Never leave `next dev` running (`run` stops what it started; if you started a server by hand, stop it). - Screenshots may contain real data when a login session is used; `export` prints a reminder — pass it on. - Do not commit `.code2flow/`; do commit `code2flow.config.json` and `code2flow.stories.json` when the owner agrees.
عرض على GitHub