More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Shopify Theme Skill Pack for Any AI Agent + Claude Plugin

    2

    Skill pack for Shopify themes: build, audit and ship. 3 skills, 28 checks. Also installs as a Claude plugin.

    $19

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    Shopify Theme Skill Pack for Any AI Agent + Claude Plugin

    Shopify Theme Skill Pack for Any AI Agent + Claude Plugin

    Example session with this skill installed

    Build a full-bleed hero section with a staggered headline reveal on scroll, then run the Level 1 critical audit on it.

    • Read your context and instructions
    • Compiled the shopify theme

    The hero is built and passes the Level 1 critical audit. It adds one section, one custom element for the scroll reveal and the matching schema keys. Nothing leaks outside the section, the editor can select every block, and the animation switches off for visitors who prefer reduced motion.

    sections/hero-reveal.liquid

    {%- liquid
  assign heading_lines = section.settings.heading | split: '|'
-%}

<div class="hero-reveal color-{{ section.settings.color_scheme }}" style="--hero-reveal-padding: {{ section.settings.padding }}px;">
  {%- if section.settings.image != blank -%}
    <div class="hero-reveal__media">
      {{
        section.settings.image

        | image_url: width: 2400
        | image_tag:

          widths: '800, 1200, 1600, 2400',
          sizes: '100vw',
          loading: 'eager',
          fetchpriority: 'high',
          class: 'hero-reveal__image',
          alt: section.settings.image.alt | escape
      }}
    </div>
  {%- endif -%}

  <reveal-on-scroll class="hero-reveal__content">
    <h1 class="hero-reveal__heading">
      {%- for line in heading_lines -%}
        <span class="hero-reveal__line" style="--i: {{ forloop.index0 }};">{{ line | strip }}</span>
      {%- endfor -%}
    </h1>
    {% content_for 'blocks' %}
  </reveal-on-scroll>
</div>

{% stylesheet %}
  .hero-reveal { position: relative; display: grid; min-height: 80svh; padding-block: var(--hero-reveal-padding, 64px); overflow: clip; }
  .hero-reveal__media, .hero-reveal__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-reveal__content { position: relative; margin: auto; padding-inline: 1.5rem; max-width: 72rem; }
  .hero-reveal__heading { display: grid; gap: 0.1em; margin: 0; font-family: var(--font-heading-family); font-size: clamp(2.5rem, 8vw, 7rem); line-height: 1; }
  .hero-reveal reveal-on-scroll:defined .hero-reveal__line {
    opacity: 0;
    transform: translateY(0.6em);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--i) * 90ms);
  }
  .hero-reveal reveal-on-scroll[visible] .hero-reveal__line { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .hero-reveal reveal-on-scroll:defined .hero-reveal__line { opacity: 1; transform: none; transition: none; }
  }
{% endstylesheet %}

{% javascript %}
  class RevealOnScroll extends HTMLElement {
    connectedCallback() {
      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        this.setAttribute('visible', '');
        return;
      }
      this.observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) {
          this.setAttribute('visible', '');
          this.observer.disconnect();
        }
      }, { threshold: 0.2 });
      this.observer.observe(this);
    }
    disconnectedCallback() {
      this.observer?.disconnect();
    }
  }
  if (!customElements.get('reveal-on-scroll')) customElements.define('reveal-on-scroll', RevealOnScroll);
{% endjavascript %}

