jakubkrehel/skills: Agent skills for reviewing UI, typography, and accessibility
An Agent Skills collection for interface developers, bringing UI, typography, and accessibility reviews into Claude Code.
GitHub jakubkrehel/skills Updated 2026-09-12 Branch main Stars 6.3K Forks 220
Markdown Agent Skills UI Accessibility Claude Code

🧭 Decision Guide

Try it if you

  • You work in Claude Code on UI, typography, color, or accessibility issues
    The “Skills that help build great interfaces” section lists these skills, and the Install section provides Claude Code plugin commands
  • You need better-colors to generate palettes, use semantic tokens, or check contrast
    The better-colors entry explicitly lists generate palettes, semantic tokens, convert between formats, and check contrast
  • You need break to inspect a component in every state and scenario
    The break entry says it renders a component on a temporary page and stress tests it

Skip it if you

  • You need a dependency package with formal versions and release history
    Project metadata shows 0 releases and the latest version as No releases
  • You need interface-review to trigger automatically rather than be invoked manually
    The README marks interface-review as User-invoked
  • You require the README to explicitly support React, Vue, or another specific framework
    The README describes Agent Skills, Markdown, and interface topics but lists no specific frontend framework

Requirements

  • The README provides `npx skills add jakubkrehel/skills` but does not specify a Node.js version requirement
  • The README provides the Claude Code commands `/plugin marketplace add jakubkrehel/skills` and `/plugin install interfaces@interfaces`
  • The project technology is Markdown; the README specifies no other runtime, model, or backend requirements

First step (verbatim from README)

npx skills add jakubkrehel/skills

Watch out

  • interface-review, explain-interface, and break are all marked User-invoked
    The entries in the README Skills list
  • better-interface combines multiple better-* skills, so its review spans six topic categories
    The README describes better-interface as “Combines all of the better-* skills into a single review”
  • The repository has 10 recent commits, 2 contributors, and 0 releases, limiting maintenance and version cadence information
    The project activity and release metadata

Not stated in the README

  • The README does not specify the Node.js versions, operating systems, or installation-failure handling supported by `npx skills`
  • The README does not state which agent runtimes besides Claude Code support these Agent Skills
  • The README does not describe the skills' output format, whether they modify project files, or the modification scope
  • The README provides no compatibility examples for React, Vue, Svelte, or other frameworks
  • The README does not specify the input format or invocation syntax for interface-review, break, and variant
  • The README does not describe automated tests, stability metrics, or a formal release plan

💡 Deep Analysis

6
No I want my Web project to meet accessibility standards and make checks an automated CI quality gate. Can this project replace dedicated accessibility testing tools on its own?
For: A front-end developer who needs accessibility in Web interface development and also requires automated checks and complete CI quality gates

No, it should not be used alone as a replacement for dedicated accessibility testing tools because the README promises guidance around standards and best practices, not executable CI validation.

  • better-accessibility is described as helping a project comply with accessibility standards and best practices, which reads as guidance and review.
  • Project insights explicitly state that it is not a complete automated accessibility or visual-regression testing tool, with no evidence that it replaces professional testing tools.
  • The README shows no automated test suite, CI configuration, semantic-HTML checker command, or screen-reader integration.

It can serve as accessibility review knowledge inside an agent workflow, but the available evidence does not support promising machine-verifiable quality-gate results.

  • Skills that help build great interfaces: “better-accessibility: Helps your project comply with accessibility standards and best practices.”
  • Project insight user_experience.usage_limitations: it is not a complete automated accessibility or visual-regression testing tool
  • Project insight user_experience.usage_limitations: the README does not show complete automated tests, visual-regression infrastructure, or quantitative evaluation
  • Project data: release_count is 0
npx skills add jakubkrehel/skills
Not stated in the README:The README does not say whether hidden CI examples, scripts, or integrations with tools such as axe exist.;It does not specify the accessibility-standard version, rule coverage, or failure criteria for the recommendations.
Yes I need to generate palettes, establish semantic tokens, convert between color formats, and check contrast for a Web product. Can this project cover that work?
For: A front-end design engineer establishing semantic color tokens, palettes, and contrast rules for a Web product

Yes, it is suitable for color-system design and initial review because better-colors directly lists all four tasks you need.

  • The README explicitly supports generating palettes for palette exploration.
  • It supports semantic tokens, which helps turn raw color values into role-based system definitions.
  • It supports conversion between formats for handling different color representations.
  • It supports contrast checking and complements the better-accessibility skill.

However, the project is primarily a collection of Markdown skills. The README does not identify a color-calculation library, supported color spaces, or commands that automatically write token files or run checks in continuous integration.

  • Skills that help build great interfaces: “better-colors... generate palettes, use semantic tokens, convert between formats, check contrast”
  • Skills that help build great interfaces: “better-accessibility... comply with accessibility standards and best practices”
  • Project insight: the project is mainly Markdown skill files, not a runtime service or standalone rendering engine
npx skills add jakubkrehel/skills
Not stated in the README:The README does not specify supported color formats, color spaces, or contrast-standard versions.;It does not say whether color results can be synchronized automatically with existing design tokens or code files.
Yes I am using Claude Code to build an interface and want one review covering UI, typography, layout, color, product writing, and accessibility instead of invoking each skill manually. Is this project suitable?
For: A front-end developer using Claude Code who wants UI, typography, color, layout, writing, and accessibility checks inside the development workflow

Yes, it is suitable because it provides agent-oriented, composable interface review skills covering exactly these dimensions.

  • better-interface combines all better-* skills for a single broad review.
  • interface-review explicitly covers UI, typography, layout, color, writing, and accessibility and produces a detailed analysis.
  • It can be installed through the Claude Code plugin or npx skills add, without deploying a separate service.

