skills.rest
TekLabsVN
TekLabsVNOFFICIAL
Explore all skills by this author →
GitHub

ui-design

Generate HTML and React previews for UI components using Tailwind, MagicUI, Shadcn, and Phosphor icons.

1|Updated Mar 20, 2026
Search Tags:#react#tailwind#ui-design#shadcn#design-tokens#phosphor-icons#magicui
One-click install
npx skills add https://github.com/TekLabsVN/claude-skills --skill ui-design-teklabsvn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/TekLabsVN/claude-skills/tree/main/ui-design
Command: npx skills add https://github.com/TekLabsVN/claude-skills --skill ui-design-teklabsvn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to quickly produce production-ready UI components that align with design tokens, while validating visual parity across HTML previews and React implementations.

Core Features & Use Cases

  • Generates an HTML preview using a Tailwind CDN and a React preview with MagicUI/Shadcn/Phosphor to compare visuals early.
  • Supports updating design tokens and refreshing ui-design.md when DESIGN.md is present.
  • Enables side-by-side comparison of HTML and React previews to catch rendering differences before writing production code.
  • Provides a design-intake workflow for requests (style, palette, dark mode, references) to standardize component design.

Quick Start

Input a component to design, and let the skill generate HTML and React previews for comparison.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I generate React UI components with Tailwind and Shadcn for visual validation?▼

You can validate UI designs by generating side-by-side HTML and React previews. This skill uses Tailwind, MagicUI, Shadcn, and Phosphor icons to compare rendering differences and validate design tokens before you write production code.

Can I use MagicUI and Phosphor icons together when building UI components?▼

Yes, you can use MagicUI and Phosphor icons together when building UI components. The generated React previews specifically leverage MagicUI, Shadcn, and Phosphor icons to render visual outputs and validate your component designs effectively.

How do I update design tokens when building Tailwind UI components?▼

You can update design tokens by including a DESIGN.md file in your project. When present, the skill automatically refreshes the ui-design.md configuration, ensuring your generated HTML and React previews reflect the updated token values.

Does this UI design workflow support dark mode and custom palette intake?▼

Yes, the UI design workflow supports dark mode and custom palette intake. It uses a standardized design-intake process for requests, allowing you to specify style preferences, color palettes, dark mode requirements, and reference materials to inspire component generation.

What is the best way to compare HTML and React previews for UI components?▼

The best way to compare HTML and React previews is through side-by-side visual validation. This skill generates an HTML preview using a Tailwind CDN alongside a React preview using Shadcn and MagicUI to catch rendering differences before production coding.

Related Skills

Explore More Design & Creative Skills→
binfen1binfen1

design-style

Apply brand design systems to UI projects by reading DESIGN.md guidelines.

Community
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
pcatattackspcatattacks
14

design-system

Standardize UI components and styling with DaisyUI and Tailwind CDN.

Community
Intermediate