Development · GitHub repo
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.
What it's 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
- Topic
- AI Prompts & Skills
- 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: 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
AI agent skills for UI animation, design engineering, and interface polish
Portable agent skills that enforce design quality in AI-generated frontends
Curated collection of plain-text design systems extracted from popular tech websites.
Open directory and CLI for discovering and installing AI agent skills
Curated library of specialized AI agent personas and workflows for Claude Code
Design vocabulary, rules, and skills for AI coding agents.
Updated