From designpowers
Guides responsive layout design for complex UIs: content-driven breakpoints, priority shifting, clamp typography, container vs media queries, touch targets, and cross-device testing.
npx claudepluginhub owl-listener/designpowers --plugin designpowersThis skill uses the workspace's default tool permissions.
Responsive design is not "make it fit on a phone." It is designing for every context — one-handed on a bus, zoomed to 200% on a desktop, on a tablet in sunlight.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Responsive design is not "make it fit on a phone." It is designing for every context — one-handed on a bus, zoomed to 200% on a desktop, on a tablet in sunlight.
ui-composition defines a layout that spans breakpointsContent drives breakpoints, not devices. Do not use 768px because "that's tablet." Use the width where your content breaks.
--bp-stack: 0;
--bp-sidebar: 640px;
--bp-columns: 900px;
--bp-wide: 1200px;
At narrow widths, decide what gets:
Document these decisions.
--font-size-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-size-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
Body text minimum 16px. Line length 45-75 characters. At 200% zoom, no horizontal scroll (WCAG 1.4.10).
| Use case | Use |
|---|---|
| Page-level layout | @media |
| Component adaptation | @container |
44x44px minimum at mobile. 8px minimum gap between adjacent targets.
Test at: 320px, one pixel below each breakpoint, 200% zoom at 1280px, landscape phone, and real devices.
ui-composition, design-discoverydesign-builder, accessibility-reviewer