개요
Markdown 기반 에이전트 스킬 모음으로, 인터페이스, 타이포그래피, 컬러 시스템, 레이아웃, 제품 카피 및 접근성을 다룹니다. 각 스킬은 AI 코딩 에이전트에 컴포넌트 다듬기부터 전체 인터페이스 검토까지 맞춤형 지침을 제공합니다. Claude Code 플러그인으로 설치하여 사용할 수 있습니다.
README 미리보기
\n \n\n\n[](https://skills.sh/jakubkrehel/skills)\n\nA collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface.\n\nThese skills are contain topics that I write about on [my personal website](https://jakub.kr/) and my design engineering magazine, [Interfaces](https://interfaces.dev/).\n\n## Skills that help build great interfaces\n\n- [**better-interface**](skills/better-interface/SKILL.md): Combines all of the `better-*` skills into a single review.\n- [**better-ui**](skills/better-ui/SKILL.md): Improves UI in your project across the board. Covers things like **concentric border radius**, **optical alignment**, **contextual icons**, **hit areas**, **animation** and more.\n- [**better-typography**](skills/better-typography/SKILL.md): Improves type in your project. Covers **type scale**, **spacing**, **sizing**, **variable fonts**, **OpenType features**, **wrapping**, **truncation** and more.\n- [**better-colors**](skills/better-colors/SKILL.md): Helps you build a color system and answer anything about color in your project. You can **generate palettes**, **use semantic tokens**, **convert between formats**, **check contrast** and more.\n- [**better-accessibility**](skills/better-accessibility/SKILL.md): Helps your project comply with accessibility standards and best practices.\n- [**better-layout**](skills/better-layout/SKILL.md): Helps with **grouping**, **alignment**, **reading order** and other details that make a great layout.\n- [**better-writing**](skills/better-writing/SKILL.md): Focuses on improving and product copy in your project and making it consistent.\n- [**interface-review**](skills/interface-review/SKILL.md): Reviews your work across multiple categories like **UI**, **typography**, **layout**, **color**, **writing** and **accessibility** and gives you a detailed analysis of the findings. User-invoked.\n- [**explain-interface**](skills/explain-interface/SKILL.md): Helps
FAQ (2)
문제 해결padding-inline과 퍼센트 flex-basis를 함께 사용할 때 가로 flex 스크롤러 아이템이 너무 좁아지는 이유는 무엇인가요?
퍼센트 flex-basis는 스크롤러의 콘텐츠 박스를 기준으로 계산되므로 padding-inline: 24px는 이미 제외되어 있습니다. 해당 패딩을 다시 빼면 아이템이 너무 좁아집니다. 아이템 간 간격과 고정된 peek 양만 빼세요:
.scroller {
display: flex;
gap: 16px;
padding-inline: 24px;
overflow-x: auto;
}
.item {
--gap: 16px;
--peek: 24px;
flex: 0 0 calc(100% - var(--gap) - var(--peek));
}동일한 Tailwind:
<div class="flex gap-4 overflow-x-auto px-6">
<div class="shrink-0 basis-[calc(100%_-_1rem_-_1.5rem)]">…</div>
</div>w-[80%]와 같은 퍼센트 너비는 사용하지 마세요. 보이는 peek이 컨테이너 크기에 따라 커지기 때문입니다. 고정된 24px peek은 문서에 명시된 16–32px 범위 안에 유지됩니다.
문제 해결`outline-none`이 키보드 포커스를 제거하고, reduced-motion이 스피너를 멈추게 하며, OKLCH 흰색 텍스트가 WCAG AA 기준을 충족하지 못하고, 문자만 허용하는 유효성 검사가 실제 이름을 거부하는, 접근성 문제가 있는 CSS/Tailwind 예제는 어떻게 수정해야 하나요?
버그는 커밋 267330e의 better-* 예제에 영향을 미칩니다. 수정 PR을 적용하거나 다음과 같이 변경하세요:
1. 스케일된 16px 입력: flexbox가 w-[calc(100%/0.8125)]를 축소하지 않도록 입력에 shrink-0을 추가하세요. 래퍼에 overflow-hidden을 추가하고 래퍼에 보이는 포커스 표시기를 복원하세요. 예: .wrapper:focus-within { outline: 2px solid #0066cc; outline-offset: 2px; }. 대체 포커스 링 없이 outline-none을 그대로 두지 마세요.
2. OKLCH 대비: 73% 명도 교차 지점은 WCAG 2 규칙이 아니라 APCA 가이드라인입니다. WCAG 2에서 중립 교차 지점은 OKLCH L 0.56 정도입니다. L 0.65에서 흰색 텍스트는 3.23:1에 불과한 반면 검은색 텍스트는 6.49:1이므로, 검은색/거의 검은색 텍스트를 사용하고 올바른 표준으로 대비를 확인하세요.
3. 모션 감소: 전역 animation-duration: 0.01ms 및 animation-iteration-count: 1 리셋이 로딩 스피너와 진행률 표시기에 적용되지 않도록 하세요. .spinner 및 [role="progressbar"]와 같은 선택자를 예외 처리하거나, 리셋의 범위를 필수적이지 않은 애니메이션으로만 제한하세요.
4. 이름 유효성 검사: "문자만 사용" 규칙은 하이픈, 아포스트로피, 공백 및 비라틴 문자 이름을 거부하므로 제거하세요. 예제를 Enter a date as DD/MM/YYYY처럼 실제로 형식이 고정된 필드로 교체하세요.