ui-mockup-fidelity
UI Mockup Fidelity
Implement mockups with fidelity-first execution and explicit reporting of intentional adaptations.
Quick Start
- Read the mockup and list every visible section, component, and state.
- Identify repeated UI patterns before coding and choose stack-appropriate extraction points (component, partial, include, slot, variant, or primitive).
- Apply the layout and token contract from references/layout-token-contract.md.
- Implement in four passes: structure, extraction, styling, review.
- Run a manual coverage pass using references/mockup-coverage-checklist.md.
- Report exact matches, extracted components, intentional deviations, and unresolved ambiguities.
Rule Tiers
Apply these tiers in order.
Tier 1: Hard constraints
More from sebkay/skills
generate-agent-instructions
Generate or update AGENTS.md for AI coding agents by extracting project-specific architecture, workflows, conventions, and integration details from the repository. Use when the user asks to create, refresh, or improve AGENTS.md or agent instructions for a codebase.
23audit-dead-code
Find dead code and cleanup candidates such as unused exports, unreachable branches, orphaned files, stale feature flags, dead registrations, and compatibility layers with no live callers. Use when auditing refactors, bundle-size cleanup, architecture simplification, pre-release cleanup, reviewing requests to find unused code or decide what can be deleted, or when deciding whether code can be safely removed or auto-fixed.
20commit
Create a focused git commit for the unit of work just completed. Use when the user asks to commit changes, record finished implementation work, save a fix or refactor to git, or prepare a clean commit from the current branch with a concise message.
16ask-plan-questions
Ask high-impact clarifying questions before implementation to reduce mistakes, rework, and hidden assumptions. Use when creating, reviewing, or updating a plan; when requirements are ambiguous; or when scope/constraints are not fully specified.
15add-plan-todos
Create and maintain granular todos in the active execution plan to reduce omissions, sequencing errors, and misunderstandings. Use when drafting a plan, updating scope, starting implementation, or recovering from uncertainty/blockers.
12audit-errors
Audit code for error-handling inconsistencies, anti-patterns, and silent failures such as empty catch blocks, ignored promise rejections, log-and-continue paths, fallback values that hide faults, broad catch clauses, and inconsistent error translation across layers. Use when reviewing controllers, services, jobs, API handlers, async workflows, UI actions, or any change where errors may be swallowed, downgraded, or surfaced unreliably.
10