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

cleen-ui-component-selector

Select the appropriate @cleen/ui component for UI elements using component-index.md and decision-guide.md.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents the inefficient practice of building custom UI components from scratch when a pre-built, optimized component already exists within the @cleen/ui library.

Core Features & Use Cases

  • Component Discovery: Helps identify the most suitable @cleen/ui component for any given UI requirement.
  • Best Practice Enforcement: Guides developers to leverage the library's capabilities, ensuring consistency and reducing development time.
  • Use Case: When a user asks to "build a dashboard page," this skill ensures you select DataGrid, Card, and Sidebar components instead of attempting to code them manually.

Quick Start

Use the cleen-ui-component-selector skill to find the best component for displaying a list of user profiles.

Frequently Asked Questions about cleen-ui-component-selector

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

FAQPage Schema
How do I select the right UI component for frontend development instead of building from scratch?▼

To select the right UI component for frontend development, this skill consults the library's component index and decision guide to match your interface requirements with pre-built, optimized elements, preventing inefficient custom implementations.

What is the best way to find @cleen/ui components for forms, navigation, and data display?▼

The best way to find @cleen/ui components for forms, navigation, and data display is to use this skill's component discovery process, which evaluates your UI patterns against the existing library to enforce development best practices.

Does this component selection process cover overlays and feedback mechanisms?▼

Yes, this component selection process covers overlays and feedback mechanisms, analyzing all UI patterns including data display and navigation to ensure you leverage existing library capabilities instead of coding custom overlays.

When should I use a pre-built UI component over a custom implementation?▼

You should use a pre-built UI component over a custom implementation whenever a matching pattern exists in the library, ensuring interface consistency and reducing development time by leveraging optimized, existing code.

How do I build a dashboard page using existing UI components?▼

To build a dashboard page using existing UI components, this skill identifies suitable library elements like DataGrid, Card, and Sidebar, preventing manual coding by matching your dashboard requirements with pre-built optimized patterns.

Do I need to consult a decision guide for accurate component selection?▼

Yes, you need to consult the decision guide and component index for accurate component selection, as these references provide the required matching logic to correctly identify the appropriate UI element for your specific interface requirement.

Related Skills

Explore More Software Engineering Skills→
ilamanovilamanov

frontend-patterns

Guide UI component development with frontend and web design best practices for forms, buttons, and modals.

Community
Advanced
shawnlivermoreshawnlivermore

cleen-ui-navigation

Build navigation structures using @cleen/ui components like Sidebar, Tabs, and Breadcrumb.

Community
Intermediate
pattarapoljpattarapolj

building-native-ui

Design and build React Native and Expo user interfaces with navigation patterns.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate