skills
Otherjakubkrehel/skills
Agent skills for building better UI, type, color and accessibility.
Overview
A collection of Markdown-based agent skills covering UI, typography, color systems, layout, product writing and accessibility. Each skill gives an AI coding agent focused instructions, from polishing components to running a full interface review. Installable as a Claude Code plugin.
README Preview
\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)
TroubleshootingWhy are horizontal flex scroller items too narrow when using padding-inline with a percentage flex-basis?
A percentage flex-basis resolves against the scroller's content box, so padding-inline: 24px is already excluded. Subtracting that padding again makes the items too narrow. Subtract only the inter-item gap and the fixed peek amount:
.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));
}Equivalent Tailwind:
<div class="flex gap-4 overflow-x-auto px-6">
<div class="shrink-0 basis-[calc(100%_-_1rem_-_1.5rem)]">…</div>
</div>Do not use a percentage width such as w-[80%], because the visible peek then grows with the container. A fixed 24px peek stays within the documented 16–32px range.
TroubleshootingHow do I fix inaccessible CSS/Tailwind examples where `outline-none` removes keyboard focus, reduced-motion stops spinners, OKLCH white text fails WCAG AA, and letters-only validation rejects real names?
The bugs affect the better-* examples at commit 267330e. Apply the correction PR or make these changes:
1. Scaled 16px input: add shrink-0 to the input so flexbox does not collapse w-[calc(100%/0.8125)]. Add overflow-hidden to the wrapper and restore a visible focus indicator on the wrapper, for example: .wrapper:focus-within { outline: 2px solid #0066cc; outline-offset: 2px; }. Do not leave outline-none without an alternative focus ring.
2. OKLCH contrast: the 73% lightness crossover is an APCA guideline, not a WCAG 2 rule. For WCAG 2, the neutral crossover is around OKLCH L 0.56. At L 0.65, white text is only 3.23:1, while black text is 6.49:1, so use black/near-black text and verify contrast with the correct standard.
3. Reduced motion: do not let the global animation-duration: 0.01ms and animation-iteration-count: 1 reset apply to loading spinners and progress indicators. Exempt selectors such as .spinner and [role="progressbar"], or scope the reset to non-essential animations only.
4. Name validation: remove the "use only letters" rule because it rejects hyphens, apostrophes, spaces, and non-Latin names. Replace the example with a genuinely format-bound field, such as: Enter a date as DD/MM/YYYY.