Skip to content
← back
§ CASE STUDY / FLAGSHIP

Forming (FFB)

A FHIR-native clinical form builder that replaces paper intake with structured, coded, interoperable forms. I built the design system, codified its patterns as Claude skills, then built the product in code.

23
FIELD TYPES
1,700+
AUTOMATED TESTS
22
DECISION RECORDS
ROLE
Design + code + architecture
METHOD
System → Claude skills → built in code
STACK
React · TS · Drizzle · SST/AWS · Bedrock
STATUS
Live product + public API
§ 01

The problem

Behavioral health still runs on paper. Every paper intake is data the EHR can’t see, a clinician re-typing by hand, and an audit risk. The company initiative, Kill the Clipboard, needs forms that are structured, clinically coded, and portable across five acquired platforms that each speak a different internal format.

The insight that shaped the product: build to the standard, not to any one EHR. A form authored once exports as a standards-compliant FHIR R4 Questionnaire and receives submissions as QuestionnaireResponse, so it runs anywhere FHIR is understood.

§ 02

My role, the hybrid part

It started as product management, not pixels. I ran the discovery myself: sourced research from every corner of the company, contacted the people living with paper intake, and compiled user-submitted requests and feedback into a real backlog. From there, every feature began as a detailed, investigation-first PRD — drafted with Claude, specifying contracts and acceptance criteria rather than prescribed implementations — written and reviewed before code.

Then the hybrid part: I built the design system first, codified its patterns as Claude skills, then used those skills to build FFB directly in code — no Figma file, because the system carried the visual and interaction rules and I designed in the medium the product ships in. The repo’s decision records list “Deciders: Luke” on the architectural calls.

AI LEVERAGE

AI generation and vision import are shipped features I designed and built: describe a form and it builds live with clinical codes; upload a paper PDF and vision import extracts the whole structure.

§ 03

The builder

Twenty-three field types, from text through Likert matrices, tables, signatures, semantic masked fields, and slider scales. Click to inspect:

Text
INPUT · FHIR string

The workhorse. Length validation, entry-format hints, and clinical coding all attach at the item level.

RENDERED LIVE — TRY IT

the actual design-system component that renders this type — 100% field coverage, the EIR’s rendering base

ON THE WIRE
{
  "linkId": "first_name",
  "text": "First name",
  "type": "string",
  "required": true
}

23 field types · every one exports as standards-native FHIR R4 · mappings verified from the converter source

Conditional logic is authored visually and exported as native FHIR. Toggle the answer and watch the wire update:

RESPONDENT VIEW
EXPORTED FHIR (enableWhen)
"item": [{
  "linkId": "drinks_per_week",
  "text": "Drinks per week",
  "type": "integer",
  "enableWhen": [{
    "question": "drinks_alcohol",
    "operator": "=",
    "answerBoolean": false
  }]
}]

field hidden · answerBoolean = true not met

§ 04

Selected hard problems

The moments where a design decision and an engineering decision are the same decision:

Session undo/redo that never fights auto-saveTHE DECISION
Every schema-mutating path (canvas, drawer, bulk operations, and AI tool calls, one undo step each) routes through a single history store with 50-step depth and coalescing. The hard constraint: it can’t interfere with the 3s auto-save, so save-routing is pinned provably independent by tests.
Rich-text undo routingTHE DECISION
TipTap keeps its own undo stack, so two histories exist whether you want them or not. My call: focus-based routing. Rejected alternatives (disable TipTap history; global routing; custom unifying middleware) are documented; the two-stack model matches Figma and Notion.
// Focus-based routing: while inside a TipTap editor,
// Cmd/Ctrl-Z drives its per-character history;
// outside, it drives the builder's structural history.
// A rich-text change becomes ONE builder step when the
// 150ms debounce flushes to the schema.
Zero fabricated codes, a correctness guaranteeTHE DECISION
Clinical coding lives at every level (form, section, field, option, table cell) with live LOINC/SNOMED/ICD-10 search. I treated fabricated code-system URIs as a P0 bug: uncoded content exports as a plain string, never a fake URI, because a fake code silently corrupts outcomes, registry reporting, and billing. Enforced by tests.
Snippet provenance that never leaks to the wireTHE DECISION
Reusable snippets are stamped with their origin and shown in the editor, but provenance is editor-only metadata. Wire-guard tests assert the emitted Questionnaire is byte-identical with or without the stamp, so it can never cross the FHIR wire.
Custom extensions on a public, versioned namespaceTHE DECISION
Where FHIR can’t natively carry FFB semantics (signature ordering, pull-forward, print settings), the data rides conformant extensions. New extensions are authored on the public fhir.qualifacts.com namespace with canonical-URL versioning, so any FHIR system consumes the resource and extension-aware renderers get the full behavior.
Refactor under a parity contractTHE DECISION
The split field/section editors were unified into one type-aware drawer. It shipped against a parity inventory: every control from both retired surfaces mapped into the new one, zero dropped, verified.
§ 05

Systems beyond the screen

The whole product exists to make one thing true: clinical data that can go anywhere. A form is authored once; a patient completes it once; and because everything on the wire is FHIR, every downstream system can act on it — no re-typing, no integration project per destination. Play it:

FFBFORMING · AUTHORSQUESTIONNAIREFHIR R4 · VERSIONEDAgency EHREIR RENDERS NATIVELYConsentHistoryPHQ-9Signature · conditionalFHIRClient recordchart created + updatedTreatment plandrafted from answersScheduler agentfollow-up bookedPatient portalinvite sentOutcomes & reportingmeasures scoredBillingcodes attached

01 / 05A clinician describes the intake — or uploads a photo of the old paper form — and FFB builds it: sections, conditional logic, clinical codes.

one form, authored once · structured FHIR both directions · any conformant system can act on it

Publishing flows into a pending draft that never touches the live version EHRs consume; publish is the only version-incrementing action; a single diff engine renders change review. The future runtime half, the EIR, is architecturally resolved, with the design system confirmed as its rendering base (100% coverage of all 23 field types).

library.qualifactsiq.com — live builder (behind the password gate)
library.qualifactsiq.com — live builder (behind the password gate) — set the embed URL to go live
§ 06

What it demonstrates

Standards-native product thinking (FHIR/SDC, not pixel-pushing); the ability to make and document architecture decisions; design choices that are simultaneously correctness choices; and end-to-end ownership, a codified system built in code and gated in CI.

Honest flags kept on purpose: EIR is unbuilt (architecture resolved); extension namespace mid-migration; AI import needs its verification gate; repeating groups and multi-language are the known SDC gaps, all PRD’d.