By benjaminsehl
Generate accessible Shopify Liquid theme code for sections, blocks, and snippets with WCAG 2.2 patterns for product cards, carousels, forms, modals, plus CSS/JS/HTML standards like BEM naming, design tokens, and custom properties. Enforce best practices and fix issues directly in .liquid files.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-2 --plugin benjaminsehl-liquid-skills-2Implement WCAG 2.2 accessibility patterns in Shopify Liquid themes. Covers e-commerce-specific components including product cards, carousels, cart drawers, price display, forms, filters, and modals. Use when building accessible theme components, fixing accessibility issues, or reviewing ARIA patterns in .liquid files.
CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files.
Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns. Use when creating or editing .liquid files for Shopify themes, working with schema, doc, stylesheet, javascript tags, or Shopify Liquid objects/filters/tags.
[!NOTE] No longer needed! Go check out the official Shopify AI Toolkit
A collection of Claude Agent Skills for Shopify Liquid theme development. Three skills organized by scope — Liquid language fundamentals, coding standards, and accessibility.
claude skill install --plugin shopify-theme-skills benjaminsehl/liquid-skills
| Skill | Scope | SKILL.md | What Claude learns |
|---|---|---|---|
skills/shopify-liquid-themes/ | All Liquid themes | 318 lines | Schema JSON, LiquidDoc, filters, tags, objects, translations |
skills/liquid-theme-standards/ | All Liquid themes | 420 lines | BEM in {% stylesheet %}, design tokens, Web Components, defensive CSS |
skills/liquid-theme-a11y/ | All Liquid themes | 448 lines | WCAG patterns for e-commerce components |
┌──────────────────────────────────────────────────┐
│ shopify-liquid-themes (Liquid language) │
│ liquid-theme-standards (CSS/JS/HTML patterns) │
│ liquid-theme-a11y (Accessibility) │
└──────────────────────────────────────────────────┘
All three skills work with any Shopify Liquid theme.
Liquid language fundamentals: schema format, 33 setting types, 152 filters, 30 tags, 137 objects, LiquidDoc, and translation patterns.
skills/shopify-liquid-themes/
├── SKILL.md
└── references/
├── filters-language.md # 77 filters: array, string, math, date, default, format (auto-generated)
├── filters-html-media.md # 45 filters: color, font, html, media, hosted file (auto-generated)
├── filters-commerce.md # 30 filters: cart, collection, money, payment, etc. (auto-generated)
├── tags.md # 30 tags with syntax/examples (auto-generated)
├── objects-commerce.md # 5 core commerce objects: product, variant, cart, order, line_item (auto-generated)
├── objects-content.md # 10 content/theme objects: collection, customer, page, shop, etc. (auto-generated)
├── objects-tier2.md # 69 objects with property lists (auto-generated)
├── objects-tier3.md # 53 simple objects with access paths (auto-generated)
├── schema-and-settings.md # Schema format, 33 setting types
└── examples.md # Full snippet/block/section examples
CSS, JavaScript, and HTML coding standards for Shopify themes. Covers BEM naming inside {% stylesheet %} tags, design tokens with CSS custom properties, Web Component patterns, defensive CSS, logical properties for RTL, and progressive enhancement.
skills/liquid-theme-standards/
├── SKILL.md
└── references/
├── css-patterns.md # Layout, animation, print styles
└── javascript-patterns.md # Web Components, events, data loading
WCAG 2.2 accessibility patterns for e-commerce components: product cards, carousels, cart drawers, forms, filters, price display, modals, navigation, and color swatches.
skills/liquid-theme-a11y/
├── SKILL.md
└── references/
├── component-patterns.md # Color swatches, breadcrumbs, tables, sliders
└── focus-and-keyboard.md # Focus trapping, roving tabindex, announcements
Access thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.
Behavioral guidelines to reduce common LLM coding mistakes, derived from Andrej Karpathy's observations on LLM coding pitfalls
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Design fluency for frontend development. 1 skill with 23 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
Reliable automation, in-depth debugging, and performance analysis in Chrome using Chrome DevTools and Puppeteer
Claude Code skills for Godot 4.x game development - GDScript patterns, interactive MCP workflows, scene design, and shaders