toptop-design-review

Reviews TopTop Kit prototypes for visual quality, spec compliance, interaction logic, and delivery readiness.

Updated Aug 13, 2026
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill toptop-design-review-mjlike123
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: toptop-design-review
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/toptop-design-review
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill toptop-design-review-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Pages and prototypes built with the TopTop Design Kit need a consistent, evidence-based acceptance pass before delivery. This Skill performs a read-only, four-layer review of any Kit-built page and produces a prioritized P0/P1/P2 issue list with a clear deliverable verdict, so reviewers stop relying on subjective impressions. ## Core Features & Use Cases - Four-Layer Review: Covers visual aesthetics, design-system compliance (componentId, Variant, Slot, Token), interaction logic (states, navigation, dead ends), and delivery completeness (Manifest, screenshots, viewport checks). - Evidence-Based Findings: Every issue must cite a spec or file:line reference; unverifiable opinions are excluded, and severity is graded as P0, P1, or P2 with a deliverable / conditionally deliverable / not deliverable verdict. - Read-Only by Default: The Skill never modifies files unless the user explicitly requests fixes, in which case it hands off to implementation Skills. - Use Case: After a local agent builds a profile page prototype with the TopTop Kit, run this review with the page screenshot, implementation files, and component Manifest to get a scored report (visual, consistency, interaction, completeness) plus a list of unresolved Kit gaps before handoff. ## Quick Start Ask the agent to run a TopTop design review on the current prototype, providing the page screenshot, implementation files, and the component Manifest used.

Frequently Asked Questions about toptop-design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a design-system prototype before delivery?

Provide the review Skill with the user goal, page screenshots or implementation files, the component Manifest, and the target viewport. It runs a four-layer check covering visuals, spec compliance, interaction logic, and delivery completeness, then returns a P0/P1/P2 report with a deliverability verdict.

What does the TopTop design review check for?

It checks four layers: visual hierarchy and rhythm, traceability of every visible module to a componentId with correct Variant/Slot/Token usage, interaction states like selected/pressed/empty/error, and consistency between Manifest, implementation, and screenshots.

Does the design review modify my code automatically?

No. The review is read-only by default and only produces a report. Files are modified only when the user explicitly requests fixes, which hands off to implementation or improvement Skills.

What inputs are required to run a UI acceptance review?

At minimum you need the user goal and main task, page screenshots or a running URL or implementation files, the componentIds or Manifest used, and the target viewport and platform. The Skill reads only the relevant component, foundation, and interaction YAML specs.

How are review findings prioritized in the report?

Findings are graded P0 for blockers like uncompletable main tasks or accessibility barriers, P1 for clear Kit violations or missing key states, and P2 for local polish issues. Every listed issue must include spec or file:line evidence.