agentsclimarketplace

Reference to implementation

Skill thanhaq/interface-compass-skills/skills/reference-to-implementation

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 reference-to-implementation

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

Analyze screenshots, mockups, visual references, or brand examples and translate them into implementable frontend code without copying protected assets. Use when Codex needs to infer layout grammar, typography, spacing, components, responsive behavior, and verification steps from images or reference URLs.

SKILL.md

1.7 KB, 276 tokens by cl100k_base, as published. Nobody here has run it

Reference To Implementation

Boundary

Use references to infer design grammar. Do not copy logos, illustrations, proprietary assets, exact copy, or distinctive trade dress unless the user owns them or explicitly provides permission.

Workflow

  1. Inventory each reference with references/analysis-template.md.
  2. Separate transferable patterns from protected specifics.
  3. Create a local design grammar: layout, type, spacing, color roles, component shapes, imagery treatment, and motion cues.
  4. Implement the UI using the repository's existing stack and component patterns.
  5. Replace unavailable assets with user-provided media, generated originals, or honest placeholders that preserve layout without pretending to be the reference.
  6. Verify the result in rendered form. Use browser screenshots when a local app is available.

Transferable Patterns

  • Information hierarchy.
  • Relative density.
  • Spacing rhythm.
  • Navigation placement.
  • Component anatomy.
  • State behavior.
  • Image aspect ratios and cropping strategy.
  • Tone of motion.

Non-Transferable Specifics

  • Logos and marks.
  • Exact illustrations, photos, icons, and mascots.
  • Exact marketing copy.
  • Unique product names.
  • Distinctive branded compositions that identify one company.

Resources

  • Use references/analysis-template.md to analyze inputs.
  • Use references/implementation-checklist.md before finishing.

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.