Kona Theme

Claude Code Skills ​

Five skills in .claude/skills/ give Claude deep context about Liquid, accessibility, coding standards, and Kona's architecture. Invoke them with slash commands in any Claude Code session running inside the project.

Quick reference ​

SkillCommandWhat it does
Liquid Reference/shopify-liquidSyntax, 152 filters, 30 tags, objects, 33 schema setting types, LiquidDoc, translations
Accessibility/shopify-liquid-a11yWCAG 2.2 patterns for e-commerce components
Coding Standards/shopify-liquid-kona-standardsTailwind v4, island JS, CSS layers, design tokens
Component Creator/shopify-liquid-kona-newGuided workflow for new sections, blocks, and snippets
Translator/shopify-liquid-translatorTranslate locale files into 30 languages

Skill tiers ​

TierSkillsScope
Universal/shopify-liquid, /shopify-liquid-a11y, /shopify-liquid-translatorWorks with any Shopify theme
Project/shopify-liquid-kona-standards, /shopify-liquid-kona-newKona-specific paths and conventions

Universal skills have no Kona-specific paths. Project skills reference Kona's directory structure, Tailwind setup, and island architecture.

How to use ​

Slash commands ​

Type the slash command at the Claude Code prompt:

> /shopify-liquid-kona-new section newsletter-signup

Implicit activation ​

Skills also activate automatically based on context. Ask Claude to write Liquid, fix accessibility issues, or manage translations — the relevant skill loads without an explicit command.

Chaining skills ​

Skills compose together. For example, creating a new section might use:

  1. /shopify-liquid-kona-new — scaffold the component
  2. /shopify-liquid — reference for schema settings and filters
  3. /shopify-liquid-a11y — accessible markup patterns
  4. /shopify-liquid-translator — generate translations for new keys

Skill files ​

Each skill directory contains:

  • skill.json — metadata (name, description)
  • SKILL.md — the full prompt content Claude receives

Next steps ​