code-review

name	code-review
description	Reviews code for SHEREHE brand compliance, TypeScript type safety, React best practices, security issues, and accessibility. Use when user asks to review code, check for issues, audit code quality, or validate implementation.
allowed-tools	["Read","Grep","Glob","Bash"]

SHEREHE Code Review Skill

Performs comprehensive code review for the SHEREHE event planning platform, ensuring production-ready code that follows all project standards.

When to Use This Skill

Activate this skill when the user:

• Says "review this code" or "check my code"
• Asks "is this code correct?" or "does this follow best practices?"
• Says "audit the code" or "find issues"
• Requests validation of implementation
• Asks to check for bugs or problems
• Says "make sure this is production-ready"

Review Checklist

1. SHEREHE Brand Compliance (CRITICAL)

Colors - Must Use SHEREHE Palette

• ❌ REJECT generic colors: blue-500, gray-800, red-600, zinc-*, slate-*
• ✅ REQUIRE SHEREHE colors:
  • Purple: sherehe-purple-* (50-950 scale)
  • Coral: sherehe-coral-* (50-950 scale)
  • Pink: sherehe-pink-* (50-950 scale)
  • Rwanda cultural: rwanda-blue, rwanda-yellow, rwanda-green
  • Semantic: success-*, warning-*, error-*, info-*

Example violations:

// ❌ FAIL - Generic colors
<button className="bg-blue-500">Submit</button>
<h1 className="text-gray-800">Title</h1>
<div className="border-zinc-200">Content</div>

// ✅ PASS - SHEREHE colors
<button className="bg-sherehe-coral-500">Submit</button>
<h1 className="text-sherehe-purple-700">Title</h1>
<div className="border-sherehe-purple-200">Content</div>

Typography - Must Use Brand Fonts

• ❌ REJECT missing font classes on headings
• ✅ REQUIRE:
  • Headings/titles: font-clash-display
  • Body text: No class needed (Satoshi is default)
  • Code: font-jetbrains-mono

Example violations:

// ❌ FAIL - No font specified for heading
<h1 className="text-4xl font-bold">Welcome</h1>

// ✅ PASS - Proper font usage
<h1 className="font-clash-display text-4xl font-bold text-sherehe-purple-700">
  Welcome to SHEREHE
</h1>

Components - Must Use Predefined Classes

• ❌ REJECT custom button/card styles
• ✅ REQUIRE predefined components:
  • Buttons: btn-primary, btn-secondary, btn-outline
  • Cards: card-sherehe, card-coral, card-purple
  • Badges: badge-confirmed, badge-pending, badge-cancelled
  • Effects: shadow-coral-glow, shadow-purple-glow, glass-effect

Example violations:

// ❌ FAIL - Custom button style
<button className="bg-blue-500 rounded px-4 py-2 hover:bg-blue-600">
  Click Me
</button>

// ✅ PASS - Predefined component
<button className="btn-primary">Click Me</button>

Gradients - Must Use Predefined Gradients

• ❌ REJECT bg-gradient-to-* with custom colors
• ✅ REQUIRE:
  • text-gradient-celebration - Main brand gradient
  • text-gradient-brand - Secondary gradient
  • bg-gradient-celebration - Background gradient
  • bg-gradient-brand - Background gradient

Example violations:

// ❌ FAIL - Custom gradient
<h1 className="bg-linear-to-r from-blue-500 to-purple-500">Title</h1>

// ✅ PASS - Predefined gradient
<h1 className="text-gradient-celebration">Title</h1>

Validation Messages - Must Use SHEREHE Tone

• ❌ REJECT technical/generic error messages
• ✅ REQUIRE friendly, culturally relevant messages with emojis

Example violations:

// ❌ FAIL - Generic messages
{
  email: "Invalid email format",
  password: "Required field"
}

// ✅ PASS - SHEREHE tone
{
  email: "Hey there! We need your email to send you event updates 📧",
  password: "Let's make it strong! Use at least 8 characters 🔒"
}

