karimo-overview: Skill for Claude Code

Writing Plans

This skill activates when the user requests implementation planning, architecture design, feature roadmaps, or asks to "plan", "design", or "architect" a solution. Also activates when starting complex multi-file changes.

---

Core Philosophy

Write comprehensive implementation plans assuming the reader has zero context for our codebase but deep development expertise. Plans should enable any skilled developer—or parallel agent—to execute independently with zero additional guidance.

BOS Integration: Every plan must account for our design system, component patterns, and brand voice requirements at the architecture level.

---

Plan Structure (Required Sections)

1. Header Block

# Implementation Plan: [Feature Name]

**Goal**: [One-sentence outcome statement]
**Architecture**: [High-level approach]
**Tech Stack**: Next.js 16+, React 19, TypeScript strict, Tailwind CSS, React Aria
**Design System**: BOS-3.0 (Charcoal/Vanilla/Aperol palette, semantic tokens)
**Created**: YYYY-MM-DD

2. Design System Checklist

Before any UI task, verify:

• Components use semantic CSS variables (--bg-primary, --fg-secondary, etc.)
• Borders follow 40% opacity pattern (border-border-secondary)
• Brand color (Aperol) reserved for CTAs/active states only
• Interactive elements use React Aria Components
• Warm neutrals (Charcoal/Vanilla) instead of pure black/white

3. Task Breakdown

Each task represents 2-5 minutes of work. Use this granularity:

### Task 1: Create component skeleton

**File**: `components/feature/FeatureName.tsx`
**Type**: Component (React Aria base)
**Design Token Requirements**:

- Background: `bg-bg-secondary`
- Border: `border-border-secondary`
- Text: `text-fg-primary`

**Steps**:

1. Write failing test in `__tests__/FeatureName.test.tsx`
2. Verify test fails (RED)
3. Implement minimal component
4. Verify test passes (GREEN)
5. Commit: `feat(feature): add FeatureName component skeleton`

**Code**:
\`\`\`tsx
// **tests**/FeatureName.test.tsx
import { render, screen } from '@testing-library/react';
import { FeatureName } from '../FeatureName';

describe('FeatureName', () => {
it('renders with BOS design tokens', () => {
render(<FeatureName />);
// Verify semantic token usage
expect(screen.getByRole('region')).toHaveClass('bg-bg-secondary');
});
});
\`\`\`

**Expected Output**:
\`\`\`
FAIL **tests**/FeatureName.test.tsx
FeatureName
✕ renders with BOS design tokens (5ms)
\`\`\`