Wonil ChoFrontend / AI
KOEN
Contact

SELECTED WORK / 2026

Product engineering · Agent tooling · Verification

Wonil Cho · AI-native Frontend Engineer

I build product frontends
and tools for AI development.

React / Next.js / TypeScript

I built the frontend foundation for a clinical data platform at MDB, supporting a seven-year national research project involving major hospitals across Korea.

Alongside product work, I build open-source tools that make AI development explicit: what to do, which decisions to preserve, and how to verify the result.

Explore frontend workExplore AI tooling

MDB Co., Ltd.2023.06 ~ Present

FRONTEND / AI-NATIVE DEVELOPMENT

Explore the portfolio

01 / PRODUCT ENGINEERINGA clinical platform’s frontend foundationForms, state, and data migration02 / OPEN SOURCELogic Pro MCPClaude for Open Source · 6 months of support03 / ENGINEERING PRACTICEMy approach to AI-assisted developmentContext, independent review, and real use

01FRONTEND CASE STUDIES

Engineering decisions from a working product.

I built the platform’s frontend foundation and continued developing it in production. These cases show the problems I owned and the decisions behind the implementation.

LARGE-SCALE INPUT

Large dynamic forms

Keeping large forms responsive.

My roleInput architecture · State boundaries · Rendering performance

Challenge

Clinical data entry brings hundreds of dynamic fields and repeating rows into one screen. User edits, server calculations, and recovered values all reach the same fields. I needed clear ownership of state as well as control over rendering.

Approach

I used virtualization with measured row heights and field-level subscriptions to contain updates. React Hook Form owns input values, React Query owns server data, and Jotai owns shared editing state. Each change has an explicit boundary.

Engineering detail and contribution
Engineering detail
Save payloads contain changed fields. Repeating questions are an explicit exception: the whole question is sent because saving rebuilds row order. I removed derived fields from the initial payload after checking actual requests and confirming the duplication.
Ownership and collaboration
I designed and implemented the input architecture, state boundaries, and save/recovery flow. The team extended keyboard navigation and table paste support.
  • React Hook Form
  • React Query
  • Jotai
  • TanStack Virtual

DERIVED VALUES & RECOVERY

Input history and recovery

A coherent history across edits and calculations.

My roleDerived-value integration · Draft recovery · Undo/redo

Challenge

A user edit can trigger server-side derivation and validation (DVS). Recording history too early, or missing an off-screen field, can make undo and recovery restore a state the user never intended.

Approach

I connected editing entry points to a common derivation flow and captured undo history after calculations completed. User edits remain distinct from automatic updates. Save responses replace the suggestion list so stale suggestions do not persist.

Engineering detail and contribution
Engineering detail
Restoring a snapshot aligns values, editing state, added rows, and signature display values. Derived values are not treated as user edits, so they do not incorrectly trigger a requirement to explain a manual change.
Ownership and collaboration
I improved derivation requests and suggestion sync, and implemented draft recovery and snapshot-based undo/redo for input screens. A colleague strengthened sequencing for overlapping draft saves. The form builder’s undo history is a separate, colleague-led implementation.
  • React Hook Form
  • React Query
  • Derived calculations and validation
  • Snapshot history

CONFIG BUILDER

Form builder

Consistent editing rules for people and AI.

My roleProperty editing · Type-specific renderers · Reproduction and review

Challenge

Administrators build study-specific forms. Property editing, cloning, saving, and AI editing requests all modify the same document. Those paths need consistent rules about what can change and what must be preserved.

Approach

I built property editing for pages, questions, and fields, separating type-specific settings from renderers and defining what cloning preserves. In later editor reviews, I reproduced behavior to check persistence, read-only state, and cancellation.

Engineering detail and contribution
Engineering detail
I reproduced column widths disappearing after save and restore, using both the UI and server responses, then proposed numeric conversion and column-level updates. I also checked cases where AI edits ignored read-only state or user cancellation.
Ownership and collaboration
I implemented property editing, type-specific renderers, and cloning rules. A colleague led the normalized store and undo history; I contributed behavior reproductions and code review.
  • Next.js
  • TypeScript
  • Jotai
  • Type design

DATA MIGRATION

Live data migration

Migrating live data with a path back.

My roleFrontend design and implementation, from planning through execution and rollback

Challenge

When a study changes its forms, existing clinical data has to move to the new version. I owned the frontend flow for reviewing changes before execution, tracking results per participant, and rolling back when needed.

Approach

I designed and implemented planning, change review, publication, execution, tracking, and rollback as one flow. Server prechecks determine whether execution can proceed. Rollback was part of the design from the beginning.

Engineering detail and contribution
Engineering detail
Changes are reviewed across seven structural units. Because execution can change row identifiers, lists and details are refetched after the response. Execution and rollback requests for a given plan run one at a time.
Ownership and collaboration
I designed and implemented the planning and review screens and the execution/rollback flow. This is the broadest frontend feature I have owned individually.
  • Next.js
  • TypeScript
  • React Query
  • State transition design

SHARED POLICY

Project permissions and preferences

Making access and cached state follow the project.

My roleShared permission checks · Preferences · Project cache cleanup

Challenge

Screens, menus, and buttons interpreted permissions differently, and switching projects could leave old preferences in the cache. Both access decisions and state lifetimes needed to follow the project boundary.

Approach

