baseline-ui

baseline-ui 스킬 개요

baseline-ui가 하는 일

baseline-ui 스킬은 Tailwind CSS 프로젝트에서 의견이 반영된 기준선(baseline)을 바탕으로 UI 작업을 검토하거나 생성하는 데 도움을 줍니다. 이 스킬은 AI 출력이 일관성 없는 간격, 부족한 접근성, 불필요한 애니메이션으로 흐트러지는 것을 막고 싶을 때 유용합니다. baseline-ui를 설치할지 고민한다면, 핵심 가치는 “더 많은 UI 아이디어”가 아니라 더 엄격한 UI 판단에 있습니다.

누가 사용하면 좋은가

baseline-ui는 컴포넌트 출력을 위한 실용적인 기준선이 필요한 개발자, 코드로 작업하는 디자이너, AI 지원 빌더에게 가장 잘 맞습니다. 특히 React/Tailwind 스택과 궁합이 좋고, 리뷰 단계에 들어가기 전에 baseline-ui 스킬이 문제를 잡아주길 원할 때 유용합니다. 팀에 이미 엄격한 디자인 토큰과 컴포넌트 프리미티브가 있다면, 이 스킬은 그것을 대체하기보다 강화하는 역할을 합니다.

무엇에 가장 강한가

baseline-ui 가이드는 애니메이션 제한, 타이포그래피 원칙, 접근성 프리미티브, 레이아웃 안티패턴 회피에 초점을 맞춥니다. 그래서 단순히 보기 좋은 수준이 아니라 일관된 구현이 목표인 UI Design 작업에 강합니다. 프롬프트가 모호할 때 기본적으로 더 안전한 선택을 하도록 모델을 유도하는 데 특히 유용합니다.

baseline-ui 스킬 사용 방법

baseline-ui 설치 및 호출

baseline-ui를 설치하려면 저장소의 스킬 설치 흐름을 사용하세요: npx skills add ibelick/ui-skills --skill baseline-ui. 실제로는 대화나 파일에서 /baseline-ui 또는 /baseline-ui <file>로 참조해 호출하는 방식입니다. UI Design 검토에 baseline-ui를 쓸 때는 대상 파일이나 요청에 실제 컴포넌트, 라우트, 레이아웃 맥락이 포함되어 있어야 합니다.

스킬에 맞는 입력 형식 주기

baseline-ui는 의도한 컴포넌트, 프레임워크, 제약 수준을 처음부터 명확히 주었을 때 가장 잘 동작합니다. 약한 프롬프트는 “이 카드를 더 좋게 만들어줘” 정도입니다. 더 강한 프롬프트는 “이 React/Tailwind 카드를 간격, 모션, 키보드 동작, 아이콘만 있는 버튼의 접근성 관점에서 검토하고, 기존 프리미티브는 유지해줘”처럼 구체적입니다. 두 번째 방식은 baseline-ui 사용에 더 적합한데, 모델이 점검해야 할 실패 지점을 분명히 보여주기 때문입니다.

먼저 읽을 파일

먼저 SKILL.md를 읽고, 이어서 프로젝트에서 사용하는 스택이나 컴포넌트 규칙을 정의한 저장소 파일이 있다면 확인하세요. 이 저장소에는 추가 rules/, resources/, scripts/ 폴더가 없으므로 SKILL.md가 사실상 단일 기준 문서입니다. 주변 프로젝트에 자체 프리미티브나 토큰이 있다면, baseline-ui로 출력을 수정하라고 요청하기 전에 그것부터 읽어야 합니다.

결과를 더 좋게 만드는 워크플로

baseline-ui는 단순 생성용 지름길이 아니라 리뷰 관문으로 사용할 때 가장 효과적입니다. 먼저 UI를 만들게 하고, 그다음 baseline-ui로 스킬 규칙에 맞는지 감사하게 한 뒤, 지적된 부분만 수정하세요. 이 워크플로는 넓은 재설계보다 간결한 코드 수준 수정이 필요할 때 특히 잘 맞습니다. baseline-ui 스킬은 실제 위반 사항이 드러날 만큼 작업이 구체적일 때 가장 강합니다.

