Turn a Markdown QA checklist into an in-app review drawer. Check your React app, attach feedback to elements, and keep the results in a Markdown file your coding agent can read.

Works with Vite and Next.js App Router. Local development by default, with an optional host-owned backend for private team reviews. No Qraft account or database required.

Try it · Install · Create a checklist · Agent skill

Ask your coding agent for a QA checklist, or write one yourself. Select the Markdown file in Qraft, then work through the tasks inside your app. Complete a check, skip it, or open it to leave notes before moving to the next one.

When something looks off, choose Attach element and point to the part of the page you mean. Qraft highlights the element and captures identifying context, including its React component and source location when available. Your note draft stays intact while the drawer steps aside for selection.

Your feedback goes back into the same Markdown file, ready for your coding agent to read. Completing a task records review progress; it does not mean every observation has been fixed. Notes stay with the task, so review progress and feedback remain together.

Shown in a fictional local storefront. The runnable demo below uses a smaller cart example. See the compact mobile review.

Try the workflow

Clone this repository, use a supported Node version, and start the small local cart:

git clone https://github.com/CasperKristiansson/Qraft.git
cd Qraft
corepack pnpm install --frozen-lockfile
corepack pnpm demo

Open http://127.0.0.1:5173, click QA, and choose review.local.md. Five checks walk you through changing quantity, attaching feedback, keyboard review, a narrow viewport, and reading the result in your editor. The toy cart's fixed summary gives you something concrete to report. Restarting the demo preserves your notes.

To use Qraft in your own app, follow the Vite or Next.js setup.

pnpm add -D @qraft-dev/qa
pnpm exec qraft setup

setup prints the integration steps for your app; it does not edit files.

Start with ordinary Markdown

# Checkout review

## Cart

- [ ] Change quantity and verify the total
  Increase and decrease quantity. The line and order totals should follow the quantity.
  - Note: The total stays at $268 when quantity increases to 3. Recalculate it when quantity changes.
- [x] Remove a product
- [-] Review an unsupported payment method

Sections and descriptions are optional. Indented text appears as the task's Description; notes hold review feedback and can include element and source context. Qraft preserves surrounding Markdown and adds hidden IDs only as needed when editing. See the Markdown contract for exact syntax and preservation guarantees.

Let your agent plan the review

Qraft includes qraft-review, a portable skill for initial reviews, change-focused regression checks, focused feature reviews, and retesting earlier feedback. It keeps checks at a useful level, orders prerequisites first, and preserves existing notes when continuing a review.

Use qraft-review to create a QA checklist for the checkout changes.
The rest of the app already works. Include the current uncommitted changes,
keep this focused, and save it in reviews/checkout.md.

Install the skill explicitly, or run pnpm exec qraft guide and give its output to your coding agent. An optional QRAFT.md can hold project preferences. Qraft does not call an LLM or modify your agent configuration when installed.

Built for a local review loop

• Review at your pace. Complete, skip, or reopen tasks; move directly to the next check.
• Keep feedback specific. Add and edit notes, with optional element, route, viewport and source context.
• Make room for the app. Pin the drawer, push page content on wider screens, or use the compact task strip on narrow screens.
• Keep ownership of the file. External edits update the drawer; stale saves surface a conflict instead of silently replacing a newer revision.

Run on a trusted local development machine. Keep the documented development guard around the client; the adapters refuse production traffic. Element/source identification is best effort, and physical-phone access over a network is outside the local-only scope. See limitations and recovery.

Help and contributions

Documentation · Troubleshooting · Report a bug · Contributing · Security

A small reproduction and a description of the expected behavior are useful contributions. Qraft is MIT licensed. Third-party notices cover its dependencies.

If Qraft makes your review loop easier, a star helps other developers find it.

Shared team reviews

Connect the drawer to your application's authenticated, same-origin QA endpoint:

<QA backend={{ endpoint: "/api/qa", sessionKey: reviewSession.generation }} />

Only mount this for authorized testers. sessionKey is a non-secret value that changes on logout/account switch, not a cookie or bearer token. The menu lists shared Markdown checklists; progress and notes synchronize across testers. An explicit server-only @qraft-dev/qa/backend entry requires your authorization callback on every request. The @qraft-dev/qa/s3 adapter keeps Markdown in a private S3 bucket, with a Lambda HTTP adapter and conditional writes. Local Vite/Next adapters remain development-only. See shared backend setup for the complete integration, persistence requirements and AWS hosting boundary.