Install
npx skills add jakubkrehel/make-interfaces-feel-better누구에게 맞나
이 안내는 인터페이스는 이미 쓸 수 있는데 「손맛이 조금 부족하다」고 느껴, 작은 세부 사항에 집중한 스킬로 에이전트에게 대조시키고 싶은 사람을 향한다. 공식은 인터페이스를 더 쓰기 좋게 만드는 세부 사항에 주목한다고 적는다. 저장소는
https://github.com/jakubkrehel/make-interfaces-feel-better
스킬 본문은
https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md
자료는 애니메이션, 글꼴 조판, 아이콘, 호버 상태, 광학 정렬, 동심 모서리, 그림자, 히트 영역 등을 다룬다고 적는다. 미리 볼 수 있는 인터페이스가 있고 이 지점만 다듬고 싶을 때 맞다. 인터페이스가 없는데 에이전트에게 시각 시스템 전체를 처음부터 만들게 하려는 사람에게는 맞지 않는다. 현재 자료는 필수 클라이언트를 지명하지 않는다. 특정 제품만 설치할 수 있다고 짐작하지 말 것.
저장소는 MIT 라이선스로 공개된다. 설명은
https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file
3분 안에 첫 시도를 마치기
공식 권장 경로는 이 한 가지만 따른다.
전제 조건: 이 기기에서 npx를 실행할 수 있고, 작업 공간에 열 수 있는 인터페이스 코드 또는 미리보기가 있다. 실행 전에 현재 프로젝트가 스킬을 쓸 위치인지 확인한다.
설치 위치는 npx skills add가 처리한다. 자료는 대상 폴더를 쓰지 않는다. 나타나지 않은 경로를 손대지 말 것. 스킬 파일의 공식 위치는 위의 SKILL.md이다.
복사해서 실행:
npx skills add jakubkrehel/make-interfaces-feel-better
성공 신호: 명령이 정상 종료하고, 에이전트가 애니메이션, 호버 상태, 히트 영역 같은 항목을 인용할 수 있다. 먼저 읽기 전용 대조를 한다. 기존 페이지를 지정하고 손맛 문제 후보만 말하게 하며 파일 변경은 분명히 금지한다. 스킬의 분류로(「못생겼다」는 막연한 말이 아니라) 문제를 가리키면 로드된 것이다.
스타일 변경은 저장소를 움직인다. 고칠 파일과 범위를 확인하기 전에 쓰기를 허가하지 말 것.
사용 사례
사례 1: 먼저 호버 상태와 히트 영역을 본다. 스킬이 다루는 hover states와 hit areas에 해당한다. 버튼이나 링크는 이미 눌리지만 누르기 어렵거나 반응이 없다고 느낄 때 맞다. 먼저 문제 목록만 요청한다. 성공 시 의견은 호버와 누를 수 있는 범위에 떨어지고 페이지 전체를 다시 만들지 않는다. 자료에 최소 히트 영역 크기나 구체 CSS는 없다.
사례 2: 조판, 광학 정렬, 동심 모서리를 대조한다. typography, optical alignment, concentric border radius에 해당한다. 레이아웃은 정해졌고 자간, 정렬, 모서리가 동심인지 만 고치고 싶을 때 맞다. 현재 인터페이스 한 장 또는 컴포넌트를 가리키고 이 세 항만 평하게 한다. 성공 시 제안이 이 분류에 맞고 새 디자인 세트를 시작하지 않는다. 자료에 수치 규격은 없다. 빠진 부분은 여기서 멈춘다.
사용 경계
현재 자료가 증명하는 것은 이 npx 설치 명령과 위 주제 집합뿐이다. 다른 스킬 이름, 명령, 디자인 token을 만들지 말 것. 제목의 「and more」는 펼쳐지지 않았다. 적히지 않은 주제를 기존 점검표로 취급하지 말 것.
자료는 언어나 프레임워크를 정하지 않는다. 예시에서 특정 스택만 지원한다고 짐작하지 말 것. 애니메이션, 그림자, 모서리 변경은 기존 시각에 영향을 줄 수 있다. 먼저 대조한 뒤 고친다. 더 자세한 내용은 공식 저장소를 따른다:
https://github.com/jakubkrehel/make-interfaces-feel-better