CSS-, JavaScript- und HTML-Codierungsstandards für Shopify Liquid-Themes. Abgedeckt werden BEM-Namensgebung innerhalb von Stylesheet-Tags, Design-Tokens, CSS-Custom-Properties, Web Components für Themes, defensives CSS und progressive Verbesserung. Verwenden Sie dies beim Schreiben von CSS/JS/HTML in .liquid-Dateien oder Theme-Asset-Dateien.
Dieser Skill namens `benjaminsehl/liquid-theme-standards` definiert umfassende Codierungsstandards für die Entwicklung von Shopify Liquid-Themes. Er richtet sich an Entwickler, die CSS, JavaScript und HTML in `.liquid`-Dateien oder Theme-Assets schreiben. Der Skill deckt zentrale Praktiken ab wie die BEM-Namenskonvention (Block-Element-Modifier) innerhalb von Stylesheet-Tags, die Verwendung von Design-Tokens und CSS-Custom-Properties für skalierbare und wartbare Styles sowie den Einsatz von Web Components für moderne, interaktive Theme-Komponenten. Darüber hinaus fördert er defensives CSS (robustes, fehlertolerantes Styling) und progressive Verbesserung (Grundfunktionalität für alle, erweiterte Features für moderne Browser). Dieser Skill ist ideal für Entwicklerteams, die konsistente, saubere und zukunftssichere Shopify-Themes erstellen möchten, und kann mit Claude Code, Cursor oder anderen KI-Agenten verwendet werden, die auf die Shopify-Plattform spezialisiert sind.
npx skills add https://github.com/benjaminsehl/liquid-skills/tree/main/skills/liquid-theme-standardsCSS-, JavaScript- und HTML-Codierungsstandards für Shopify Liquid-Themes. Abgedeckt werden BEM-Namensgebung innerhalb von Stylesheet-Tags, Design-Tokens, CSS-Custom-Properties, Web Components für Themes, defensives CSS und progressive Verbesserung. Verwenden Sie dies beim Schreiben von CSS/JS/HTML in .liquid-Dateien oder Theme-Asset-Dateien.
This repo contains 2 individual skills — each has its own dedicated page.
Implement 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.
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".