Activate for token architecture, component logic, Figma variables setup, design language documentation, and scaling identity into a system. Also activates when a brand has inconsistency problems or when handoff between design and development is breaking down.
From brand-bond-osnpx claudepluginhub brandbondco/brand-bond-os --plugin brand-bond-osThis skill uses the workspace's default tool permissions.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
A design system is not a component library. It's a decision-making framework that scales.
Every token, every component, every rule exists to answer one question: how do we make the right decision fast, at scale, without losing brand integrity?
Before building a system, verify:
| Question | If no... |
|---|---|
| Is the brand identity finalized? | Don't tokenize a moving target |
| Are the primary use cases defined? | System scope will be wrong |
| Is there a clear owner for the system? | Systems without owners die |
| Do we know which platforms this serves? | Token architecture differs for web/iOS/Android |
A design system built before identity is stable will need to be rebuilt. Push back on premature systematization.
Primitive tokens → Raw values (color hex, px values, font names)
↓
Semantic tokens → Purpose-mapped values (color-background-primary, spacing-component-md)
↓
Component tokens → Component-specific overrides (button-background-hover)
Never skip tiers. Components that reference primitives directly create maintenance nightmares.
[category]-[property]-[variant]-[state]
color-background-primary-hover
spacing-component-small
typography-body-size-default
Consistent naming is more important than perfect naming. Agree on convention, document it, enforce it.
Before building any component:
Components without constraints aren't components — they're templates that will drift.
Structure variables by mode support:
Variable naming must match token naming. If they diverge, handoff breaks.
"We need a full design system before we launch"
What's the actual problem? If it's consistency, a token foundation solves that in a week. A full system takes months. Let's build what you actually need for launch, then expand.
"Just build components in Figma"
Figma components without token logic are illustrations, not a system. They won't scale and they won't survive a rebrand. Let's do it once and do it right.
Design system feeds into:
bb-dp-figma — Figma variables and component librarybb-digital-product — UI implementationbb-visual-production — consistent production across touchpoints