skills.rest
vincent-kk
vincent-kkCOMMUNITY
Explore all skills by this author →
GitHub

canard-type-system

Define and validate TypeScript typings for @canard/schema-form core props.

1|Updated Nov 13, 2024
Search Tags:#typescript#type-safety#generics#form-typing#schema-form#legacy-updates#ui-context
One-click install
npx skills add https://github.com/vincent-kk/albatrion --skill canard-type-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canard-type-system
Source: https://github.com/vincent-kk/albatrion/tree/main/.claude/skills/canard-type-system
Command: npx skills add https://github.com/vincent-kk/albatrion --skill canard-type-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides precise TypeScript typings and guidance for @canard/schema-form, enabling teams to define and validate core types such as FormTypeInputProps and FormTypeRendererProps, clarify generic parameter usage, and streamline context extensions across UI libraries.

Core Features & Use Cases

  • Core type definitions explained: FormTypeInputProps, FormTypeRendererProps, FormTypeInputDefinition, FormTypeTestObject, and related utilities with practical patterns.
  • Type pattern guidance: extending UI library contexts (e.g., MuiContext) and composing props with Context, WatchValues, onChange, and onFileAttach.
  • Legacy updates and migration: identify gaps between legacy docs and latest source in packages/canard/schema-form/src/types, with concrete migration steps.
  • Usage scenarios: guidance for building TS-safe plugins, form runtimes, and type-safe UI components.

Quick Start

Create a basic string input component by extending FormTypeInputProps<string, MuiContext>, implement an onChange handler, and use a simple MuiContext (size and variant) in a UI plugin.

Frequently Asked Questions about canard-type-system

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

FAQPage Schema
How do I define TypeScript types for schema-form input components?▼

To define TypeScript types for schema-form input components, extend core interfaces like FormTypeInputProps and FormTypeRendererProps with generic parameters, ensuring type-safe props for onChange handlers and form runtime validation.

How do I extend UI library context for a schema-form plugin in TypeScript?▼

Extending UI library context for schema-form plugins involves composing base props with custom contexts like MuiContext, passing size and variant parameters to ensure type-safe UI component rendering across different libraries.

What is the best way to type watchValues and onFileAttach in schema forms?▼

Typing watchValues and onFileAttach in schema forms requires composing these utilities with FormTypeInputProps generics, enabling reactive value tracking and type-safe file attachment handling within form type definitions.

How do I migrate legacy schema-form types to the latest source?▼

Migrating legacy schema-form types to the latest source requires identifying gaps between legacy docs and current packages/canard/schema-form/src/types, then applying concrete migration steps to update FormTypeInputDefinition and related utilities.

Can I build type-safe form plugins without manually defining every schema-form interface?▼

Building type-safe form plugins without manual interface definitions is possible by extending provided generic types like FormTypeInputProps and FormTypeTestObject, which standardize validation and UI context composition for plugin development.

Why are my generic parameters failing for FormTypeInputProps in TypeScript?▼

Generic parameter failures for FormTypeInputProps in TypeScript typically occur when the generic value type does not align with the expected schema-form context composition, requiring correct generic instantiation for FormTypeRendererProps.

Related Skills

Explore More Software Engineering Skills→
zhongjiszhongjis

typescript

Configure TypeScript projects with tsconfig.json and type definitions.

Community
Intermediate
jhs88jhs88

react-hook-forms

Implement React forms with React Hook Form, Zod, and TanStack Query.

Community
Intermediate
theodrosyimertheodrosyimer

type-driven-zod-boundaries

Pair TypeScript domain types with Zod v4 schemas to validate module boundaries.

Community
Advanced
vincent-kkvincent-kk
1

dependency-management

Resolve dependency configurations for @canard/schema-form plugins with peer constraints.

Community
Advanced