freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.2

package/dist/assets/engineering/skills-superpowers/subagent-driven-development/dispatch-and-review-rules.md

@@ -0,0 +1,74 @@
+# Dispatch and review rules
+
+Read this when you are composing a dispatch prompt (implementer, fix, or reviewer) or
+when you are waiting on a child and wondering whether to keep waiting.
+
+## The implementer dispatch
+
+- **Task brief:** before dispatching an implementer, run this skill's
+  `scripts/task-brief PLAN_FILE N` — it extracts the task's full text to a
+  uniquely named file and prints the path. Compose the dispatch so the
+  brief stays the single source of
+  requirements. Your dispatch should contain: (1) one line on where this
+  task fits in the project; (2) the brief path, introduced as "read this
+  first — it is your requirements, with the exact values to use verbatim";
+  (3) interfaces and decisions from earlier tasks that the brief cannot
+  know; (4) your resolution of any ambiguity you noticed in the brief;
+  (5) the report-file path and report contract. Exact values (numbers,
+  magic strings, signatures, test cases) appear only in the brief. Never
+  make a subagent read the whole plan file.
+- **Report file:** name the implementer's report file after the brief
+  (brief `…/task-N-brief.md` → report `…/task-N-report.md`) and put it in
+  the dispatch prompt. The implementer writes the full report there and
+  returns only status, commits, a one-line test summary, and concerns.
+- A dispatch prompt describes one task, not the session's history. Do not
+  paste accumulated prior-task summaries ("state after Tasks 1-3") into
+  later dispatches — a real session's dispatch hit 42k chars of which 99%
+  was pasted history. A fresh subagent needs its task, the interfaces it
+  touches, and the global constraints. Nothing else.
+- The dispatch carries the no-subagents contract (it is in the
+  implementer template): the implementer never dispatches subagents —
+  not helpers, and never a reviewer. Review arrives from you, after the
+  report. In real sessions, every reviewer a worker spawned duplicated
+  the task review the controller dispatched anyway — a full extra
+  review seat per task.
+- If an earlier task parked a finding in the area this task touches, carry
+  a pointer to that ledger entry in the dispatch.
+- Record the implementer's agent identity from the dispatch result —
+  fix-loop rounds 1-3 resume this agent.
+- Never dispatch multiple implementation subagents in parallel (conflicts).
+
+## The review dispatch
+
+- **Reviewer inputs:** the task reviewer gets three paths — the same brief
+  file, the report file, and the review package — plus the global
+  constraints that bind the task.
+- The global-constraints block you hand the reviewer is its attention
+  lens. Copy the binding requirements verbatim from the plan's Global
+  Constraints section or the spec: exact values, exact formats, and the
+  stated relationships between components ("same layout as X", "matches
+  Y"). The reviewer's template already carries the process rules (YAGNI,
+  test hygiene, review method) — the constraints block is for what THIS
+  project's spec demands.
+- Do not add open-ended directives like "check all uses" or "run race tests
+  if useful" without a concrete, task-specific reason
+- Do not ask a reviewer to re-run tests the implementer already ran on the
+  same code — the implementer's report carries the test evidence
+- Do not pre-judge findings for the reviewer — never instruct a reviewer to
+  ignore or not flag a specific issue. If you believe a finding would be a
+  false positive, let the reviewer raise it and adjudicate it in the review
+  loop. If the prompt you are writing contains "do not flag," "don't treat X
+  as a defect," "at most Minor," or "the plan chose" — stop: you are
+  pre-judging, usually to spare yourself a review loop.
+
+## Waiting on dispatched subagents
+
+Never poll a wait interface with short timeouts, and never sit in one silent,
+open-ended wait either. While you have local work — ledger updates, packaging
+the next review, reading reports — keep working; child results arrive on their
+own. When you are genuinely idle, wait in bounded stretches (five to ten
+minutes, where your platform allows), and between stretches post one line of
+status and reconcile your live children: list them, and chase any that finished
+without reporting. A bounded stretch keeps nearly all of a long wait's
+efficiency while guaranteeing a stuck or lost child is noticed within minutes,
+not at the end of the session.

package/dist/assets/engineering/skills-superpowers/subagent-driven-development/example-workflow.md

@@ -0,0 +1,70 @@
+# Example workflow
+
+A run end to end: two tasks, one completing clean and one through a fix round, then the
+final review. Read it when the shape of the loop is clear but the artifacts (briefs,
+review packages, ledger lines) are not.
+
+```
+You: I'm using Subagent-Driven Development to execute this plan.
+
+[Setup: worktree verified]
+[Read plan file once: docs/superpowers/plans/feature-plan.md]
+[Resolve workspace: scripts/sdd-workspace docs/superpowers/plans/feature-plan.md — no ledger inside, fresh start]
+[Create todos for all tasks]
+
+Task 1: Hook installation script
+
+[Run task-brief for Task 1; dispatch implementer with brief + report paths + context]
+
+Implementer: "Before I begin - should the hook be installed at user or system level?"
+
+You: "User level (~/.config/superpowers/hooks/)"
+
+Implementer: [Later]
+  - Implemented install-hook command
+  - Added tests, 5/5 passing
+  - Self-review: Found I missed --force flag, added it
+  - Committed
+
+[Run review-package PLAN_FILE BASE HEAD; dispatch task reviewer with the printed path]
+Task reviewer: Spec PASS - all requirements met, nothing extra.
+  Strengths: Good test coverage, clean. Issues: None. Task quality: Approved.
+
+[Ledger: Task 1: complete (commits a1b2c3d..d4e5f6a, review clean)]
+
+Task 2: Recovery modes
+
+[Run task-brief for Task 2; dispatch implementer with brief + report paths + context]
+
+Implementer: [No questions]
+  - Added verify/repair modes
+  - 8/8 tests passing
+  - Committed
+
+[Run review-package PLAN_FILE BASE HEAD; dispatch task reviewer with the printed path]
+Task reviewer: Spec FAIL:
+  - Missing: Progress reporting (spec says "report every 100 items")
+  Issues (Important): Magic number (100)
+
+[Fix round 1: resume the implementer with both findings]
+Implementer: Added progress reporting, extracted PROGRESS_INTERVAL constant.
+  Re-ran test/recovery.test.js — 10/10 passing. Fix report appended.
+
+[Run review-package PLAN_FILE FIX_BASE HEAD; dispatch scoped re-review]
+Re-reviewer: Missing progress reporting — ADDRESSED (src/recovery.js:41).
+  Magic number — ADDRESSED (src/recovery.js:7). New breakage: none.
+  Verdict: all findings addressed.
+
+[Ledger: Task 2: fix round 1/5 (2 addressed, 0 open; commits d4e5f6a..b7c8d9e)]
+[Ledger: Task 2: complete (commits d4e5f6a..b7c8d9e, review clean)]
+
+...
+
+[After all tasks]
+[Run review-package PLAN_FILE MERGE_BASE HEAD; dispatch final code-reviewer, most capable model]
+Final reviewer: All requirements met. Deferred minors triaged: none block merge.
+
+[Delete this plan's workspace — the record now lives in git]
+
+Done! Using /finishing-a-development-branch.
+```

