Communitygithub.com

UI 스타일링

shadcn/ui 컴포넌트(Radix UI + Tailwind 기반), Tailwind CSS 유틸리티-퍼스트 스타일링, 캔버스 기반 비주얼 디자인을 사용하여 아름답고 접근성 높은 사용자 인터페이스를 만듭니다. 사용자 인터페이스 구축, 디자인 시스템 구현, 반응형 레이아웃 생성, 접근성 높은 컴포넌트(다이얼로그, 드롭다운, 폼, 테이블) 추가, 테마 및 색상 커스터마이징, 다크 모드 구현, 시각적 디자인 및 포스터 생성, 애플리케이션 전반에 일관된 스타일링 패턴을 구축할 때 사용하세요.

UI 스타일링란 무엇인가요?

이 스킬은 shadcn/ui 컴포넌트 라이브러리, Tailwind CSS 유틸리티 프레임워크, 캔버스 기반 시각 디자인 시스템을 통합하여 아름답고 접근성 높은 사용자 인터페이스를 빠르게 제작하는 방법을 제공합니다. React 기반 프레임워크(Next.js, Vite, Remix, Astro)에서 활용 가능하며, shadcn/ui의 복사-붙여넣기 방식 컴포넌트와 Tailwind의 유틸리티 클래스를 조합해 일관된 디자인 토큰과 반응형 레이아웃을 쉽게 구현합니다. 또한 다크 모드, 색상 커스터마이징, ARIA 패턴에 기반한 접근성 구성, 그리고 캔버스를 통한 정교한 시각적 구성을 지원합니다. CLI 기반 설치 및 설정 자동화 스크립트를 제공하여 초기 프로토타이핑부터 프로덕션 수준의 UI까지 효율적으로 작업할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/alhurwitz/alberts-agentic-arsenal/tree/HEAD/skills/ui-styling
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

UI 스타일링 스킬

shadcn/ui 컴포넌트, Tailwind CSS 유틸리티 스타일링, 캔버스 기반 시각 디자인 시스템을 결합하여 아름답고 접근성 높은 사용자 인터페이스를 만드는 종합 스킬입니다.

참고 자료

이 스킬을 사용해야 할 때

다음과 같은 경우에 사용하세요:

  • React 기반 프레임워크(Next.js, Vite, Remix, Astro)로 UI 구축
  • 접근성 높은 컴포넌트(다이얼로그, 폼, 테이블, 내비게이션) 구현
  • 유틸리티-퍼스트 CSS 접근 방식으로 스타일링
  • 반응형, 모바일 퍼스트 레이아웃 생성
  • 다크 모드 및 테마 커스터마이징 구현
  • 일관된 토큰을 가진 디자인 시스템 구축
  • 시각적 디자인, 포스터 또는 브랜드 자료 생성
  • 즉각적인 시각적 피드백을 통한 빠른 프로토타이핑
  • 복잡한 UI 패턴(데이터 테이블, 차트, 명령 팔레트) 추가

핵심 스택

컴포넌트 레이어: shadcn/ui

  • Radix UI 프리미티브를 통한 사전 구축된 접근성 높은 컴포넌트
  • 복사-붙여넣기 배포 모델 (컴포넌트가 코드베이스에 직접 위치)
  • TypeScript 우선, 완전한 타입 안전성
  • 복잡한 UI를 위한 구성 가능한 프리미티브
  • CLI 기반 설치 및 관리

스타일링 레이어: Tailwind CSS

  • 유틸리티-퍼스트 CSS 프레임워크
  • 런타임 오버헤드 없는 빌드 타임 처리
  • 모바일 퍼스트 반응형 디자인
  • 일관된 디자인 토큰(색상, 간격, 타이포그래피)
  • 자동 데드 코드 제거

시각 디자인 레이어: Canvas

  • 박물관급 시각적 구성
  • 철학 기반 디자인 접근 방식
  • 정교한 시각적 커뮤니케이션
  • 최소한의 텍스트, 최대의 시각적 임팩트
  • 체계적인 패턴과 세련된 미학

빠른 시작

컴포넌트 + 스타일링 설정

shadcn/ui와 Tailwind 설치:

npx shadcn@latest init

CLI가 프레임워크, TypeScript, 경로, 테마 기본 설정을 묻습니다. 이 과정에서 shadcn/ui와 Tailwind CSS가 함께 구성됩니다.

컴포넌트 추가:

npx shadcn@latest add button card dialog form

유틸리티 스타일링과 함께 컴포넌트 사용:

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

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

대안: Tailwind 전용 설정

Vite 프로젝트:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

컴포넌트 라이브러리 가이드

사용 패턴, 설치, 구성 예제를 포함한 종합적인 컴포넌트 카탈로그입니다.

참고: references/shadcn-components.md

다음 내용을 다룹니다:

  • 폼 및 입력 컴포넌트 (Button, Input, Select, Checkbox, Date Picker, Form validation)
  • 레이아웃 및 내비게이션 (Card, Tabs, Accordion, Navigation Menu)
  • 오버레이 및 다이얼로그 (Dialog, Drawer, Popover, Toast, Command)
  • 피드백 및 상태 (Alert, Progress, Skeleton)
  • 표시 컴포넌트 (Table, Data Table, Avatar, Badge)

테마 및 커스터마이징

