skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Rating

Implement customizable star rating components with read-only and interactive modes.

Updated Aug 27, 2026
Search Tags:#design system#interactive#ui component#user feedback#rating#star rating
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-rating
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Rating
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Rating
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-rating

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a flexible and accessible way to display and interact with star ratings in user interfaces, supporting various display modes and customization options.

Core Features & Use Cases

  • Display Ratings: Show read-only star ratings with customizable sizes and colors.
  • Interactive Ratings: Allow users to input ratings with support for half-star increments.
  • Variants: Offers full (stars + number), compact (one star + number), and iconOnly (stars only) display options.
  • Use Case: Integrate a star rating system into a product review section of an e-commerce site, allowing users to rate products and displaying average ratings clearly.

Quick Start

Use the Rating component to display a read-only rating of 4.5 stars with a large size.

Frequently Asked Questions about use-design-system/Rating

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

FAQPage Schema
How do I add an interactive star rating to my UI for user feedback?▼

Display read-only star ratings by configuring the component with customizable sizes and colors. It supports a full variant showing stars plus a number, and an iconOnly variant displaying stars alone, making it suitable for clear visual representation of average scores.

Can I show half-star precision in a read-only rating display?▼

Yes, you can show half-star precision in both read-only and interactive modes. The component accurately renders partial stars to reflect precise average scores, ensuring visual representation matches the exact numeric rating value.

What display variants are available for a star rating component?▼

Available display variants include full, compact, and iconOnly. The full variant shows stars with a number, compact displays a single star with a number, and iconOnly renders just the stars, offering flexible layout options for different UI constraints.

Does this star rating component require any external dependencies?▼

No, this star rating component does not require any external dependencies. It operates independently to provide customizable sizes, colors, and interactive or read-only modes without needing additional libraries or frameworks.

Related Skills

Explore More Design & Creative Skills→
thedaviddiasthedaviddias
228

Rating Input

Implement an accessible star-based rating input with keyboard and screen reader support.

Community
Intermediate
wlzhwlzh
598

code-roaster

Generate a Markdown code review report with humorous feedback.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

component-states

Generate interaction state matrices with ARIA semantics for UI components.

Official
Advanced
BartunekBartunek

reactions

React to WhatsApp messages with emoji via mcp__nanoclaw__react_to_message.

Community
Basic