ui-styling작성자 nextlevelbuilder

UI Styling 스킬.

UI 디자인을 위한 Claude Code와 Codex 스킬: shadcn/ui, Tailwind CSS, 캔버스 기반 비주얼을 활용한 접근 가능한 UI 스타일링을 제공합니다.

Web & UI
UI 코드

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 10,626자

01 기능

Claude Code와 Codex에서 ui-styling 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 shadcn/ui 컴포넌트(Radix UI 프리미티브와 Tailwind CSS)를 결합하고, Tailwind CSS를 활용한 유틸리티 우선 스타일링과 캔버스 기반 시각적 디자인 시스템을 함께 사용하여 접근성을 갖춘 React 사용자 인터페이스를 구축합니다. Next.js, Vite, Remix, Astro 프로젝트를 대상으로 합니다. 컴포넌트는 CLI를 통해 코드베이스에 복사되므로 완전한 제어와 TypeScript 타입 안전성을 확보할 수 있습니다.

이 스킬은 반응형 레이아웃, 다크 모드, 디자인 토큰, 폼 유효성 검사, 데이터 테이블, 그리고 미술관 수준의 시각적 구성을 다룹니다. 컴포넌트 패턴, 테마 설정, 접근성(ARIA, 키보드 내비게이션), 반응형 브레이크포인트, Tailwind 커스터마이징에 대한 참조 문서를 포함합니다. Python 스크립트가 컴포넌트 설치와 설정 파일 생성을 자동화합니다.

산출물

커스텀 테마 토큰, 색상, 글꼴, 간격, 브레이크포인트 확장을 포함하여 생성된 tailwind.config.js입니다.

예시 프롬프트 보기 ↗

작동 방식

01
Tailwind로 Shadcn/ui 초기화하기
npx shadcn@latest init을 실행하여 shadcn/ui와 Tailwind CSS를 함께 구성합니다. 이때 프레임워크, TypeScript, 경로, 테마 설정에 대한 선택을 요청합니다.
02
코드베이스에 컴포넌트 추가하기
npx shadcn@latest add button card dialog form을 실행하여 컴포넌트를 설치합니다. 이 명령은 컴포넌트를 프로젝트에 복사하여 완전한 제어와 커스터마이징을 가능하게 합니다.
03
유틸리티 클래스로 구성하기
JSX className 속성 안에서 shadcn/ui 컴포넌트와 Tailwind 유틸리티 클래스를 결합하여 반응형 레이아웃, 간격, 색상, 호버 상태를 직접 구현합니다.
04
다크 모드 변형 적용하기
next-themes를 사용하여 테마를 전환하고, 테마가 적용된 모든 요소에 dark: 접두사가 붙은 유틸리티 클래스를 추가하여 일관된 다크 모드를 지원합니다.
05
Radix 접근성 활용하기
Radix UI 프리미티브는 별도의 설정 없이도 기본 제공되는 ARIA 패턴, 키보드 내비게이션, 포커스 관리를 제공합니다.

02 적합성 확인

ui-styling Skill을 사용해야 하는 경우

이러한 종류의 UI 디자인 작업일 때 Claude Code 또는 Codex에서 ui-styling 스킬을 사용하십시오. 적합성과 제한 사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

Next.js, Vite, Remix, Astro와 같은 React 기반 프레임워크로 UI를 구축하는 경우.
대화상자, 폼, 테이블, 내비게이션 등 접근성을 갖춘 컴포넌트를 구현하는 경우.
유틸리티 우선 CSS 방식으로 반응형, 모바일 우선 레이아웃을 만드는 경우.
일관된 토큰과 다크 모드 지원을 갖춘 디자인 시스템을 구축하는 경우.
캔버스 기반 워크플로로 시각적 디자인, 포스터, 브랜드 자료를 생성하는 경우.

한계 인지하기

shadcn/ui, Tailwind CSS 필요SKILL.md에 명시된 종속성입니다. 프로젝트에 이 패키지가 없으면 스킬이 작동하지 않습니다.

제공할 사항

설치용 컴포넌트 이름컴포넌트 이름을 shadcn_add.py 또는 npx shadcn@latest add에 전달하면 의존성 처리와 함께 설치됩니다.
커스텀 테마 토큰커스텀 색상과 글꼴을 tailwind_config_gen.py에 제공하면 확장된 테마를 포함한 tailwind.config.js가 생성됩니다.

03 스킬 내부

Claude Code와 Codex에 ui-styling 스킬이 제공하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

