Integrate accessible @techsio/ui-kit Rating components with ZagJS wrapper.
npx skills add https://github.com/TechsioCZ/new-engine --skill rating-usage
Please help me install this Agent Skill. Skill: rating-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/rating-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill rating-usage
Enable developers to add accessible rating controls to their apps using the @techsio/ui-kit Rating component, ensuring consistent behavior and UX.
Use Rating to capture a product rating in your UI by rendering a 5-star control.
High-intent search queries and answers about installing and using this skill.
You can build an accessible rating component in React using the @techsio/ui-kit Rating, which leverages the ZagJS rating-group wrapper to unify interaction patterns and ensure proper accessibility across forms and product pages.
Yes, you can display a read-only rating by setting the readOnly prop on the Rating component, which renders the value without allowing user interaction. The disabled prop also restricts input while maintaining visual accessibility.
Handle controlled rating values using the value and onChange props, or manage uncontrolled state with the defaultValue prop. The component also tracks hover interactions to support dynamic visual feedback.
Yes, the Rating component supports half-star precision by enabling the allowHalf prop. You can also customize the total number of rating icons using the count prop.
The best way to style a rating control is by applying token-driven styling to the Rating component. This ensures consistent visual design across product pages and reviews while maintaining accessibility standards.
Add accessible labels and translations to a rating group by configuring the labelText and translations props on the Rating component. You can also set the name prop for proper form submission integration.
TechsioCZRender accessible labeled checkboxes with validation using FormCheckbox and ZagJS.
oferhaleviGenerate self-contained HTML, CSS, and JavaScript web apps that run in the browser.
justinlevinedotmeCreate reusable Radix UI and Tailwind CSS components for React projects.
sergiodxaApply WCAG accessibility best practices to React components.
