agentsclimarketplace
Sign in

Reference to implementation

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

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.From its SKILL.md

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.

One thing to look at

  • 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.

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.

What ships with it: 3 files

1.5 KB alongside SKILL.md

agents/

references/

Keep looking

Skills are one crate of 325,949. 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.