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.