Guide Input atom usage for sizing, variants, and token-first validation in forms.
npx skills add https://github.com/TechsioCZ/new-engine --skill input-usage
Please help me install this Agent Skill. Skill: input-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/input-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill input-usage
The Input atom serves as a low-level building block for forms, and this Skill guides developers to use it with proper size, variant, embedded button spacing, and token-first validation styling to ensure consistent UI experiences.
Import the Input atom from @techsio/ui-kit and render it with name, type, and size to begin using it in a form.
High-intent search queries and answers about installing and using this skill.
Achieve consistent React form input styling by using an Input atom that leverages design tokens for sizing, variant states, and validation. This enforces visual consistency across all form fields by applying token-first styling rules.
Manage input variants and embedded button spacing by configuring the Input atom at the building block level. It provides precise control over layout spacing and variant states to maintain UI consistency within your forms.
Yes, you need the @techsio/ui-kit core library to implement token-first validation in TypeScript forms. The Input atom requires this dependency to properly reference sources and enforce design-token based styling.
Yes, you can compose the basic Input atom with higher-level molecules like FormInput. This allows you to add labels, helper text, and validation messages while maintaining the underlying token-first styling and sizing controls.
Design token validation works by mapping input variant states directly to predefined UI tokens. This approach maintains visual consistency across form inputs by ensuring all validation styling references a centralized token system rather than hardcoded values.
TechsioCZCreate labeled numeric inputs with FormNumericInput in React projects.
thedaviddiasImplement accessible text input fields with labels, validation, and character counters.
TechsioCZGuide checkbox usage with Checkbox and FormCheckbox from @techsio/ui-kit.
TechsioCZConfigure @techsio/ui-kit Textarea for multi-line input with styling and validation.
