Check interface text, color, and accessibility with agent skills
When a screen feels off or lacks accessibility, the agent provides specific directions for improvement. This repository collects skills covering UI, typography, color, accessibility, layout, and product copy. It is structured to apply topics from personal websites and the design magazine Interfaces to actual work.
Skills for improving interface quality
This repository consists of skills that address various aspects of interfaces. better-interface reviews the entire screen from the perspectives of accessibility, layout, copy, typography, color, and UI finishing, providing a prioritized report. better-ui refines detailed visual elements such as corner radius, shadows, icon states, and animations with precise values. better-typography sets and reviews type scales, spacing, font features, line breaks, truncation, and punctuation for text rendering. better-colors builds and verifies color systems through palette generation, semantic token naming, format conversion, and contrast measurement. better-accessibility reviews and fixes keyboard and focus behavior, ARIA, accessibility names, forms, screen reader notifications, motion, and zoom features against WCAG 2.2 standards. better-layout sets grouping, alignment, reading order, responsive structure, and margins for translated text to ensure the layout holds up during resizing, translation, and mirroring. better-writing writes and reviews interface copy such as labels, error messages, empty states, and confirmation phrases to align with the product tone and guide the next action.
Task skills invoked directly by users
Some skills are designed for direct execution by the user. interface-review reviews interface issues introduced or regressed in branches, pull requests, or uncommitted changes from the perspectives of accessibility, layout, copy, typography, color, and UI. explain-interface takes a live URL or screenshot and explains how the website, visual effects, and animations were made. break renders a selected component in a temporary page under all reachable scenarios and performs stress testing. build-design builds UI matching the design using Figma files or design images, leveraging the project's existing tokens and components. technical-drawing generates precise static technical drawings of physical objects with consistent views and refined lines. state-machine renders all states of a selected component on a disposable page with mock data and a switcher, making each state workable. variant builds multiple variants of a component being worked on to aid iteration and selection.
Installation
To install this skill collection, run the npx skills add jakubkrehel/skills command in the terminal. This repository is written in Markdown, so it can be used immediately in agent-based development environments.
When this skill collection is needed
This skill collection is useful when you want to systematically check the visual quality or accessibility issues of an interface. It is particularly suitable when working on projects with a design system, where you need to refine the UI while maintaining consistent tokens and components, or when creating new screens and wanting to ensure they do not conflict with the existing codebase. It also provides specific guidelines when translating Figma designs into code, previewing various states of components, or unifying the tone of interface copy. These skills are based on topics covered in personal websites and the design magazine Interfaces, making them worth referencing when seeking in-depth knowledge in that field. However, these skills do not automatically solve all design problems, so the final judgment remains with the designer or developer.