designer-skill: cleaner UI from your agent.

Get it

Star Rating

Kit UI — StarRating An animated star rating input. Hovering previews the rating with a spring fill and a small scale wave around the pointer, clicking commits with a pop and a tiny amber sparkle burst, and an optional rolling value label tracks the current or previewed rating. Works controlled or uncontrolled, supports fractional read-only display, honors prefers-reduced-motion, and exposes rad…

Star Rating preview
star-ratingLive preview · interact with it
Build promptPaste into Claude, Cursor or v0 with the Niblet MCP connected
Build the "Star Rating" React component in this project using the Niblet MCP (connected with my Niblet API key).

1. Call get_ui_component {"id": "star-rating"} to fetch its source files and dependencies.
2. Write each returned file at its target path, adapting the `@/` imports to this project's aliases.
3. Install the npm dependencies it lists. Add unprefixed registry dependencies with `npx shadcn@latest add <name>`; fetch `@niblet/<id>` ones with get_ui_component.
4. Render it on a page, run the type check, and confirm it works the way the live preview does.

Live preview: https://niblet.pymodel.com/components/star-rating
If the Niblet MCP is not connected, stop and tell me to create an API key at https://niblet.pymodel.com/account and follow https://niblet.pymodel.com/docs.
Category
uikit
License
MIT

Adapted from MIT-licensed open-source UI projects. Keep the MIT license notice with copies.

npm dependencies
  • framer-motion
Registry dependencies
  • utils
Files it installs
  • components/uikit/star-rating.tsx

Get the source

The source is served to your agent through the hosted Niblet MCP. Have it run:

  1. find_ui_materials {"query": "star rating", "kind": "component"}
  2. get_ui_component {"id": "star-rating"}

Needs an API key: get one on your account, then see the MCP setup docs.