Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/owl-listener/designpowers/responsive-patternsnpx skills add Owl-Listener/designpowers --skill responsive-patternsgit clone --depth 1 https://github.com/Owl-Listener/designpowersWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00037 | $0.00555 |
| Opus 5 | $0.00018 | $0.00278 |
| Sonnet 5 | $0.00007 | $0.00111 |
| Haiku 4.5 | $0.00004 | $0.00056 |
Grade A, and why
responsive-patterns scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Responsive Patterns
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.
When to Use
- When
ui-compositiondefines a layout that spans breakpoints - When the design-critic flags responsive issues
- When building anything more complex than single-column
Breakpoint Strategy
Content drives breakpoints, not devices. Do not use 768px because "that's tablet." Use the width where your content breaks.
- Start at 320px
- Widen slowly
- When the layout looks wrong — that's a breakpoint
- Name by behaviour, not device
--bp-stack: 0;
--bp-sidebar: 640px;
--bp-columns: 900px;
--bp-wide: 1200px;
Content Priority Shifting
At narrow widths, decide what gets:
- Kept — essential for the task
- Collapsed — behind a toggle
- Deferred — lower in scroll order
- Hidden — removed (last resort)
Document these decisions.
Responsive Typography
--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).
Container Queries vs Media Queries
| Use case | Use |
|---|---|
| Page-level layout | @media |
| Component adaptation | @container |
Touch Targets
44x44px minimum at mobile. 8px minimum gap between adjacent targets.
Testing
Test at: 320px, one pixel below each breakpoint, 200% zoom at 1280px, landscape phone, and real devices.
What You Deliver
- Breakpoint definitions with rationale
- Layout behaviour at each breakpoint
- Content priority decisions
- Typography scale with clamp() values
- Touch target verification
Integration
- Informed by:
ui-composition,design-discovery - Feeds into:
design-builder,accessibility-reviewer
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 78 lines · 37 tokens per session scan A 19c7ed11f840
responsive-patterns is a skill published in the GitHub repository Owl-Listener/designpowers (240 stars, last pushed 2mo ago), licensed MIT. It adds 37 tokens to every session and 555 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
anti-slop-frontend
A mechanical, countable anti-slop checklist for AI-generated frontend. Catches the specific signatures an undirected model defaults to: AI-purple glows, Inter-everywhere, em-dashes, div-based fake screenshots, eyebrow-on-every-section, beige+brass "premium" palettes, generic Jane Doe / Acme data. Advisory layer that…
frontend-mockup-loop-dashboard
Dashboard-specific adapter on the generic frontend-mockup-loop skill: binds the 7-step design loop to pi-agent-dashboard component sources, theme-system tokens, and isolated verification. Use when designing/redesigning any pi-agent-dashboard client surface. Triggers: "design a dashboard screen", "mockup a dashboard…
theme-system
CSS custom properties theme architecture for 4 themes (studio, earth, athlete, gradient) with data-theme attribute switching and theme-aware components. Use when implementing theme switching, defining color schemes, or creating theme-responsive UI elements.
goga-define-experience
Define the user experience required to achieve the established product goals and solve the identified problem.
goga-brainstorm-plan-verification
Verification of the assembled architecture plan against the DSL.
figma-to-coded-html
Convert Figma designs into self-contained, shareable single-file HTML with all UI elements coded in HTML/CSS/SVG and only actual photographs embedded as inline base64. Use this skill whenever the user asks to convert a Figma file/URL to HTML, export Figma designs as code, create HTML from Figma, turn a Figma mockup…