本文へ移動
cccskills
無料GitHub で公開

interface-craft

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.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md4.3 KB
  • references/sources.md3.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Designs and audits who can reach what — authentication, authorization models, privileged access, service credentials, and joiner-mover-leaver process. Use this to design a permissions model, run an access review, reduce standing privilege, handle offboarding, set up SSO or MFA, manage service and machine credentials, or diagnose why permissions have sprawled.

日本語の概要は準備中です。原文の説明を表示しています。

cbrock84/headcount2,0282026年9月18日 更新

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 inside each, tiering effort against account value, coordinating so the account experiences one campaign rather than several, and measuring account progression instead of leads. Use this to decide whether to run an account-based program, build one, or work out why an existing one produces activity and no pipeline.

日本語の概要は準備中です。原文の説明を表示しています。

cbrock84/headcount2,0282026年9月18日 更新

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. Use this to design or fix signup and onboarding, diagnose why signups do not convert to active use, reduce time-to-value, or decide what a new user must accomplish first.

日本語の概要は準備中です。原文の説明を表示しています。

cbrock84/headcount2,0282026年9月18日 更新

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 script that runs in CI. Use this whenever the user wants to set up, expand, audit, or fix a multi-agent or subagent structure for a codebase; asks how to divide work between agents; wants agent charters, roles, or a surface map written; or is hitting agents that collide on the same files, review their own work, or drift from their remit. Also use when sizing a roster or deciding whether a new agent is justified.

日本語の概要は準備中です。原文の説明を表示しています。

cbrock84/headcount2,0282026年9月18日 更新

Governs models and AI systems in production — intended use, evaluation, monitoring, human oversight, documentation, and the decision to deploy or retire. Use this before deploying a model or AI feature, when defining evaluation criteria, when a model's behavior has drifted, when assessing AI risk or regulatory exposure, or when deciding whether an AI system is fit for a consequential decision.

日本語の概要は準備中です。原文の説明を表示しています。

cbrock84/headcount2,0282026年9月18日 更新

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. Use this to analyze a market or industry, map competitors, evaluate a market-entry or build-versus-buy decision, produce a research brief, or assemble evidence for a decision. Also use when comparing options that need a structured, evidence-based verdict rather than an opinion.

日本語の概要は準備中です。原文の説明を表示しています。

cbrock84/headcount2,0282026年9月18日 更新

cbrock84 のスキルをすべて見る

このスキルの問題を報告する