项目简介
一组基于 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
常见问题 (2)
故障排除为什么在使用 padding-inline 和百分比 flex-basis 时，水平 flex 滚动容器中的项目会过窄？
百分比形式的 flex-basis 会相对于滚动容器（scroller）的内容盒（content box）进行解析，因此 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%] 之类的百分比宽度，因为可见的窥视部分会随容器一起增大。固定的 24px 窥视量可以保持在文档规定的 16–32px 范围内。
故障排除如何修复这些存在无障碍问题的 CSS/Tailwind 示例：`outline-none` 移除了键盘焦点、reduced-motion 导致加载指示器停止旋转、OKLCH 白色文本无法通过 WCAG AA 校验，以及仅允许字母的验证规则拒绝真实姓名？
这些 bug 影响 commit 267330e 处的 better-* 示例。请应用修复 PR 或进行以下更改：
1. 缩放 16px 输入框：为输入框添加 shrink-0，以防止 flexbox 将 w-[calc(100%/0.8125)] 压缩塌陷。为包装器（wrapper）添加 overflow-hidden，并在包装器上恢复可见的焦点指示器，例如：.wrapper:focus-within { outline: 2px solid #0066cc; outline-offset: 2px; }。不要在没有替代焦点环的情况下保留 outline-none。
2. OKLCH 对比度：73% 亮度交叉点是 APCA 的指南，而非 WCAG 2 规则。对于 WCAG 2，中性交叉点约为 OKLCH L 0.56。在 L 0.65 时，白色文本的对比度仅为 3.23:1，而黑色文本为 6.49:1，因此应使用黑色/近黑色文本，并使用正确的标准验证对比度。
3. 减少动态效果（Reduced motion）：不要让全局的 animation-duration: 0.01ms 和 animation-iteration-count: 1 重置应用于加载旋转器（spinner）和进度指示器。豁免 .spinner 和 [role="progressbar"] 等选择器，或将重置范围仅限定于非必要动画。
4. 姓名验证：移除"仅使用字母"规则，因为它会拒绝连字符、撇号、空格和非拉丁字母的姓名。将示例替换为真正受格式约束的字段，例如：Enter a date as DD/MM/YYYY。