Does it integrate with my existing design decisions?

Yes, the skill reads state files and prior 'locked' decisions regarding layout and components to ensure the responsive transformations are consistent with the overall design system.

What is a breakpoint strategy in this context?

It is a core structural decision defining how the design changes at specific viewport widths, whether using standard 3-tier sets, content-driven breakpoints, or modern container queries.

Can this skill visualize responsive changes?

Yes, it generates HTML wireframe artifacts that display different viewport representations (mobile, tablet, desktop) vertically for easy comparison and review.

How does the crit-responsive skill help with mobile design?

It provides structured evaluations of mobile-first strategies, analyzes touch target sizes for accessibility, and suggests navigation adaptations like hamburger menus or bottom tabs.

How do I provide feedback to the AI designer?

The skill uses a JSON-based feedback loop system where you can review options, provide critiques, and iterate until you reach a 'locked' responsive direction.

Responsive Design Crit

Name: Responsive Design Crit
Author: metedata

bymetedata

0•

デザインツール

Evaluates and optimizes how UI designs adapt across screen sizes, devices, and input methods using structured critique loops.

The Responsive Design Crit skill transforms Claude into a specialized UI/UX consultant focused on viewport adaptation and multi-device usability. It analyzes your design's breakpoint strategy, layout reflow patterns, and touch vs. pointer accommodation to ensure a seamless experience from mobile to desktop. By generating side-by-side HTML wireframe artifacts and maintaining a persistent state of 'locked' design decisions, this skill facilitates a professional, iterative feedback loop that helps developers move from a static layout to a fully responsive, production-ready transformation strategy.

主な機能

01Automated content priority mapping to determine what elements remain visible, hidden, or on-demand on small screens.

020 GitHub stars

03Comprehensive breakpoint strategy definition including mobile-first, desktop-first, and container-query approaches.

04Touch vs. pointer auditing to identify hover-only interactions and ensure adequate touch target sizing.

05Detailed layout reflow tracing to visualize how content stacks, reorders, or collapses across viewports.

06Side-by-side HTML wireframe generation for comparative review of responsive design options.

ユースケース

01Auditing existing component designs for touch accessibility and mobile-friendly navigation patterns.

02Adapting a complex enterprise desktop dashboard for tablet and mobile functionality.

03Iteratively refining layout transformation rules before writing production CSS.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add metedata/design-crit crit-responsive

For use in Claude.ai and ChatGPT

主な機能

01Automated content priority mapping to determine what elements remain visible, hidden, or on-demand on small screens.

020 GitHub stars

03Comprehensive breakpoint strategy definition including mobile-first, desktop-first, and container-query approaches.

04Touch vs. pointer auditing to identify hover-only interactions and ensure adequate touch target sizing.

05Detailed layout reflow tracing to visualize how content stacks, reorders, or collapses across viewports.

06Side-by-side HTML wireframe generation for comparative review of responsive design options.

ユースケース

01Auditing existing component designs for touch accessibility and mobile-friendly navigation patterns.

02Adapting a complex enterprise desktop dashboard for tablet and mobile functionality.

03Iteratively refining layout transformation rules before writing production CSS.