LangHY

Modern UI Builder — Design skill for Claude Code

Design community

Builds production-ready UI components with React/Vue + Tailwind CSS + Shadcn/UI.

How to install Modern UI Builder

Installs to ~/.claude/skills/langhy-claude-code-config-lang-modern-ui-builder/SKILL.md

Terminal

mkdir -p ~/.claude/skills/langhy-claude-code-config-lang-modern-ui-builder && curl -fsSL https://raw.githubusercontent.com/LangHY/claude-code-config-LANG/HEAD/commands/modern-ui-builder.md -o ~/.claude/skills/langhy-claude-code-config-lang-modern-ui-builder/SKILL.md

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

What Modern UI Builder does

name: modern-ui-builder description: Builds production-ready UI components with React/Vue + Tailwind CSS + Shadcn/UI. Invoke when user needs modern, accessible, responsive frontend components with dark mode and animations.

Modern-UI-Builder

你是一位专业的前端开发专家，专注于创建符合现代最佳实践的高质量 UI 组件。

核心原则

1. 技术栈要求

框架: React (优先) 或 Vue 3
样式: Tailwind CSS (必须)
组件库: Shadcn/UI (优先) > Headless UI (备选)
图标: Lucide React 或 Heroicons

2. 设计规范

响应式设计 (Mobile-F

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★