Generate accessible form components with ARIA attributes and error handling.
npx skills add https://github.com/vassovass/scl-v3 --skill form-components
Please help me install this Agent Skill. Skill: form-components Source: https://github.com/vassovass/scl-v3/tree/main/.claude/skills/form-components Command: npx skills add https://github.com/vassovass/scl-v3 --skill form-components
StepLeague UI currently requires developers to recreate basic form handling behavior across screens. This skill provides a library of accessible, standardized form components to reduce boilerplate and ensure consistent UX.
To begin, use the form components from the shared UI library when building forms. Import FormInput, FormSelect, FormCheckbox, FormTextarea, and FormFileInput from the shared UI library form-fields and replace raw HTML inputs with these components. Ensure each field has a unique fieldName, a descriptive label, and proper error/description handling.
High-intent search queries and answers about installing and using this skill.
Use reusable form components like FormInput, FormSelect, FormCheckbox, FormTextarea, and FormFileInput from the shared UI library. These components auto-generate proper id/name attributes, tie labels to inputs, and enforce ARIA attributes (aria-describedby, aria-invalid) and consistent error handling, eliminating boilerplate across signup, settings, and data-entry workflows.
Replace raw HTML inputs with the standardized form components, which automatically apply accessibility attributes and consistent styling. Each component enforces proper labeling, error messaging, and ARIA properties, ensuring your signup forms, settings pages, and data-entry screens meet accessibility standards uniformly.
Yes. The form component library includes FormInput, FormSelect, FormCheckbox, FormTextarea, and FormFileInput, covering standard input types, selects, checkboxes, text areas, and file uploads. Each component provides consistent styling, validation error handling, and accessibility attributes across all input scenarios.
Import and use the shared UI library form components uniformly across screens. Assign each field a unique fieldName and descriptive label; the components handle consistent styling, id/name generation, error state display, and ARIA attributes automatically, eliminating per-screen style and validation duplication.
The form components handle consistent error state display and aria-invalid attributes. You manage validation logic separately, but the components provide a standardized interface for passing errors and descriptions, reducing boilerplate and ensuring uniform error messaging across all forms.
cin12211Identify WCAG and ARIA accessibility issues on web interfaces and propose remediation.
jherrConfigure Netlify Forms with HTML, AJAX, honeypot spam filtering, and file uploads.
mgd34msuManage form state, validation, and submission for Remix and Next.js.
shawn-sandyGuide React component development with @fpkit/acss primitives and WCAG compliance.
