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 skills add yonatangross/orchestkit --skill responsive-patternsgit clone --depth 1 https://github.com/yonatangross/orchestkitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yonatangross/orchestkit/responsive-patterns)<a href="https://agentmods.dev/skills/yonatangross/orchestkit/responsive-patterns"><img src="https://agentmods.dev/badge/skills/yonatangross/orchestkit/responsive-patterns.svg" alt="Measured on agentmods" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What 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.1 | $0.00046 | $0.02059 |
| Opus 5 | $0.00023 | $0.01030 |
| Sonnet 5 | $0.00009 | $0.00412 |
| Haiku 4.5 | $0.00005 | $0.00206 |
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 today.
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.
How it starts
The opening of the file, as written. The whole thing — 216 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Responsive Patterns
Modern responsive design patterns using Container Queries, fluid typography, and mobile-first strategies for React applications (2026 best practices).
Overview
- Building reusable components that adapt to their container
- Implementing fluid typography that scales smoothly
- Creating responsive layouts without media query overload
- Building design system components for multiple contexts
- Optimizing for variable container sizes (sidebars, modals, grids)
Core Concepts
Container Queries vs Media Queries
| Feature | Media Queries | Container Queries |
|---|---|---|
| Responds to | Viewport size | Container size |
| Component reuse | Context-dependent | Truly portable |
| Browser support | Universal | Baseline 2023+ |
| Use case | Page layouts | Component layouts |
Modern CSS Layout
Load
Read("rules/css-subgrid.md")for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid.
Load
Read("rules/css-intrinsic-responsive.md")for intrinsically responsive layouts: auto-fit/minmax grids, clamp() for fluid everything, container queries for component logic, zero media query patterns.
Load
Read("rules/responsive-foldables.md")for foldable/multi-screen device support: env(safe-area-inset-*), viewport segment queries, dual-screen layouts, progressive enhancement.
Key patterns covered: CSS Subgrid alignment, intrinsic responsive grids (auto-fit + minmax), fluid clamp() scales, foldable device layouts, safe area insets, viewport segment queries.
CSS Patterns
Load
Read("rules/css-patterns.md")for complete CSS examples: container queries, cqi/cqb units, fluid typography with clamp(), mobile-first breakpoints, CSS Grid patterns, and scroll-queries.
Key patterns covered: Container Query basics, Container Query Units (cqi/cqb), Fluid Typography with clamp(), Container-Based Fluid Typography, Mobile-First Breakpoints, CSS Grid Responsive Patterns, Container Scroll-Queries (Chrome 126+).
What ships with it
15 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/container-queries.md 2.3 KB
- references/fluid-typography.md 2.6 KB
- rules/_sections.md 1.2 KB
- rules/_template.md 339 B
- rules/animation-motion.md 2.9 KB
- rules/animation-scroll.md 3.2 KB
- rules/css-intrinsic-responsive.md 3.4 KB
- rules/css-patterns.md 3.6 KB
- rules/css-subgrid.md 2.5 KB
- rules/pwa-offline.md 3.4 KB
- rules/pwa-service-worker.md 2.9 KB
- rules/react-patterns.md 3.3 KB
- rules/responsive-foldables.md 3.4 KB
- rules/touch-interaction.md 4.5 KB
- test-cases.json 8.0 KB
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.
- today Changed e907cedf7151
- 2d ago First seen · 216 lines · 46 tokens per session scan A da1af64370e5
responsive-patterns is a skill published in the GitHub repository yonatangross/orchestkit (231 stars, last pushed today), licensed MIT. It adds 46 tokens to every session and 2,059 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-09-05.
Other skills, from other repositories
responsive-checker
Test responsive design across viewport sizes: capture screenshots at mobile/tablet/desktop breakpoints, detect overflow issues, flag breakpoint problems.
pwa-storefront
Turn your store into an installable Progressive Web App with offline product browsing, push notifications, and home screen access for mobile shoppers.
responsive-storefront
Build a mobile-first storefront with thumb-friendly navigation, sticky add-to-cart buttons, and touch-optimized components for high mobile conversion.
offline-first-pwa
Rules for building offline-first Progressive Web Apps that launch instantly from the home screen. Use when building, reviewing or debugging a PWA, or anything touching a service worker, a web app manifest, precaching, an in-app update prompt, iOS home screen behaviour, or safe-area/notch layout.
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components…
responsive-design
Mobile-first responsive design covering fluid layouts, media queries, flexbox, grid, viewport units, and responsive images.