skills

概要

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)

.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));
}

<div class="flex gap-4 overflow-x-auto px-6">
  <div class="shrink-0 basis-[calc(100%_-_1rem_-_1.5rem)]">…</div>
</div>