karimo-overview: Skill for Claude Code

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