responsive-designImplement responsive layouts using container queries, fluid typography, CSS Grid, mobile-first breakpoints, responsive images, and adaptive navigation.
Install via ClawdBot CLI:
clawdbot install wpank/responsive-designGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/frontend/responsive-designAudited Apr 16, 2026 · audit v1.0
Generated Mar 1, 2026
Implement responsive product grids that adapt from single-column on mobile to multi-column layouts on desktop, using CSS Grid with auto-fit and container queries for individual product cards. This ensures optimal display across devices, improving user experience and conversion rates by maintaining readability and visual appeal.
Create a responsive news site with fluid typography and named grid areas that reorganize content (header, main, sidebar, footer) based on screen size. Use mobile-first breakpoints to prioritize content on small screens and expand to multi-column layouts on larger devices, enhancing readability and engagement.
Build a responsive dashboard using container queries for component-level adaptability and fluid spacing scales to maintain consistent proportions. Implement responsive navigation with a mobile toggle menu that transitions to a horizontal bar on desktop, ensuring usability across tablets and laptops.
Design a portfolio with responsive images and fluid typography to showcase work adaptively across devices. Use CSS Grid with auto-fit for gallery layouts and viewport units for dynamic sizing, providing an immersive experience that highlights content without distortion on any screen.
Develop responsive course pages with mobile-first strategies, using clamp() for fluid typography and spacing to ensure text remains legible on all devices. Implement responsive grid systems for lesson modules and media queries for breakpoints, optimizing learning accessibility on phones and desktops.
Offer responsive design implementation as a service to clients, using this skill to build adaptive websites that improve SEO and user retention. Charge per project or hourly, with revenue generated from multiple clients across industries like small businesses and startups.
Create and sell responsive design templates or themes on platforms like ThemeForest or as part of a subscription service. Leverage container queries and fluid typography to produce high-quality, adaptable templates that cater to developers and businesses seeking quick deployment.
Provide consulting services to agencies or in-house teams on modern responsive techniques, including workshops on container queries and mobile-first strategies. Generate revenue through retainer contracts or training sessions, helping organizations optimize their web development workflows.
💬 Integration Tip
Start by implementing mobile-first breakpoints and fluid typography with clamp() to establish a responsive base, then gradually add container queries for component-level adaptability to enhance reusability across projects.
Scored Apr 19, 2026
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.