jpeetz/agent-skills · skills/frontend/design-to-code/SKILL.md

design-to-code skillB

design-to-code is agent-read markdown (skill) from jpeetz/agent-skills: Use this skill when translating UI/UX designs into production-ready frontend code. Handles design source ingestion (Figma, Sketch, Adobe XD, screenshots, design specs), design token extraction, component hierarchy mapping, responsive breakpoint strategy, accessibility-first implementation (WCAG 2.1 AA minimum), framework-agnostic patterns (React, Vue, Svelte, plain HTML/CSS), design system integration, visual regression testing, and CSS architecture selection (CSS Modules, Tailwind, styled-compo.

Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.

How to install

Latest version
mdr add jpeetz/agent-skills/design-to-code@v1.0.0
Exact content
mdr add jpeetz/agent-skills/design-to-code@sha256:71f98e8cfb5e3f81

Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_car4qn7fg7rg272l.svg)](https://markdownregistry.com/a/art_car4qn7fg7rg272l)

0 badge views in 30 days

Versions

versioncommittedcommitsizeaudit
v1.0.0 latest2026-08-31 945bdcc 34,627 BB view

Audit of the latest version

B  16 of 17 checks passed. Deterministic, no model, same answer every run.

Source

GitHub

jpeetz/agent-skills · 5 stars · license none · pushed 2026-08-31 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_car4qn7fg7rg272l
GET https://markdownregistry.com/api/v1/resolve?ref=jpeetz/agent-skills/design-to-code
GET https://markdownregistry.com/api/v1/blob/71f98e8cfb5e3f815594bbdca35cdf5f1f6a01ab300e3f43f9e7caec95fe97c0