화면의 글자, 색, 접근성을 한 번에 점검하는 에이전트 스킬 모음
만든 화면이 어색하거나 접근성이 부족하다고 느껴질 때, 에이전트가 구체적인 수정 방향을 알려줍니다. 이 저장소는 UI, 타이포그래피, 색, 접근성, 레이아웃, 제품 문구를 다루는 스킬을 모아 놓은 것입니다. 개인 웹사이트와 디자인 매거진 Interfaces에서 다루는 주제들을 실제 작업에 적용할 수 있도록 구성했습니다.
화면의 완성도를 높이는 스킬들
이 저장소는 인터페이스의 여러 측면을 다루는 스킬로 구성됩니다. better-interface는 화면 전체를 접근성, 레이아웃, 문구, 타이포그래피, 색, UI 마감 관점에서 검토하고 우선순위가 정렬된 보고서를 제공합니다. better-ui는 모서리 반경, 그림자, 아이콘 상태, 애니메이션 등 세부적인 시각 요소를 정확한 수치로 다듬습니다. better-typography는 텍스트 렌더링을 위한 타입 스케일, 간격, 폰트 기능, 줄바꿈, 절단, 구두점을 설정하고 검토합니다. better-colors는 팔레트 생성, 시맨틱 토큰 명명, 형식 변환, 대비 측정을 통해 색상 시스템을 구축하고 확인합니다. better-accessibility는 키보드와 포커스 동작, ARIA, 접근성 이름, 폼, 스크린리더 알림, 모션, 확대 기능을 WCAG 2.2 기준으로 검토하고 수정합니다. better-layout은 그룹화, 정렬, 읽기 순서, 반응형 구조, 번역된 텍스트를 위한 여백을 설정해 레이아웃이 리사이즈, 번역, 미러링 상황에서도 유지되도록 합니다. better-writing은 라벨, 오류 메시지, 빈 상태, 확인 문구 등 인터페이스 문구를 작성하고 검토해 제품 톤과 일치시키고 다음 행동을 안내합니다.
사용자가 직접 호출하는 작업 스킬
일부 스킬은 사용자가 직접 실행하도록 설계되어 있습니다. interface-review는 브랜치, 풀 리퀘스트, 커밋되지 않은 변경 사항에서 도입되거나 회귀된 인터페이스 문제를 접근성, 레이아웃, 문구, 타이포그래피, 색, UI 관점에서 검토합니다. explain-interface는 라이브 URL이나 스크린샷을 받아 웹사이트, 시각 효과, 애니메이션이 어떻게 만들어졌는지 설명합니다. break는 선택한 컴포넌트를 임시 페이지에서 도달 가능한 모든 시나리오 하에서 렌더링하고 스트레스 테스트를 수행합니다. build-design은 Figma 파일이나 디자인 이미지를 사용해 프로젝트의 기존 토큰과 컴포넌트를 활용해 디자인과 일치하는 UI를 구축합니다. technical-drawing은 물리적 대상의 정밀한 정적 기술 도면을 일관된 뷰와 정교한 선으로 생성합니다. state-machine은 선택한 컴포넌트의 모든 상태를 목업 데이터와 스위처를 갖춘 폐기용 페이지에 렌더링해 각 상태를 작업할 수 있게 합니다. variant는 작업 중인 컴포넌트의 여러 변형을 구축해 반복 작업과 선택을 돕습니다.
설치 방법
이 스킬 모음을 설치하려면 터미널에서 npx skills add jakubkrehel/skills 명령을 실행합니다. 이 저장소는 마크다운으로 작성되어 있어 에이전트 기반 개발 환경에서 바로 활용할 수 있습니다.
이 스킬 모음이 필요한 순간
인터페이스의 시각적 완성도나 접근성 문제를 체계적으로 점검하고 싶을 때 이 스킬 모음이 유용합니다. 특히 디자인 시스템이 있는 프로젝트에서 일관된 토큰과 컴포넌트를 유지하면서 UI를 다듬거나, 새로운 화면을 만들 때 기존 코드베이스와 충돌하지 않도록 확인하고 싶을 때 적합합니다. 또한 Figma 디자인을 코드로 옮기거나, 컴포넌트의 다양한 상태를 미리 확인해 보거나, 인터페이스 문구의 톤을 통일하고 싶을 때 구체적인 가이드라인을 제공합니다. 이 스킬들은 개인 웹사이트와 디자인 매거진 Interfaces에서 다루는 주제들을 기반으로 하므로, 해당 분야에서 깊이 있는 지식을 원할 때 참고할 가치가 있습니다. 다만 이 스킬들이 모든 디자인 문제를 자동으로 해결해 주는 것은 아니므로, 최종 판단은 여전히 디자이너나 개발자의 몫입니다.