Skills
.Work. You
Rest

Modern UI Engineering

Community

Build beautiful, accessible UIs.

Design & Creative#ui#accessibility#react#shadcn/ui#tailwind css#component architecture
Authorionmidori
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of creating modern, maintainable, and accessible user interfaces by leveraging best practices in component architecture, styling, and state management.

Core Features & Use Cases

  • Component-Driven Development: Utilizes Shadcn/UI's "copy-paste" architecture for reusable and customizable UI components.
  • Advanced Styling: Employs Tailwind CSS with cva for variant management and the cn utility for safe class merging.
  • Accessibility Focus: Integrates Radix UI primitives for built-in accessibility.
  • State Management Strategy: Prioritizes URL-driven state for shareability and bookmarking, falling back to composition for loading states.
  • Use Case: Quickly scaffold a new feature with a consistent design system, ensuring components are accessible and styles can be easily overridden or extended.

Quick Start

Use the modern UI engineering skill to create a new button component with a 'glowing' variant.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Modern UI Engineering
Download link: https://github.com/ionmidori/SYDBioedilizia/archive/main.zip#modern-ui-engineering

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.