UI Styling & Design System

Các skills hỗ trợ styling UI và quản lý design system — từ component library đến design tokens.

Skills chính

/shadcn-ui

Setup + extend shadcn/ui (Radix UI + Tailwind), dark mode, accessible components.

/ui-styling

shadcn/ui (Radix UI + Tailwind), dark mode, accessible components, responsive layouts.

/design-system

Token architecture 3 lớp, CSS variables, component specs, spacing/typography scales.

/ui-ux-pro-max

50+ styles, 161 color palettes, 57 font pairings, 99 UX guidelines, 25 chart types.

/shadcn-ui — Setup & Extend

Skill chuyên setup shadcn/ui + Tailwind CSS + extend components cho project mới.

Khả năng	Chi tiết
Setup	Cài đặt shadcn/ui, Tailwind, TypeScript types
Components	Đầy đủ library 50+ components (Dialog, Dropdown, Form, Table, Tabs, Toast, Tooltip…)
Dark mode	Automatic dark mode support (tự động detect system preference)
Accessibility	WCAG 2.1 AA compliant (built-in từ Radix UI)
Responsive	Mobile-first responsive design
Customization	Extend components, custom themes, CSS variables

Khi nào dùng:

Setup shadcn/ui cho project mới
Extend shadcn/ui components
Customize theme + colors
Add dark mode support

/shadcn-ui                          # Setup từ đầu
/shadcn-ui --extend "custom-button" # Extend component hiện tại

ui-styling — Component Library

Skill cho building UI với shadcn/ui (Radix UI + Tailwind CSS):

Khả năng	Chi tiết
Components	Dialog, dropdown, form, table, tabs, toast, tooltip…
Styling	Tailwind utility classes, custom themes, CSS variables
Dark mode	Automatic dark mode support
Accessibility	WCAG 2.1 AA compliant (built-in từ Radix UI)
Responsive	Mobile-first responsive design
Canvas	Canvas-based visual designs và posters

Khi nào dùng:

Implement UI components
Create responsive layouts
Customize themes và colors
Build design systems

design-system — Token Architecture

Quản lý design tokens theo 3 lớp:

Primitive Tokens → Semantic Tokens → Component Tokens
   (raw values)     (purpose-based)    (component-specific)

Ví dụ:
   blue-500    →    color-primary   →   button-bg-primary
   16px        →    spacing-md      →   card-padding
   Inter 700   →    font-heading    →   h1-font

Lớp	Mô tả	Ví dụ
Primitive	Giá trị raw	`#2563EB`, `16px`, `700`
Semantic	Ý nghĩa	`color-primary`, `spacing-md`
Component	Cụ thể	`button-bg`, `card-padding`

Output: CSS variables, component specs, spacing/typography scales.

ui-ux-pro-max — Design Intelligence

Database thiết kế khổng lồ cho tra cứu:

Category	Số lượng	Ví dụ
Styles	50+	Glassmorphism, neumorphism, brutalism, bento grid
Color Palettes	161	Per industry, per mood, per brand
Font Pairings	57	Heading + body combinations
Product Types	161	SaaS, e-commerce, portfolio, dashboard
UX Guidelines	99	Navigation, forms, onboarding, search
Chart Types	25	Bar, line, pie, treemap, sankey
Stacks	10	React, Next.js, Vue, Svelte, Flutter, Tailwind

Khi nào dùng: Tìm inspiration, chọn style/color/font cho project mới.

Tech Stack hỗ trợ

React + Tailwind
Design Tokens (CSS)

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

export function ProductCard({ name, price }) {
  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardContent className="p-6">
        <h3 className="text-lg font-semibold">{name}</h3>
        <p className="text-2xl font-bold text-primary">{price}</p>
        <Button className="mt-4 w-full">Mua ngay</Button>
      </CardContent>
    </Card>
  )
}

:root {
  /* Primitive */
  --blue-500: #2563EB;
  --gray-100: #F3F4F6;
  --radius-md: 8px;

  /* Semantic */
  --color-primary: var(--blue-500);
  --color-bg: var(--gray-100);
  --radius-card: var(--radius-md);

  /* Component */
  --button-bg: var(--color-primary);
  --card-radius: var(--radius-card);
  --card-padding: 1.5rem;
}

​UI Styling & Design System

​Skills chính

/shadcn-ui

/ui-styling

/design-system

/ui-ux-pro-max

​/shadcn-ui — Setup & Extend

​ui-styling — Component Library

​design-system — Token Architecture

​ui-ux-pro-max — Design Intelligence

​Tech Stack hỗ trợ