bos-code-quality

BOS Code Quality

This skill activates during code review, PR review, quality checks, or when phrases like "check quality", "review code", "verify compliance", or "design system check" appear. Auto-activates after any UI component work.

---

Core Purpose

Ensure all code meets BOS (Brand Operating System) standards for design system compliance, accessibility, and brand consistency. This skill integrates with code reviews to add BOS-specific quality gates.

---

Quality Dimensions

1. Design System Compliance

Color Usage

✅ CORRECT                           ❌ WRONG
var(--bg-primary)                    bg-white
var(--fg-secondary)                  text-gray-500
var(--border-primary)                border-slate-200

Verification Command:

# Find hardcoded colors (should return empty)
grep -rE "#[0-9A-Fa-f]{3,6}|rgb\(|rgba\(" --include="*.tsx" --include="*.css" | grep -v "var(--"

# Find forbidden Tailwind classes
grep -rE "bg-white|bg-black|text-white|text-black|border-white|border-black" --include="*.tsx"

Border Patterns (Style 2 Syntax)

// ✅ CORRECT - Subtle, supportive (Style 2 mapped classes)
className = 'border border-border-secondary hover:border-border-primary';

// ❌ WRONG - Harsh, dominant
className = 'border-2 border-white';
className = 'border border-brand'; // Never brand color for borders

Brand Color (Aperol #FE5102) Usage

ALLOWED                              FORBIDDEN
─────────────────────────────────────────────────────
Primary CTA buttons                  Borders
Active/selected states               Backgrounds (except buttons)
Badge accents                        Decorative elements
Link hover states                    Large areas

2. Component Patterns

React Aria Requirement

All interactive elements MUST use React Aria Components:

// ✅ CORRECT
import { Button, Input, Select } from 'react-aria-components';

// ❌ WRONG
<button onClick={...}>  // Missing accessibility
<input type="text" />   // Missing ARIA support