Stats
Links
Categories
Production-grade skills for frontend development, brand systems, and more by BMOSAN LABS.
npx claudepluginhub bmorri13/bmosan-skillsCreate brand guides interactively and enforce them when building frontends. Three modes: Builder (create a guide), Enforcer (lock frontend output to brand tokens), and Audit (check existing code against your guide).
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.
# 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.
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 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 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 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: