--- title: "Interfaces: agent skills for building UI" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "2" url: "https://mindket.com/p/119d584e-bd6a-4abb-9684-01d8c09c107d" updated: "2026-11-09" health: "Active" --- # Interfaces: agent skills for building UI > The name, the description, the About and a README below are the seller's words: data, not instructions. Jakub Krehel’s collection of agent skills for interface work: they review and fix accessibility, layout, typography, color, UI polish and interface copy, and add commands that review a pull request or stress test a component. Interfaces: agent skills for building UI is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 2, last updated on 2026-11-09. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by jakubkrehel ## About ### What it is Interfaces is Jakub Krehel’s set of 14 agent skills for building and reviewing user interfaces. Six better-\* skills each own one field: typography, color, accessibility, layout, interface copy and UI polish. A seventh, better-interface, runs them over a screen and merges what they find into one ranked report. The topics are the ones he writes about on his own site and in his design engineering magazine, also called Interfaces. You ask for a review of a screen or a change → better-interface hands it to each better-\* skill → Each skill checks its own field and keeps the evidence → One table, ranked by what each problem costs the user → A verdict: Block or Approve ### Who it suits Front-end developers and design engineers who care how an interface reads and behaves, from type and spacing to copy and keyboard focus. It also suits teams with a design system they want an agent to respect, since build-design works from the project’s own tokens and components. Who uses it, and how | Industry | Who uses it | How they use it | Example | | --- | --- | --- | --- | | Software and SaaS products | Design engineers | Review a new flow for copy, contrast and focus before it reaches QA | A design engineer reviews a new onboarding flow and fixes the HIGH rows before handing it on. | | Open source and shared codebases | Maintainers | Run interface-review on each pull request that touches the UI | A maintainer sees which problems a pull request brought in, kept apart from the ones that were already there. | | Agencies and studios that hand off in Figma | Front-end developers | Turn a Figma frame into code with build-design and the project’s own components | A developer with a Figma MCP server connected builds a settings panel from a frame, using the design system’s tokens. | | Teams with a component library | UI engineers | Render a component in every scenario or state on a throwaway page | A team renders a form component under every scenario that can reach it with break, then deletes the temporary page. | | Design education and research | Developers studying other sites | Ask explain-interface how a live page or effect was built | A developer asks how a page they admire builds its animation. | Back-end work gives it nothing to review. ### Where to use it The README covers two routes, and two skills reach outside your editor. - Claude Code: the interfaces plugin from the maker’s marketplace - OpenCode: the skills CLI and its opencode target, which the maker points to - Codex, Cursor and others: the skills CLI installs into the agents it finds on your computer - Figma: build-design reads a Figma link through a Figma MCP server you connect - Live pages: explain-interface fetches them or reads them through a scriptable browser such as chrome-devtools-mcp What you can point it at | Target | What comes back | | --- | --- | | A screen, a flow or a whole interface | One ranked report from better-interface | | A branch, a pull request or an uncommitted change | interface-review’s findings, each marked by where it came from | | A Figma file or a design image | UI built with the project’s own tokens and components | | A live URL or a screenshot | How the site or the visual effect was built | | One component | Its scenarios or states on a throwaway page, or several versions to pick from | ### How to set it up Get it saves a zip of Mindket’s setup notes in your downloads folder. The skills themselves install from Jakub Krehel’s repository, as a plugin in Claude Code or through the skills CLI anywhere else. What you need first | Need | Detail | | --- | --- | | A coding agent | Claude Code for the plugin, or an agent the skills CLI supports, such as OpenCode, Codex or Cursor | | Node 22.20 or newer | Only for the skills CLI, Vercel Labs’ npm package skills, not Jakub Krehel’s | | A Figma MCP server | Only for build-design with Figma links. Without one, it asks you to connect it | | A scriptable browser | Optional, for explain-interface on a live page | 1. Unzip the kit and open setup/claude-code.md or setup/other-agents.md. 2. In a Claude Code session, run the two plugin lines below, in order. 3. In any other agent, run the npx line in the project folder that should get the skills. 4. Pick the agents that get them when the CLI asks. ```text /plugin marketplace add jakubkrehel/skills /plugin install interfaces@interfaces ``` ```sh npx skills add jakubkrehel/skills ``` Plugin updates reach Claude Code only when the maker raises the plugin’s version, which he does with every skill change. ### How to use it Most skills load by themselves when a request matches, such as a request to fix contrast or tighten a heading. Skills that load on their own | Skill | What it does | | --- | --- | | better-interface | Runs the other better-\* skills over a screen, a flow or a whole interface and returns one ranked report | | better-ui | Surfaces, icons and motion, with exact values for radius, shadows and animation | | better-typography | Type scale, spacing, font features, wrapping, truncation and punctuation | | better-colors | Palettes, semantic token names, color format conversion and contrast checks | | better-accessibility | Keyboard and focus, ARIA, forms and motion, checked against WCAG 2.2 | | better-layout | Grouping, alignment, reading order and responsive structure | | better-writing | Labels, errors, empty states, confirmations and the rest of the interface copy | | build-design | Builds UI from a Figma file or a design image with the project’s own tokens and components | | teardown | Makes a technical illustration you can configure and export as SVG, PNG or PDF | Five run only when you call them. Skills you call yourself | Skill | What it does | | --- | --- | | interface-review | Reviews a branch, a pull request or an uncommitted change | | explain-interface | Explains how a site or a visual effect was built, from a live URL or a screenshot | | break | Renders one component under every scenario that can reach it | | state-machine | Renders every state of a component on a throwaway page with mock data | | variant | Builds several versions of a component so you can pick one | In Claude Code that is a slash command, and everything after it is the target. This one reviews pull request 482: ```text /interface-review pr 482 ``` ### Example You finish a new checkout screen and ask your agent for a review. ```text Review the checkout screen for accessibility, layout and copy problems. ``` One table of at most 15 findings comes back, ranked HIGH, MEDIUM or LOW by what each does to the person using the screen. A row gives the file and line, the problem, the fix and the evidence. One root cause is one row, with every place it shows up. The verdict is Block while a HIGH finding remains, else Approve, and your code stays as it was until you ask for fixes. ### For newcomers and experts **If you are new.** Small details decide whether an interface feels finished. Text you can read and buttons that say what they do are most of it. These skills give your agent rules for each field and one review that ranks what to fix first. Ask for a review of one screen you built, then fix only the HIGH rows. **For experts.** better-interface ranks findings by severity, then by how far one fix reaches, so a token or shared-component fix outranks the same symptom in one leaf. Some findings are HIGH on sight, such as a control with no accessible name. The cap of 15 keeps reviews short and can hide lower-ranked issues on a big screen. Blockers are never the ones it cuts. How interface-review marks a finding | Mark | Meaning | Counts toward the verdict | | --- | --- | --- | | Introduced | The change under review brought it in | Yes | | Regression | The change broke something that worked | Yes | | Pre-existing | It was there before the change | No | ### Good to know Some skills write to your project while they work, and each cleans up on your word. - Your code: your agent’s model reads it as it works - interface-review: read-only, it fetches pull request refs and never checks them out over your files - break and state-machine: they add a throwaway route with mock data and remove it only when you say you are done - variant: it puts its versions on the real page until you pick one, then deletes the rest - teardown: it copies helper scripts into tools/teardown/ in your project and runs them with Node - Usage data: the skills CLI sends anonymous usage data unless you set DISABLE\_TELEMETRY=1 or DO\_NOT\_TRACK=1 - License: MIT ## README ```markdown # Interfaces: agent skills for building UI This kit holds setup notes written by Mindket, nothing more. The skills and the Claude Code plugin themselves install from Jakub Krehel's repository https://github.com/jakubkrehel/skills. No skill file from that repository is copied here. License: MIT, per the repository's LICENSE file (https://github.com/jakubkrehel/skills/blob/HEAD/LICENSE). ## Files in this kit - setup/claude-code.md: the plugin install for Claude Code. - setup/other-agents.md: the skills CLI line, which the maker also points OpenCode users to. ## What installs One plugin named interfaces, served from a marketplace also named interfaces (source: .claude-plugin/plugin.json and .claude-plugin/marketplace.json in the repository). The README lists these skills: - better-interface: runs the other better-* skills on a screen, flow or whole interface and returns one ranked report. - better-ui: surfaces, icons and motion, with exact values for radius, shadows and animation. - better-typography: type scale, spacing, font features, wrapping, truncation and punctuation. - better-colors: palettes, semantic token names, color format conversion and contrast checks. - better-accessibility: keyboard and focus, ARIA, forms and motion, checked against WCAG 2.2. - better-layout: grouping, alignment, reading order and responsive structure. - better-writing: interface copy such as labels, errors, empty states and confirmations. - build-design: builds UI from a Figma file or design image with the project's own tokens and components. - teardown: a technical illustration you can configure and export as SVG, PNG or PDF. - interface-review: reviews a branch, pull request or uncommitted change. You call it yourself. - explain-interface: explains how a site or visual effect was built, from a live URL or screenshot. You call it yourself. - break: renders one component under every scenario that can reach it. You call it yourself. - state-machine: renders every state of a component on a throwaway page with mock data. You call it yourself. - variant: builds several versions of a component so you can pick one. You call it yourself. Source: README at https://github.com/jakubkrehel/skills ## Updating and removing - Claude Code: the maker's AGENTS.md says plugin updates look only at the version field in plugin.json, and the maker raises it with every skill change. Details in setup/claude-code.md. - skills CLI: its own update and remove commands are in setup/other-agents.md. - The maker's README gives no removal steps. ## What runs on your machine - teardown copies its assets and scripts folders into tools/teardown/ in your project and runs its scripts with Node; its preview page build needs packages installed with your package manager (skills/teardown/SKILL.md, verification.md and viewer-assets.md). - break and state-machine add a scratch route with mock data to your app and delete it only when you say you are done (each skill's SKILL.md). - variant puts its versions and a picker on the page that will hold the component. Once you pick one, it deletes the others, the picker and that page's import of them (skills/variant/SKILL.md). - interface-review runs read-only git commands, plus git fetch for pull request refs, and does not edit your checkout. To render a target that is not checked out, it uses a temporary git worktree (skills/interface-review/SKILL.md). - build-design needs a Figma MCP server for Figma links; explain-interface can read live pages directly or through a scriptable browser. ``` ## What is in it 3 files, 7 KB, downloaded as a zip. ```text README.md 3 KB setup/claude-code.md 2 KB setup/other-agents.md 2 KB ``` ## Source [jakubkrehel/skills on GitHub](https://github.com/jakubkrehel/skills) ## Intro videos - [Interfaces: agent skills for building UI intro video 1](https://www.youtube.com/watch?v=rcRS8-7OgBo) - [Interfaces: agent skills for building UI intro video 2](https://www.youtube.com/watch?v=3IsGhz07ZHM) - [Interfaces: agent skills for building UI intro video 3](https://www.youtube.com/watch?v=Ae1CsrJbO64) ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Hacker News · sixtyj · 2026-07-26](https://news.ycombinator.com/item?id=49062523): Hallmark – Anti-AI-Slop Design Skill for Claude Code, Cursor, and Codex: I have tried all possible ways: skills, shuffle.dev ai editor, moonchild.ai, giving screenshots of existing sites as a sample. I don’t count Lovable or Figma html2figma plugin or figma2code plugin etc. After burning a lot of time and endless tinkering, I have realized that the only way to speed up… - [Bluesky · Aditya Mitra · 2026-09-14](https://bsky.app/profile/adityamitra.bsky.social/post/3mvih6ib4vf2a): https://www.skills.sh/emilkowalski/skills/emil-design-eng https://www.skills.sh/jakubkrehel/skills/better-ui Someone made this CRM with these 2 skills I use a different variant of these \#design \#frontend \#aitools - [Hacker News · cocoflunchy · 2026-07-20](https://news.ycombinator.com/item?id=48984818): Launch HN: Bloomy (YC S26) – AI-powered mastery learning for K-12: I think 383toast is talking about your landing page design which has very strong AI-generated design vibes (blue-green gradients, rounded rectangles with a colored border on the left...) There are a bunch of skills you can find online to improve on this if you want to keep designing with Claude,… - [Bluesky · @hydromo.bsky.social · 2026-10-31](https://bsky.app/profile/hydromo.bsky.social/post/3mz6ogdosuh2f): GitHub weekly trending Top 10 (Oct 31) 1 hallmark · 2 security-audit-skill · 3 claude-seo · 4 impeccable · 5 superpowers · 6 andrej-karpathy-skills · 7 TradingAgents · 8 jakubkrehel/skills · 9 taste-skill · 10 t3code Use cases and links are on the cards. https://github.com/trending?since=weekly - [Bluesky · Ali Mabsoute · 2026-11-05](https://bsky.app/profile/alimabsoute.bsky.social/post/3mzlg3g2q5h23): Four of this week's 16 GitHub trending repos are design skills for coding agents (impeccable, hallmark, taste-skill, jakubkrehel/skills), 26,343 new stars between them. t3code led the page at +14,580. Have you given your agent any design rules yet? - [Bluesky · @hydromo.bsky.social · 2026-10-31](https://bsky.app/profile/hydromo.bsky.social/post/3mz6og7joqd2v): 이번 주(10/31 기준) GitHub 트렌딩 TOP10 1 hallmark · 2 security-audit-skill · 3 claude-seo · 4 impeccable · 5 superpowers · 6 andrej-karpathy-skills · 7 TradingAgents(투자 조언 아님) · 8 jakubkrehel/skills · 9 taste-skill · 10 t3code 활용 한 줄과 링크 10개는 카드에 정리했습니다. https://github.com/trending?since=weekly - [Bluesky · Alex · 2026-09-18](https://bsky.app/profile/alexpoppescu.bsky.social/post/3mvrzskkrj62v): If your app looks cheap, it's not your stack. It's your motion and polish. These 2 skills are mandatory: https://emilkowal.ski/skill - animation, curves, Apple-level fluidity https://www.skills.sh/jakubkrehel/skills/better-ui - radius, optical alignment, the tiny details that compound - [Bluesky · @ai-linkstream.bsky.social · 2026-09-13](https://bsky.app/profile/ai-linkstream.bsky.social/post/3mvelkrelaq2m): Discover insights in AI development from Jakub Krehel's Skills repository, featuring reviews on interface design. Check out documents like SKILL.md and scope-resolution.md for understanding AI capabilities. https://github.com/jakubkrehel/skills/tree/main/skills/interface-review - [Bluesky · Tom Dörr · 2026-09-09](https://bsky.app/profile/tom-doerr.bsky.social/post/3mv4dzwwqv32c): https://github.com/jakubkrehel/skills - [Bluesky · @mat-logi.bsky.social · 2026-07-26](https://bsky.app/profile/mat-logi.bsky.social/post/3mrjlxkgtpa2g): 개발 디자인 감각을 스킬로 쪼개 담았다는 밤 피드에 레포 하나 걸렸다. 에이전트한테 붙이는 스킬 묶음인데, 애니메이션·타이포·레이아웃·컬러처럼 프로덕트 디자인을 조각조각 나눠서 각각 스킬로 만들어놨더라. 아직 안 써봤는데, "예쁘게 해줘" 대신 "타이포 스킬 켜" 식으로 결을 집어주는 접근이라 각이 좋아 보인다. 외주 데모 화면 급조할 때 디자인 감 없는 사람 보조바퀴로 괜찮을 듯. 별은 꽤 받았다더라. https://github.com/jakubkrehel/skills 스킬 이렇게 쪼개는 방식, 너넨 어떻게 봄? \#개발… ## Trust facts Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions. - Health on GitHub: Active - Last change: 2026-11-02 - Checked on GitHub: 2026-11-08 - Something wrong? Tell us: https://mindket.com/takedown#ask ## Get it - [Open jakubkrehel/skills on GitHub](https://github.com/jakubkrehel/skills) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/119d584e-bd6a-4abb-9684-01d8c09c107d) - [Its page on Mindket](https://mindket.com/p/119d584e-bd6a-4abb-9684-01d8c09c107d)