constructive-ui

Provide React UI components with OKLCH theming and Tailwind CSS v4.

1|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/constructive-io/constructive-skills --skill constructive-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: constructive-ui
Source: https://github.com/constructive-io/constructive-skills/tree/main/skills/constructive-ui
Command: npx skills add https://github.com/constructive-io/constructive-skills --skill constructive-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of pre-built, accessible, and themeable UI components, drastically reducing the time and effort required to build user interfaces. It ensures consistency and adherence to modern design patterns.

Core Features & Use Cases

  • Component Library: Access over 50+ React components (buttons, forms, dialogs, layout, etc.).
  • Theming & Styling: Built with OKLCH color tokens and Tailwind CSS v4 for easy theming and dark mode support.
  • Developer Experience: Follows consistent patterns (cva, cn, data-slot) and provides deep import conventions for tree-shaking.
  • Use Case: Quickly scaffold a new dashboard page by importing and composing components like Sidebar, Card, Table, and Tabs, all styled consistently with your application's theme.

Quick Start

Use the constructive-ui skill to import the Button component and render it with a primary variant.

Frequently Asked Questions about constructive-ui

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

FAQPage Schema
How do I build a React UI with accessible components and Tailwind CSS v4?

Build a React UI with accessible components and Tailwind CSS v4 by using a library offering over 50 pre-built forms, overlays, and layout elements styled with OKLCH color tokens for consistent theming and dark mode support.

Can I use OKLCH color tokens for theming a React component library?

Yes, you can use OKLCH color tokens for theming a React component library. The components are built with Tailwind CSS v4 and utilize these tokens to ensure easy theming and seamless dark mode support across your application.

What is the best way to scaffold a dashboard page with React UI components?

The best way to scaffold a dashboard page is by importing and composing pre-built React UI components like Sidebar, Card, Table, and Tabs. This approach ensures your dashboard is styled consistently with your application's theme.

Does this React component library support deep imports for tree-shaking?

Yes, this React component library supports deep import conventions for tree-shaking. It follows consistent developer experience patterns like class variance authority and data-slot attributes to optimize your frontend bundle size.

What React UI components are available for building overlays and command palettes?

Available React UI components for building overlays and command palettes include over 50 elements such as dialogs, forms, and layout pieces. The library specifically supports advanced patterns like stack navigation and animated effects.

Do I need Tailwind CSS to use this React component library?

You need Tailwind CSS v4 to properly utilize this React component library, as the UI components are built with it. The integration ensures adherence to modern design patterns and provides OKLCH color token-based theming out of the box.