It is primarily a collection of Markdown rules and review guidance, not an automatic code-modification engine or a complete visual-regression system. The README does not specify the review output schema, model requirements, or CI integration.

  • Skills that help build great interfaces: “better-interface: Combines all of the `better-*` skills into a single review.”
  • Skills that help build great interfaces: “interface-review... UI, typography, layout, color, writing and accessibility”
  • Install: `npx skills add jakubkrehel/skills`
  • Claude Code plugin: `/plugin marketplace add jakubkrehel/skills`
/plugin marketplace add jakubkrehel/skills
Not stated in the README:The README does not specify the minimum Claude Code version, required model, or whether skills can directly modify project files.;The README does not state whether interface-review can run headlessly in CI.
Yes My Web components already use variable fonts and OpenType features and must handle long-text wrapping and truncation. Can I use this project for focused typography review?
For: A design engineer maintaining Web components with variable fonts, OpenType features, long-text wrapping, and truncation rules

Yes, it is suitable for focused review with better-typography, although it cannot replace validation in browsers with realistic content.

  • The skill explicitly covers type scale, spacing, and sizing, which addresses hierarchy, rhythm, and dimension relationships.
  • The README directly lists variable fonts, OpenType features, wrapping, and truncation, matching your component constraints closely.
  • Because the skill is an agent-readable set of design rules, it can provide implementation and specification guidance during component development.

The README does not describe a specific font-diagnostics algorithm, browser compatibility matrix, or guaranteed CSS/design-token output. It is therefore better treated as a typography review assistant.

  • Skills that help build great interfaces: “better-typography... type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation”
  • Project data: main_language is Markdown and Markdown accounts for 253595 in language_distribution
npx skills add jakubkrehel/skills
Not stated in the README:The README does not say whether the skill reads actual CSS, font files, or rendered component output.;It does not clarify whether variable-font and OpenType checks are rule-based advice or executable checks.
Yes I am developing a Web component and need multiple design or implementation variants to compare information density, readability, and interaction. Is `variant` more suitable than hand-writing each version?
For: A design engineer iterating on Web component designs who wants to compare alternatives in information density, readability, and interaction

Yes, it is suitable for exploring alternatives because variant is specifically designed to generate multiple design or implementation variants for a component under development.

  • The README says it builds multiple variants of a component, which fits rapid exploration of different layout, interaction, and visual directions.
  • Project insights position variant as a component-exploration capability that complements issue-focused interface-review.
  • It is user-invoked, so you can call it after specifying the component and comparison goals rather than generating variants for every component automatically.

It is not a design-system generator or product decision tool. The README does not specify the number of variants, comparison metrics, preservation of existing technical constraints, or whether generated results compile and run directly.

  • Skills that help build great interfaces: “variant... Builds multiple variants of a component you're working on and helps you iterate.”
  • Project insight solution_analysis: positions `variant` as generating multiple design or implementation variants for a component under development
  • Skills that help build great interfaces: `variant` is marked “User-invoked”
npx skills add jakubkrehel/skills
Not stated in the README:The README does not say how many variants are generated or whether they share the original component's code structure.;It does not state whether results include runnable code, design explanations, or quantitative comparisons.
It depends I have a Web component and worry that its default state hides loading, error, disabled, long-text, and narrow-screen problems. Can I use `break` to stress-test each state?
For: An independent Web developer using an Agent Skills workflow who needs to validate loading, empty, error, disabled, long-text, and narrow-screen component states

It depends. break is explicitly aimed at multi-state stress testing, but actual execution depends on whether the agent can access, start, and understand your component environment.

  • The README says it renders a selected component on a temporary page and stress-tests it in every state and scenario.
  • Project insights list relevant states including loading, empty, error, disabled, long text, extreme data, narrow screen, and keyboard operation.
  • It is a user-invoked skill, so you can specify the component and scope instead of treating it as an always-on test service.

The README does not identify supported frameworks, explain how states are discovered, state whether a development server is required, or describe result and screenshot formats.

  • Skills that help build great interfaces: “break... Renders a component you choose in every state and scenario on a temporary page and stress tests it.”
  • Project insight user_experience.best_practices: lists loading, empty, error, disabled, long text, extreme data, narrow screen, and keyboard operation
  • Skills that help build great interfaces: `break` is marked “User-invoked”
npx skills add jakubkrehel/skills
Not stated in the README:The README does not say whether React, Vue, or other specific frameworks are supported.;It does not explain how the temporary page is started, whether browser tooling is required, or whether stress tests produce screenshots or reproducible reports.

✨ Highlights

  • better-interface combines 7 categories of better-* skills
  • better-ui covers optical alignment, hit areas, and animation
  • better-colors supports palettes, semantic tokens, and contrast
  • break stress-tests a component across every state and scenario
  • The repository contains only Markdown, has 2 contributors, and no releases

🔧 Engineering

  • better-interface combines reviews of UI, typography, layout, color, and accessibility
  • interface-review analyzes six interface categories and is marked User-invoked
  • variant builds multiple variants of the current component for iteration
  • Claude Code can install the interfaces@interfaces plugin

⚠️ Risks

  • The README lists only Markdown and does not specify React, Vue, or other framework support
  • interface-review is marked User-invoked, not automatically triggered
  • The project has no releases, so release information cannot confirm a stable version

👥 For who?

  • Frontend teams using Claude Code can review UI and accessibility
  • Interface developers who need checks for typography, color, and layout details
  • Developers who want to inspect component states with break or variant