benjaminsehl/liquid-skills
3 skills7.5k installs345 starsGitHub
Install
npx skills add https://github.com/benjaminsehl/liquid-skillsSkills in this repo
1Shopify Liquid Themesshopify-liquid-themes is an agent skill for generating correct Shopify Liquid theme code across sections, blocks, snippets, layout, templates, config, locales, and assets. It explains when to use sections versus blocks versus snippets, Liquid delimiter and operator rules including no parentheses in conditions and fifty-iteration for loop limits, and critical gotchas such as deprecated include, no Liquid inside stylesheet or javascript tags, and snippet render parameter scoping. The schema section documents section and block JSON structures, thirty-three setting types with visible_if patterns, and translation key conventions requiring the t filter for every user-facing string. CSS guidance covers per-component stylesheet and javascript tags, Liquid-aware style tags for dynamic editor colors, and CSS variable patterns for settings. LiquidDoc headers with param types are required for snippets and statically rendered blocks. Reference maps link to filter, tag, object, schema, and complete example files. Developers reach for it when creating or editing dot liquid files, working with schema doc stylesheet javascript tags, or implementing Shopify theme architecture with correct locale fi.3kinstalls2Liquid Theme StandardsCSS JS HTML Standards for Shopify Liquid Themes 1 Progressive enhancement semantic HTML first CSS second JS third 2 No external dependencies native browser APIs only for JavaScript 3 Design tokens never hardcode colors spacing or fonts 4 BEM naming consistent class naming throughout 5 Defensive CSS handle edge cases gracefully Location Liquid Use For stylesheet No Component scoped styles one per file style Yes Dynamic values needing Liquid e g color settings assets css No Shared global styles Critical stylesheet does NOT process Liquid Use inline style attributes for dynamic values liquid comment Do inline variables endcomment div class hero style bg color section settings bg_color padding section settings padding px The liquid theme standards agent skill provides documented workflows prerequisites triggers and safety guidance from its SKILL md source Agents load it when user requests match the description and follow step by step instructions without inventing capabilities It integrates with standard agent tooling for the tasks inputs outputs and failure modes described in the repository documentation2.3kinstalls3Liquid Theme A11yAccessibility for Shopify Liquid Themes Every interactive component must work with keyboard only screen readers and reduced motion preferences Start with semantic HTML add ARIA only when native semantics are insufficient Component HTML Element ARIA Pattern Reference Expandable content details summary None needed Accordion accordion Modal dialog dialog aria modal true Modal modal Tooltip popup popover attribute role tooltip fallback Tooltip tooltip Dropdown menu nav ul aria expanded on triggers Navigation dropdown navigation Tab interface div role tablist tab tabpanel Tabs tabs Carousel slider div role region aria roledescription Carousel carousel Product card article aria labelledby Product card product card Form form aria invalid aria describedby Forms forms Cart drawer dialog Focus trap Cart drawer cart drawer Price display span aria label for context Prices price display Filters form fieldset aria expanded for disclosures Filters product filters html body a href main content class skip link accessibility skip_to_content t a header role banner nav aria label accessibility main_navigation t nav header main id main content All page content inside main2.2kinstalls