Implementiert WCAG 2.2-Barrierefreiheitsmuster in Shopify Liquid-Designs. Deckt e-commerce-spezifische Komponenten wie Produktkarten, Karussells, Warenkorb-Schubladen, Preisdarstellung, Formulare, Filter und Dialogs ab.
Diese Fertigkeit (benjaminsehl/liquid-theme-a11y) richtet sich an Entwickler, die barrierefreie Shopify-Liquid-Designs nach WCAG 2.2 erstellen oder verbessern möchten. Sie behandelt e-commerce-typische UI-Komponenten wie Produktkarten, Karussells, Warenkorb-Schubladen, Preisauszeichnungen, Filter und Bestellformulare – und bietet praktische ARIA-Entwurfsmuster, die direkt in Liquid-Dateien (.liquid) umgesetzt werden können. Die Fertigkeit ist besonders nützlich bei der Neuerstellung oder Prüfung zugänglicher Theme-Komponenten und unterstützt sowohl die Entwicklung als auch das Debugging von Barrierefreiheit. Sie setzt voraus, dass der Entwickler mit Shopify Liquid sowie grundlegenden ARIA-Konzepten vertraut ist, und liefert konkrete Code-Beispiele und Best Practices für häufige Barrierefreiheitslücken in Online-Shops.
npx skills add https://github.com/benjaminsehl/liquid-skills/tree/main/skills/liquid-theme-a11yImplementiere WCAG 2.2-Barrierefreiheitsmuster in Shopify Liquid-Designs. Deckt e-commerce-spezifische Komponenten ab, darunter Produktkarten, Karussells, Warenkorb-Schubladen, Preisdarstellung, Formulare, Filter und Modals. Verwende dies beim Erstellen zugänglicher Theme-Komponenten, Beheben von Barrierefreiheitsproblemen oder Überprüfen von ARIA-Mustern in .liquid-Dateien.
This repo contains 2 individual skills — each has its own dedicated page.
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.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".