salla-storefront-ui

Salla ストアフロント UI

ストアフロント（ストア — 買い物客向けページ、Twilight テーマ）にネイティブな外観と操作感をもたらします。このスキルが担当するのはネイティブなスタイル設定のみで、それ自体は何も注入しません。ストアフロントへの snippet 注入レシピは salla-snippets にあります。「レンダリングできる」だけでは不十分です。

埋め込み／ダッシュボード UI は別のデザインシステムです → salla-embedded-ui。

ネイティブに構築する

• ネイティブ UI Components を優先する — 手書きの HTML ではなく、Storefront JS SDK で制御する Twilight の <salla-*> Web コンポーネント（例：salla-button、salla-modal、salla-rating-stars、salla-products-slider）を使って、目に見える UI を構築します。これらはテーマのトークン、RTL、ロケールを自動的に継承します。コンポーネントの種類とストアフロントへの snippet 注入レシピ → salla-snippets。UI Components のドキュメント：https://docs.salla.dev/422688m0.md。
• テーマのトークンを継承する — Twilight の CSS 変数（--color-primary、--color-text、--font-main、スペーシング／角丸の変数）を使ってスタイルを設定します。フォント、色、ボーダー、シャドウの値を直接指定するのは、フォールバックとしてのみ使用してください。
• Salla Icons — sicon-* クラスを使います。Twilight テーマは、すべてのストアフロントページに Twilight SDK を注入し、Salla Icons フォントを読み込むため、自分でバンドルしなくても利用できます。
• 商品ページに合わせる — 周囲のスペーシングや密度に合わせ、関連する要素の隣にレイアウト内でインラインに配置します。
• RTL とロケール — 多くのストアはアラビア語／RTL です。dir／lang に従い、レイアウトを反転させ、アラビア語を優先して文言を書きます。

ドキュメント：テーマ https://docs.salla.dev/421877m0.md · Twilight JS SDK（テーマエンジンが SDK を注入し、テーマが Salla Icons を読み込みます）https://docs.salla.dev/422610m0.md · CSS 変数 https://docs.salla.dev/421945m0.md · Salla Icons https://docs.salla.dev/422550m0.md · 商品詳細ページ https://docs.salla.dev/422561m0.md

チェック項目：「テーマのトークンを継承する Twilight の <salla-*> コンポーネントと sicon-* アイコンを使って UI を構築しているか（直接指定する値はフォールバックとしてのみ使用）、アラビア語を優先した RTL になっているか — 色をハードコードした手書き HTML ではないか？」

ライブ環境で検証する（必須）

コードが実行できても、見た目が正しい証拠にはなりません。「完了」とする前に：

1. デモストアにアプリをインストールします — salla_apps action=demo_stores を実行し、ストアの install_url を開いてから、ストアフロントの url を開きます。
2. 構築した snippet を含むストアフロントページのスクリーンショットを撮ります。
3. Twilight の <salla-*> コンポーネントと sicon-* アイコンを使っていること、テーマのトークンを継承していること、スペーシングがページに合っていること、RTL が正しいこと、ライトモードとダークモードの両方で問題ないこと、はみ出しやクリッピングがないことを確認します。

チェック項目：「インストール済みのデモストアで、構築したストアフロント UI のライブスクリーンショットを撮り、Twilight コンポーネント、Salla Icons、テーマのトークンを使って、ネイティブなスタイル設定と RTL を確認したか — コードが実行できただけではないか？」