# jakubkrehel/skills

> AI agent skills for interface design, accessibility, typography, and UI states

A collection of agent skills designed to help AI coding tools build polished interfaces. It includes modular prompts and workflows covering UI styling, accessibility (WCAG 2.2), layout, typography, copywriting, and visual code reviews. Specialized skills like /state-machine and /break let developers render components across all possible states or stress scenarios on isolated test pages.

Website: https://github.com/jakubkrehel/skills

## What it is for

- Render every UI component state on a throwaway page using mock data and a state switcher
- Audit pull requests or branches for accessibility, layout, and visual polish regressions
- Stress test front-end components against edge cases and extreme viewport scenarios
- Generate accessible color systems and WCAG-compliant design tokens directly in code

## Features

- /state-machine skill renders every state of a component with mock data and a switcher
- /better-interface comprehensive UI, typography, color, and layout review
- /better-accessibility checks keyboard focus, ARIA, and screen-reader support against WCAG 2.2
- /better-typography handles type scales, wrapping, font features, and punctuation
- /better-colors generates semantic tokens, contrast measurements, and palette conversions
- /break stress tests components under edge cases on temporary pages
- /build-design translates Figma files or screenshots into code using existing design tokens
- Compatible with skills.sh CLI and installable as a Claude Code plugin

## Pricing

Open source. Free (MIT License)

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Command line, other
- For: Front-end engineers and design engineers using AI coding assistants like Claude Code.
- Tags: agent skills, claude code, ui design, accessibility, front end, developer tools

## Why it was saved

- [@jakubkrehel, 11 October 2026](https://x.com/jakubkrehel/status/2109306232859398295): You can drop it into your agent workflow to generate a state gallery for complex components, so you can design and review every state instead of only the happy path.

## Related

- [emilkowalski/skills](https://xiry.app/resources/emilkowalski-skills): AI agent skills for UI animation, design engineering, and interface polish (GitHub repo, Open source)
- [Taste Skill](https://xiry.app/resources/taste-skill): Portable agent skills that enforce design quality in AI-generated frontends (GitHub repo, Free)
- [Awesome DESIGN.md](https://xiry.app/resources/awesome-design-md): Curated collection of plain-text design systems extracted from popular tech websites. (GitHub repo, Open source)
- [Skills.sh](https://xiry.app/resources/skills-sh): Open directory and CLI for discovering and installing AI agent skills (Web app, Free)
- [agency-agents](https://xiry.app/resources/agency-agents): Curated library of specialized AI agent personas and workflows for Claude Code (GitHub repo, Open source)
- [Impeccable](https://xiry.app/resources/impeccable): Design vocabulary, rules, and skills for AI coding agents. (Web app, Free)

Updated 12 October 2026. Page: https://xiry.app/resources/jakubkrehel-skills

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.