skills.rest
kylezantos
kylezantosCOMMUNITY
Explore all skills by this author →
Website𝕏@kylezantosGitHub

responsive-craft

Implement responsive design with mobile-first layouts and multi-breakpoint verification.

58|3|Updated Apr 2, 2026
Search Tags:#mobile-first#css#audit#preview#breakpoints#responsive-design#container-queries
One-click install
npx skills add https://github.com/kylezantos/responsive-craft --skill responsive-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-craft
Source: https://github.com/kylezantos/responsive-craft/tree/main
Command: npx skills add https://github.com/kylezantos/responsive-craft --skill responsive-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Building responsive layouts in code-first environments like Claude Code lacks a visual canvas to see all breakpoints simultaneously, causing developers to make reactive decisions—writing code, previewing, resizing, and fixing—instead of deliberate, upfront choices.

Core Features & Use Cases

  • Three Operating Modes: Transform existing sites through audit and prioritized fixes, build responsive from scratch with a mobile-first foundation, or launch a live multi-breakpoint preview with interactive iframes.
  • Design Forks: Surfaces ambiguous responsive translations—such as sidebars, data tables, and dashboards—with 2-3 options and tradeoffs, asking the user to choose instead of silently defaulting.
  • Escalation Model: Applies the simplest CSS tool for each pattern, preferring intrinsic sizing and clamp() for fluid scaling, container queries for component-level adaptation, and media queries only for page-level structural changes.

Quick Start

Use the responsive-craft skill to audit your existing site's responsive behavior and fix issues in priority order.

Frequently Asked Questions about responsive-craft

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

FAQPage Schema
How do I build responsive layouts with a mobile-first approach in a code-first environment?▼

Responsive layouts in code-first environments are built by front-loading layout decisions and using an escalation model that prefers intrinsic sizing, clamp(), and container queries over media queries for deliberate, upfront breakpoint specification.

What's the best way to audit an existing website for responsive design issues?▼

Auditing existing responsive design involves scanning the site to identify multi-breakpoint visual failures, prioritizing fixes based on severity, and applying the simplest CSS tool—like intrinsic sizing or container queries—to resolve each layout pattern.

When should I use container queries instead of media queries for responsive web design?▼

Container queries should be used for component-level adaptation where individual UI elements respond to their parent's dimensions, while media queries are reserved only for page-level structural changes, ensuring a deliberate CSS escalation model.

How do I handle responsive data tables and dashboard layouts without breaking the visual flow?▼

Responsive data tables and dashboards are handled by surfacing design forks—presenting 2-3 layout options with tradeoffs—so you can deliberately choose the appropriate structural adaptation rather than silently defaulting to a potentially broken layout.

Can I preview multiple breakpoints simultaneously while developing responsive CSS?▼

Multi-breakpoint visual verification is achieved by launching a live preview with interactive iframes, allowing you to see all responsive states simultaneously and verify sticky element coordination and independent scroll regions without manual resizing.

Why does my responsive design fail when translating complex layouts like sidebars to mobile?▼

Responsive design fails during complex translations because ambiguous layout forks are silently defaulted instead of deliberately specified; surfacing these design forks with explicit options and tradeoffs prevents AI failure patterns and reactive CSS fixes.

Related Skills

Explore More Software Engineering Skills→
ksciuskscius
2

converting-css-to-tailwind

Convert CSS stylesheets into Tailwind CSS utility classes for HTML, JSX/TSX, Vue, and Svelte projects.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-rtl-layout

Detect RTL layout breakage by scanning DOM elements for overflow and fixed-position issues.

Community
Advanced
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate