​
UI Styling & Design System

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

​
3 Skills chính

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.

​
ui-styling — Component Library

Skill cho building UI với shadcn/ui (Radix UI + Tailwind CSS):
Khả năngChi tiết
ComponentsDialog, dropdown, form, table, tabs, toast, tooltip…
StylingTailwind utility classes, custom themes, CSS variables
Dark modeAutomatic dark mode support
AccessibilityWCAG 2.1 AA compliant (built-in từ Radix UI)
ResponsiveMobile-first responsive design
CanvasCanvas-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ớpMô tảVí dụ
PrimitiveGiá trị raw#2563EB, 16px, 700
SemanticÝ nghĩacolor-primary, spacing-md
ComponentCụ 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:
CategorySố lượngVí dụ
Styles50+Glassmorphism, neumorphism, brutalism, bento grid
Color Palettes161Per industry, per mood, per brand
Font Pairings57Heading + body combinations
Product Types161SaaS, e-commerce, portfolio, dashboard
UX Guidelines99Navigation, forms, onboarding, search
Chart Types25Bar, line, pie, treemap, sankey
Stacks10React, 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ợ

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>
  )
}