baseline-ui 스킬 FAQ

baseline-ui는 Tailwind CSS 전용인가요?

아닙니다. Tailwind CSS가 주된 적합 대상이지만, 이 스킬의 핵심은 간격, 모션, 프리미티브, 접근성에 대한 UI 제약을 강제하는 데 있습니다. 스택이 Tailwind를 쓰지 않더라도 일부 스택 규칙은 덜 관련될 수 있지만, 검토 로직 자체는 여전히 도움이 됩니다. baseline-ui 설치 가치를 가장 높이려면 Tailwind 우선 프로젝트에서 사용하는 것이 좋습니다.

일반 프롬프트와 뭐가 다른가요?

일반 프롬프트는 “깔끔한 UI”처럼 너무 열린 요구를 할 수 있습니다. baseline-ui는 애니메이션, 타이포그래피, 프리미티브, 안티패턴을 점검할 수 있는 반복 가능한 기준선을 제공해서 모델이 일관성 없는 패턴을 덜 만들어내게 합니다. 그래서 baseline-ui 가이드는 즉흥적인 프롬프트보다 팀 워크플로에 더 안정적으로 맞습니다.

baseline-ui는 초보자에게도 친화적인가요?

네, 이미 어떤 파일이나 어떤 UI 표면을 작업할지 알고 있다면 그렇습니다. 초보자는 구체적인 컴포넌트를 주고 위반 사항과 수정안을 함께 요청할 때 가장 큰 효과를 얻습니다. 아직 아키텍처를 고민하는 단계라면, baseline-ui는 학습 도구라기보다 제약 검사기처럼 느껴질 수 있습니다.

언제는 사용하지 말아야 하나요?

매우 실험적인 모션, Tailwind 기본값 밖의 커스텀 디자인 시스템, 또는 완전한 시각적 리브랜딩을 원할 때는 baseline-ui를 쓰지 마세요. 이 스킬은 기준선 강제용이지, 자유로운 브랜딩 보조 도구가 아닙니다. 프로젝트가 의도적으로 흔한 UI 관례를 벗어난다면 baseline-ui는 지나치게 엄격한 피드백을 낼 수 있습니다.

baseline-ui 스킬 개선 방법

UI 표면을 구체적으로 밝히기

baseline-ui에서 가장 좋은 결과는 정확한 컴포넌트, 상태, 상호작용 표면을 이름으로 짚을 때 나옵니다. 모달인지, 내비게이션 메뉴인지, 폼 행인지, 빈 상태 화면인지 분명히 말하세요. 그러면 baseline-ui 스킬이 제품 형태를 추측하는 대신 키보드 동작, 포커스 처리, 모션, 컴포넌트 선택에 집중할 수 있습니다.

바뀌면 안 되는 부분을 알려주기

프로젝트가 이미 컴포넌트 프리미티브 시스템을 사용한다면 그 사실을 명시하세요. baseline-ui는 기존 프리미티브를 우선하고, 같은 표면에서 여러 시스템을 섞지 않도록 설계되어 있습니다. 또한 Tailwind 기본값, 애니메이션 라이브러리, 기존 클래스 헬퍼를 유지해야 한다면 그것도 함께 적으세요. 이런 제약은 제안되는 수정안에 직접적인 영향을 줍니다.

근거와 수정안을 함께 요청하기

리뷰 작업이라면 정확한 위반 코드 조각, 짧은 이유, 코드 수준의 수정안을 요청하세요. 이 형식은 baseline-ui의 사용 의도와 잘 맞고, 코드 리뷰에서 결과를 적용하기도 쉽습니다. 첫 결과가 너무 넓다면 하나의 파일이나 하나의 상호작용으로 범위를 좁힌 뒤, 같은 기준선과 함께 수정하고 싶은 구체적 실패를 넣어 다시 baseline-ui를 실행하세요.