effect-form

Build and validate type-safe React forms with Effect Schema.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/lucas-barake/dotai --skill effect-form
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: effect-form
Source: https://github.com/lucas-barake/dotai/tree/main/canonical/skills/effect-form
Command: npx skills add https://github.com/lucas-barake/dotai --skill effect-form

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Type-safe form building for React apps using Effect Schema, enabling compile-time guarantees and ergonomic field components, reducing runtime errors and boilerplate.

Core Features & Use Cases

  • Type-safe form construction with FieldBuilder, FormBuilder, and FormReact.
  • Runtime form rendering with reusable field components and async validations.
  • Use cases include login, signup, multi-field validation, and server-driven checks.

Quick Start

Install dependencies and render a basic form using FormReact with a simple login example.

Frequently Asked Questions about effect-form

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

FAQPage Schema
How do I build type-safe React forms with Effect Schema?

Build type-safe React forms with Effect Schema by using FormBuilder and FormReact workflows to define structured schemas. This approach provides compile-time guarantees and reusable field components, reducing runtime errors and boilerplate.

How do I add async refinements to React form validation?

Add async refinements to React form validation by configuring optional features within the form runtime. This enables server-driven checks and reactive invalidation across login, signup, and data-entry scenarios.

Can I use Effect Schema for runtime form rendering in web UIs?

Yes, you can use Effect Schema for runtime form rendering in web UIs by leveraging FormReact. It renders structured form definitions using reusable field components while maintaining type safety and runtime validation.

What is the best way to reduce boilerplate when validating React forms?

Reduce boilerplate when validating React forms by adopting a type-safe form builder powered by Effect Schema. This approach generates ergonomic field components and runtime validation directly from structured definitions.

Does effect-form support multi-field validation for data-entry scenarios?

Yes, effect-form supports multi-field validation for data-entry scenarios through FieldBuilder and FormBuilder workflows. It handles reactive invalidation and async refinements to ensure structured data accuracy.

When do I need keep-alive features in type-safe React forms?

Use keep-alive features in type-safe React forms when you need to preserve field component state across navigation or re-renders. This optional functionality prevents data loss during reactive invalidation workflows.