Padrões de codificação CSS, JavaScript e HTML para temas Shopify Liquid. Abrange nomenclatura BEM dentro de tags de folha de estilo, tokens de design, propriedades personalizadas CSS, Web Components para temas, CSS defensivo e aprimoramento progressivo. Use ao escrever CSS/JS/HTML em arquivos .liquid ou arquivos de ativos de tema.
Este skill define padrões de codificação para CSS, JavaScript e HTML em temas Shopify Liquid, ajudando desenvolvedores a manter consistência e boas práticas. Ele cobre nomenclatura BEM (Bloco, Elemento, Modificador) dentro de tags <style> em arquivos .liquid, uso de tokens de design e propriedades personalizadas CSS (custom properties) para temas, além de Web Components especialmente adaptados para Shopify. Também aborda CSS defensivo (defensive CSS) e aprimoramento progressivo (progressive enhancement), garantindo que os temas sejam robustos e acessíveis. Recomendado para ser usado ao escrever CSS/JS/HTML em arquivos .liquid ou outros arquivos de ativos de tema. Funciona como um guia de referência rápida durante o desenvolvimento de temas Shopify.
npx skills add https://github.com/benjaminsehl/liquid-skills/tree/main/skills/liquid-theme-standardsPadrões de codificação CSS, JavaScript e HTML para temas Shopify Liquid. Abrange nomenclatura BEM dentro de tags de folha de estilo, tokens de design, propriedades personalizadas CSS, Web Components para temas, CSS defensivo e aprimoramento progressivo. Use ao escrever CSS/JS/HTML em arquivos .liquid ou arquivos de ativos de tema.
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".