skills/team/qrspi-implement/SKILL.md
QRSPI Implement phase -- executes an approved plan.md slice-by-slice with strict Red-Green-Refactor per slice and a fresh-session checkpoint after each. Use for "/qrspi-implement <feature>", "execute the qrspi plan", "build the approved plan slice by slice". Do NOT use for the deprecated RPI workflow (use /rpi-implement) or to run a bare TDD cycle with no plan (use tdd); this phase requires plan.md status: approved and writes per-slice logs.
npx skillsauth add michaelalber/ai-toolkit qrspi-implementInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
"Amateurs practice until they get it right. Professionals practice until they can't get it wrong."
The Implement phase executes an already-approved plan mechanically -- every design decision was settled by Spec and Plan. Each plan phase is one vertical slice, and each slice runs the full Red-Green-Refactor loop end-to-end before the next begins. The discipline is test-first and per-slice: a slice is not done until its RED proof and GREEN proof are recorded on disk. One slice is ideally one fresh session -- the per-slice log is the resumption point, so context never has to span the whole feature.
Non-Negotiable Constraints:
plan.md status: approved; never implement from memoryimplementation/slice-NN-{name}.mdPRE-FLIGHT
[ ] Locate the feature folder thoughts/shared/qrspi/YYYY-MM-DD-{slug}/
[ ] Read plan.md. If absent -> STOP; route the user to /qrspi-plan
[ ] Confirm plan.md status: approved. If only ready-for-review -> STOP; ask the human to approve
[ ] Run the baseline test suite. If red -> STOP; report; do not fix the baseline
[ ] Read the ENTIRE plan; identify the next unfinished slice from implementation/
SLICE LOOP (one slice = one plan phase, ideally one fresh session)
1. RED — write the failing test from the phase; RUN it; it MUST FAIL.
If it passes, the test is wrong -> fix the test, not the code.
2. GREEN — write the minimal production code; RUN build + tests; they MUST PASS.
3. REFACTOR — clean up; RUN again; it MUST stay GREEN.
4. RECORD — write implementation/slice-NN-{name}.md: RED output, GREEN output, files changed.
5. CHECKPOINT — suggest one commit for the slice; if context > 40% or the slice is done,
tell the user to start a fresh session for the next slice.
REPORT
Slices complete / total · last verification result · next slice (or "feature complete").
Exit criteria: each executed slice has a slice-NN-{name}.md log holding its RED proof and GREEN
proof; the build/tests are GREEN; a per-slice commit was suggested; the user knows the next slice or
that the feature is complete.
<qrspi-implement-state>
phase: PRE-FLIGHT | RED | GREEN | REFACTOR | RECORD | CHECKPOINT | COMPLETE
feature_folder: thoughts/shared/qrspi/YYYY-MM-DD-{slug}/
plan_present: true | false # MUST be true to proceed
plan_approved: true | false # MUST be true to proceed
baseline_green: true | false # MUST be true before any change
current_slice: [NN]
slices_total: [count]
slices_complete: [count]
last_verification: red | green | pending # RED step expects red; GREEN/REFACTOR expect green
context_budget: under-40 | approaching-60 | checkpoint-now
</qrspi-implement-state>
See references/slice-log-template.md for the per-slice implementation/slice-NN-{name}.md
structure -- the RED proof, GREEN proof, files-changed list, and the resume note.
| Skill | Relationship |
|-------|-------------|
| qrspi-plan | Prior phase. Its approved plan.md is the contract this phase executes; refuses to run without status: approved. |
| tdd | The inner loop. Each slice IS a RED-GREEN-REFACTOR cycle; load tdd for the test-first mechanics this skill enforces per slice. |
| dotnet-vertical-slice / python-feature-slice / rust-feature-slice | Stack scaffolders for the slice each phase builds. |
| rpi-implement | DEPRECATED sibling that checkpoints at 70% with no per-slice RGR proof. Route here for QRSPI's approved-gated, per-slice-RGR execution. |
development
Federal / government security overlay applied ON TOP OF a base language security review (dotnet/python/php/rust/react). Language-agnostic: adds NIST SP 800-53 control mapping, FIPS 140-2/3 cryptographic compliance (with a per-language crypto table), CUI handling, EO 14028 supply-chain requirements, and DOE Order 205.1B, and emits POA&M-ready findings with FIPS 199 impact levels. Use for federal/DOE/DOD/national-laboratory systems. Triggers on "federal security review", "NIST compliance", "NIST 800-53", "FISMA", "CUI", "FIPS audit", "DOE security", "POA&M", "ATO review". Do NOT use alone — run the matching <lang>-security-review FIRST; this overlay maps and extends it.
tools
OWASP-based security review of React / TypeScript front-end applications. Detects the framework (Vite/CRA/Next), entry points, and data flows, scans against the OWASP Top 10 (2025) mapped to React client-side patterns (XSS via raw HTML, URL/protocol injection, secrets in the bundle, insecure token storage, dependency CVEs, missing CSP, open redirects), and produces a manager-friendly executive summary plus a graded technical findings table. Use to audit React code for vulnerabilities. Triggers on "react security review", "frontend security audit", "audit react for vulnerabilities", "owasp react", "react xss", "react security posture", "npm audit review". For federal / gov / DOE / NIST / FIPS / CUI context, run security-review-federal after this base review. Do NOT use to grade architecture/structure — use react-architecture-checklist.
tools
Analyzes legacy React codebases and produces actionable modernization plans. Primary migration paths include class components to function components + hooks, Create React App to Vite, React 16/17 to 18 to 19, JavaScript to TypeScript, Enzyme to React Testing Library, legacy Redux to Redux Toolkit / Zustand / Context, and deprecated lifecycle/API removal. Does NOT perform the migration — assesses, quantifies risk, and plans. Triggers on phrases like "modernize react", "class to hooks", "upgrade react", "migrate CRA to vite", "react legacy migration", "react 17 to 18", "react js to typescript", "react technical debt", "enzyme to RTL".
development
Scaffolds feature-based React / TypeScript architecture using feature folders, presentational + container components, custom hooks, a typed data layer, and structural CQRS (query hooks vs mutation hooks). React analog of dotnet-vertical-slice and python-feature-slice — no DI framework; uses props/context for dependency injection and a query cache for server state. Use when creating feature-based React projects, adding React features, organizing components by feature rather than by technical type, or scaffolding a feature's data layer. Triggers on phrases like "scaffold react feature", "create react slice", "react feature folder", "react vertical slice", "add react feature", "react feature architecture", "organize react by feature".