liquid-skills プラグイン
プラグイン Claude Code 開発 Claude Code 拡張・ワークフローWeb・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
liquid-skills は、Shopify/liquid-skills が GitHub 上で配布する Claude Code 用プラグインで、Shopify の Liquid テーマ開発に関する3つのスキルを Claude に付与します。README によると、対象範囲は Liquid 言語の基礎(schema JSON、LiquidDoc、フィルター、タグ、オブジェクト、翻訳)、CSS/JS/HTML のコーディング規約({% stylesheet %} 内での BEM、デザイントークン、Web Components、defensive CSS)、そして e コマース向けコンポーネントの WCAG アクセシビリティパターンの3分野です。導入は Claude Code 上で Shopify/liquid-skills マーケットプレイスを追加し、/plugin install コマンドを実行する流れになります。同リポジトリには Liquid テンプレート向けの LSP 統合を担う liquid-lsp というプラグインも含まれており、これには Shopify CLI のインストールが前提条件として挙げられています。
概要
liquid-skills は SaaS ではなく、Claude Code 向けのプラグイン(Agent Skills の集合)です。README では、GitHub リポジトリ Shopify/liquid-skills が「Claude Code plugin marketplace」として説明されており、Shopify テーマ開発を支援する位置づけとなっています。
liquid-skills でできること
- /plugin marketplace add Shopify/liquid-skills と /plugin install liquid-skills@liquid-skills で liquid-skills プラグインを導入する
- shopify-liquid-themes スキルにより、schema JSON・LiquidDoc・フィルター・タグ・オブジェクト・翻訳について Claude に学習させる
- liquid-theme-standards スキルにより、{% stylesheet %} 内の BEM・デザイントークン・Web Components・defensive CSS について Claude に学習させる
- liquid-theme-a11y スキルにより、e コマース向けコンポーネントの WCAG アクセシビリティパターンを Claude に学習させる
- 併せて liquid-lsp プラグインを導入すると、Shopify Liquid テンプレート向けの LSP 統合が利用できる(Shopify CLI が前提)
- claude --plugin-dir ./plugins/liquid-lsp でプラグインをローカルにテストする
出典
原文の説明（英語）
Liquid language fundamentals, CSS/JS/HTML coding standards, and WCAG accessibility patterns for Shopify themes
liquid-skills の変更履歴
- プラグイン liquid-skills を追加