package/dist/assets/engineering/skills-superpowers/subagent-driven-development/model-selection.md

@@ -0,0 +1,40 @@
+# Model selection
+
+Read this when you are about to dispatch an implementer or a reviewer and the tier is
+not obvious, or when a subagent came back BLOCKED and the question is whether the model
+was the reason.
+
+Use the least powerful model that can handle each role to conserve cost and increase speed.
+
+**Mechanical implementation tasks** (isolated functions, clear specs, 1-2 files): use a fast, cheap model. Most implementation tasks are mechanical when the plan is well-specified.
+
+**Integration and judgment tasks** (multi-file coordination, pattern matching, debugging): use a standard model.
+
+**Architecture and design tasks**: use the most capable available model.
+The final whole-branch review is one of these — dispatch it on the most
+capable available model, not the session default.
+
+**Review tasks**: choose the model with the same judgment, scaled to the
+diff's size, complexity, and risk. A small mechanical diff does not need the
+most capable model; a subtle concurrency change does. Scoped re-reviews of
+small fix diffs take a cheap-to-mid tier.
+
+**Fix-loop escalation (rounds 4-5)**: use a model at least one tier above
+the implementer that got stuck.
+
+**Always specify the model explicitly when dispatching a subagent.** An
+omitted model inherits your session's model — often the most capable and
+most expensive — which silently defeats this section.
+
+**Turn count beats token price.** Wall-clock and context cost scale with how
+many turns a subagent takes, and the cheapest models routinely take 2-3× the
+turns on multi-step work — costing more overall. Use a mid-tier model as the
+floor for reviewers and for implementers working from prose descriptions.
+When the task's plan text contains the complete code to write, the
+implementation is transcription plus testing: use the cheapest tier for
+that implementer. Single-file mechanical fixes also take the cheapest tier.
+
+**Task complexity signals (implementation tasks):**
+- Touches 1-2 files with a complete spec → cheap model
+- Touches multiple files with integration concerns → standard model
+- Requires design judgment or broad codebase understanding → most capable model

package/dist/assets/engineering/skills-superpowers/subagent-driven-development/process-diagrams.md

