HermeticOrmus

UI Modern — Design skill for Claude Code

Design community

Generate a modern UI component with best practices and design system compliance.

How to install UI Modern

Installs to ~/.claude/commands/hermeticormus-libreuiux-claude-code-ui-modern.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/HermeticOrmus/LibreUIUX-Claude-Code/HEAD/.claude/commands/ui-modern.md -o ~/.claude/commands/hermeticormus-libreuiux-claude-code-ui-modern.md

Restart Claude Code, or start a new session, for it to be picked up.

What UI Modern does

description: Generate a modern UI component with best practices and design system compliance

Modern UI Component Generator

Generate modern, production-ready UI components that follow current design trends and best practices.

Usage

/ui-modern [component-type] [variant]

**Examples:**

/ui-modern button
/ui-modern card pricing
/ui-modern form contact
/ui-modern nav sidebar

Instructions for Claude

When the user runs `/ui-modern [component]`, create

Alternatives in Design

Design UI UX — Design UI/UX systems with style guides, palettes, typography, and component specs 2.8k ★
Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★