ui-primitives-shadcn-lucide

Generate accessible UI components with Radix-style primitives and lucide-react icons.

117|46|Updated Jun 21, 2026
One-click install
npx skills add https://github.com/TheGoat395/Codex-Skills --skill ui-primitives-shadcn-lucide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-primitives-shadcn-lucide
Source: https://github.com/TheGoat395/Codex-Skills/tree/main/skills/ui-primitives-shadcn-lucide
Command: npx skills add https://github.com/TheGoat395/Codex-Skills --skill ui-primitives-shadcn-lucide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill helps create non-generic UI components using Radix-style primitives and lucide-react icons, enhancing accessibility and custom styling.

Core Features & Use Cases

  • Customization: Customize tokens, radii, borders, focus states, and icons.
  • Design Direction: Focus on structure rather than visual identity.
  • Use Case: For building accessible UI components like dialogs, menus, and forms for modern websites.

Quick Start

Use the UI Primitives Shadcn Lucide skill to create a custom dialog for your web application.

Frequently Asked Questions about ui-primitives-shadcn-lucide

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

FAQPage Schema
How do I build accessible UI components with custom styling?

Build accessible UI components by generating non-generic structures using Radix-style primitives and lucide-react icons, which provide inherent accessibility while allowing you to apply custom focus states and borders.

What is the best way to customize shadcn UI primitives without overriding the visual structure?

Customize shadcn UI primitives by modifying design tokens, radii, and focus states rather than altering the base structure. This approach ensures you maintain accessibility while focusing purely on structural customizability.

How do I create a custom dialog for a modern web application?

Create a custom dialog by utilizing Radix-style primitives to establish the structural foundation and accessibility features, then apply your custom design tokens and lucide-react icons for a tailored frontend workflow.

Does this approach apply default visuals to my frontend UI design?

No, this approach does not apply default visuals to your frontend UI design. It focuses entirely on providing design direction and structural customizability, leaving the visual identity entirely up to you.

When should I not use Radix-style primitives for UI component generation?

You should not use Radix-style primitives if your project requires pre-packaged visual identity or out-of-the-box styling, as this approach intentionally provides structure and accessibility without default visuals.