orange-opensource/orange-boosted-bootstrap/multi-brand

Name: multi-brand
Author: orange-opensource

Claude Code and agent skill by orange-opensource/orange-boosted-bootstrap

Trust tier 2

community

LLM review pending

By orange-opensource
Design
orange-opensource/orange-boosted-bootstrap
.github/skills/multi-brand/SKILL.md
Updated 25 Sep 2026
Version 1.0.01 version recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

Multi-brand architecture for OUDS Web (Orange, Sosh, Orange Compact). Use this skill when working on files in packages/, when adding new tokens that need cross-brand sync, when you need to understand what is shared vs brand-specific, or when testing changes across brands. Covers the 3-brand structure, brand entry point import order, what to update in all brands, and how to test cross-brand.

Install

npx vskill@latest install orange-opensource/orange-boosted-bootstrap/multi-brand

SKILL.md

Multi-Brand Architecture

The 3 brands

Brand	Package	Server	Visual trait
Orange	`@ouds/web-orange`	`:9001`	Sharp corners, HelvNeueOrange
Sosh	`@ouds/web-sosh`	`:9002`	Rounded corners, Sosh font, Magenta
Orange Compact	`@ouds/web-orange-compact`	`:9003`	Compact spacing, same as Orange

Key principle: JavaScript is shared. Only CSS tokens differ per brand.

Shared vs brand-specific

Shared (modify once)

scss/_*.scss, scss/mixins/, scss/_variables.scss, js/src/, js/tests/, site/, build/

Brand-specific (in each `packages/<brand>/`)

File	Editable?
`scss/tokens/_raw.scss`	Never
`scss/tokens/_semantic.scss`	Never
`scss/tokens/_component.scss`	Never
`scss/tokens/_*-custom-props.scss`	Never
`scss/tokens/_composite.scss`	Yes
`scss/ouds-web.scss`	Yes

Do I update all brands?

Change	All brands?
Edit shared `scss/_*.scss` with existing tokens	No ✓
Add new token variable used in SCSS	Yes — all 3
Edit `js/src/`	No (shared) ✓
Edit one `_composite.scss`	Only if same change needed elsewhere

Brand entry point order

scss

// packages/<brand>/scss/ouds-web.scss
@import "@ouds/web-common/scss/config";
@import "@ouds/web-common/scss/functions";
@import "@ouds/web-<brand>/scss/tokens";      // ← Brand tokens HERE
@import "@ouds/web-common/scss/variables";    // Maps OUDS → Bootstrap
@import "@ouds/web-common/scss/variables-dark";
@import "@ouds/web-common/scss/maps";
@import "@ouds/web-common/scss/mixins";
// ... component imports

Testing cross-brand

bash

npm run dist    # Builds all brand CSS
npm run start   # Starts 3 servers

For each brand check: light/dark mode, RTL, affected variants.

Security

Security scanPassed, 93 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryChecking.github/skills/multi-brand/SKILL.md

Popularity

Repository stars: 219
Repository forks: 61
7-day trend score: 27

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/orange-opensource/orange-boosted-bootstrap/multi-brand/badge)](https://verified-skill.com/skills/orange-opensource/orange-boosted-bootstrap/multi-brand)

Something wrong with this skill or its page? Tell us.