jhonatan-oliveiradevjhonatan-oliveiradev/agent-skills/skills/implementing-reference-faithful-ui/SKILL.mdimplementing-reference-faithful-ui
Skill1 starsChanged 3 months agoMITView on GitHub
Use when implementing a UI from Figma, screenshots, mockups, or an existing visual reference and fidelity to layout, spacing, typography, crops, and states is a primary acceptance criterion.
In this repository65 other files it gives its agents.
- analyzing-change-blast-radiusSkill
- analyzing-developer-career-opportunitiesSkill
- art-directing-web-interfacesSkill
- assessing-developer-proficiencySkill
- auditing-dependency-riskSkill
- auditing-pixel-perfect-frontendSkill
- bootstrapping-modern-web-appsSkill
- brag-slimSkill
- building-brand-guidelinesSkill
- building-conversion-product-pagesSkill
- building-developer-career-roadmapsSkill
- building-hybrid-game-assetsSkill
- building-premium-nextjs-interfacesSkill
- building-project-showcasesSkill
- building-regression-testsSkill
- building-reliable-node-api-boundariesSkill
- choosing-application-architectureSkill
- craft-premium-motionSkill
- creating-character-sprite-pipelinesSkill
- defining-brand-strategySkill
- designing-action-combatSkill
- designing-developer-portfolio-evidenceSkill
- designing-relational-data-modelsSkill
- designing-software-boundariesSkill
- designing-test-strategiesSkill
- designing-ui-systemsSkill
- designing-visual-identitiesSkill
- documenting-architecture-decisionsSkill
- editing-for-clarity-and-toneSkill
- engineering-gsap-animationsSkill
- evaluating-developer-proficiencySkill
- evolving-postgres-schemas-safelySkill
- humanizing-generated-proseSkill
- investigating-codebase-semanticallySkill
- managing-implementation-slicesSkill
- mapping-existing-codebase-structureSkill
- naming-brands-and-productsSkill
- optimizing-frontend-motion-performanceSkill
- orchestrating-cinematic-web-motionSkill
- planning-codebase-changes-with-evidenceSkill
- planning-engineering-workSkill
- planning-launch-distributionSkill
- planning-safe-refactorsSkill
- planning-written-communicationSkill
- preparing-project-launchSkill
- profiling-postgres-query-performanceSkill
- reconstructing-images-as-threejsSkill
- reviewing-api-securitySkill
- reviewing-apple-platform-interfacesSkill
- reviewing-pull-requestsSkill
- reviewing-web-securitySkill
- selecting-working-methodsSkill
- shipping-github-vercel-changesSkill
- teaching-developer-conceptsSkill
- testing-integration-boundariesSkill
- testing-playable-gamesSkill
- testing-web-applications-end-to-endSkill
- threat-modeling-applicationsSkill
- tracing-code-execution-pathsSkill
- translating-figma-to-nextjsSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
5 rules. About 0 are common, 5 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈5
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 9
Treat the supplied visual as evidence.
- Distinctive: line 29
Do not replace unusual design decisions with generic component-library defaults.
- Distinctive: line 30
Do not add hover scaling, glass, gradients, cards, or animation just to make the result feel richer.
- Distinctive: line 31
Do not claim pixel-perfect fidelity without rendering the result.
- Distinctive: line 32
If an asset is unavailable, preserve the geometry and document the substitute.
≈ “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
Implementing Reference-Faithful UI
Rule
Treat the supplied visual as evidence. Do not improvise away visible differences that can be measured.
Workflow
- Inventory source evidence: viewport size, grid, container widths, anchors, spacing, type styles, image bounds, radius, borders, shadows, icons, and responsive clues.
- Identify invariants versus responsive behavior. Do not force desktop geometry onto mobile.
- Match structural geometry first: section heights, columns, alignment, content widths, media boxes.
- Match typography next: family, size, line-height, tracking, weight, wrapping, overflow behavior.
- Match surfaces last: color, border, shadow, blur, texture, micro-details.
- Implement interactions only when they exist in the reference or are required by usability.
- Render and compare. Fix the largest visual delta first, then iterate downward.
Pixel-perfect checks
- Text does not wrap differently without reason.
- Images are not accidentally cropped or scaled on hover.
- Overflow does not clip intended typography or controls.
- Icons are visually equivalent and aligned to baseline.
- Absolute positioning is used only when the design truly requires it.
- Desktop and mobile are validated separately.
Guardrails
- Do not replace unusual design decisions with generic component-library defaults.
- Do not add hover scaling, glass, gradients, cards, or animation just to make the result feel richer.
- Do not claim pixel-perfect fidelity without rendering the result.
- If an asset is unavailable, preserve the geometry and document the substitute.
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.