{% schema %}
{
  "name": "t:names.hero_reveal",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "t:settings.image" },
    { "type": "text", "id": "heading", "label": "t:settings.heading", "info": "t:settings.heading_info", "default": "Made slowly|Worn for years" },
    { "type": "color_scheme", "id": "color_scheme", "label": "t:settings.color_scheme", "default": "scheme-1" },
    { "type": "range", "id": "padding", "label": "t:settings.padding", "min": 0, "max": 160, "step": 8, "unit": "px", "default": 64 }
  ],
  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
  "presets": [{ "name": "t:names.hero_reveal" }]
}
{% endschema %}

    locales/en.default.schema.json (added keys)

    {
  "names": { "hero_reveal": "Hero with reveal" },
  "settings": {
    "image": "Image",
    "heading": "Heading",
    "heading_info": "Separate lines with a vertical bar.",
    "color_scheme": "Color scheme",
    "padding": "Vertical padding"
  }
}

    Level 1 critical audit scoreboard

    • 1.1 CSS scoping: PASS, every selector starts with .hero-reveal
    • 1.2 t: prefixes: PASS, all schema strings use translation keys
    • 1.3 Block attributes: PASS, theme blocks render through content_for
    • 1.4 Scripts without defer: PASS, no external script tags added
    • 1.5 Image alt: PASS
    • 1.6 Image dimensions and responsive widths: PASS
    • 1.7 Deprecated include: PASS
    • theme-check: 0 errors / 0 warnings

    Next steps

    1. Add the locale keys to the other language files.
    2. Run the Level 2 quality audit to confirm the Lighthouse scores on the home page.
    3. Open the theme editor and check the section on desktop and mobile, with and without an image.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Shopify Theme Skill Pack is a package of 3 skills and a shared rule base for building, auditing and shipping Shopify Online Store 2.0 themes. It works with any AI agent that reads SKILL.md, and the same package also installs as a Claude Code plugin.

    Ask for the bold version of everything: the animated hero, the scroll story, the full custom page, the reworked product layout. The pack makes sure what gets built is scoped, translatable, editor-ready, accessible and fast, so it passes review instead of breaking the theme.

    Theme preview

    Every example here was built with this pack and runs on a real demo store. Open a link, enter the store password, and browse it like a customer.

    Store password: helium-theme

    Version 1: Fashion

    • Homepage: giant wordmark hero, staggered product row, category mosaic, marquee footer. VIEW HERE
    • Product page: sticky gallery, size guide, brand story, complete the look. VIEW HERE
    • Horizontal lookbook: GSAP scroll, click to zoom, then title, description, price and CTA. VIEW HERE

    Version 2: Skincare

    • Homepage: floating pill header, serif hero with tagline band, slow marquee, arch image, hairline product grid, founder quote, newsletter. VIEW HERE
    • Product page: gallery with buy box, benefits, how to use routine, key ingredients, accordions, brand story, complete the ritual. VIEW HERE
    • Bundle builder: build your own ritual step by step, live bundle total with saving, add the whole bundle to the bag. VIEW HERE

    Same pack, two completely different looks. The demo store uses fictional brands and sample data only.

    The problem

    AI writes Liquid that looks right and still gets rejected. Unscoped {% stylesheet %} rules that leak into every page. Hardcoded schema strings with no t: key. Blocks the theme editor cannot select. Scripts without defer. Images with no dimensions. A big animated hero that looks great in a preview and tanks Lighthouse.

    What you get

    PartWhat it is
    shopify-buildSkill that creates and edits sections, blocks, snippets, templates, layout and styles
    shopify-auditSkill that inspects a theme in 3 levels and reports findings, read-only
    shopify-toolingSkill that sets up Shopify CLI, theme-check, Prettier and CI
    knowledge/16 rule files the three skills read from
    .claude-plugin/Plugin manifest and marketplace file, for installing the pack as a Claude Code plugin

    How it works

    Instead of relying on generic prompts, the pack separates rules from actions:

    • Single source of truth (knowledge/): rules for Liquid, CSS, JavaScript, schemas, accessibility, performance and Theme Store requirements.
    • Action skills (skills/): each one reads only the rules it needs for the file you are touching.

    Change a rule once and every skill stays correct.

    Two ways to install

    • As skills, in any agent: unzip into your skills folder. Works in Claude Code, Cursor, Codex CLI, Copilot, Gemini CLI and any agent that reads SKILL.md.
    • As a Claude Code plugin: point Claude Code at the unzipped folder with --plugin-dir, and the skills are namespaced as /storefront-theme-kit:shopify-build, :shopify-audit and :shopify-tooling.

    Nine jobs, one pack

    Create

    1. Animated sections. Scroll reveals, marquees, sticky storytelling blocks, horizontal scroll with GSAP, hover cards, sliders, video heroes. Motion is written scoped, deferred and reduced-motion safe. Try: Build a full-bleed hero with a staggered text reveal on scroll.
    2. Full custom pages. Landing pages, experiential lookbooks, campaign and about pages, built as JSON templates a merchant can edit section by section. Try: Build a horizontal lookbook: vertical scroll moves the looks sideways, clicking zooms in and reveals title, description, price and CTA.
    3. New layouts and product pages. Rework the header, footer, product page or collection grid with section groups and layout files, without breaking the editor. Product pages with a sticky gallery, size guide, brand story and complete the look. Try: Build a complete clothing product page: sticky gallery, size guide, brand story and complete the look.
    4. Art direction that holds up. One strong direction instead of a generic theme, tested against long text, missing images, odd ratios and mixed blocks. Try: Design an editorial collection section for a fashion brand, oversized type.

    Transform

    1. Legacy refactors. {% include %} to {% render %}, raw img tags to responsive image_tag, hardcoded strings to translation keys. Try: Refactor snippets/product-card.liquid to use image_tag with responsive widths.

    Protect

    1. Audit before a merge. A read-only report with severity, file and line, the fix and the reason. Works on a theme you wrote or one you just inherited. Try: Audit the theme before I merge this branch.
    2. Theme Store submission. 11 checks: required templates, section groups, @theme and @app blocks, color schemes, gift card, predictive search, accelerated checkout, Partner Program rules. Try: Check this theme for Theme Store submission readiness.
    3. Performance and accessibility recovery. 10 checks: Lighthouse, JS bundle size, preloads, LCP image, touch targets, focus, reduced motion, font loading. Try: Why did my Lighthouse score drop? Run the quality audit.
    4. Toolchain and CI. Shopify CLI, theme-check, Prettier for Liquid, Lighthouse CI, source and deploy branches, a pipeline that fails on errors. Try: Add a theme-check config and a CI workflow that fails on errors.

    Build bold, ship clean

    Animation is where themes usually break. The pack keeps it in bounds:

    • Every selector scoped, so effects never leak across pages
    • prefers-reduced-motion handled
    • Scripts deferred, JS held to a 16 KB entry-point budget
    • GSAP and Swiper allowed as vendor bundles
    • Images lazy-loaded with dimensions, so the layout does not jump
    • Blocks selectable and reorderable in the theme editor

    What's included

    • 3 skills: shopify-build, shopify-audit, shopify-tooling
    • 16 rule files: universal rules, 8 theme areas, 3 languages, 4 quality guides
    • 28 audit checks across 3 levels: 7 critical, 10 quality, 11 submission
    • Claude Code plugin manifest and marketplace file
    • MIT licence

    Who it is for

    Developers and agencies building or maintaining Online Store 2.0 themes, freelancers who take over client themes, teams preparing a Theme Store submission. Not for Hydrogen or headless storefronts.

    Safe by design

    Markdown instructions and two JSON manifests only. No scripts, no outbound requests, no secrets. The audit skill is read-only. Links to shopify.dev and W3C are documentation references, nothing fetches them. Store-changing commands such as shopify theme push run only when you ask.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 10 days ago

    • Passed all security checks, Safe to install

    Requires

    Anthropic
    Webaim
    lighthouse
    Node.js
    prettier

    Listed10 days ago

    What's inside

    Frequently Asked Questions