关于 salla-storefront-ui
面向店铺前台界面设计的技能，帮助构建符合 Salla 原生风格的 UI。重点是 Twilight 组件、主题令牌、Salla Icons 和 RTL 样式；代码注入由另一技能负责。
主要功能
- 01使用 Twilight UI 组件构建
- 02继承 Twilight 主题令牌
- 03使用 Salla Icons 类
- 04支持 RTL 与语言方向
- 05在演示店铺中验证外观
适用场景
- 01让前台片段匹配店铺主题
- 02在商品页元素旁添加 UI
- 03在演示店铺检查 RTL 布局
- 04检查浅色与深色外观
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/salla-storefront-ui确认已加载。
详细介绍
Salla 店面 UI
为店面（商店面向购物者的页面，Twilight 主题）提供原生观感。此技能仅负责原生样式；自身不会注入任何内容——店面片段的注入方法见 salla-snippets。“能渲染”并不代表达标。
嵌入式／仪表板 UI 属于另一套设计系统 → salla-embedded-ui。
打造原生体验
- 优先使用原生 UI Components——使用 Twilight
<salla-*>Web 组件（例如salla-button、salla-modal、salla-rating-stars、salla-products-slider）构建可见 UI，并由 Storefront JS SDK 驱动，而不是手写 HTML；这些组件会自动继承主题令牌、RTL 和区域设置。组件系列及店面片段注入方法 → 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 字体，因此无需自行打包即可使用。 - 匹配商品页面——采用周围的间距／密度，并以内联方式将 UI 放在布局中相关元素旁边。
- 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
门槛：“UI 是否由继承主题令牌的 Twilight <salla-*> 组件和 sicon-* 图标构建（仅在回退时使用字面量），并优先使用阿拉伯语／RTL，而非带硬编码颜色的手写 HTML？”
在线验证（必需）
能运行的代码不代表外观正确。完成前：
- 在演示商店安装应用——运行
salla_apps action=demo_stores，打开某个商店的install_url，然后打开店面的url。 - 为你构建的店面页面（片段）截图。
- 检查：Twilight
<salla-*>组件 +sicon-*图标、继承主题令牌、间距与页面一致、RTL 正确、浅色和深色模式均正常、没有溢出／裁切。
门槛：“是否在已安装应用的演示商店中，为我构建的店面 UI 截取了在线截图，使用了 Twilight 组件 + Salla Icons + 主题令牌，并确认原生样式 + RTL 正确，而不只是代码运行成功？”