Is this skill suitable for accessibility testing?

The skill includes a responsive checklist that covers touch target sizes and readability, which are essential components of mobile accessibility.

How does it help with mobile optimization?

It guides you through mobile-first development strategies, touch target sizing for better ergonomics, and viewport-aware units.

Does this skill support CSS frameworks like Tailwind?

Yes, it includes standard CSS patterns as well as specific responsive breakpoints and utility classes for the Tailwind CSS framework.

What is the Responsive Design Advisor?

It is a Claude Code skill that provides best practices, code patterns, and architectural guidance for building responsive, mobile-friendly websites.

Can it help with modern CSS features like Container Queries?

Yes, the skill includes specific instructions and code snippets for implementing component-based responsiveness using modern Container Queries.

Responsive Design Advisor

Name: Responsive Design Advisor
Author: armanzeroeight

byarmanzeroeight

•

Design Tools

Guides the implementation of mobile-first, fluid, and cross-device compatible web interfaces using modern CSS techniques.

The Responsive Design Advisor is a specialized Claude Code skill designed to help developers build robust, adaptable layouts that function perfectly across all screen sizes. It provides actionable implementation patterns for mobile-first CSS, flexible grid systems, responsive typography, and modern container queries. This skill is particularly useful when refactoring legacy desktop-only sites, implementing complex UI layouts with CSS Grid and Flexbox, or ensuring that navigation and touch targets meet accessibility and usability standards for mobile devices.

Key Features

01Modern Container Queries for component-based responsiveness

02Flexible layouts using CSS Grid and Flexbox implementation

03Fluid typography and responsive image optimization techniques

0419 GitHub stars

05Mobile-first CSS architecture and breakpoint patterns

06Comprehensive responsive testing checklists and touch target guidance

Use Cases

01Refactoring a desktop-only website for mobile-first compatibility

02Implementing a responsive navigation menu with touch-friendly targets

03Creating fluid grid systems that adapt automatically to various screen sizes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add armanzeroeight/fastagent-plugins responsive-design-advisor

For use in Claude.ai and ChatGPT

Download Skill