d50006edb0
Unmodified snapshots under skills/vendor/ with provenance in VENDOR.md; skills/README.md updated to index them.
36 lines
2.7 KiB
Markdown
36 lines
2.7 KiB
Markdown
<a href="https://interfaces.dev/">
|
|
<img width="320" height="168" alt="interfaces.dev" src="https://ho1jr3x2dcwdu3t5.public.blob.vercel-storage.com/interfaces-og-image.png" />
|
|
</a>
|
|
|
|
[](https://skills.sh/jakubkrehel/skills)
|
|
|
|
A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface.
|
|
|
|
These skills are contain topics that I write about on [my personal website](https://jakub.kr/) and my design engineering magazine, [Interfaces](https://interfaces.dev/).
|
|
|
|
## Skills that help build great interfaces
|
|
|
|
- [**better-interface**](skills/better-interface/SKILL.md): Combines all of the `better-*` skills into a single review.
|
|
- [**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.
|
|
- [**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.
|
|
- [**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.
|
|
- [**better-accessibility**](skills/better-accessibility/SKILL.md): Helps your project comply with accessibility standards and best practices.
|
|
- [**better-layout**](skills/better-layout/SKILL.md): Helps with **grouping**, **alignment**, **reading order** and other details that make a great layout.
|
|
- [**better-writing**](skills/better-writing/SKILL.md): Focuses on improving and product copy in your project and making it consistent.
|
|
- [**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.
|
|
- [**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.
|
|
- [**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.
|
|
- [**variant**](skills/variant/SKILL.md): Builds multiple **variants** of a component you're working on and helps you iterate. User-invoked.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
npx skills add jakubkrehel/skills
|
|
```
|
|
|
|
## Claude Code plugin
|
|
|
|
```text
|
|
/plugin marketplace add jakubkrehel/skills
|
|
/plugin install interfaces@interfaces
|
|
```
|