8starlabsOfficial·9 Agent Skills Included

ui

Modern UI components, CSS transitions, and design reviews

Installs and integrates 8StarLabs UI components into Next.js and shadcn projects with correct imports and registry setup. Adds production-ready CSS transitions for modals, dropdowns, badges, and skeleton loaders without hand-tuning animations. Migrates Radix UI code to Base UI, reviews frontend visual design, and drafts clean pull request descriptions.

130|8

↗

npx skills add 8starlabs/ui --all -g -y

Available:

Routes user requests to the right skill in this repository, such as component shipping, registry installation, pattern review, frontend design, transitions, or PR drafting.

All Skills in This Repository (9)

Pure Emerald Level Indicators

📦 In Repo

8starlabs

shadcn

Manage shadcn UI components in Next.js projects via CLI.

migrate-radix-to-base

Migrate React projects from Radix UI to Base UI components.

card-resize

Resize CSS elements with customizable transition effects.

skills-transitions-dev

Provide CSS transition effects for interactive web elements.

8sl-consume-registry

Install and integrate 8StarLabs UI components into Next.js projects with shadcn.

frontend-design

Guide distinctive web UI design with principles for palette, typography, and layout.

8sl-pattern-review

Review 8StarLabs UI component usage for import correctness and documentation alignment.

pr-comment

Write PR descriptions and change summaries from code commits.

8sl-component-ship

Automate shipping and maintenance of 8StarLabs UI components with validation.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install 8StarLabs UI?▼

Run `npx skills add 8starlabs/ui --all -g -y` in your terminal to install all skills in this collection globally.

How to add 8StarLabs components to a Next.js app?▼

The consume-registry skill gives your agent the exact shadcn registry command and components.json setup, so components install with correct paths and imports.

Can it add animations to my web app?▼

Yes. The transitions skill provides 21 production-ready CSS transitions for modals, dropdowns, badges, and loaders, each with accessibility-safe reduced-motion support.

How to migrate from Radix UI to Base UI?▼

The migration skill converts components step by step using verified prop mappings, keeps the project buildable throughout, and writes a per-component report.

Does 8StarLabs UI work with Claude Code and Cursor?▼

Yes. All skills follow the universal SKILL.md standard and run in Claude Code, Cursor, Codex, and other compatible coding environments.