Skills
.Work. You
Rest

component-field

Community

Generate accessible form Field wrappers

Software Engineering#accessibility#react#generate#scss#fpkit#aria-describedby#form components
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill scaffolds an accessible Field wrapper that correctly associates a visible label with a single form control, preventing common form-label wiring mistakes.

Core Features & Use Cases

  • Accessible label-control association: generates a <label htmlFor={labelFor}> linked to the wrapped control’s id, supporting reliable programmatic naming and click-to-focus behavior.
  • Leaf component by design: renders only layout + label and delegates error and hint responsibilities to the wrapped Input/Select/Textarea control.
  • fpkit/acss-aligned styling hook: outputs TSX and SCSS using a consistent data-style="fields" convention and CSS variable-driven typography.

Quick Start

Ask the agent: create a Field component for an Email input with a label, using labelFor set to the wrapped control id.

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: component-field
Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#component-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.