모바일 우선 반응형
모바일 스타일부터 시작하고 브레이크포인트(sm, md, lg, xl, 2xl)를 사용해 반응형 변형을 계층화합니다. Tailwind는 기본적으로 모바일 우선으로 처리합니다.
유틸리티 우선 추출
JSX에서 Tailwind 클래스를 직접 사용합니다. 컴포넌트 추출은 단일 사용 패턴이 아니라 실제 반복이 있을 때만 수행합니다.
스킬 디렉터리 기준 스크립트 경로
이 스킬의 스크립트 경로는 프로젝트 루트가 아니라 SKILL.md가 포함된 디렉터리를 기준으로 합니다.
접근성 우선 컴포넌트 사용
ARIA 패턴을 위해 Radix UI 프리미티브를 활용하고, 인터랙티브 요소에 포커스 상태를 추가하며, 시맨틱 HTML을 사용합니다. 스크린 리더 지원은 shadcn/ui 컴포넌트에 기본 내장되어 있습니다.
일관성을 위한 디자인 토큰
Tailwind 설정에 정의된 일관된 여백 스케일, 색상 팔레트, 타이포그래피 시스템을 사용합니다. 임의의 값 대신 테마 변수를 적용합니다.
TypeScript 타입 안전성
모든 컴포넌트는 TypeScript 우선으로 작성되어 완전한 타입 안전성을 제공합니다. 더 나은 개발자 경험을 위해 타입이 지정된 props와 폼 스키마를 사용합니다.
동적 클래스 이름 피하기
Tailwind의 자동 CSS 퍼징은 정적 클래스 이름을 요구합니다. 클래스를 동적으로 생성하면 데드 코드 제거가 동작하지 않습니다.
전문가 수준의 완성도 기준
모든 디테일이 중요합니다—UI를 하나의 공예로 다루십시오. 체계적인 패턴과 정제된 미감으로 시각적 구성에 미술관 수준의 완성도를 적용합니다.

04 활용하기

Claude Code 또는 Codex에 ui-styling 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 ui-styling 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

.claude/skills/ui-styling/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

모바일 우선 레이아웃이 올바르게 적응하는지 확인하기 위해 sm, md, lg, xl, 2xl에서 반응형 브레이크포인트를 테스트합니다.
대화상자와 폼에서 키보드 내비게이션, 포커스 관리, 스크린 리더 알림을 테스트하여 접근성을 검증합니다.
react-hook-form과 zod 리졸버를 사용한 폼 유효성 검사를 검토하여 오류 메시지가 올바르게 표시되는지 확인합니다.

OpenDesign에서 SKILL.md 링크를 통해 ui-styling을 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill 브랜치 main
스킬 파일: .claude/skills/ui-styling/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 7f69fed
License: Apache-2.0 .claude/skills/ui-styling/LICENSE.txt에서; SKILL.md에는 "MIT"라고 표시되어 있습니다. 파일 수준 LICENSE.txt는 Apache-2.0이라고 하지만 프론트 매터는 MIT라고 합니다. 파일 수준 라이선스로 표시됩니다.
리포지토리 스타: 127,450 이 카탈로그에 7개의 스킬을 포함하는 nextlevelbuilder/ui-ux-pro-max-skill 저장소 전체에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. ui-styling에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 스킬을 사용해야 하는 경우React 프레임워크, 접근 가능한 컴포넌트, 반응형 레이아웃, 다크 모드, 디자인 시스템, 시각적 디자인 등의 시나리오를 나열합니다.
핵심 스택shadcn/ui 컴포넌트, Tailwind 유틸리티 스타일링, 캔버스 시각 디자인 레이어를 설명합니다.
스크립트 경로스크립트 경로가 프로젝트 루트가 아니라 스킬 디렉터리를 기준으로 한다는 점을 설명합니다.
빠른 시작shadcn/ui 초기화, 컴포넌트 설치, Vite용 Tailwind 전용 설정을 보여줍니다.
컴포넌트 라이브러리 가이드폼, 레이아웃, 오버레이, 피드백, 디스플레이 컴포넌트를 다루는 shadcn-components.md를 안내합니다.
테마 및 커스터마이징다크 모드, CSS 변수, 색상, 컴포넌트 변형에 대해서는 shadcn-theming.md를 참조합니다.
접근성 패턴ARIA, 키보드 내비게이션, 포커스 관리, 스크린 리더에 대해서는 shadcn-accessibility.md를 참조합니다.
Tailwind 유틸리티레이아웃, 여백, 타이포그래피, 색상, 테두리, 그림자에 대해서는 tailwind-utilities.md를 참조합니다.
반응형 디자인모바일 우선 브레이크포인트와 반응형 유틸리티 패턴에 대해서는 tailwind-responsive.md를 참조합니다.
Tailwind 커스터마이징설정 구조, 커스텀 유틸리티, 플러그인, 테마 확장에 대해서는 tailwind-customization.md를 참조합니다.
비주얼 디자인 시스템디자인 철학, 시각적 커뮤니케이션, 정교한 구성에 대해서는 canvas-design-system.md를 참조합니다.
유틸리티 스크립트컴포넌트 설치를 위한 shadcn_add.py와 설정 생성을 위한 tailwind_config_gen.py를 설명합니다.

스킬 자체 설명

"shadcn/ui 컴포넌트(Radix UI + Tailwind 기반), Tailwind CSS 유틸리티 우선 스타일링 및 캔버스 기반 비주얼 디자인으로 아름답고 접근 가능한 사용자 인터페이스를 만듭니다. 사용자 인터페이스 구축, 디자인 시스템 구현, 반응형 레이아웃 생성, 접근 가능한 컴포넌트 추가(대화 상자, 드롭다운, 폼, 테이블), 테마 및 색상 커스터마이징, 다크 모드 구현, 비주얼 디자인 및 포스터 생성, 또는 애플리케이션 전반에 걸쳐 일관된 스타일링 패턴 구축 시 사용합니다."

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 10,626자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에