I consolidated permission checks and made hiding and disabling explicit choices. Preferences are split between persisted values and session state. Project switching clears both Jotai state and the React Query cache.

Engineering detail and contribution
Engineering detail
UI permission checks guide available actions; the server makes the final authorization decision. I traced the project-switching bug to cached server data surviving the reset of local state.
Ownership and collaboration
I owned the initial permission and route structure, preference integration, and the project-switching cache fix. I applied the team’s expanded permission model across screens; we evolved preference schemas and types together.
  • Next.js
  • Jotai
  • TypeScript
  • Declarative policy

02AI-NATIVE OPEN SOURCE

Open-source tools I use to build.

I design what agents work on, what context they retain, and how their output is checked. These four projects put those decisions into code.

AGENT TOOLING

Logic Pro MCP

Make app control observable.

I built a Swift MCP server for Logic Pro, with state readback to check commands against the application. Working with AI on the implementation, I designed CI around compilation, tests, and coverage, then added checks that the validators themselves reject faulty inputs.

Selected for Anthropic Claude for Open Source · 6 months of support

View Logic Pro MCP code (opens in a new tab)
DECISION MEMORY

CommitLore

Give the next agent the reasoning behind the code.

I built CommitLore so an agent can recover why the code took its current shape. Constraints and rejected alternatives live in Git, with retrieval scoped to the paths being edited. Records are checked against conversation and code evidence, with explicit trust levels and lifecycle states.

Git-based memory · Path-scoped context · Evidence and lifecycle

View CommitLore code (opens in a new tab)
TASK GRAPH & CONTEXT

JevGate

Completion needs evidence.

I started JevGate to reduce token use in Claude Code and Codex. Work is modeled as a DAG with dependencies and completion contracts, then checked against observed verification runs. Context selection preserves user requests and failed attempts so subsequent work retains its original constraints.

Task graphs · Completion contracts · Execution evidence · Context selection

View JevGate code (opens in a new tab)
AGENT SKILLS & REVIEW

Frontier-simplify

A review loop should have an exit.

I built skills to keep agent-driven development focused on the product. Reviews stay tied to concrete defects, findings carry forward through repairs, and automatic iterations have a limit. I publish experiments and limitations alongside the implementation.

Concrete findings · Review continuity · Bounded iterations

View Frontier-simplify code (opens in a new tab)

I also build and operate StockMatrix, an AI stock-analysis newsletter, connecting data collection and analysis with subscriptions, email delivery, and publishing. Visit StockMatrix (opens in a new tab)

HOW I WORKDefine the work. Own the result.

  1. Make the context explicit. I use skills that connect implementation patterns, conventions, and Figma specifications to the task. For architectural decisions, I start with established references, test the fit with a prototype, and discuss the evidence with colleagues.
  2. Review independently. I usually review Claude’s implementation with Codex or Grok in a fresh context. Repeatable checks belong in tests and CI. I also test the checks themselves against incorrect results.
  3. Check the actual experience. At work, I review code and perform QA directly. On side projects, I rely primarily on dogfooding and real-use testing. Friction I encounter and recurring user requests guide what I improve next.

03ABOUT

From video production to software engineering.

I came to software from advertising and video production. Reading Ray Kurzweil’s The Singularity Is Near convinced me to learn how to build software so I could take part in the shift toward AI. I started in 2022. Frontend engineering became my foundation; open-source tools and Swift automation expanded my practice.

I build things I want to use, then let real use change the plan. I gather feedback through GitHub issues, email, and Reddit, prioritizing by experience and request frequency. I’m especially interested in consumer products where I can carry feedback from the user through to implementation.

Faster AI-assisted implementation gives a team more decisions to coordinate. I value colleagues who explain their reasoning, share what they learn, and change their minds when the evidence warrants it. I try to do the same.

Present
MDB Co., Ltd. · Frontend Developer
Started development
2022
Core stack
React · Next.js · TypeScript
Design focus
Frontend architecture · Task graphs · Verification harnesses
Looking for
A product team where AI use and knowledge sharing are everyday practice

04EXPERIENCE

From the first implementation to ongoing product work.

2023.06 ~ Present

MDB Co., Ltd.

Frontend Developer

Clinical data platform · First frontend hire

I joined as the company’s first frontend developer and built the foundation of its clinical data collection platform. I now work alongside two frontend peers on new features, maintenance, and optimization.

My work spans dynamic forms, save and recovery, derived values, form building, access control, and user preferences. I designed and implemented data version migration from planning and review through execution and rollback.

React · Next.js · TypeScript · React Hook Form · React Query · Jotai

PRODUCT / LEARNING PLATFORM

Online learning platform

I built course history and resource search/download screens, including the cross-window update that refreshes course history when a certificate is issued.

I owned the course-history and resource-library screens. The video player and shared screens were team-developed.

Next.js · React Query · TanStack Table

2022.09 ~ 2023.07

Argos Identity Korea (formerly Fullstack Co., Ltd.)

Frontend Developer

B2B identity verification for digital-asset wallets

I developed and maintained frontend flows for identity verification during digital-asset wallet deposits and withdrawals, using React and Vue.js.

SOURCE NOTESAbout these case studies

Company cases are based on code and PR history and work I performed. The details identify individual and team contributions. Unmeasured performance claims and unverified business outcomes are omitted.

Company source code, screens, and customer or patient data are not public. The open-source repositories provide the implementation and development workflow for each public project.