uix-skill은(는) 무엇을 하나요?
생성된 것처럼 보이지 않고, 디자인된 UI를 구축하세요. 한 번 외관을 결정(DESIGN.md)하고, 그대로 빌드하며, 스크립트로 결과를 확인합니다.
경로: 아래의 모든 references/, data/ 및 scripts/ 경로는 이 SKILL.md가 포함된 폴더를 기준으로 합니다. 사용자 프로젝트 루트에서 node <해당 폴더>/scripts/<이름>.mjs로 스크립트를 실행하세요. 스크립트에는 Node 22가 필요합니다.
명령어
| 명령어 | 작업 |
|---|---|
/uix init | 프로젝트를 읽고, 3가지 질문을 하고, 3가지 방향을 제시하며, DESIGN.md를 작성하고 린트를 실행합니다. |
/uix build | DESIGN.md에서 페이지, 화면 또는 컴포넌트를 빌드하고, 확인하고, 수정합니다. 기본값입니다. |
/uix audit | 검사를 실행하고 보고합니다. 아무것도 수정하지 않습니다. |
/uix polish | 상위 감사 문제를 수정합니다. 로직, 라우트 및 카피 의미를 유지합니다. |
/uix motion | 4가지 질문 후에 모션을 검토하거나 추가합니다. |
동사는 /uix-skill <동사>, uix <동사> 또는 일반 요청("설정 페이지 만들어줘", "이 화면 감사해줘")으로 올 수 있습니다. 일반 요청을 가장 가까운 동사에 매핑하세요. 명확한 일치 항목이 없으면: build.
하드 규칙
- DESIGN.md가 존재하면: 먼저 읽고 그대로 빌드하세요. 인테이크와 방향 제시를 건너뜁니다. 정의되지 않은 색상, 폰트 또는 반경을 절대 임의로 만들지 마세요.
scripts/rules.mjs가 실행되고, 웹 스택의 경우scripts/check.mjs도 실행되기 전에는 완료되었다고 보고하지 마세요. 검사를 실행할 수 없는 경우(검사 섹션 참조),unverified: <이유>를 보고하세요.- 검사 후 최대 2번의 수정 라운드. 그런 다음 남은 내용을 보고하세요.
- 이미지: 프로젝트 자산, 그 다음 Openverse/Wikimedia(출처 표시), 그 다음 CSS/SVG 아트. 빈 플레이스홀더는 절대 사용하지 마세요.
- 무료 도구만 사용하세요. 유료 API, 키는 사용하지 마세요.
- 요청의 UI 범위를 벗어나는 파일은 수정하지 마세요.
/uix audit는 아무것도 수정하지 않습니다. - 아래 테이블이 명명한 파일만 로드하세요. 하나의 스택 파일을 로드하되,
shadcn및nuxt-ui의 경우: 해당 가이드와 호스트 프레임워크의 가이드를 로드하세요.
실행 순서
- 프로젝트 읽기: package.json, config, 기존 스타일, DESIGN.md,
public/또는assets/. - 스택 감지(아래 테이블). 해당 가이드를 로드하세요.
- 인테이크. 3가지 질문을 함께, 하나의 메시지로 하세요: 사용자, 화면의 역할, 톤. 모바일 스택: 톤은 "차분한 동작입니까 활기찬 동작입니까?"도 함께 묻고; 답변을 모션 티어로 DESIGN.md (
references/design-md.md)에 기록하세요. 사용자 또는 프로젝트가 이미 답변한 것은 건너뛰세요. references/directions.md에서 톤, 밀도 및 색온도가 명확히 다른 3가지 방향을 제시하세요. 선택을 기다리세요. 소유자가 이미 선택한 방향은 제시를 건너뜁니다.- DESIGN.md (
references/design-md.md)를 작성하고 린트를 실행하세요. 모든 린트 오류를 수정하세요. references/layouts-web.md(마케팅, 콘텐츠) 또는references/layouts-app.md(로그인한 화면)에서 구조를 선택하세요.- 첫 번째 섹션을 빌드하세요. 실제 카피, 실제 이미지, 모든 컴포넌트 상태.
- 검사(아래). 오류를 수정한 다음 경고를 수정하세요. 최대 2라운드.
- 보고.
3~5단계는 init에 속합니다. build는 기존 DESIGN.md를 사용하며, 없으면 먼저 init을 실행하세요.
기존 디자인 시스템 우선
- DESIGN.md가 존재하면: 읽고, 린트하고, 그대로 빌드하세요.
- DESIGN.md는 없지만 프로젝트에 자체 토큰 또는 테마가 있는 경우(Tailwind config, CSS 변수, 테마 파일):
/uix init는 해당 토큰에서 DESIGN.md를 (프로젝트 루트에) 작성합니다. 사용자가 새로운 외관을 요청하지 않는 한 새로운 방향을 제시하지 마세요. - 둘 다 없는 경우: 전체
init. - 자체 토큰이란 프레임워크의 스타터 기본값을 넘어서는 색상, 폰트 또는 간격을 의미하며, Tailwind v4
@theme블록, Tailwind config, CSS 사용자 정의 속성 또는 플랫폼 테마 파일에 있습니다. create-next-app의 기본--background/--foreground는 포함되지 않습니다.
로드할 항목
필요할 때까지 다른 것은 로드하지 마세요.
| 경우 | 로드 |
|---|---|
| 모든 빌드, 폴리시 또는 감사 | references/anti-slop.md, references/components-a11y.md |
init, 또는 모든 DESIGN.md 작성 | references/design-md.md |
init (방향 제시) | references/directions.md, 그 다음 선택된 data/fonts.csv, data/palettes.csv, data/styles.csv의 행 |
| 마케팅, 콘텐츠, 카탈로그 페이지 | references/layouts-web.md |
| 대시보드, 테이블, 폼, 설정, 인증 | references/layouts-app.md |
모든 모션, 또는 /uix motion | references/motion.md |
| 모바일 빌드, 폴리시 또는 감사 | references/mobile-foundations.md, references/mobile-patterns.md |
| 모바일 모션 | references/mobile-motion.md (대신) |
| 모바일: 안전하게 앱 보기, Expo Go 대 dev 빌드, 탭 및 스와이프 검사 | references/mobile-testing.md |
모바일 앱용 init | data/mobile-styles.csv (대신) |
| 모든 이미지 슬롯 | references/images.md |
| 샘플 DESIGN.md 형태 | data/examples/ledger.md, field-notes.md 또는 harbor.md. 하나만. |
| 모든 작업 | 하나의 references/stacks/<id>.md. shadcn 또는 nuxt-ui의 경우, 호스트 가이드도 함께(스택 감지 참조). |
스택 감지
첫 번째 일치 항목이 우선하며, 위에서 아래로 적용됩니다. 일치하는 항목이 없으면: html-tailwind. 정확한 종속성 이름을 일치시키세요(next, next-themes 아님).
| 신호 | 스택 ID |
|---|---|
package.json에 @nuxt/ui | nuxt-ui |
shadcn이 있는 components.json 또는 @/components/ui | shadcn |
artisan 파일 또는 composer.json의 laravel/framework | laravel |
package.json에 nuxt | nuxtjs |
package.json에 next | nextjs |
@angular/core 또는 angular.json | angular |
package.json에 astro 또는 astro.config.* | astro |
svelte 또는 @sveltejs/kit | svelte |
package.json에 vue | vue |
package.json에 three | threejs |
package.json에 react-native 또는 expo | react-native |
package.json에 react | react |
pubspec.yaml | flutter |
Compose (androidx.compose)가 있는 build.gradle(.kts) | jetpack-compose |
SwiftUI가 있는 *.xcodeproj 또는 Package.swift | swiftui |
Avalonia가 있는 *.csproj | avalonia |
Uno. 또는 Uno.WinUI가 있는 *.csproj | uno |
Microsoft.WindowsAppSDK가 있는 *.csproj | winui |
<UseWPF>true</UseWPF>가 있는 *.csproj | wpf |
TargetPlatformIdentifier UAP 또는 Microsoft.NETCore.UniversalWindowsPlatform이 있는 *.csproj | uwp |
javafx가 있는 pom.xml 또는 build.gradle | javafx |
| 위 중 어느 것도 아님 | html-tailwind |
웹 ID: angular, astro, html-tailwind, laravel, nextjs, nuxt-ui, nuxtjs, react, shadcn, svelte, threejs, vue. 나머지는 네이티브입니다.
"모바일 스택"은 react-native, flutter, swiftui 또는 jetpack-compose를 의미합니다. 해당 요청은 "로드할 항목"의 모바일 행도 로드합니다.
더 구체적인 스택이 우선합니다: nextjs는 react보다 우선, react-native는 react보다 우선, laravel은 해당 JS 프론트엔드보다 우선합니다.
컴포넌트 레이어 스택은 두 개의 가이드를 로드합니다: shadcn과 호스트 가이드(nextjs, react, astro, laravel, ... shadcn 행을 건너뛰고 이 테이블에 의해 감지됨), 그리고 nuxt-ui와 nuxtjs. 다른 모든 프로젝트는 하나를 로드합니다.
검사
사용자 프로젝트 루트에서 실행합니다. <skill>을 이 SKILL.md가 있는 폴더로 바꾸세요.
node <skill>/scripts/rules.mjs [--design DESIGN.md] <경로...>
node <skill>/scripts/check.mjs <URL|파일> [--widths 375,768,1280] [--out .uix/shots] [--themes attr=v1,v2]
node <skill>/scripts/images.mjs "<쿼리>" [--count 6]
- 세 스크립트 모두 JSON을 출력합니다.
rules.mjs는{findings, skipped}를 출력합니다: 축소, 1MB 초과 또는 읽을 수 없는 파일은 이유와 함께skipped에 포함되며 오류가 아닙니다.check.mjs는{shots, findings, notes}를 출력합니다;notes를 읽으세요(예: 조기에 프로브된 로드 타임아웃, 또는 실패한 스크린샷). 종료 코드 0: 정상. 종료 코드 1: 오류 발견(rules.mjs,check.mjs). 종료 코드 2: 사용법 또는 환경 문제(세 스크립트 모두).images.mjs는 0 또는 2만 종료합니다. - 종료 코드 2는 절대 정상 결과가 아니며 수정 라운드로 계산되지 않습니다.
check.mjs가 페이지에 도달할 수 없고 프로젝트에 명확한 개발 스크립트(npm run dev등)가 있는 경우, 백그라운드에서 한 번 시작하고 재시도하세요. 그렇지 않으면 사용자에게 물어보세요. 누락된 항목(Chrome, Node 22, 실행 중이 아닌 서버)을 명시하세요. - 검사를 여전히 실행할 수 없는 경우, 보고서는
unverified: <이유>라고 말합니다. - 웹 스택: 소스에 대해
rules.mjs를 실행한 다음, dev 서버 URL 또는 빌드된 파일에 대해check.mjs를 실행하세요. 너비는 375, 768 및 1280입니다. 스크린샷은.uix/shots에 저장됩니다:<w>.png는 전체 페이지이고,<w>-<n>.png는 최대 1600px 타일입니다. 전체 샷이 아니라 타일을 보세요. 전체 샷은 축소되어 읽을 수 없습니다.check.mjs는 먼저 페이지를 스크롤하여 스크롤 시 나타나는 콘텐츠를 표시합니다. - 프로젝트에 여러 테마가 정의된 경우(
[data-theme],[data-skin],.dark),--themes로 전달하세요(예:--themes data-skin=oatmeal,rose또는--themes class=dark). 각 테마는 마지막 너비에서 프로브되며, 해당 findings에는theme이 함께 표시됩니다. - 대비 findings는 색상 쌍별로 그룹화됩니다(
count,sample,selectors). 각 요소가 아닌 토큰을 수정하세요. - React Native (Expo):
rules.mjs를 실행한 다음, 실행 중인 Metro 서버에 대해node <skill>/scripts/check-mobile.mjs --app exp://127.0.0.1:<port>를 실행하세요. Android 에뮬레이터의 경우--platform android를 추가하세요(플래그 및 라우트 파일은 스택 가이드에 있습니다).{shots, findings, notes}를 출력하고check.mjs와 같이 0, 1 또는 2로 종료합니다.maestro missing:로 시작하는 note는 계층 구조 및 흐름이 실행되지 않았음을 의미합니다. 성공적인 실행이 아니라unverified: <이유>로 보고하세요. 샷은.uix/mobile-shots에 저장됩니다.route-not-navigatedfinding은 오류이며 절대 정상 결과가 아닙니다: 샷은 다른 화면을 보여줍니다. 수정 루프: 전체 매트릭스가 아닌--only <routes>및 하나의--devices항목으로 다시 확인하세요. - 기타 모바일 스택:
rules.mjs를 실행하세요. 네이티브 iOS 앱(SwiftUI)은 그런 다음check-mobile.mjs --native를 사용합니다(플래그는 스택 가이드에 있음). 감사 패스에서는--out "$(mktemp -d)"를 사용합니다. 다른 스택은 스택 파일의 "How to check"에 있는 수동 스크린샷 레시피를 사용합니다(라이트, 다크,xxxl텍스트). 시뮬레이터를 사용할 수 없는 경우:unverified: <이유>. 2라운드 제한이 적용됩니다. - 기타 네이티브 스택:
rules.mjs를 실행한 다음, 스택 파일의 "How to check"에 있는 수동 체크리스트를 따르세요. 브라우저 검사는 없습니다. errorfindings를warn보다 먼저 수정하세요. 유지해야 하는 warn은 한 줄 이유가 필요합니다.- 수정 루프: 검사, 수정, 재검사. 최대 2라운드. 그런 다음 중지하고 보고하세요.
- 규칙 ID와 해당 수정 사항은
references/anti-slop.md에 있습니다. 또한 스크립트로 잡을 수 없는 판단 규칙도 나열되어 있습니다. 직접 검토하세요.
명령어 계약
init
- 프로젝트를 읽고, 스택을 감지하고, 해당 가이드를 로드하세요.
- 기존 토큰 또는 DESIGN.md: "기존 디자인 시스템 우선"을 참조하세요.
- 그렇지 않으면 3가지 질문을 하고, 3개의 명확히 다른 방향을 제시하고, 기다리세요.
모든 스택: 콘텐츠 언어(
lang, i18n 파일, 카피)를 감지하고data/fonts.csv에서scripts열이 해당 언어를 포함하는 행만 선택하세요. - DESIGN.md를 작성하세요. 린트:
npx --yes @google/[email protected] lint DESIGN.md. 오류를 수정하세요. - 선택한 방향, 작성된 파일 및 린트 결과를 보고하세요.
build
- DESIGN.md, 스택 가이드 및 레이아웃 파일을 읽으세요.
- 구조를 선택하세요. 어떤 구조이고 그 이유를 한 줄로 말하세요.
- 첫 번째 섹션을 완전히 빌드하세요. 그런 다음 나머지를 빌드하세요.
- 검사를 실행하세요. 최대 2라운드로 수정하세요.
- 보고하세요.
audit
- 스택을 감지하고 해당 가이드를 로드하세요.
- 검사를 실행하세요. 판단 규칙을 검토하세요.
check.mjs와check-mobile.mjs에--out "$(mktemp -d)"를 전달하여 감사가 프로젝트에 아무것도 쓰지 않도록 하세요. - 테이블을 출력하세요. 아무것도 수정하지 마세요.
| 이전 | 이후 | 이유 |
|---|---|---|
| 현재 있는 것 | 있어야 할 것 | 규칙 ID 또는 이유 |
polish
- 스택을 감지하고 해당 가이드를 로드하세요.
- 먼저 감사를 실행하세요.
- 상위 문제를 수정하세요, 오류 우선. 로직, 라우트 또는 카피 의미를 변경하지 마세요.
- 검사를 다시 실행하세요. 최대 2라운드. 보고하세요.
motion
references/motion.md를 로드하세요(모바일 스택:references/mobile-motion.md). 각 애니메이션에 대해 4가지 질문에 서면으로 답하세요: 필요한지, 무엇을 전달하는지, 어떤 이징을 사용하는지, 지속 시간은 얼마인지.- 명확한 답변이 없는 애니메이션은 제거하세요.
prefers-reduced-motion처리를 추가하세요(스택 가이드가 네이티브 동등물을 명시합니다). - Before / After / Why 테이블을 출력하세요. 사용자가 모션을 추가하거나 수정하도록 요청한 경우에만 변경 사항을 적용하세요. 검토만 요청한 경우는 제외.
보고
모든 실행을 다음으로 끝내세요:
- 변경된 사항(파일).
- 남아 있는 findings (각각 규칙 ID 및 이유 포함).
.uix/shots의 스크린샷 및 타일 경로(웹),.uix/mobile-shots의 샷 경로(모바일) 또는 수행된 수동 검사(기타 네이티브).- 추가된 이미지 크레딧.