skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-syntax-field

Validate shadcn ui Field primitive accessibility and validation wiring.

Updated May 19, 2026
Search Tags:#accessibility#forms#Controller#shadcn-ui#react-hook-form#aria-invalid#FieldError
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-field
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-syntax-field
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-syntax/shadcn-syntax-field
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-syntax-field

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about shadcn-syntax-field

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

FAQPage Schema
How do I fix react-hook-form Controller validation bugs in shadcn-ui Field components?▼

Fix react-hook-form Controller validation bugs in shadcn-ui by placing FieldError as a direct child of the matching Field and applying explicit aria-invalid on the focusable input control.

Why does shadcn-ui Field data-invalid styling not apply to my inputs?▼

shadcn-ui Field data-invalid styling fails when FieldError is rendered outside its parent Field. Keeping FieldError as a direct child of the matching Field ensures destructive tokens apply correctly.

How to wire accessible labels and aria-invalid when using shadcn-ui Field primitives?▼

Wire accessible shadcn-ui Field primitives by matching FieldLabel htmlFor to the input id and explicitly setting aria-invalid on the focusable control to ensure screen reader announcements remain consistent.

Can I use shadcn-ui Field primitives with TanStack Form or standalone state?▼

shadcn-ui Field primitives support TanStack Form field wiring and standalone no-form-library state, maintaining the same accessibility contract for label pairing and aria-invalid across implementations.

When should I use FieldGroup orientation responsive for shadcn-ui forms?▼

Use FieldGroup with orientation set to responsive for shadcn-ui forms only when a FieldGroup ancestor exists, enabling container-query based responsive layout for the Field primitive family.

Related Skills

Explore More Software Engineering Skills→
fab679fab679
9

shadcn

Manage shadcn/ui component lifecycle with project-specific configuration enforcement.

Community
Advanced
velcraftingvelcrafting
1

form-validation

Implement client-side form validation rules with accessible error messaging.

Community
Intermediate
xyqyearxyqyear

shadcn-form

Generates Zod-validated shadcn/ui form components with React Hook Form.

Community
Advanced
DexploarerDexploarer
6

a11y-annotation-generator

Add ARIA labels, roles, and alt text to HTML, JSX, and Vue templates.

Community
Intermediate