mcpField
S
salla-storefront-ui

salla-storefront-ui

github.com/sallaappDesign & UI281 installsUpdated 3w ago
Repository

About salla-storefront-ui

A design skill for native-looking Salla storefront interfaces, intended for storefront UI work. It focuses on Twilight components, theme tokens, Salla Icons, and RTL-aware styling; injection itself is covered by a separate skill.

Key features

  1. 01Build with Twilight UI components
  2. 02Inherit Twilight theme tokens
  3. 03Use Salla Icons classes
  4. 04Support RTL and locale direction
  5. 05Verify appearance on a live demo store

Use cases

  1. 01Style a storefront snippet to match its theme
  2. 02Add UI alongside a product page element
  3. 03Check RTL layout on a demo storefront
  4. 04Review light and dark appearance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sallaapp/salla-partners-agent-kit --skill salla-storefront-ui

After installing, type/salla-storefront-uiin Claude Code to confirm it loaded.

Details

From the project README

Salla Storefront UI

Native look-and-feel for the storefront (the store — shopper-facing pages, Twilight theme). This skill owns native styling only; it injects nothing itself — the storefront-snippet injection recipe lives in salla-snippets. "It renders" is not the bar.

Embedded/dashboard UI is a different design system → salla-embedded-ui.

Build it native

  • Prefer native UI Components — build visible UI from Twilight <salla-*> web components (e.g. salla-button, salla-modal, salla-rating-stars, salla-products-slider) driven by the Storefront JS SDK, rather than hand-rolled HTML; they inherit theme tokens, RTL, and locale automatically. Component families + the storefront-snippet injection recipe → salla-snippets. UI Components docs: https://docs.salla.dev/422688m0.md.
  • Inherit theme tokens — style from Twilight CSS variables: --color-primary, --color-text, --font-main, and the spacing/radius vars. Use literal fonts, colors, borders, and shadows only as fallbacks.
  • Salla Icons — use sicon-* classes. Twilight themes inject the Twilight SDK into every storefront page and load the Salla Icons font, so it is available without bundling it yourself.
  • Match the product page — adopt the surrounding spacing/density and insert next to the relevant element, inline in the layout.
  • RTL + locale — most stores are Arabic/RTL. Honor dir/lang, mirror the layout, and write copy Arabic-first.

Docs: theme https://docs.salla.dev/421877m0.md · Twilight JS SDK (theme engine injects the SDK; themes load Salla Icons) https://docs.salla.dev/422610m0.md · CSS variables https://docs.salla.dev/421945m0.md · Salla Icons https://docs.salla.dev/422550m0.md · single product page https://docs.salla.dev/422561m0.md

Gate: "UI built from Twilight <salla-*> components + sicon-* icons inheriting theme tokens (literals only as fallback), Arabic-first/RTL — not hand-rolled HTML with hardcoded colors?"

Verify LIVE (required)

Code that runs is not proof it looks right. Before "done":

  1. Install the app on a demo store — salla_apps action=demo_stores, open a store's install_url, then the storefront url.
  2. Screenshot the storefront page (snippet) you built.
  3. Check: Twilight <salla-*> components + sicon-* icons, theme tokens inherited, spacing matches the page, RTL correct, light + dark both OK, no overflow/clipping.

Gate: "Captured a live screenshot of the storefront UI I built in an installed demo store, used Twilight components + Salla Icons + theme tokens, and confirmed native styling + RTL — not just that the code executed?"

Comments

Markdown supported