2. TypeScript Type Safety (NO EXCEPTIONS)

Banned Types & Patterns

• ❌ REJECT any type - ALWAYS fail review
• ❌ REJECT unknown type - Must define proper types
• ❌ REJECT @ts-ignore, @ts-nocheck, @ts-expect-error without description
• ❌ REJECT as any type assertions
• ❌ REJECT implicit any (function params without types)

Example violations:

// ❌ FAIL - Using any
function handleData(data: any) {}
const result = response as any;

// ❌ FAIL - Using unknown
function process(input: unknown) {}

// ❌ FAIL - Implicit any
function calculate(price) {} // No type on param

// ✅ PASS - Proper typing
interface EventData {
  id: string;
  name: string;
  date: Date;
}

function handleData(data: EventData) {}

Required Type Patterns

• ✅ REQUIRE explicit interfaces/types for all data structures
• ✅ REQUIRE proper typing on all function parameters
• ✅ REQUIRE exported types alongside components
• ✅ REQUIRE union types for variants/states

3. React 19 & Next.js 16 Best Practices

Server vs Client Components

• ✅ VERIFY Server Components by default (no 'use client')
• ✅ VERIFY 'use client' only when necessary (hooks, events, browser APIs)
• ❌ REJECT database imports in client components
• ✅ VERIFY async/await in Server Components for data fetching

Example violations:

// ❌ FAIL - Unnecessary client component
'use client';
export default function Layout({ children }) {
  return <div>{children}</div>; // No hooks or events
}

// ❌ FAIL - Server code in client component
'use client';
import { db } from '@/lib/db'; // Server-only

// ✅ PASS - Proper separation
// Server Component (no directive needed)
export default async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

Next.js 16 Params Handling

• ❌ REJECT treating params as synchronous object
• ✅ REQUIRE awaiting params Promise

Example violations:

// ❌ FAIL - Not awaiting params
export default function Page({ params }: { params: { id: string } }) {
  const id = params.id; // params is a Promise in Next.js 16
}

// ✅ PASS - Awaiting params
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
}

Data Fetching

• ❌ REJECT fetching in useEffect when Server Component is possible
• ✅ REQUIRE fetch with proper caching strategy
• ✅ REQUIRE error boundaries (error.tsx)
• ✅ REQUIRE loading states (loading.tsx or Suspense)

4. Security Issues

Critical Security Checks

• ❌ REJECT unsanitized user input
• ❌ REJECT inline event handlers with user data
• ❌ REJECT dangerouslySetInnerHTML without sanitization
• ❌ REJECT hardcoded secrets/API keys
• ❌ REJECT SQL injection vulnerabilities
• ✅ REQUIRE server-side validation for all inputs
• ✅ REQUIRE environment variables for secrets
• ✅ REQUIRE Zod/validation schema for user input

Example violations:

// ❌ FAIL - Unsanitized input
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ❌ FAIL - Hardcoded secret
const API_KEY = "sk_live_1234567890";

// ✅ PASS - Proper validation
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2).max(100)
});

const validated = schema.parse(userInput);

5. Performance Issues

Image Optimization

• ❌ REJECT <img> tags - Must use next/image
• ✅ REQUIRE width and height props
• ✅ REQUIRE priority for above-the-fold images
• ✅ REQUIRE alt text for accessibility

Bundle Size

• ❌ REJECT importing entire libraries (import _ from 'lodash')
• ✅ REQUIRE named imports from specific paths
• ❌ REJECT heavy dependencies without code splitting
• ✅ REQUIRE dynamic imports for large components

6. Accessibility (a11y)

Critical a11y Checks

• ❌ REJECT missing alt text on images
• ❌ REJECT div/span as buttons (use <button>)
• ❌ REJECT missing ARIA labels on icon buttons
• ❌ REJECT poor color contrast (WCAG AA minimum)
• ✅ REQUIRE semantic HTML
• ✅ REQUIRE keyboard navigation support
• ✅ REQUIRE focus states on interactive elements

