New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Interface Craft

by cbrock84 in cbrock84/headcount

Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one.

MITAuto-check passedFrontend & Design

Install Interface Craft

skills CLI
$ npx skills add cbrock84/headcount --skill interface-craft -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install cbrock84/headcount interface-craft --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/cbrock84/headcount.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/product/skills/interface-craft .claude/skills/interface-craft && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
interface-craft
GitHub stars
2k
Token cost
~1.1k tokens
SKILL.md length
621 words
Files
2 (incl. references)
Skills in repo
175
Repo updated
First seen
Licence
MIT

At a glance

Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one.

  • Frontend & Design work in your project
  • SKILL.md covers Diagnose before restyling, The things that actually read…, Density is a decision and Finish the states, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Interface Craft is an agent skill from cbrock84/headcount. Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or when an interface needs to feel trustworthy rather than merely functional.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/sources.md`).

It sits in Frontend & Design. The repository describes itself as: An agent organization structured as a company — 15+ departments, 125+ skills, each independently installable, citing the standards and regulators that settle the question. Runs… The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “Use the interface-craft skill to raise the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the…”
  • “/interface-craft”

What it can do on your machine

Read from SKILL.md and the folder at commit 98d1c17. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Interface Craft loads about 1.1k tokens when it runs, and up to ~2k if it reads all its reference files. Until then it costs about 102 tokens; SKILL.md has 621 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~102
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from cbrock84/headcount at commit 98d1c17, republished under its MIT licence (© cbrock84). 621 words, ~1,096 tokens.

Download SKILL.mdSave it as .claude/skills/interface-craft/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
interface-craft
description
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or when an interface needs to feel trustworthy rather than merely functional.

Interface craft

Most interfaces do not fail on ideas. They fail on execution — spacing that is nearly consistent, hierarchy that is nearly clear, type that is nearly right.

Diagnose before restyling

Ask what the screen is for. One primary action, at most one secondary. If you cannot name the primary action, the layout problem is a product problem and no amount of styling fixes it.

The things that actually read as quality

Hierarchy. A viewer should know where to look before they read anything. Achieve it with size, weight, and space — in that order. Color is the weakest hierarchy tool and the most overused.

Spacing rhythm. Related things sit closer than unrelated things, and the gaps come from one scale. Inconsistent spacing is the defect people feel but cannot name. Get proximity right and a plain layout reads as designed.

Type. One family for the interface, two at most on the page. Set a real scale and use its steps rather than inventing sizes. Body text wants a comfortable measure — roughly 60–75 characters — and line height that grows as the measure widens.

Restraint in surfaces. Borders, shadows, and fills all separate things. Pick one per boundary. Stacking all three is why interfaces look busy at normal density.

Alignment. Everything lines up with something. An element aligned to nothing reads as a mistake even when it is intentional.

Density is a decision

An information-dense tool and a marketing page want opposite treatments. Decide which this is and commit — the uncomfortable middle, where a data table has landing-page padding, serves neither.

Finish the states

Loading, empty, error, and overflow are where products feel unfinished. An empty state is a design opportunity; a spinner with no context is an admission. Long strings, long lists, and small screens must all be handled, not hoped about.

Dark mode is a palette, not an inversion

Inverting a light theme produces the characteristic bad dark mode: pure black backgrounds, pure white text, and shadows that do nothing.

  • Use a very dark gray rather than pure black, and a slightly dimmed white rather than pure white. Maximum contrast between the two causes halation and is genuinely tiring to read.
  • Elevation reverses: in light themes raised surfaces cast shadows, in dark themes they get lighter. Shadow alone conveys nothing on a dark ground.
  • Saturated colors that worked on white will vibrate on dark. Desaturate and lighten accent colors for the dark palette rather than reusing them.
  • Define both palettes together, at token level, from the start. Retrofitting means auditing every surface.
Show full SKILL.md (199 more words)Show less

Accessibility floor

These are not polish items — below them, some people cannot use the interface at all.

  • Text contrast meeting the standard ratio against its actual background, including text over images and inside colored buttons.
  • Never carry meaning by color alone. A red border indicating an error needs text or an icon too.
  • Every interactive element reachable by keyboard, in a sensible order, with a visible focus state.
  • Touch targets large enough to hit reliably, with spacing between adjacent ones.
  • Respect the reduced-motion preference: animation that cannot be disabled causes real symptoms for some users.
  • Real semantic elements — buttons that are buttons, headings in order. A styled div is invisible to assistive technology.

Sources

references/sources.md in this skill lists the outside authorities that settle the questions here — what each one is authoritative for, and what you may do with it. Check them before answering on anything they cover, and cite what you used. Most are free to read and not free to reproduce; the use note on each is binding.

Never

  • Add visual weight to fix a hierarchy problem caused by too many equal elements. Remove instead.
  • Center body text.
  • Ship a hover state without the matching focus state.

© cbrock84, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in plugins/product/skills/interface-craft of cbrock84/headcount.

  • SKILL.md
  • references/sources.md

Open the folder on GitHubat commit 98d1c17

Compare with similar skills

Interface Craft next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Interface Craft compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Interface Craft this skillcbrock84/headcount2k—~1.1kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from cbrock84/headcount

All 175 skills in this repo

  • Agent Hierarchy

    cbrock84/headcount

    Designs orchestrator-and-subagent hierarchies for a repository — splitting agents by exclusive write surface, pairing every producer with an independent auditor, and enforcing the split with a…

    2k GitHub stars~1.2k tokensUpdated 20 days ago
    Auto-check passed

  • Access And Identity

    cbrock84/headcount

    Designs and audits who can reach what — authentication, authorization models, privileged access, service credentials, and joiner-mover-leaver process.

    2k GitHub stars~1.1k tokensUpdated 20 days ago
    Auto-check passed

  • Account Based Marketing

    cbrock84/headcount

    Concentrates marketing and sales effort on a named set of accounts rather than on volume — qualifying whether the model fits your economics at all, building the account list and the buying group…

    2k GitHub stars~1.2k tokensUpdated 20 days ago
    Auto-check passed

  • Activation

    cbrock84/headcount

    Gets new users from signup to first real value — signup flow, onboarding, time-to-value, and the early experience that determines whether someone becomes a user or a lapsed account.

    2k GitHub stars~865 tokensUpdated 20 days ago
    Auto-check passed

  • AI Research Analyst

    cbrock84/headcount

    Produces executive-level research — market sizing, competitor mapping, trend analysis, and strategic intelligence — grounded in cited sources with the confidence in each claim made explicit.

    2k GitHub stars~916 tokensUpdated 20 days ago
    Auto-check passed

  • AI Search Optimization

    cbrock84/headcount

    Optimizes for AI assistants and AI-generated answers — being retrievable, being cited, and being represented accurately when a model answers on your behalf.

    2k GitHub stars~829 tokensUpdated 20 days ago
    Auto-check passed

Categories

Questions about Interface Craft

What does Interface Craft do?

Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Interface Craft is an agent skill from cbrock84/headcount. Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one.

When should I use Interface Craft?

Interface Craft fits situations like: frontend & Design work in your project.

How do I install Interface Craft in Claude Code?

Run `npx skills add cbrock84/headcount --skill interface-craft -a claude-code`. Or copy the skill folder (plugins/product/skills/interface-craft in cbrock84/headcount) into .claude/skills/interface-craft in your project. Claude Code loads it when a task matches its description.

How do I install Interface Craft in Codex?

Run `npx skills add cbrock84/headcount --skill interface-craft -a codex`. Or copy the skill folder (plugins/product/skills/interface-craft in cbrock84/headcount) into .agents/skills/interface-craft in your project. Codex loads it when a task matches its description.

Can I use Interface Craft in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add cbrock84/headcount --skill interface-craft -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/interface-craft, .gemini/skills/interface-craft, .github/skills/interface-craft and .opencode/skills/interface-craft in your project.

What does Interface Craft need to run?

SKILL.md names no scripts, command-line tools or credentials: Interface Craft is instructions for the agent only.

Does Interface Craft access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Interface Craft safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Interface Craft use?

Interface Craft is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Interface Craft use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 907 tokens, read only when the agent opens those files.

What are the alternatives to Interface Craft?

Skills that share tags, products or a category with Interface Craft: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Interface Craft?

cbrock84 (a GitHub user) maintains it in cbrock84/headcount, which has 2,007 GitHub stars. The repository holds 175 skills in this directory. The repository was last updated on September 17, 2026.

Source: cbrock84/headcount on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.