agentsclimarketplace

Brief to interface

Skill thanhaq/interface-compass-skills/skills/brief-to-interface

Frontend design skill pack for AI coding agents: briefs, design systems, audits, motion, copy, and ship checks.

Install
npx -y skills add thanhaq/interface-compass-skills --skill brief-to-interface

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 15 days oldThe repository was created 15 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Convert rough product briefs, feature ideas, or vague app and site requests into a concrete interface direction before implementation. Use when Codex needs to infer users, jobs, layout strategy, visual language, density, motion, responsive priorities, and acceptance checks before building a frontend.

SKILL.md

2.0 KB, 340 tokens by cl100k_base, as published. Nobody here has run it

Brief To Interface

Operating Rule

Turn a fuzzy request into an interface operating model before writing UI code. Preserve the user's intent, but add the missing product and design decisions that an implementation needs.

Workflow

  1. Extract the product promise, primary user, repeated job, emotional pressure, and core artifact.
  2. Choose a composition mode from references/composition-modes.md when the brief does not already imply one.
  3. Create an Interface Compass Card using references/interface-card.md.
  4. Translate the card into screen zones, primary actions, data hierarchy, interaction rhythm, and responsive priorities.
  5. Define acceptance checks that can be verified in a browser or screenshot review.

Output Shape

Return a compact implementation brief:

  • Product intent in one sentence.
  • Interface Compass Card.
  • Screen map for the first one to three views.
  • Visual system notes for type, color roles, spacing, density, and shape.
  • Interaction notes for hover, focus, loading, empty, error, and success states.
  • Responsive behavior for mobile, tablet, and desktop.
  • Acceptance checks that make the work testable.

Decision Biases

  • Prefer concrete nouns over mood words.
  • Make the primary artifact visible in the first viewport.
  • Pick one signature interaction or layout move, then keep the rest disciplined.
  • Do not invent decorative scenes when product data, objects, or workflows can carry the design.
  • Ask a question only when the missing answer would change the product category or data model.

Resources

  • Read references/interface-card.md for the output template.
  • Read references/composition-modes.md when choosing a layout strategy.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.