responsive-craft
CommunityBuild responsive layouts with deliberate upfront decisions.
Authorkylezantos
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: responsive-craft Download link: https://github.com/kylezantos/responsive-craft/archive/main.zip#responsive-craft Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.