@@ -0,0 +1,92 @@
+# Process diagrams
+
+Both graphs here render the procedure in [SKILL.md](SKILL.md): the first is the "which
+Skill is this" decision, the second is one task's flow plus the branch to the final
+review. Read them when a map is easier to hold than the prose, or when a plan turns out
+to be at a boundary the prose describes only in passing (tightly coupled tasks, a
+parallel session, a breaker that trips).
+
+## Which Skill
+
+```dot
+digraph when_to_use {
+    "Have implementation plan?" [shape=diamond];
+    "Tasks mostly independent?" [shape=diamond];
+    "Stay in this session?" [shape=diamond];
+    "subagent-driven-development" [shape=box];
+    "executing-plans" [shape=box];
+    "Manual execution or brainstorm first" [shape=box];
+
+    "Have implementation plan?" -> "Tasks mostly independent?" [label="yes"];
+    "Have implementation plan?" -> "Manual execution or brainstorm first" [label="no"];
+    "Tasks mostly independent?" -> "Stay in this session?" [label="yes"];
+    "Tasks mostly independent?" -> "Manual execution or brainstorm first" [label="no - tightly coupled"];
+    "Stay in this session?" -> "subagent-driven-development" [label="yes"];
+    "Stay in this session?" -> "executing-plans" [label="no - parallel session"];
+}
+```
+
+## The per-task loop
+
+```dot
+digraph process {
+    rankdir=TB;
+
+    subgraph cluster_per_task {
+        label="Per Task";
+        "Dispatch implementer subagent (./implementer-prompt.md)" [shape=box];
+        "Implementer asks questions?" [shape=diamond];
+        "Answer questions, provide context" [shape=box];
+        "Implementer implements, tests, commits, self-reviews" [shape=box];
+        "Generate review package, dispatch task reviewer (./task-reviewer-prompt.md)" [shape=box];
+        "Spec PASS and quality approved?" [shape=diamond];
+        "Finding conflicts with plan text?" [shape=diamond];
+        "Rule on the conflict, ledger the ruling" [shape=box];
+        "Fix round R of 5: R≤3 resume implementer; R≥4 fresh implementer, more capable model" [shape=box];
+        "Dispatch scoped re-review (./re-review-prompt.md)" [shape=box];
+        "All findings addressed?" [shape=diamond];
+        "R = 5?" [shape=diamond];
+        "Adjudicate each open finding" [shape=box];
+        "Any load-bearing finding?" [shape=diamond];
+        "Rule and continue; stop only if every path forward is a guess" [shape=box];
+        "Park findings in ledger with rulings" [shape=box];
+        "Append completion to ledger, mark todo complete" [shape=box];
+    }
+
+    "Setup: worktree, ledger check, read plan, pre-flight review" [shape=box];
+    "More tasks remain?" [shape=diamond];
+    "Dispatch final code reviewer (final-reviewer-prompt.md)" [shape=box];
+    "Final findings? ONE fix dispatch, one scoped re-review, adjudicate residuals" [shape=box];
+    "Final review clean: delete this plan's workspace" [shape=box];
+    "Use /finishing-a-development-branch" [shape=box style=filled fillcolor=lightgreen];
+
+    "Setup: worktree, ledger check, read plan, pre-flight review" -> "Dispatch implementer subagent (./implementer-prompt.md)";
+    "Dispatch implementer subagent (./implementer-prompt.md)" -> "Implementer asks questions?";
+    "Implementer asks questions?" -> "Answer questions, provide context" [label="yes"];
+    "Answer questions, provide context" -> "Implementer implements, tests, commits, self-reviews";
+    "Implementer asks questions?" -> "Implementer implements, tests, commits, self-reviews" [label="no"];
+    "Implementer implements, tests, commits, self-reviews" -> "Generate review package, dispatch task reviewer (./task-reviewer-prompt.md)";
+    "Generate review package, dispatch task reviewer (./task-reviewer-prompt.md)" -> "Spec PASS and quality approved?";
+    "Spec PASS and quality approved?" -> "Append completion to ledger, mark todo complete" [label="yes"];
+    "Spec PASS and quality approved?" -> "Finding conflicts with plan text?" [label="no"];
+    "Finding conflicts with plan text?" -> "Rule on the conflict, ledger the ruling" [label="yes"];
+    "Rule on the conflict, ledger the ruling" -> "Fix round R of 5: R≤3 resume implementer; R≥4 fresh implementer, more capable model";
+    "Finding conflicts with plan text?" -> "Fix round R of 5: R≤3 resume implementer; R≥4 fresh implementer, more capable model" [label="no"];
+    "Fix round R of 5: R≤3 resume implementer; R≥4 fresh implementer, more capable model" -> "Dispatch scoped re-review (./re-review-prompt.md)";
+    "Dispatch scoped re-review (./re-review-prompt.md)" -> "All findings addressed?";
+    "All findings addressed?" -> "Append completion to ledger, mark todo complete" [label="yes"];
+    "All findings addressed?" -> "R = 5?" [label="no"];
+    "R = 5?" -> "Fix round R of 5: R≤3 resume implementer; R≥4 fresh implementer, more capable model" [label="no - next round"];
+    "R = 5?" -> "Adjudicate each open finding" [label="yes - breaker trips"];
+    "Adjudicate each open finding" -> "Any load-bearing finding?";
+    "Any load-bearing finding?" -> "Rule and continue; stop only if every path forward is a guess" [label="yes"];
+    "Any load-bearing finding?" -> "Park findings in ledger with rulings" [label="no"];
+    "Park findings in ledger with rulings" -> "Append completion to ledger, mark todo complete";
+    "Append completion to ledger, mark todo complete" -> "More tasks remain?";
+    "More tasks remain?" -> "Dispatch implementer subagent (./implementer-prompt.md)" [label="yes"];
+    "More tasks remain?" -> "Dispatch final code reviewer (final-reviewer-prompt.md)" [label="no"];
+    "Dispatch final code reviewer (final-reviewer-prompt.md)" -> "Final findings? ONE fix dispatch, one scoped re-review, adjudicate residuals";
+    "Final findings? ONE fix dispatch, one scoped re-review, adjudicate residuals" -> "Final review clean: delete this plan's workspace";
+    "Final review clean: delete this plan's workspace" -> "Use /finishing-a-development-branch";
+}
+```

package/dist/assets/engineering/skills-superpowers/subagent-driven-development/setup-and-ledger.md

