cleen-ui-navigation

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

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cleen-ui-navigation
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-navigation
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents the common and time-consuming task of building navigation components like sidebars, tabs, breadcrumbs, and wizards from scratch, ensuring you leverage the robust and pre-built solutions within the @cleen/ui library.

Core Features & Use Cases

  • Component Selection: Guides you to pick the correct navigation component (Sidebar, Tabs, Breadcrumb, Wizard, Stepper, Pagination) based on your UI requirements.
  • Implementation Guidance: Provides detailed examples and prop explanations for each component.
  • Use Case: When asked to "create an app shell with a left-hand menu and routing," this Skill will guide you to use the Sidebar component and integrate it with your router.

Quick Start

Use the cleen-ui-navigation skill to implement a sidebar for your application.

Frequently Asked Questions about cleen-ui-navigation

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

FAQPage Schema
How do I build a sidebar navigation menu using a UI component library?▼

To build a sidebar navigation menu, you should use the pre-built Sidebar component from the @cleen/ui library rather than creating a custom implementation from scratch. This ensures adherence to library conventions and integrates seamlessly with your application routing.

What is the best way to implement multi-step wizards and progress indicators in a web app?▼

The best way to implement multi-step wizards and progress indicators is by using the Wizard and Stepper components from the @cleen/ui library, which provide robust patterns and prevent the time-consuming task of building these navigation structures from scratch.

Can I use @cleen/ui navigation components with my existing application router?▼

Yes, you can use @cleen/ui navigation components with your existing application router. The Skill provides implementation guidance for integrating components like the Sidebar directly with your routing setup to create a functional app shell.

How do I add breadcrumbs for hierarchical navigation in my UI application?▼

To add hierarchical breadcrumbs in your UI application, use the pre-built Breadcrumb component from the @cleen/ui library, which ensures proper navigation structure and adherence to library conventions without requiring custom implementation.

When should I use tabs versus pagination for organizing content sections?▼

Use the Tabs component for organizing content sections when you need tabbed content areas, and use the Pagination component for organizing paginated lists. The @cleen/ui library provides both to handle different navigation patterns effectively.

Why should I avoid building custom navigation components instead of using a UI library?▼

You should avoid building custom navigation components because the @cleen/ui library provides pre-built, robust solutions for common elements like sidebars, tabs, and breadcrumbs, preventing time-consuming custom implementations and ensuring library convention adherence.