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 finsilabs/awesome-ecommerce-skills --skill responsive-storefrontgit clone --depth 1 https://github.com/finsilabs/awesome-ecommerce-skillsWrote 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/finsilabs/awesome-ecommerce-skills/responsive-storefront)<a href="https://agentmods.dev/skills/finsilabs/awesome-ecommerce-skills/responsive-storefront"><img src="https://agentmods.dev/badge/skills/finsilabs/awesome-ecommerce-skills/responsive-storefront/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/finsilabs/awesome-ecommerce-skills/responsive-storefront"><img src="https://agentmods.dev/badge/skills/finsilabs/awesome-ecommerce-skills/responsive-storefront.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00029 | $0.02567 |
| Opus 5 | $0.00015 | $0.01283 |
| Sonnet 5 | $0.00006 | $0.00513 |
| Haiku 4.5 | $0.00003 | $0.00257 |
Grade A, and why
responsive-storefront 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 7d 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.
How it starts
The opening of the file, as written. The whole thing — 234 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Responsive Storefront
Overview
Apply mobile-first responsive design patterns to a commerce storefront so that the shopping experience is fast and usable on phones, where the majority of commerce traffic originates. Key patterns include thumb-zone aware layouts, a sticky buy bar that appears on scroll, tap-target sizing, and responsive product grids that reflow without horizontal scrolling.
When to Use This Skill
- When more than 50% of storefront traffic comes from mobile devices (check your analytics)
- When building a new storefront from scratch and laying out the CSS architecture
- When auditing an existing storefront for mobile usability issues
- When implementing a product detail page and need a sticky buy button pattern
- When optimizing mobile conversion rate and cart abandonment
Core Instructions
Step 1: Determine the merchant's platform and choose the right approach
| Platform | Recommended Approach | Why |
|---|---|---|
| Shopify | Use a mobile-first OS2.0 theme (Dawn, Sense, Craft) — all are responsive by default; configure mobile layout in Theme Editor | Dawn scores 90+ on mobile PageSpeed out of the box; the Theme Editor exposes mobile-specific layout controls |
| WooCommerce | Use a mobile-first WooCommerce theme (Astra, Kadence, or Flatsome) — all include responsive breakpoints and mobile cart drawer built in | Astra and Kadence score well on Core Web Vitals; Flatsome has built-in sticky header and mobile menu without plugins |
| BigCommerce | Use Cornerstone theme which is mobile-first by design; configure breakpoints in Theme Editor | Cornerstone is BigCommerce's reference theme and passes Google's mobile usability tests |
| Custom / Headless | Write mobile-first CSS with min-width media queries and build a responsive product grid, sticky buy bar, and bottom-sheet cart drawer |
Full control over all breakpoints and touch interactions; see patterns below |
Step 2: Configure mobile layout on your platform
What ships with it
7 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.
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.
- 7d ago First seen · 234 lines · 29 tokens per session scan A 62e8c5825c56
responsive-storefront is a skill published in the GitHub repository finsilabs/awesome-ecommerce-skills (52 stars, last pushed 6mo ago), licensed MIT. It adds 29 tokens to every session and 2,567 once invoked, about $0.0001 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-03.
Other skills, from other repositories
Responsive Layout Reviewer
Reviews HTML/CSS or component code for responsive design issues across mobile, tablet, and desktop breakpoints.
frontend-design
Use this skill when specifying, designing, or documenting UI components, layouts, and design systems for frontend implementation. Trigger phrases: 'design this UI component', 'create a responsive layout', 'spec the CSS for', 'design system for'. Do NOT use for backend development, server-side logic, data engineering…
responsive-design
Mobile-first responsive design covering fluid layouts, media queries, flexbox, grid, viewport units, and responsive images.
responsive-patterns
Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.
tailwindcss-docs
Comprehensive Tailwind CSS v4 reference covering installation, all utility classes, responsive design, dark mode, customization, and advanced patterns. Use whenever the user mentions Tailwind CSS, utility classes, styling components, responsive layouts, custom themes, or needs help with any Tailwind-specific code…
css-spacing-layout
CSS Spacing & Container Layout Architect — expert in padding, margin, borders, container hierarchy, spacing scales, and layout consistency across breakpoints.