skills.rest
pattobrien
pattobrienCOMMUNITY
Explore all skills by this author →
GitHub

jsonforms-control

Creates and registers JSON Forms control renderers for the intake stepper system.

2|Updated Oct 16, 2021
Search Tags:#typescript#zod#react native#form renderer#jsonforms#control tester#intake stepper
One-click install
npx skills add https://github.com/pattobrien/dotfiles --skill jsonforms-control-pattobrien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jsonforms-control
Source: https://github.com/pattobrien/dotfiles/tree/main/claude/skills/jsonforms-control
Command: npx skills add https://github.com/pattobrien/dotfiles --skill jsonforms-control-pattobrien

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @jsonforms/core, @jsonforms/react.

What problem does it solve? Adding a new field type to a JSON Forms-driven intake stepper requires creating a control renderer, choosing a correct ranked tester, registering it in the renderer registry, and optionally wiring up a debug screen — a multi-step process that is easy to get wrong. ## Core Features & Use Cases - Control Renderer Creation: Generates a control renderer file with a ranked tester (formatIs, optionIs, scopeEndsWith, isEnumControl, etc.) following the project's rank conventions. - Input Component Scaffolding: Creates specialized input components wrapping shared UI primitives like MutedInput with correct keyboard and autocomplete settings. - Registry Integration: Adds exports to the controls barrel and entries to the intakeRenderers array before the text fallback tester. - Use Case: Ask to "add a phone control" and get a fully registered renderer with a proper tester, plus a debug form screen entry to verify it renders in the stepper. ## Quick Start Ask the assistant to create a new JSON Forms control for a field such as "email" or "weight-ruler" in the intake stepper.

Frequently Asked Questions about jsonforms-control

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom JSON Forms control renderer in React?▼

Create a component receiving ControlProps, wrap it with withJsonFormsControlProps, and export a ranked tester using rankWith from @jsonforms/core. Then register the tester and renderer pair in the renderer registry array.

How do JSON Forms ranked testers work?▼

Testers like formatIs, optionIs, scopeEndsWith, and isEnumControl detect which renderer matches a field, and rankWith assigns a priority number. Higher ranks win; this project uses rank 1 for fallbacks up to rank 4 for specific overrides.

Can I reuse an existing UI component as a JSON Forms control?▼

Yes, shared components like DatePicker, RulerPicker, or feature components like HeightWeight can be wrapped in a control renderer that maps props.data and props.handleChange to the component's value and change handler.

Why does my JSON Forms control break with React Compiler?▼

Hook calls such as useJsonForms() must come before any early returns like the visibility check. React Compiler requires consistent hook ordering, so place all hooks at the top of the control component.

How do I convert a Zod schema to JSON Schema for JSON Forms?▼

Use the zodSchemaToJsonSchema() utility from the forms utils package, which auto-converts enums to oneOf with const entries and strips date patterns so testers like isOneOfEnumControl match correctly.

Related Skills

Explore More Software Engineering Skills→
btabaskabtabaska
1

notepad-new-form-field

Define and validate new form fields using JSON Schema, UI Schema, and Rule Schema.

Community
Basic
ngx-signal-formsngx-signal-forms
3

angular-forms

Create type-safe reactive Angular forms with Signal Forms API.

Official
Advanced
langgeniuslanggenius

ui-accessibility

Build and review accessible React UI components using Base UI primitives.

Official
Intermediate
hasnahasna

zustand

Map Zustand vanilla stores to json-render's StateStore interface with typed adapters.

Official
Basic