mockup-implement
Skill1 starsChanged 3 months agoMITView on GitHub
Port a signed-off mockup (HTML picker winner, Figma, screenshot) into production with fidelity — no freestyle redesign. Use only when a design is already chosen and the task is "match this." Prefer product-design when craft/explore path is unclear; frontend-design for full FE feature implementation. Not for open-ended exploration (ui-explore first) or inventing new visual systems (design-system / craft).
In this repository47 other files it gives its agents.
- data-apache-lakehouseSkill
- data-apiSkill
- dataSkill
- data-duckdbSkill
- data-identity-resolutionSkill
- data-pipeline-operationsSkill
- data-pokemon-tcg-foundationsSkill
- data-product-evalSkill
- data-reelsSkill
- data-semantic-qualitySkill
- data-table-lifecycleSkill
- html-designSkill
- ebay-listingSkill
- flutter-pro-ux-reviewSkill
- flutterSkill
- browser-testing-with-devtoolsSkill
- browser-verifySkill
- design-systemSkill
- frontend-designSkill
- mobile-app-echarts-visualSkill
- mobile-blog-chart-visualSkill
- mobile-chart-visualSkill
- mobile-product-uxSkill
- product-designSkill
- product-ui-craftSkill
- prototypeSkill
- react-performanceSkill
- ui-exploreSkill
- visual-verifySkill
- web-qualitySkill
- high-retention-insight-reels-instagramSkill
- instagramSkill
- instagram-virality-insightsSkill
- marketing-cashvertisingSkill
- marketing-contagiousSkill
- marketing-going-viralSkill
- marketingSkill
- marketing-offersSkill
- marketing-storybrandSkill
- quality-checkSkill
- elements-of-styleSkill
- style-clarity-graceSkill
- writer-styleSkill
- writing-docsSkill
- writing-proseSkill
- writingSkill
- writing-technicalSkill
The file
We split this skill into the rules it gives an agent
4 rules. About 0 are common, 4 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 38
If not signed off → ui-explore (or Figma) first.
- Distinctive: line 65
Never paste mock CSS wholesale if it bypasses tokens.
- Distinctive: line 69
Prefer smallest PR that matches the signed surface
- Distinctive: line 91
Use browser-verify (and mobile-product-ux if applicable).
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Mockup → production implementation
Job: Ship the agreed design in production primitives — not a reinterpretation.
Sources (attribution)
- Design-to-code fidelity practice from OpenAI/Figma “implement design” skill lineage: multi-state components, respect existing system, verify visually.
- Repo
design/workflows: HTML pickers,?design=variants, selection JSON, DESIGN-DIRECTION locks (SilphCo-style and similar). - ui-explore skill: exploration stays in throwaway HTML; this skill starts after a winner is chosen.
When to load
- “Port Trade Floor v7 mockup” / “implement design B”
- Figma frame → React
- Screenshot parity tickets
- Agents redesign while “implementing”
Preconditions
- Signed-off source named (path, frame, or URL)
- design-system constraints known (tokens, kit)
- Out of scope listed (don’t “while we’re here” redesign nav)
If not signed off → ui-explore (or Figma) first; do not implement fog.
Workflow
1. Inventory the mockup
Extract a checklist:
| Concern | Notes |
| Layout regions | header / body / sticky / HUD |
| Typography | which roles (title, meta, mono price) |
| Components | map to kit (Button, Sheet, Panel…) |
| States | empty, loading, error, selected, disabled |
| Motion | none / subtle / explicit |
| Breakpoints | mobile vs desktop differences |
| Data | real fields vs placeholder |
2. Map mock → code
| Mock element | Production target |
| Pretty div button | Kit Button variant |
| Hard-coded color | Token class / CSS var |
| Fake data | Real query + empty/error |
| Absolute artboard | Responsive layout + sticky rules |
Never paste mock CSS wholesale if it bypasses tokens.
3. Implement minimal delta
- Prefer smallest PR that matches the signed surface
- Reuse routes/features; don’t new-page without need
- Preserve existing analytics/a11y hooks
4. Fidelity gate
Side-by-side:
- Mockup (or HTML
?design=winner) - Local prod build
Check:
- Structure/order of regions
- Spacing rhythm within ~token step
- Sticky/HUD behavior on mobile
- Primary CTA placement
- No extra chrome the mock lacks
- No missing states the mock shows
5. Verify
Use browser-verify (and mobile-product-ux if applicable). Update snapshots only when intentional.
Anti-patterns
- “Improved” colors/fonts during port
- Shipping desktop mock only when mock specifies mobile
- Leaving mock placeholder copy in production
- New dependencies for something the kit already does
- Scope creep into adjacent pages
Relation to ui-explore
ui-explore → pick winner → mockup-implement → product-ui-craft polish → browser-verifyHand off
| Need | Next skill |
| Tokens/primitives | design-system |
| Post-port polish | product-ui-craft |
| Mobile sticky | mobile-product-ux |
| Browser proof | browser-verify |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.