{
  "markdown": "<a href=\"https://interfaces.dev/\">\n  <img width=\"320\" height=\"168\" alt=\"interfaces.dev\" src=\"https://ho1jr3x2dcwdu3t5.public.blob.vercel-storage.com/interfaces-og-image.png\" />\n</a>\n\n[![skills.sh](https://skills.sh/b/jakubkrehel/skills)](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 you figure out how an animation, design or a piece of UI was built on the web. User-invoked.\n- [**break**](skills/break/SKILL.md): Renders a component you choose in **every state and scenario** on a temporary page and stress tests it. User-invoked.\n- [**variant**](skills/variant/SKILL.md): Builds multiple **variants** of a component you're working on and helps you iterate. User-invoked.\n\n## Install\n\n```bash\nnpx skills add jakubkrehel/skills\n```\n\n## Claude Code plugin\n\n```text\n/plugin marketplace add jakubkrehel/skills\n/plugin install interfaces@interfaces\n```\n",
  "bytes": 2775,
  "sha": "23ec1197487073154b35060bcfa9064ae6a732fcd9012d934a24de59ce6f9763",
  "repo_slug": "jakubkrehel/skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_jakubkrehel_skills_better_ui_8903d563/readme"
}