Shopify Liquid テーマの CSS、JavaScript、HTML コーディング標準。スタイルシート タグ内の BEM 命名、デザイン トークン、CSS カスタム プロパティ、テーマの Web コンポーネント、防御的 CSS、およびプログレッシブ拡張について説明します。 .liquid ファイルまたはテーマ アセット ファイルに CSS/JS/HTML を記述する場合に使用します。
コマンドラインで liquid-theme-standards AI スキルを開発環境にすばやくインストール
ソース: benjaminsehl/liquid-skills。
| {% 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:
Use CSS custom properties for all values — never hardcode colors, spacing, or fonts. Define a consistent scale and reference it everywhere.
Shopify Liquid テーマの CSS、JavaScript、HTML コーディング標準。スタイルシート タグ内の BEM 命名、デザイン トークン、CSS カスタム プロパティ、テーマの Web コンポーネント、防御的 CSS、およびプログレッシブ拡張について説明します。 .liquid ファイルまたはテーマ アセット ファイルに CSS/JS/HTML を記述する場合に使用します。 ソース: benjaminsehl/liquid-skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-standardsShopify Liquid テーマの CSS、JavaScript、HTML コーディング標準。スタイルシート タグ内の BEM 命名、デザイン トークン、CSS カスタム プロパティ、テーマの Web コンポーネント、防御的 CSS、およびプログレッシブ拡張について説明します。 .liquid ファイルまたはテーマ アセット ファイルに CSS/JS/HTML を記述する場合に使用します。 ソース: benjaminsehl/liquid-skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/benjaminsehl/liquid-skills --skill liquid-theme-standards インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/benjaminsehl/liquid-skills