skills.rest
shawnlivermore
shawnlivermoreCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnypantsGitHub

cleen-ui-setup

Install and configure Cleen UI monorepo packages with React 18 and react-router-dom v6.

Updated Mar 4, 2026
Search Tags:#component library#setup#frontend development#ui components#installation#cleen ui
One-click install
npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cleen-ui-setup
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-setup
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps users quickly and correctly install and configure the Cleen UI component library in their existing projects, ensuring all necessary dependencies and setup steps are handled.

Core Features & Use Cases

  • Package Installation: Installs @cleen/ui-core, @cleen/ui, and optionally @cleen/ui-pro.
  • Stylesheet Import: Guides the import of the core stylesheet for proper styling.
  • Root Class Application: Ensures the .cleen wrapper class is applied for correct component rendering.
  • Notification Container Setup: Places the <CleenNotificationContainer /> for global notifications.
  • Use Case: A developer starting a new project wants to use Cleen UI components and needs a straightforward way to add them to their codebase without missing any critical setup steps.

Quick Start

Use the cleen-ui-setup skill to install the Cleen UI packages and configure the project.

Frequently Asked Questions about cleen-ui-setup

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

FAQPage Schema
How do I install and configure the Cleen UI component library in my project?▼

To install Cleen UI, you need to add the `@cleen/ui-core`, `@cleen/ui`, and optionally `@cleen/ui-pro` monorepo packages, then import the core stylesheet and apply the `.cleen` wrapper class for correct component rendering.

What React dependencies are required to use Cleen UI?▼

Cleen UI requires peer dependencies of React 18 and `react-router-dom` v6. The installation process automatically checks your project's package manager to verify these specific versions are present before setup.

What is the purpose of the `.cleen` wrapper class in Cleen UI?▼

The `.cleen` wrapper class is a root class applied during Cleen UI setup to ensure proper styling and correct rendering of the component library's UI elements throughout your application.

How do I set up global notifications using Cleen UI?▼

To enable global notifications in Cleen UI, you must place the `<CleenNotificationContainer />` component in your application during the setup process, which handles the delivery and display of notification messages.

Can I selectively install only the core Cleen UI packages without the pro tier?▼

Yes, the Cleen UI setup allows you to install `@cleen/ui-core` and `@cleen/ui` as standard packages, while the `@cleen/ui-pro` package remains an optional addition for advanced components.

Why are my Cleen UI components rendering without styles after installation?▼

If Cleen UI components render without styles, you likely missed importing the core stylesheet or failed to apply the `.cleen` wrapper class to your root element during the configuration process.

Related Skills

Explore More Software Engineering Skills→
emaginebremaginebr
1

frontend-design

Generate React 18 frontend components with react-bootstrap and i18next.

Official
Intermediate
shawnlivermoreshawnlivermore

cleen-ui-layout

Build user interfaces with @cleen/ui layout components and Tailwind conventions.

Community
Intermediate
MAX5271MAX5271

cometchat-react-router-patterns

Guide React Router v6 and v7 integrations for CometChat with SSR-safe patterns.

Community
Advanced
gil-kapelgil-kapel
2

shadcn-ui

Integrate and customize React UI components with Tailwind CSS and Radix UI.

Community
Intermediate