@@ -0,0 +1,75 @@
+# Setup: the workspace, the ledger, and the pre-flight scan
+
+Read this at skill start, and again after any compaction. Everything here exists so a
+controller that lost its place does not re-dispatch work it already finished — the
+single most expensive failure observed in real sessions.
+
+## The workspace
+
+Each plan owns a workspace: at skill start, run this skill's
+`scripts/sdd-workspace PLAN_FILE` — it prints the plan's git-ignored
+directory (`<repo-root>/.superpowers/sdd/<plan-basename>/`), home to
+every artifact for THIS plan: ledger, briefs, reports, review packages.
+Another plan's directory is never yours to read or write.
+
+## The ledger
+
+- Check for this plan's ledger at `<workspace>/progress.md`. If its first
+  line names your plan file, tasks with a `Task <N>: complete` line are DONE
+  — do not re-dispatch them; resume at the first task without one. A task
+  whose last line is a fix round is mid-loop: resume the loop at the next
+  round. A ledger whose first line names a different plan file — or a stray
+  ledger at the old flat path `.superpowers/sdd/progress.md` — is another
+  plan's progress: leave it in place and start your own, fresh.
+- Create the ledger with its identity as the first line:
+  `# SDD ledger — plan: <plan file path>`.
+- The ledger is your recovery map: the commits it names exist in git even
+  when your context no longer remembers creating them. After compaction,
+  trust the ledger and `git log` over your own recollection.
+- `git clean -fdx` will destroy the workspace (it's git-ignored scratch); if
+  that happens, recover from `git log`.
+
+The lines you will append, in the order you will write them:
+
+| Line | When |
+|---|---|
+| Pre-flight scan table (below) | before Task 1 |
+| `Task <N>: complete (commits <base7>..<head7>, review clean)` | clean review |
+| `Task <N>: complete (commits <base7>..<head7>, <K> parked)` | after a tripped breaker |
+| `Task <N>: fix round <R>/5 (<X> addressed, <Y> open — <finding one-liners>; commits <a7>..<b7>)` | after each fix round |
+| `Task <N>: minor (deferred): <one-liner>` | as Minor findings arrive |
+| `Task <N>: parked — <finding> — Ruling: <why the code stands>` | adjudication at the cap |
+| `Task <N>: Ruling: <finding> — <what you decided and why>` | load-bearing adjudication |
+| `Ruling: <what you decided> — <why> — <what it costs if wrong>` | any other decision the plan or spec did not answer |
+
+## Reading the plan
+
+Read the plan once, note its context and Global Constraints, and create a
+todo per task. If the plan names a Spec, read that too: the spec is the
+authority the plan argues from, and conflicts inside the plan resolve
+against it. A plan with no reachable spec gets a ledger note saying so —
+rulings made without one are provisional.
+
+## The pre-flight conflict scan
+
+Before dispatching Task 1, scan the plan once for conflicts, writing down
+what you checked as you check it:
+
+- tasks that contradict each other or the plan's Global Constraints
+- anything the plan explicitly mandates that the review rubric treats as a
+  defect (a test that asserts nothing, verbatim duplication of a logic block)
+
+The scan's output is a table, not a verdict. One row for every pair of tasks
+that share a file or an interface: the two tasks, what one produces against
+what the other consumes, and what you found. One row for every task: whether
+its own text agrees with itself — the tests it specifies against the code it
+specifies, the files it creates against the files it later touches. "The scan
+is clean" without those rows is not a scan you ran.
+
+Write the table to the ledger. Rule on everything you find before execution
+begins — each finding against the plan text that mandates it — and record
+each ruling in the ledger. If the scan is clean, proceed without comment.
+Rule on each conflict it surfaces — the spec is the binding authority, the
+plan is its argument — record the ruling beside its row, and dispatch
+Task 1. The review loop remains the net for conflicts that only emerge from
+implementation.

package/dist/assets/uiux/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Next Level Builder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/assets/uiux/PROVENANCE.md

@@ -0,0 +1,110 @@
+# UI/UX Pro Max catalogue provenance
+
+| Project | UI/UX Pro Max Skill |
+|---|---|
+| Repository | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill |
+| License | MIT |
+
+The CSV data under `data/` are vendored third-party data from
+[nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill).
+They are not covered by this package's AGPL-3.0-only license; this directory's
+`LICENSE` carries the upstream MIT terms.
+
+## Source and snapshot
+
+| | |
+|---|---|
+| Project | UI/UX Pro Max Skill |
+| Repository | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill |
+| Snapshot commit | `823b0a14d3539b5d78c0efb614426a4fab5983ec` |
+| Snapshot commit date | 2026-09-26 |
+| License | MIT |
+| Copyright | Copyright (c) 2024 Next Level Builder |
+
+The 12 core CSV files match their GitHub blob IDs at the snapshot commit. Twenty-one
+of the 22 stack CSVs match the tree at the snapshot's first parent
+`d62fe62f88acb6755d2e5819a1b1e19eb447a8f1`. `data/stacks/threejs.csv` is the
+intentional exception: it is the newer r185 API correction, matching upstream blob
+`f62286320038beabbdc5e11e07ca2818d8e959a4` at commit
+`6c69cb5058f66f632109f15a899f9e8fe63f7eca`. That upstream correction replaces
+deprecated Three.js Clock and PCFSoftShadowMap usage; the mixed-source choice is
+recorded, not presented as a single-tree snapshot.
+
+| Data file | SHA-256 |
+|---|---|
+| `data/app-interface.csv` | `331e7cf2c0b222d80c566c5f255c63cb339f65bfd02e471a720f28e4864a9f08` |
+| `data/charts.csv` | `4115cf1120680f2cedef0676cb648f30c7ef4699e2a947535d4113e71ed3b12a` |
+| `data/colors.csv` | `8162429222bce22df62b564085946a30d07cc9722c58d0a3a494bd0d1d00841c` |
+| `data/icons.csv` | `50816c6012030178195a16ee481ebf58b47bd985d70e8ec58886cc83f6eddafc` |
+| `data/landing.csv` | `9a2edd3bb676c2a58f00ade7a062e285222d4297bfd847c8d5b056f0dbbf52d0` |
+| `data/motion.csv` | `381affe8df8ea1f66fbbda2598827f9f54299107bbe6a1b4e9b68f6b62091ceb` |
+| `data/products.csv` | `42473f75e8dde5987bdf89ce55d8c168091b80a356cae691dd60247d80720b70` |
+| `data/react-performance.csv` | `3d925802539abac5afeb63ae8aa1960b7229ad271b3a47caed40ab2d97ad0734` |
+| `data/stacks/angular.csv` | `704be83f2bad30c7e6de01afb113ffa01e0c458762f48b7102f31ba2367b5553` |
+| `data/stacks/astro.csv` | `2c2f55fadaafc05e04cc321c8194a1a28b656e6757fe2ba316f41b16428299c6` |
+| `data/stacks/avalonia.csv` | `442fca14675a020683473e7e49f08abb27b9df0765c80efe54aef61f1a4ac258` |
+| `data/stacks/flutter.csv` | `64dba0ac17349f28bce517a0f5f48c54d9ed2e487ec0c0258303463b382f41a0` |
+| `data/stacks/html-tailwind.csv` | `d05a581d20af57b8ca0104a6d31d90a07c437d500662a96c3029fc2f9a4678ee` |
+| `data/stacks/javafx.csv` | `2e819b8d5abdd23ad4dae0991650fdb57af497aabd68b37463aa9c442944c869` |
+| `data/stacks/jetpack-compose.csv` | `699de218b286948eaec7d15767b6e1350ee299167e49bf476d82e3ff58724e0a` |
+| `data/stacks/laravel.csv` | `854ea4daa5fc61292d22235ad33b49ba3fe22423c3de8d3cb03758ffed3b59f9` |
+| `data/stacks/nextjs.csv` | `ecd2c27b2ea0127d203ae726060efcdd7335b5e83f96b99e4f3befbbfeebd5a4` |
+| `data/stacks/nuxt-ui.csv` | `fce682a338cfcdbf35d318d20e5befbe7b5d81b05abc37f87677a6d9cde84dc6` |
+| `data/stacks/nuxtjs.csv` | `3d9b54ed2d151bd9c86e9e5609b8a6f88a00c4c52fa601a30af96c49b2c4d176` |
+| `data/stacks/react-native.csv` | `ba31dd9c0c04da6bc02a74448bf121f9c0728ae5ba3b4d47b487778b0a1135b5` |
+| `data/stacks/react.csv` | `4dd176a9787e5c6306b5df94158d75955adcdc6edab41ce5286641a5842303c1` |
+| `data/stacks/shadcn.csv` | `e56cfde5b74907836ac3582a4779d5b7f3d206a702ab81b8669a1b668c3eeb51` |
+| `data/stacks/svelte.csv` | `f6e379ba802941ba26b01d4ffbe3cd39120f2587659a1d93851c707f66bc13db` |
+| `data/stacks/swiftui.csv` | `bdd9231ff3ad658f4e7c063e1eb49df2fd09ac8d90631a86df899b39833b9623` |
+| `data/stacks/threejs.csv` | `97542e0ba34915a0ff7578be20e1619495df47c95c8c1c39b83e3785e1de771f` |
+| `data/stacks/uno.csv` | `a0474363e4225b5367214d5675fd3e075f137026f9500f0d04357882ef4f6d48` |
+| `data/stacks/uwp.csv` | `c409f08c1fbba1f1029f1acaa554e7b4471cc85517a5751c9f2e62465badcd5c` |
+| `data/stacks/vue.csv` | `b655f1ebb9dff2652d15981f31b1784c8a6d4759efd2815a14f3088257569f95` |
+| `data/stacks/winui.csv` | `e676dc1c13ee6c205c40b0746f1335150a346c7a49a0616d2545bc3d2c930c85` |
+| `data/stacks/wpf.csv` | `9781a9950b20333637b30a02e498b7efca21b618a3eeb8665836f3ac6e974da7` |
+| `data/styles.csv` | `a93a4d9d7025856575d7b7583bda020be9043013432c5af7c58af9dbdfb206b7` |
+| `data/typography.csv` | `321fc446e89024488ebae96dda93efc4d2307bd8bddb240857ad51364f6782c8` |
+| `data/ui-reasoning.csv` | `f0774dd741cecdad5eec842034bd6d5e9ea50e9f220a1910069748daa0bb8e9a` |
+| `data/ux-guidelines.csv` | `ff81ec613f70ba9fc3fcce52dbe4ae35d44b2079dbe6dc066d2d6e38c28facd5` |
+
+SHA-256 values are exact-byte pins; the upstream source tree identifies the
+corresponding Git blob IDs. `tests/uiux-data-store.spec.ts` asserts headers,
+row counts, and the inventory on the shipped files. A changed hash or count is a
+sync/recalibration review signal, not permission to silently alter this record.
+
+## Included scope and exclusions
+
+The package carries 12 core CSVs (11 routed domains plus auxiliary reasoning profiles)
+and 22 framework-stack CSVs: 34 tables, 2,385 rows, about 1.05 MB. UWP is
+retained because upstream explicitly includes its legacy-only guidance. The search engine, CSV parser, data loader, and identity
+resolver are local TypeScript ports.
+
+Deliberately excluded: `google-fonts.csv` and `google-font-licenses.json` (a
+separate roughly 1.18 MB raw-family/license dictionary),
+`phosphor-icons-upstream.json` (the full roughly 824 KB icon dictionary),
+platform-specific Skill wrappers and Python scripts, and the design-system
+formatter/persistence code. The curated typography pairings and `icons.csv` remain
+included. No tool writes generated files into a user's project.
+
+## License
+
+MIT License
+Copyright (c) 2024 Next Level Builder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/assets/uiux/data/app-interface.csv

@@ -0,0 +1,33 @@
+No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Accessibility,Icon Button Labels,icon button accessibilityLabel,iOS/Android/React Native,Icon-only buttons must expose an accessible label,Set accessibilityLabel or label prop on icon buttons,Icon buttons without accessible names,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>",<Pressable><XIcon /></Pressable>,Critical
+2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,All inputs must have a visible label and an accessibility label,Pair Text label with input and set accessibilityLabel,Inputs with placeholder only,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
+3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,Interactive elements must expose correct roles/traits,Use accessibilityRole/button/link/checkbox etc.,Rely on generic views with no roles,"<Pressable accessibilityRole=""button"">Submit</Pressable>",<View onTouchStart={submit}>Submit</View>,High
+4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,Async status updates should be announced to screen readers,Use accessibilityLiveRegion or announceForAccessibility,Update text silently with no announcement,"<Text accessibilityLiveRegion=""polite"">{status}</Text>",<Text>{status}</Text>,Medium
+5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,Decorative icons should be hidden from screen readers,Mark decorative icons as not accessible,Have screen reader read every icon,"<Icon accessible={false} importantForAccessibility=""no"" />",<Icon />,Medium
+6,Touch,Touch Target Size,touch target size platform runtime arbitration iOS 44pt Android 48dp web 24 CSS px React Native hitSlop,iOS/Android/React Native,Native targets use 44pt on iOS and 48dp on Android; web WCAG 2.2 has a separate 24 by 24 CSS px minimum with exceptions,Select 44pt for iOS and 48dp for Android at runtime; evaluate web targets separately against WCAG 2.5.8 and its exceptions,"Collapse iOS 44pt, Android 48dp, and web 24 CSS px into one cross-platform number","Platform.select({ ios: 44, android: 48 }); // web: evaluate 24 CSS px + WCAG exceptions",<Pressable><Icon size={16} /></Pressable>,Critical
+7,Touch,Touch Spacing,touch spacing gap 8px,iOS/Android/React Native,Adjacent touch targets need enough spacing,Keep at least 8dp spacing between touchables,Cluster many buttons with no gap,<View style={{ gap: 8 }}><Button ... /><Button ... /></View>,<View><Button ... /><Button ... /></View>,Medium
+8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,Custom gestures must not break system scroll/back,Reserve horizontal swipes for carousels,Full-screen custom swipe conflicting with back,HorizontalPager inside vertical ScrollView,PanResponder on full screen blocking back,High
+9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,Back navigation should be predictable and preserve state,Use navigation.goBack and keep screen state,Reset stack or exit app unexpectedly,onPress={() => navigation.goBack()},BackHandler.exitApp() on first press,Critical
+10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,Bottom tab bar should have at most 5 primary items,Use 3–5 tabs and move extras to More/Settings,Overloaded tab bar with many icons,Home/Explore/Profile/Settings,Home/Explore/Shop/Cart/Profile/Settings/More,Medium
+11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,Modals/sheets must have clear close actions,Provide close button and swipe-down where platform expects,Trapping users in modal with no obvious exit,"<Modal><Button title=""Close"" onPress={onClose} /></Modal>",<Modal><View>{children}</View></Modal>,High
+12,State,Preserve Screen State,navigation preserve state,iOS/Android/React Native,Returning to a screen should restore its scroll and form state,Keep components mounted or persist state,Reset list scroll and form inputs on every visit,<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>,<Tab.Screen options={{ unmountOnBlur: true }} />,Medium
+13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,Show visible feedback during network operations,Use ActivityIndicator or skeleton for >300ms operations,Leave button and screen frozen,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}"," ""<Button title=""""Save"""" onPress={submit} /> // no loading""",High
+14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,Confirm successful actions with brief feedback,Show toast/checkmark or banner,Complete actions silently with no confirmation,showToast('Saved successfully'),// silently update state only,Medium
+15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,Show clear error messages near the problem,input-level error + summary banner,Only change border color with no explanation,<TextInput ... /><Text style={{color:'red'}}>{error}</Text>,<TextInput style={{borderColor:'red'}} />,High
+16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,Validate inputs on blur or submit with clear messaging,Validate onBlur and onSubmit,Validate on every keystroke causing jank,onBlur={() => validateEmail(value)},onChangeText={v => validateEmail(v)} // every char,Medium
+17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,Use appropriate keyboardType and returnKeyType,Match email/tel/number/search types,Use default keyboard for all inputs,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
+18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,Guide users through form fields with Next/Done flows,Use onSubmitEditing to focus next input,Force users to tap each field manually,onSubmitEditing={() => nextRef.current?.focus()},"// no onSubmitEditing, manual tap only",Low
+19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,Allow toggling password visibility securely,Provide Show/Hide icon toggling secureTextEntry,Force users to type blind with no option,<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />,<TextInput secureTextEntry /> // no toggle,Medium
+20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,<FlatList data={items} renderItem={...} />,<ScrollView>{items.map(renderItem)}</ScrollView>,High
+21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />",<Image source={require('4k.png')} /> // small avatar,Medium
+22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,onScroll={debouncedHandleScroll},onScroll={handleScrollHeavy},Medium
+23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions should be 150–300ms with native-like easing,Use ease-out for enter/ease-in for exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
+24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,if (reduceMotionEnabled) skipAnimation(),Always run complex parallax animations,Critical
+25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,Animated.loop(loaderAnim) for ActivityIndicator,Animated.loop(bounceAnim) on background icons,Medium
+26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,<Text style={{ fontSize: 16 }}>Body</Text>,<Text style={{ fontSize: 10 }}>Body</Text>,High
+27,Typography,Dynamic Type Support,allowFontScaling adjustsFontSizeToFit,iOS/Android/React Native,Support system text scaling without breaking layout,Set allowFontScaling and test large text,Disable scaling on all text globally,<Text allowFontScaling>{label}</Text>,<Text allowFontScaling={false}>{label}</Text>,High
+28,Safe Areas,Safe Area Insets,safe area insets notch gesture,iOS/Android/React Native,Content must not overlap notches/gesture bars,Wrap screens in SafeAreaView or apply insets,Place tappable content under system bars,<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>,<View style={{ flex: 1 }}><Screen /></View>,High
+29,Theming,Light/Dark Contrast,dark mode contrast tokens,iOS/Android/React Native,Ensure sufficient contrast in both light and dark themes,Use semantic tokens and test both themes,Reuse light-theme grays directly in dark mode,colors.textPrimaryDark = '#F9FAFB',colors.textPrimaryDark = '#9CA3AF' on '#111827',High
+30,Anti-Pattern,No Gesture-Only Actions,gesture only hidden controls,iOS/Android/React Native,Don't rely solely on hidden gestures for core actions,Provide visible buttons in addition to gestures,Rely on swipe/shake only with no UI affordance,Swipe to delete + visible Delete button,Only shake device to undo with no UI,Critical
+31,Accessibility,Dragging Alternatives,accessible drag interaction drag single pointer alternative keyboard drag alternative reorder resize move buttons React Native native runtime platform router arbitration iOS Android web,iOS/Android/React Native,React Native drag and reorder operations need a non-drag path selected for the active native runtime,Provide named Move up/down buttons or a position menu beside drag handles; route iOS and Android behavior through the runtime platform adapter,"Make drag, swipe, or a web-only pointer handler the only way to reorder native content","<Button title=""Move up"" onPress={() => moveItem(index, index - 1)} />",<DragHandle /> only,High
+32,Forms,Authentication Reuse,password manager passkey paste redundant entry,iOS/Android/React Native,Authentication and multi-step flows should reuse prior values,Support password managers passkeys paste and prefilled confirmed values,Force users to retype credentials or the same data in one flow,"textContentType=""password"" autoComplete=""current-password""",onPaste disabled,Critical

