kylezantos

kylezantos / responsive-craft

Public

Claude Code skill for implementing responsive design — from standard mobile-first layouts to complex patterns like sticky coordination, scroll regions, and dashboards. Surfaces design forks where there's no single right answer.

17
1
100% credibility
Found Apr 03, 2026 at 17 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

responsive-craft is a skill for AI coding tools that audits existing websites for responsive issues, builds new adaptive layouts, and provides multi-device live previews.

How It Works

1
💻 Dreaming up a website

You're using your AI helper to build a cool website, but you want it to look amazing on phones, tablets, and desktops too.

2
🔍 Discover responsive-craft

You learn about this friendly skill that guides your AI to make sites adapt perfectly to any screen size.

3
📥 Add to your AI's toolbox

Simply copy the tool into your AI helper's skills area, and it's ready to assist anytime.

4
Pick your adventure
🩹
Fix what's already built

Let it scan your site, spot issues, suggest smart choices, and make quick improvements.

🧱
Build anew

Describe how elements should behave on different screens, then let it craft a solid mobile-first base.

5
🪟 Magic multi-screen preview

Watch your site come alive in side-by-side windows for phone, tablet, and desktop – scroll, click, and test each one independently!

✨ Site shines everywhere

Your website now flows beautifully on every device, feeling just right no matter the screen.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 17 to 17 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is responsive-craft?

responsive-craft is a JavaScript Claude Code skill for Anthropic's Claude Code environment, tackling responsive design in code-only workflows where visual tools like Figma are absent. It offers three modes—audit to scan and fix existing sites, build to craft mobile-first layouts from specs, and preview to launch interactive browser iframes at breakpoints like 375px, 768px, 1024px, and 1440px. Download from Claude Code GitHub, install via git clone to ~/.claude/skills, and run commands like /responsive-craft audit or preview for live testing.

Why is it gaining traction?

It stands out by surfacing "design forks"—multiple valid responsive options like sidebar-to-drawer or table stacking—with tradeoffs, instead of AI defaults. The live preview serves your dev server (Vite, Next.js) in side-by-side interactive viewports with live reload, plus modern CSS escalation from clamp() to container queries. Claude Code skills like this bridge AI coding gaps, with references for sticky patterns and AI pitfalls.

Who should use this?

Frontend devs using Claude Code for web apps or dashboards, especially Tailwind or vanilla CSS users fixing mobile breaks. Ideal for solo builders without design teams, handling complex forms, navs, or multi-panel layouts via guided specs. Skip if you're not in Claude's ecosystem or prefer full visual editors.

Verdict

Grab it if you're deep in Claude Code GitHub integrations—solid docs and preview tool punch above 17 stars, but 1.0% credibility signals early maturity with no tests. Worth a test drive for responsive workflows; fork and contribute to boost it.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.