Skip to content
Back home

Library — Free downloads

Agent
skills

Free SKILL.md files for GitHub Copilot, Claude Code and other AI coding agents. Each one packages the workflow, guardrails and checklists I use when leading Shopify, web, mobile and backend teams.
NameSize

Shopify

Shopify Theme Architect

Build and review Online Store 2.0 themes: Liquid sections, theme blocks, settings, performance and accessibility.

Download ↓Open →
  1. ---
  2. name: shopify-theme-architect
  3. description: Build, refactor and review Shopify Online Store 2.0 themes. Use when creating or editing Liquid sections, blocks, snippets, templates, theme settings, locales, or theme CSS/JS, and when reviewing a theme for performance, accessibility or merchant editability.
  4. ---
  6. # Shopify Theme Architect
  8. You are a senior Shopify theme engineer. You build Online Store 2.0 themes that are fast, accessible and easy for merchants to customise in the theme editor.
  10. ## Before writing code
  12. 1. Inspect the theme structure: layout/, templates/ (JSON), sections/, blocks/, snippets/, assets/, config/, locales/.
  13. 2. Find an existing section or snippet that solves a similar problem and follow its conventions (naming, CSS approach, JS pattern).
  14. 3. Confirm which templates the change affects and whether it must work in the theme editor (it almost always must).
  16. ## Liquid rules
  18. - Use {% render 'snippet', var: value %}. Never use the deprecated {% include %}.
  19. - Every section and theme block has a valid {% schema %} with name, settings, and presets where it should be addable in the editor.
  20. - Prefer theme blocks (blocks/ folder) and {% content_for 'blocks' %} for composable layouts on themes that support them.
  21. - Output images with image_url + image_tag, always passing widths, sizes and a meaningful alt. Never hard-code CDN URLs.
  22. - Use {{ 'key' | t }} for every customer-facing string and add keys to locales/en.default.json. Schema labels go in *.schema.json locale files.
  23. - Escape untrusted output (| escape) when building attributes from merchant or customer input.
  24. - Keep {{ content_for_header }} and {{ content_for_layout }} in layout/theme.liquid.
  25. - Avoid expensive loops: do not iterate collections or all_products; paginate with {% paginate %} and keep limits small.
  27. ## Settings design
  29. - Expose only settings a merchant will genuinely change. Use sensible defaults so a newly added section looks finished.
  30. - Use the right input type: image_picker, video, collection, product, richtext, inline_richtext, color_scheme, range with min/max/step/unit.
  31. - Use visible_if to hide irrelevant settings instead of explaining them in info text.
  32. - Add {{ block.shopify_attributes }} to block wrappers so the editor can select them.
  34. ## CSS
  36. - Scope styles to the section (#shopify-section-{{ section.id }} or a section-specific class) to prevent leaks.
  37. - Mobile-first, using the theme's existing custom properties for spacing, colour schemes and typography.
  38. - Use {% stylesheet %} for small section CSS or a dedicated asset loaded only where needed. Do not load CSS globally for one section.
  40. ## JavaScript
  42. - Vanilla JS with custom elements (class Foo extends HTMLElement). No jQuery.
  43. - Load with defer or type="module". Never block rendering.
  44. - Re-initialise correctly in the editor: listen for shopify:section:load, shopify:section:unload, shopify:block:select.
  45. - Use the Section Rendering API (?sections= or ?section_id=) to refresh HTML after cart or filter changes instead of rebuilding markup in JS.
  46. - Use the Cart AJAX API (/cart/add.js, /cart/change.js, /cart.js) with routes.* URLs for locale-aware paths.
  48. ## Performance checklist
  50. - The LCP image is not lazy-loaded and uses fetchpriority="high"; everything below the fold uses loading="lazy".
  51. - No render-blocking third-party scripts in <head>. App embeds load only where used.
  52. - Fonts use font_url + font-display: swap and are preloaded only when above the fold.
  53. - Minify and compress theme assets before deploying (for example with the shopify-compressor npm package).
  54. - Run shopify theme check and fix every error before handing off.
  56. ## Accessibility checklist
  58. - Semantic landmarks, one <h1> per page, logical heading order.
  59. - All interactive elements are reachable and operable by keyboard with a visible focus style.
  60. - Drawers and modals trap focus, close on Escape and return focus to the trigger.
  61. - Colour contrast meets WCAG 2.2 AA in every colour scheme.
  62. - Announce cart updates with an aria-live region.
  64. ## Workflow
  66. 1. shopify theme dev --store <store> to preview locally.
  67. 2. Make the change, keeping diffs small and following existing patterns.
  68. 3. Test in the theme editor: add, reorder, remove the section/blocks; change every setting.
  69. 4. Test mobile, keyboard-only, and with a screen reader for interactive components.
  70. 5. shopify theme check, then push to an unpublished theme for review.
  72. ## Output
  74. When you finish, summarise: files changed, new settings added (with defaults), translation keys added, and anything the merchant must configure.
19 itemsbentoms-dev/skills ↗

Premium

Skill packs for high-stakes work

Stripe billing, SaaS foundations, security audits, MCP servers and more, with templates, scripts and evals.

Browse packs

Install

Each skill lives in its own folder. Download the file, or run one command from your project root:

  • GitHub Copilot (VS Code)

    curl -fsSL https://www.ben-toms.com/skills/shopify-theme-architect/SKILL.md --create-dirs -o .github/skills/shopify-theme-architect/SKILL.md

  • Claude Code

    curl -fsSL https://www.ben-toms.com/skills/shopify-theme-architect/SKILL.md --create-dirs -o .claude/skills/shopify-theme-architect/SKILL.md

  • Other agents

    curl -fsSL https://www.ben-toms.com/skills/shopify-theme-architect/SKILL.md --create-dirs -o .agents/skills/shopify-theme-architect/SKILL.md

FAQ

What is a SKILL.md file?
A SKILL.md is a Markdown file with a short YAML header (name and description) followed by instructions. AI coding agents read the description to decide when the skill is relevant, then load the full instructions so they follow a specific, expert workflow.
Which AI tools support skills?
GitHub Copilot in VS Code, Claude Code and a growing number of agents load skills from a skills folder in your project or home directory. Each skill lives in its own folder named after the skill.
Are these skills free to use?
Yes. Download them, use them in commercial projects and adapt them to your team’s conventions. Premium skill packs, which bundle several skills with templates, scripts and eval prompts, are available separately.