Theming

design-system-patterns는 디자인 시스템과 컴포넌트 라이브러리를 위해 토큰 구조, 테마 아키텍처, 재사용 가능한 컴포넌트 API 패턴을 정리해 확장 가능한 UI 기반을 설계할 수 있도록 돕는 스킬입니다.

visual-design-foundations는 타이포그래피 스케일, 색상 토큰, 간격 규칙, 아이코노그래피 가이드를 바탕으로 팀이 실무형 UI 시스템을 구축하도록 돕습니다. 탄탄한 디자인 기반을 마련하고, 스타일 가이드를 만들고, 시각적 위계를 점검하며, 명확한 디자인 제약을 바탕으로 구현 가능한 CSS variables를 만들 때 활용할 수 있습니다.

colorize 스킬은 회색조이거나 단조로운 인터페이스에 전략적으로 색을 더하려는 UI 팀을 돕습니다. 언제 쓰는 것이 적절한지, 어떤 맥락 정보가 필요한지, 그리고 $frontend-design 및 브랜드를 고려한 컬러 의사결정과 함께 impeccable 워크플로에 어떻게 맞물리는지 알아보세요.

audit 스킬은 프런트엔드 작업을 대상으로 기술 UX Audit을 수행하며, 접근성, 성능, 테마 적용, 반응형 동작, 안티패턴을 점검합니다. 결과물로는 점수화된 발견 사항, P0-P3 심각도 라벨, 실행 계획을 제공하며, 사용 전에 관련 impeccable 스킬로 필요한 설정을 먼저 마쳐야 합니다.

normalize 스킬은 UI 기능을 점검하고 디자인 시스템에 맞게 다시 정렬합니다. 이 페이지에서 normalize 설치 옵션, 필요한 frontend-design 사전 준비 사항, 그리고 페이지·라우트·컴포넌트에 실제로 활용하는 방법을 확인하세요.

colorize 스킬이 회색조이거나 밋밋한 UI 디자인에 전략적으로 색을 더하는 방법을 안내합니다. 이 가이드에서는 `frontend-design`으로 먼저 준비해야 할 사항, 리포지토리 기준의 설치·적용 맥락, 그리고 위계, 의미 전달, 브랜드 적합성을 위한 실전 활용 포인트를 다룹니다.

audit skill은 페이지, 기능, 컴포넌트를 대상으로 구조화된 기술 UX 리뷰를 수행합니다. 접근성, 성능, 테마 적용, 반응형 동작, 프런트엔드 안티패턴을 점검한 뒤, P0-P3 심각도와 실행 계획이 포함된 점수형 결과를 반환합니다. 필수 선행 단계인 /frontend-design 컨텍스트를 거친 뒤 사용하는 것이 가장 적합합니다.

expo-tailwind-setup은 Expo에서 react-native-css와 NativeWind v5를 함께 사용해 iOS, Android, 웹 환경에 Tailwind CSS v4를 설치하고 구성하는 실전 가이드입니다.

mui는 React에서 Material UI v7를 다루기 위한 집중형 가이드입니다. `sx` styling, theme customization, responsive layouts, 그리고 v7의 핵심 마이그레이션 변경 사항을 다룹니다. 이 스킬을 설치한 뒤 핵심 파일 흐름을 따라가며, 최신 `@mui/material` 패턴으로 MUI 컴포넌트를 생성할 때 활용할 수 있습니다.

marp-slide는 7가지 테마, 재사용 가능한 템플릿, Marp 문법·이미지·CSS 참고 자료를 바탕으로 완성도 높은 Marp 슬라이드 덱 제작을 돕는 스킬입니다. 초안 수준의 메모를 더 나은 구조의 발표용 markdown으로 정리하고, 테마 선택을 빠르게 하며, 슬라이드 제작 과정을 더 안정적으로 운영할 때 유용합니다.

makepad-2.0-theme는 Makepad 2.0용 테마 스킬로, `theme.*` 변수 적용, 다크/라이트 테마 전환, 디자인 토큰 기반 스타일 일관성 유지를 돕습니다. 이 가이드는 프로덕션 UI와 디자인 시스템에서 makepad-2.0-theme의 설치와 사용법을 이해하는 데 도움을 줍니다.

figma-generate-library는 코드베이스를 바탕으로 Figma 디자인 시스템을 구축하거나 업데이트할 때, 토큰, 컴포넌트 라이브러리, 문서화, 라이트/다크 테마를 순서대로 진행할 수 있게 도와줍니다. 일회성 목업이 아니라 디자인 시스템을 실무적으로 다뤄야 할 때 사용하는 figma-generate-library 스킬입니다. Plugin API 호출용 figma-use와 함께 쓰면 더 좋습니다.

figma-generate-library는 코드베이스를 토큰, 변수, 컴포넌트, 테마, 문서를 갖춘 Figma 디자인 시스템 라이브러리로 전환하는 데 도움이 됩니다. 설치, 설정, 탐색, 생성, 검증, 코드와의 정합성 조정까지 포함한 단계적 워크플로가 필요할 때 이 figma-generate-library 스킬을 사용하세요.

WordPress 블록 테마 작업에 wp-block-themes를 사용하세요: theme.json, 템플릿, 템플릿 파트, 패턴, 스타일 변형, Site Editor 디버깅까지 다룹니다. 디자인 구현, 설치 및 사용 흐름, 그리고 스타일 계층, 오버라이드, 캐싱, 사용자 맞춤 설정 문제를 적은 추측으로 해결하도록 설계되어 있습니다.

teach-impeccable은 저장소를 스캔하고, 빠진 UX·브랜드 정보만 선별해 질문한 뒤, 이후 AI 세션에서 계속 활용할 수 있는 디자인 가이드를 저장하는 일회성 설정 스킬입니다.