skills.rest
nechmads
nechmadsCOMMUNITY
Explore all skills by this author →
Website𝕏@nechmadsGitHub

ui-designer

Generate React/Tailwind UI components and design tokens with usage documentation.

Updated Feb 7, 2026
Search Tags:#react#tailwind#tokens#ui-design#design-systems#component-library#ux-patterns
One-click install
npx skills add https://github.com/nechmads/blogging-system --skill ui-designer-nechmads
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/nechmads/blogging-system/tree/main/.codex/skills/ui-designer
Command: npx skills add https://github.com/nechmads/blogging-system --skill ui-designer-nechmads

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill reduces the friction between UI design and implementation by turning design concepts into ready-to-use UI components and design systems.

Core Features & Use Cases

  • UI Components in Code: Produce functional, styled React components (JSX) with Tailwind-ready classes.
  • Design Systems & Tokens: Create and document design tokens for colors, spacing, typography, and components with clear usage guidelines.
  • UI Mockups & Specifications: Provide precise design specifications, states, and interaction patterns to guide development.
  • Research & Patterns: Compile current UI patterns and patterns with actionable implementation notes.

Quick Start

Create a basic UI library starter: a Button, Card, and Grid components in a new React project using Tailwind; include a colors/typography tokens file and a simple design-system doc.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I convert UI design concepts into production-ready React components with Tailwind?▼

To convert UI design concepts into production-ready React components, this Skill generates functional JSX styled with Tailwind classes, enforcing design tokens for colors, spacing, and typography to ensure implementation consistency.

What is the best way to build a React component library with design tokens?▼

Building a React component library with design tokens is achieved by generating a structured tokens file for colors, spacing, and typography, alongside reusable components and a design-system doc with clear usage guidelines.

How do I document UX patterns and interaction states for a design system?▼

To document UX patterns and interaction states for a design system, this Skill compiles current UI patterns and provides precise design specifications, states, and actionable implementation notes for development guidance.

Can I use this to generate a React and Tailwind starter UI library?▼

Yes, you can generate a React and Tailwind starter UI library by creating foundational Button, Card, and Grid components, complete with a colors and typography tokens file and a simple design-system doc.

Does this approach enforce design tokens for spacing and typography in React?▼

Yes, this approach strictly enforces design tokens for spacing, typography, and colors, translating visual design specifications directly into structured Tailwind classes within your React components.

Related Skills

Explore More Design & Creative Skills→
Ahnd6474Ahnd6474

accelint-design-foundation

Style React components with Accelint Design Foundation tokens and CSS modules.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
AngusatgithubAngusatgithub

design-system-alignment

Catalog design tokens, components, and patterns to align with design systems.

Community
Advanced
raduceucaraduceuca

figma-to-code

Convert Figma frames into React components with Tailwind CSS.

Community
Intermediate