Mobile-first responsive design patterns. Use when building responsive layouts and components.
/plugin marketplace add IvanTorresEdge/molcajete.ai/plugin install ivantorresedge-react-tech-stacks-js-react@IvanTorresEdge/molcajete.aiThis skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill covers mobile-first responsive design patterns for React applications.
Use this skill when:
MOBILE FIRST - Design for mobile, then enhance for larger screens. This results in simpler, more maintainable CSS.
| Breakpoint | Min Width | CSS |
|---|---|---|
| (default) | 0px | Base styles |
| sm | 640px | @media (min-width: 640px) |
| md | 768px | @media (min-width: 768px) |
| lg | 1024px | @media (min-width: 1024px) |
| xl | 1280px | @media (min-width: 1280px) |
| 2xl | 1536px | @media (min-width: 1536px) |
// Start with mobile styles, add breakpoints for larger screens
<div className="
w-full // Mobile: full width
sm:w-1/2 // >=640px: half width
lg:w-1/3 // >=1024px: third width
xl:w-1/4 // >=1280px: quarter width
">
function Container({ children }: { children: React.ReactNode }): React.ReactElement {
return (
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
{children}
</div>
);
}
// Basic responsive grid
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{items.map((item) => (
<Card key={item.id} {...item} />
))}
</div>
// Auto-fill grid (flexible columns)
<div className="grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]">
{items.map((item) => (
<Card key={item.id} {...item} />
))}
</div>
// Stack on mobile, row on desktop
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
// Reverse order on mobile
<div className="flex flex-col-reverse gap-4 lg:flex-row">
<aside className="w-full lg:w-64">Sidebar</aside>
<main className="flex-1">Content</main>
</div>
function DashboardLayout({ children }: { children: React.ReactNode }): React.ReactElement {
return (
<div className="min-h-screen lg:flex">
{/* Sidebar - hidden on mobile, fixed on desktop */}
<aside className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
<nav className="flex flex-1 flex-col bg-gray-900 px-4 py-6">
{/* Navigation items */}
</nav>
</aside>
{/* Mobile header */}
<header className="sticky top-0 z-40 flex h-16 items-center bg-white shadow lg:hidden">
<button className="px-4">
<MenuIcon />
</button>
</header>
{/* Main content */}
<main className="flex-1 lg:pl-64">
<div className="px-4 py-6 sm:px-6 lg:px-8">
{children}
</div>
</main>
</div>
);
}
'use client';
import { useState } from 'react';
import { Menu, X } from 'lucide-react';
function Navigation(): React.ReactElement {
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="bg-white shadow">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 justify-between">
{/* Logo */}
<div className="flex items-center">
<Logo />
</div>
{/* Desktop navigation */}
<div className="hidden sm:flex sm:items-center sm:space-x-8">
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/contact">Contact</NavLink>
</div>
{/* Mobile menu button */}
<div className="flex items-center sm:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
className="inline-flex items-center justify-center p-2"
>
{isOpen ? <X /> : <Menu />}
</button>
</div>
</div>
</div>
{/* Mobile menu */}
{isOpen && (
<div className="sm:hidden">
<div className="space-y-1 px-2 pb-3 pt-2">
<MobileNavLink href="/">Home</MobileNavLink>
<MobileNavLink href="/about">About</MobileNavLink>
<MobileNavLink href="/contact">Contact</MobileNavLink>
</div>
</div>
)}
</nav>
);
}
function ProductCard({ product }: { product: Product }): React.ReactElement {
return (
<div className="
flex flex-col
sm:flex-row
lg:flex-col
rounded-lg border bg-white shadow-sm overflow-hidden
">
{/* Image - full width on mobile, side on tablet, full on desktop */}
<div className="
w-full
sm:w-48 sm:flex-shrink-0
lg:w-full
">
<img
src={product.image}
alt={product.name}
className="h-48 w-full object-cover sm:h-full lg:h-48"
/>
</div>
{/* Content */}
<div className="flex flex-1 flex-col p-4">
<h3 className="text-lg font-semibold">{product.name}</h3>
<p className="mt-1 text-sm text-gray-500 line-clamp-2">
{product.description}
</p>
<div className="mt-auto pt-4">
<span className="text-lg font-bold">${product.price}</span>
</div>
</div>
</div>
);
}
// Table on desktop, cards on mobile
function ResponsiveTable({ data }: { data: User[] }): React.ReactElement {
return (
<>
{/* Mobile cards */}
<div className="space-y-4 md:hidden">
{data.map((user) => (
<div key={user.id} className="rounded-lg border bg-white p-4">
<div className="font-medium">{user.name}</div>
<div className="mt-1 text-sm text-gray-500">{user.email}</div>
<div className="mt-2 text-sm">
<span className="font-medium">Role:</span> {user.role}
</div>
</div>
))}
</div>
{/* Desktop table */}
<table className="hidden w-full md:table">
<thead>
<tr className="border-b">
<th className="px-4 py-3 text-left">Name</th>
<th className="px-4 py-3 text-left">Email</th>
<th className="px-4 py-3 text-left">Role</th>
</tr>
</thead>
<tbody>
{data.map((user) => (
<tr key={user.id} className="border-b">
<td className="px-4 py-3">{user.name}</td>
<td className="px-4 py-3">{user.email}</td>
<td className="px-4 py-3">{user.role}</td>
</tr>
))}
</tbody>
</table>
</>
);
}
<h1 className="text-2xl font-bold sm:text-3xl lg:text-4xl xl:text-5xl">
Responsive Heading
</h1>
<p className="text-sm sm:text-base lg:text-lg">
Responsive paragraph text.
</p>
/* globals.css */
.fluid-heading {
font-size: clamp(1.5rem, 5vw, 3rem);
}
<section className="py-8 sm:py-12 lg:py-16 xl:py-20">
<div className="px-4 sm:px-6 lg:px-8">
Content with responsive spacing
</div>
</section>
import { useState, useEffect } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(false);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = (): void => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [matches, query]);
return matches;
}
// Usage
function Component(): React.ReactElement {
const isDesktop = useMediaQuery('(min-width: 1024px)');
return isDesktop ? <DesktopView /> : <MobileView />;
}
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.