Skills
.Work. You
Rest

shadcn-syntax-field

Official

Build accessible shadcn Field forms with fewer bugs

Software Engineering#accessibility#forms#Controller#shadcn-ui#react-hook-form#aria-invalid#FieldError
AuthorImpertio-Studio
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents broken accessibility and validation wiring when you compose the new shadcn ui Field primitive family, especially under react-hook-form Controller and FieldError rendering.

Core Features & Use Cases

  • Correct Field primitive composition: wires FieldLabel htmlFor/id, FieldError placement, and data-invalid driving destructive tokens.
  • Reliable form-library integration: supports react-hook-form Controller, TanStack Form, or even standalone state while keeping the same accessibility contract.
  • Responsive layout via FieldGroup: uses container-query orientation="responsive" only when a FieldGroup ancestor exists.

Quick Start

Use the shadcn-syntax-field Skill to generate a Field + Controller wiring that correctly sets htmlFor/id, includes aria-invalid on the inner input, and renders FieldError inside the parent Field.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-syntax-field
Download link: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/archive/main.zip#shadcn-syntax-field

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.