테마 구성, CSS 변수, 다크 모드 구현, 컴포넌트 커스터마이징을 다룹니다.

참고: references/shadcn-theming.md

다음 내용을 다룹니다:

  • next-themes를 사용한 다크 모드 설정
  • CSS 변수 시스템
  • 색상 커스터마이징 및 팔레트
  • 컴포넌트 변형 커스터마이징
  • 테마 토글 구현

접근성 패턴

ARIA 패턴, 키보드 내비게이션, 스크린 리더 지원, 접근성 높은 컴포넌트 사용법을 다룹니다.

참고: references/shadcn-accessibility.md

다음 내용을 다룹니다:

  • Radix UI 접근성 기능
  • 키보드 내비게이션 패턴
  • 포커스 관리
  • 스크린 리더 알림
  • 폼 유효성 검사 접근성

Tailwind 유틸리티

레이아웃, 간격, 타이포그래피, 색상, 테두리, 그림자를 위한 핵심 유틸리티 클래스입니다.

참고: references/tailwind-utilities.md

다음 내용을 다룹니다:

  • 레이아웃 유틸리티 (Flexbox, Grid, 위치 지정)
  • 간격 시스템 (padding, margin, gap)
  • 타이포그래피 (글꼴 크기, 두께, 정렬, 줄 높이)
  • 색상 및 배경
  • 테두리 및 그림자
  • 사용자 정의 스타일링을 위한 임의 값

반응형 디자인

모바일 퍼스트 중단점, 반응형 유틸리티, 적응형 레이아웃을 다룹니다.

참고: references/tailwind-responsive.md

다음 내용을 다룹니다:

  • 모바일 퍼스트 접근 방식
  • 중단점 시스템 (sm, md, lg, xl, 2xl)
  • 반응형 유틸리티 패턴
  • 컨테이너 쿼리
  • 최대 너비 쿼리
  • 사용자 정의 중단점

Tailwind 커스터마이징

설정 파일 구조, 사용자 정의 유틸리티, 플러그인, 테마 확장을 다룹니다.

참고: references/tailwind-customization.md

다음 내용을 다룹니다:

  • 사용자 정의 토큰을 위한 @theme 지시어
  • 사용자 정의 색상 및 글꼴
  • 간격 및 중단점 확장
  • 사용자 정의 유틸리티 생성
  • 사용자 정의 변형
  • 레이어 구성 (@layer base, components, utilities)
  • 컴포넌트 추출을 위한 Apply 지시어

시각 디자인 시스템

캔버스 기반 디자인 철학, 시각적 커뮤니케이션 원칙, 정교한 구성을 다룹니다.

참고: references/canvas-design-system.md

다음 내용을 다룹니다:

  • 디자인 철학 접근 방식
  • 텍스트보다 시각적 커뮤니케이션
  • 체계적인 패턴과 구성
  • 색상, 형태, 공간 디자인
  • 최소 텍스트 통합
  • 박물관급 실행
  • 다중 페이지 디자인 시스템

유틸리티 스크립트

컴포넌트 설치 및 설정 생성을 위한 Python 자동화 도구입니다.

shadcn_add.py

의존성 처리를 포함한 shadcn/ui 컴포넌트 추가:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

사용자 정의 테마로 tailwind.config.js 생성:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

모범 사례

  1. 컴포넌트 구성: 단순하고 구성 가능한 프리미티브로 복잡한 UI 구축
  2. 유틸리티 퍼스트 스타일링: Tailwind 클래스를 직접 사용하고, 진정한 반복에 대해서만 컴포넌트 추출
  3. 모바일 퍼스트 반응형: 모바일 스타일로 시작하여 반응형 변형을 계층화
  4. 접근성 퍼스트: Radix UI 프리미티브 활용, 포커스 상태 추가, 시맨틱 HTML 사용
  5. 디자인 토큰: 일관된 간격 척도, 색상 팔레트, 타이포그래피 시스템 사용
  6. 다크 모드 일관성: 모든 테마 요소에 다크 변형 적용
  7. 성능: 자동 CSS 제거 활용, 동적 클래스명 피하기
  8. TypeScript: 더 나은 개발 경험을 위해 완전한 타입 안전성 사용
  9. 시각적 계층 구조: 구성을 통해 시선을 유도하고, 간격과 색상을 의도적으로 사용
  10. 전문적인 장인 정신: 모든 디테일이 중요 - UI를 공예로서 대우

참고 자료 탐색

컴포넌트 라이브러리

  • references/shadcn-components.md - 전체 컴포넌트 카탈로그
  • references/shadcn-theming.md - 테마 및 커스터마이징
  • references/shadcn-accessibility.md - 접근성 패턴

스타일링 시스템

  • references/tailwind-utilities.md - 핵심 유틸리티 클래스
  • references/tailwind-responsive.md - 반응형 디자인
  • references/tailwind-customization.md - 설정 및 확장

시각 디자인

  • references/canvas-design-system.md - 디자인 철학 및 캔버스 워크플로우

자동화

  • scripts/shadcn_add.py - 컴포넌트 설치
  • scripts/tailwind_config_gen.py - 설정 생성

일반 패턴

유효성 검사가 포함된 폼:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

다크 모드를 포함한 반응형 레이아웃:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

리소스

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

ui-demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community