package/dist/assets/uiux/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,When to Use,When NOT to Use,Data Volume Threshold,Color Guidance,Accessibility Grade,Accessibility Risk,Accessibility Notes,A11y Fallback,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress, accessible chart, keyboard accessible chart",Line Chart,"Area Chart, Smooth Area",Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period,Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists,<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals,Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity,deprecated: use Accessibility Risk,risk:low,"Use solid, dashed, and dotted line styles plus direct series labels; never distinguish series by hue alone.",Visible data table plus concise trend summary. Keyboard: focus reveals hover values; +/- buttons zoom; Reset restores the full range.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking, accessible chart, keyboard accessible chart",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15,Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked),<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table,Each bar: distinct color. Grouped: same hue family. Always sort descending by value,deprecated: use Accessibility Risk,risk:low,Use direct category/value labels and group outlines or patterns; never encode category solely by bar color. Do not rely on color alone.,Visible sortable data table plus concise comparison summary. Keyboard: focus reveals hover values; focusable headers with Enter/Space sort and aria-sort reports direction.,"Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share, accessible chart, keyboard accessible chart",Pie Chart or Donut,"Stacked Bar, Waffle Chart",≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values,Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context,Max 6 slices; beyond that switch to stacked bar 100%,5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %,deprecated: use Accessibility Risk,risk:high,"Pie charts do not inherently fail WCAG; unlabeled color-only slices are inaccessible. Use direct labels and patterns, with a non-pie fallback. Do not rely on color alone.",Percentage data table and concise part-to-whole summary; offer a stacked bar view. Keyboard: focus reveals slice values; Enter/Space drills in; Back button returns.,"Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation / Distribution,"correlation, distribution, scatter, relationship, pattern, cluster, accessible chart, keyboard accessible chart",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset,Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context,<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first,Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density,deprecated: use Accessibility Risk,risk:conditional,Combine marker shapes with direct group labels; color may reinforce but must not be the only distinction.,Visible data table plus correlation summary. Keyboard: focus reveals point values; labeled start/end range inputs replace brush dragging.,"D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap / Intensity,"heatmap, heat-map, intensity, density, matrix, calendar, accessible chart, keyboard accessible chart",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat","Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)",Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback,"Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG",Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend,deprecated: use Accessibility Risk,risk:conditional,Print values or symbols in cells and use texture/labels in addition to the color scale. Do not rely on color alone.,Grid data table plus intensity summary. Keyboard: focus reveals cell values; +/- buttons zoom; Reset restores the grid.,"D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial, choropleth, accessible chart, keyboard accessible chart",Choropleth Map or Bubble Map,Geographic Heat Map,Data has a regional/location dimension; spatial distribution is the core insight for the user,Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context,<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering,Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks,deprecated: use Accessibility Risk,risk:conditional,Label regions directly and pair fills with boundaries or patterns; location meaning cannot depend on color alone.,Sortable region table plus geographic summary. Keyboard: arrow keys or labeled pan buttons move the map; +/- buttons zoom; Enter drills into a focused region; Back returns.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel / Flow,"funnel, flow, conversion, drop-off, pipeline, stages, accessible chart, keyboard accessible chart",Funnel Chart or Sankey,Waterfall (for flows),Sequential multi-stage process; showing conversion or drop-off rates between defined stages,Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages,3–8 stages optimal; beyond 8 stages group minor steps into 'Other',Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop,deprecated: use Accessibility Risk,risk:conditional,"Keep stage names and values visible and distinguish stages with text and boundaries, not only a gradient. Do not rely on color alone.",Linear stage table/list plus conversion summary. Keyboard: focus reveals stage values; Enter/Space drills in; Back returns.,"D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,"performance, target, kpi, gauge, goal, threshold, progress, accessible chart, keyboard accessible chart",Gauge Chart or Bullet Chart,"Dial, Thermometer",Single KPI measured against a defined target or threshold; dashboard summary context,No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid),Single metric per gauge; for 3+ KPIs use bullet chart grid layout,Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated,deprecated: use Accessibility Risk,risk:low,Place the number and target text beside the gauge and label threshold zones; red/yellow/green alone is insufficient.,Visible KPI/target text and a one-row data table plus status summary. Keyboard: focus reveals the same detail as hover.,"D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,"forecast, prediction, confidence, band, projection, estimate, accessible chart, keyboard accessible chart",Line with Confidence Band,Ribbon Chart,Historical data + model predictions; communicating uncertainty range to non-technical stakeholders,No historical baseline; prediction confidence is too low to be useful; audience is not data-literate,Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range,Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue,deprecated: use Accessibility Risk,risk:conditional,"Use solid actual and dashed forecast lines, direct labels, and a named confidence range; hue alone is insufficient.",Visible forecast table plus uncertainty summary. Keyboard: focus reveals hover values; buttons toggle actual/forecast; +/- buttons zoom; Reset restores range.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,"anomaly, outlier, spike, alert, detection, monitoring, deviation, accessible chart, keyboard accessible chart",Line Chart with Highlights,Scatter with Alert,Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data,Anomalies are predefined categories (use bar with highlight); real-time context without a pause control,"Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer",Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone,deprecated: use Accessibility Risk,risk:conditional,Mark anomalies with a distinct shape and text annotation as well as color. Do not rely on color alone.,Anomaly event list/table plus narrative alert summary. Keyboard: focus reveals point details; alerts are available in the persistent list without hover.,"D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical / Nested Data,"hierarchy, nested, treemap, parent, children, breakdown, drill, accessible chart, keyboard accessible chart",Treemap,"Sunburst, Nested Donut, Icicle","Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)",Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely,<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering,Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px,deprecated: use Accessibility Risk,risk:high,Label hierarchy nodes and use borders/patterns as well as hue; make the tree table the primary accessible view. Do not rely on color alone.,Collapsible tree table plus hierarchy summary; treemap remains supplementary. Keyboard: focus reveals hover values; Enter/Space drills or expands; Back collapses/returns.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow / Process Data,"flow, process, sankey, distribution, source, target, transfer, accessible chart, keyboard accessible chart",Sankey Diagram,"Alluvial, Chord Diagram",Showing how quantities flow between nodes; multi-source multi-target distribution,Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context,<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node,Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible,deprecated: use Accessibility Risk,risk:conditional,"Label source, target, and value; use line style or node symbols in addition to gradient color. Do not rely on color alone.",Source-to-target flow table plus flow summary. Keyboard: focus reveals hover values; Enter/Space drills into a node; Back returns.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,"waterfall, cumulative, variance, incremental, bridge, delta, accessible chart, keyboard accessible chart",Waterfall Chart,"Stacked Bar, Cascade","Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)",Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total,4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar,Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed,deprecated: use Accessibility Risk,risk:low,"Pair increase/decrease bars with signed values and directional icons, not red/green alone. Do not rely on color alone.",Running-total table plus variance summary. Keyboard: focus reveals the same value as hover.,"ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,"radar, spider, multi-variable, attributes, dimensions, comparison, accessible chart, keyboard accessible chart",Radar / Spider Chart,"Parallel Coordinates, Grouped Bar","Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)",Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts,2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates,Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity,deprecated: use Accessibility Risk,risk:conditional,"Use line styles, point shapes, and direct series labels in addition to color. Do not rely on color alone.",Raw data table and grouped-bar alternative plus comparison summary. Keyboard: focus reveals values; buttons toggle series.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock / Trading OHLC,"stock, trading, ohlc, candlestick, finance, price, volume, accessible chart, keyboard accessible chart",Candlestick Chart,"OHLC Bar, Heikin-Ashi",Financial time-series with Open/High/Low/Close data; trading or investment product context only,Non-financial audience; no OHLC data available (use line chart); accessibility-first context,Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once,Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style,deprecated: use Accessibility Risk,risk:conditional,Use filled versus hollow candles and OHLC text values; bullish/bearish meaning cannot depend on color. Do not rely on color alone.,Sortable OHLC table plus daily-change summary. Keyboard: focus reveals candle values; +/- buttons zoom; Reset restores range; live updates do not steal focus.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship / Connection Data,"network, graph, nodes, edges, connections, relationships, force, accessible chart, keyboard accessible chart",Network Graph,"Hierarchical Tree, Adjacency Matrix",Mapping connections between entities; network topology or social graph exploration context,Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context,≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering,Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B,deprecated: use Accessibility Risk,risk:high,"Use labeled node types, shapes, and edge styles in addition to color; the adjacency view is the accessible source of truth. Do not rely on color alone.",Adjacency list/table and relationship summary; tree view when applicable. Keyboard: focus reveals node details; Enter drills; Move up/down/left/right buttons replace drag.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution / Statistical,"distribution, statistical, spread, median, outlier, quartile, boxplot, accessible chart, keyboard accessible chart",Box Plot,"Violin Plot, Beeswarm","Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups",Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts,Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume,Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336,deprecated: use Accessibility Risk,risk:low,"Label median, quartiles, whiskers, and outliers directly; do not use color alone for statistical roles.",Statistics table plus distribution summary. Keyboard: focus reveals the same statistics as hover.,"Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),"bullet, compact, kpi, dashboard, target, benchmark, range, accessible chart, keyboard accessible chart",Bullet Chart,"Gauge, Progress Bar",Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large,Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs,Ideal for 3–10 bullet charts in a grid; scales to any count efficiently,Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker,deprecated: use Accessibility Risk,risk:low,Label every qualitative range and target with text; color is supplementary.,Visible KPI/target table plus status summary. Keyboard: focus reveals the same detail as hover.,"D3.js, Plotly, Custom SVG",Hover
+19,Proportional / Percentage,"waffle, percentage, proportion, progress, filled, grid, accessible chart, keyboard accessible chart",Waffle Chart,"Pictogram, Stacked Bar 100%",Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format,More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space,10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar,3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair,deprecated: use Accessibility Risk,risk:low,Label each category and percentage and add patterns or symbols; filled-cell color alone is insufficient.,Percentage table/list plus part-to-whole summary. Keyboard: focus reveals each cell value.,"D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,"sunburst, hierarchy, nested, proportion, radial, circle, accessible chart, keyboard accessible chart",Sunburst Chart,"Treemap, Icicle, Circle Packing","Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)",More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile,<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering,Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors,deprecated: use Accessibility Risk,risk:high,Label hierarchy levels and segments and use boundaries/patterns as well as hue; the indented list is primary. Do not rely on color alone.,Collapsible indented list/table plus hierarchy summary and breadcrumbs. Keyboard: Enter/Space drills or expands; Back button returns; focus reveals hover detail.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution, accessible chart, keyboard accessible chart",Decomposition Tree,"Decision Tree, Flow Chart",Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios,No clear parent-child causal relationship; audience expects a summary rather than exploration,Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels,Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8,deprecated: use Accessibility Risk,risk:low,Name each node and contribution and use shapes/connector styles in addition to color. Do not rely on color alone.,Expandable tree table plus root-cause summary. Keyboard: Enter/Space drills and expands; Back collapses; dedicated expand/collapse buttons expose the same operations.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud, accessible chart, keyboard accessible chart",3D Scatter / Surface Plot,"Volumetric Rendering, Point Cloud",Scientific/engineering context where Z-axis carries essential info not expressible in 2D,2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards,"WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts",Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4,deprecated: use Accessibility Risk,risk:high,"Use labels, shapes, and depth-independent cues; color and 3D position cannot be the only carriers of meaning.","Mandatory 2D projection, data table, and spatial summary. Keyboard: rotate/pan buttons and +/- zoom controls replace pointer/VR manipulation; Reset returns the camera.","Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse, monitoring, accessible chart, keyboard accessible chart",Streaming Area Chart,"Ticker Tape, Moving Gauge",Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance,Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support,Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll,Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background,deprecated: use Accessibility Risk,risk:conditional,Show the current value and status text and use line styles or markers in addition to color. Do not rely on color alone.,Streaming data table plus current-value/trend summary. Keyboard: Pause/Resume button controls updates; focus reveals values; +/- buttons zoom; Reset restores range.,"Smoothed D3.js, CanvasJS",Real-time + Pause + Zoom
+24,Sentiment / Emotion,"sentiment, emotion, nlp, opinion, feeling, text-analysis, accessible chart, keyboard accessible chart",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview,Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items,50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile,Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency,deprecated: use Accessibility Risk,risk:high,"Expose every term, count, and sentiment as text; size and color are supplementary only.",Sortable term table/list plus sentiment summary; word cloud is supplementary. Keyboard: focus reveals word details; labeled controls filter with Space/Enter.,"D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log, event, accessible chart, keyboard accessible chart",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels,No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering,<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering,Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill,deprecated: use Accessibility Risk,risk:conditional,Label nodes and paths and use shapes/line styles in addition to color; bottlenecks require text annotations. Do not rely on color alone.,Path summary table plus bottleneck narrative. Keyboard: Move buttons replace drag; focus reveals node details; Enter activates a node; Back returns.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click