Example violations:

// ❌ FAIL - Div as button
<div onClick={handleClick}>Click me</div>

// ❌ FAIL - Missing alt text
<Image src="/hero.jpg" width={800} height={600} />

// ✅ PASS - Proper accessibility
<button
  onClick={handleClick}
  aria-label="Close modal"
  className="focus:ring-2 focus:ring-sherehe-coral-500"
>
  <XIcon aria-hidden="true" />
</button>

7. Code Quality

Naming Conventions

• ✅ VERIFY PascalCase for components
• ✅ VERIFY camelCase for functions/variables
• ✅ VERIFY UPPER_SNAKE_CASE for constants
• ✅ VERIFY use* prefix for hooks
• ✅ VERIFY is/has/should prefix for booleans

Code Organization

• ❌ REJECT unused imports
• ❌ REJECT unused variables (except _ prefix)
• ❌ REJECT console.log in production code
• ✅ REQUIRE proper import order
• ✅ REQUIRE JSDoc for complex functions

Review Process

When activated, follow this process:

1. Identify scope: Determine which files to review

   • If user specifies files, review those
   • If user says "this code", use Read tool on open files
   • If user says "the project", scan key directories

2. Read files: Use Read tool to examine code

3. Search for violations: Use Grep to find:

   • Generic colors: className=".*(?:blue|gray|zinc|slate|red|green)-\d+
   • any type usage: :\s*any\b
   • unknown type: :\s*unknown\b
   • @ts-ignore: @ts-ignore
   • Missing await params: params\s*:\s*{\s*\w+\s*:\s*\w+\s*}

4. Categorize issues by severity:

   • 🔴 CRITICAL: Security, type safety, brand violations
   • 🟡 HIGH: Performance, accessibility
   • 🟢 MEDIUM: Code quality, best practices
   • 🔵 LOW: Style, consistency

5. Report findings in structured format:

## Code Review Results

### Files Reviewed

- app/page.tsx
- components/EventCard.tsx

### Issues Found: X

#### 🔴 CRITICAL (X issues)

**File**: `app/page.tsx:25`
**Issue**: Using `any` type
**Code**: `function handleData(data: any)`
**Fix**: Define proper interface for data
**Severity**: CRITICAL - Defeats TypeScript safety

#### 🔴 CRITICAL (X issues)

**File**: `components/EventCard.tsx:12`
**Issue**: Using generic color instead of SHEREHE brand
**Code**: `<button className="bg-blue-500">`
**Fix**: Use `className="btn-primary"` or `bg-sherehe-coral-500`
**Severity**: CRITICAL - Violates brand identity

### Summary

- Total issues: X
- Critical: X (MUST FIX)
- High: X (SHOULD FIX)
- Medium: X (RECOMMENDED)
- Low: X (OPTIONAL)

### Recommendation

[PASS ✅ | NEEDS WORK ⚠️ | REJECT ❌]

Example Usage

User: "Review my EventCard component"

Skill Actions:

1. Read components/EventCard.tsx
2. Check for SHEREHE brand compliance
3. Check TypeScript types
4. Check accessibility
5. Report findings with specific line numbers and fixes

Reference Files to Check

Before reviewing, understand the standards:

• .github/copilot-instructions.md - Complete standards
• styles/globals.css - Design system implementation
• tsconfig.json - TypeScript configuration
• eslint.config.mjs - Linting rules

Important Notes

• Be specific: Always provide file paths and line numbers
• Be helpful: Suggest exact fixes, not just problems
• Be thorough: Check all aspects, not just one category
• Be strict: SHEREHE brand compliance is non-negotiable
• Be educational: Explain WHY something is wrong

This skill ensures every line of code meets SHEREHE's production standards.