brand-guide

BMOSAN Skills

A plugin marketplace for Claude Code by BMOSAN LABS. Production-grade skills for frontend development, brand systems, and more.

Works with Claude Code, Cursor, VS Code (Copilot), OpenCode, Codex CLI, and Claude Desktop / claude.ai.

---

Quick Start (Claude Code)

# Add the marketplace
/plugin marketplace add bmorri13/bmosan-skills

# Install a plugin
/plugin install brand-guide@bmosan-skills

That's it. The skill is now available in all your Claude Code sessions.

---

Installation by Tool

Claude Code (Recommended — native plugin support)

Option A: Plugin marketplace (one command)

/plugin marketplace add bmorri13/bmosan-skills
/plugin install brand-guide@bmosan-skills

Option B: Manual skill install (global — applies to all projects)

git clone https://github.com/bmorri13/bmosan-skills.git ~/.claude/skills/bmosan-skills

Then add to ~/.claude/CLAUDE.md:

## Skills

When building frontends or working with brand/design systems, read and follow
the skill at `~/.claude/skills/bmosan-skills/plugins/brand-guide/skills/brand-guide/SKILL.md`.

Option C: Manual skill install (per-project — shared with team)

git clone https://github.com/bmorri13/bmosan-skills.git .claude/skills/bmosan-skills

Then add to your project's CLAUDE.md:

## Skills

When building frontends or working with brand/design systems, read and follow
the skill at `.claude/skills/bmosan-skills/plugins/brand-guide/skills/brand-guide/SKILL.md`.

---

Cursor

Cursor uses .cursor/rules/ with .mdc files for project rules. Copy the brand guide skill content into a rule file.

Option A: Always-on rule (recommended for Enforcer mode)

Create .cursor/rules/brand-guide.mdc in your project root:

---
description: "Brand guide enforcement for frontend development. Activates when building UI, creating components, or writing CSS/HTML."
globs: "*.html,*.css,*.jsx,*.tsx,*.vue,*.svelte"
alwaysApply: false
---

Then paste the contents of plugins/brand-guide/skills/brand-guide/SKILL.md below the frontmatter.

Option B: Upload your brand-guide.json as context

When chatting in Cursor, use @brand-guide.json to reference your guide file directly in any prompt. Combine with the rule above for maximum enforcement.

Tip: For the Builder interview flow, paste the contents of references/builder-interview.md into Cursor's chat as context, then ask it to walk you through creating a brand guide.

---

VS Code (GitHub Copilot)

VS Code supports custom instructions via .github/copilot-instructions.md, scoped .instructions.md files, and AGENTS.md.

Option A: Copilot instructions file (always-on)

Create .github/copilot-instructions.md in your project root and paste the contents of SKILL.md:

## Brand Guide Enforcement

When building any frontend code (HTML, CSS, React, Vue, Svelte, etc.),
always check for a brand-guide.json in the project root. If one exists,
read it first and strictly follow all defined tokens for colors, typography,
spacing, borders, motion, and component patterns.

Never freestyle visual values. Every color, font, spacing value, and
border-radius must come from the brand guide tokens.

Option B: Scoped instruction file (frontend files only)

Create .github/instructions/brand-guide.instructions.md:

---
applyTo: "**/*.{html,css,jsx,tsx,vue,svelte}"
---

Then paste the SKILL.md contents below the frontmatter. This auto-attaches only when Copilot is working on frontend files.

Option C: AGENTS.md (cross-tool compatible)

VS Code also reads AGENTS.md from your project root, but this is experimental and disabled by default — you must enable chat.useAgentsMdFile in VS Code settings first. See the Cross-Tool Compatibility section below — the same file works in VS Code, OpenCode, and Codex.

---

OpenCode

OpenCode reads AGENTS.md files and has built-in Claude Code compatibility.

Option A: Claude Code compatibility (zero config)

If you've already installed the skill for Claude Code (in ~/.claude/skills/ or .claude/skills/), OpenCode picks it up automatically. No extra setup needed.

To verify it's active, check that OPENCODE_DISABLE_CLAUDE_CODE_SKILLS is not set in your environment.

Option B: AGENTS.md

Add to your project's AGENTS.md:

## Brand Guide

When building any frontend, first check for brand-guide.json in the project.
If found, read it and strictly enforce all visual tokens.

For the full skill instructions, read:
.claude/skills/bmosan-skills/plugins/brand-guide/skills/brand-guide/SKILL.md

Option C: opencode.json instructions field

Reference the skill files directly in opencode.json: