n-rate

Collect user ratings with a configurable star-based component.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-rate
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-rate
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-rate
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-rate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rating collection for user feedback in Naive UI apps is simplified, enabling quick gathering of user opinions.

Core Features & Use Cases

  • Half-star support for precise ratings
  • Customizable color, size, and icon options
  • Readonly, clearable, and configurable maximum count
  • Use cases: product reviews, content ratings, customer feedback forms

Quick Start

Attach the n-rate component to your form and bind its value to your component state to capture user ratings.

Frequently Asked Questions about n-rate

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

FAQPage Schema
How do I collect user ratings with half-star precision in a Vue 3 application?

To collect user ratings with half-star precision in Vue 3, implement a star-based rating component that supports half-star increments. This enables precise feedback collection for granular product reviews and content rating scenarios.

Can I customize the color and size of star rating icons in Naive UI?

Yes, you can customize the color and size of star rating icons. The component provides configurable options for color, size variations, and icon customization to match your application's UI design and rating-driven UX requirements.

What is the best way to add a read-only star rating display for product reviews?

The best way to add a read-only star rating display is to use a configurable rating component with a read-only mode. This renders non-interactive star icons, ideal for showing existing product reviews and aggregated feedback scores.

How do I integrate a clearable rating component into a Vue 3 feedback form?

To integrate a clearable rating component into a Vue 3 feedback form, attach the component to your form structure and bind its value to your component state. The clearable mode allows users to reset their rating selection.

Does this star rating component support configurable maximum counts for content ratings?

Yes, this star rating component supports configurable maximum counts for content ratings. You can define the maximum number of stars displayed, allowing flexible scaling from standard 5-star reviews to custom 10-point rating scales.

Why choose a dedicated UI component for collecting feedback ratings instead of standard inputs?

A dedicated UI component for collecting feedback ratings provides half-star support, visual customization, and clearable modes that standard inputs lack. It simplifies gathering precise user opinions in rating-driven UX scenarios like product reviews.