whinc/my-claude-plugins

Overview

This skill teaches the core fundamentals of using Formily as a React form solution with TypeScript. It covers schema-driven forms, form state management, validation, performance patterns, and common implementation patterns for building reliable forms. Expect practical examples for setup, basic fields, validation, and submission.

How this skill works

Formily uses a form instance (createForm) to manage values, field states, and effects. You declare form structure via schema or programmatic field components, then connect that form to React with FormProvider and Field components. Validation runs through schema validators or custom effects, while fine-grained reactivity and batching reduce re-renders and improve performance.

When to use it

• When learning Formily basics or getting started with form state management in React
• When you need schema-driven forms with TypeScript type safety
• When implementing complex field interactions (conditional fields, arrays, nested values)
• When you want built-in validation plus custom validation logic and effects
• When optimizing performance for large or frequently updated forms

Best practices

• Define TypeScript interfaces for form data to get full type safety
• Prefer schema validation (x-validator) for common rules and consistency
• Use observer for performance-critical field components to minimize re-renders
• Batch related state updates with form.batch() to improve performance
• Encapsulate reusable fields as typed components to reduce duplication
• Handle errors at both global (onError) and field-level (onFieldError) scopes

Example use cases

• Simple contact form with typed initialValues and schema validation
• Signup form with conditional password fields and confirm-password validation
• Dynamic email list using push/insert/remove operations on array fields
• Admin dashboard form with nested objects and path-based value updates
• High-performance data entry form using observer and batched updates