Aica

---
name: aica
description: Kelvin Garr's personal AICA brand identity and implementation framework. Use ONLY when building Kelvin's personal sites, portfolio, or AICA-branded projects. Features fixed visual identity (black glass + gold circuits + Space Grotesk) and Next.js 14 implementation guide. For client work with AICA methodology but their branding, use design-guide-updated instead.
---


# AICA Brand Skill

## Overview

This skill contains Kelvin Garr's personal AICA brand identity and implementation framework. Use this skill **ONLY** when building projects for Kelvin's personal brand.

## When to Use This Skill

**Use AICA skill when:**
- Building kelvingarr.com or AICA-branded sites
- Creating Kelvin's personal portfolio or projects
- Working on anything that should have THE AICA look (black glass + gold circuits)
- User explicitly says "use my AICA style" or "make it look like AICA"

**DO NOT use this skill when:**
- Building client work (use `design-guide-updated` instead)
- User wants their own brand colors/identity
- Creating generic UI components for other projects

## Skill Structure

This skill contains two key references:

### 1. AICA Framework (`references/aica-framework.md`)
**YOUR fixed visual identity:**
- Matte Black Base: `#020203` → `#050608` gradient
- Black Glass Surfaces: `rgba(255,255,255,0.06-0.10)` with `backdrop-blur-xl`
- Gold Circuit Accents: Primary `#F2B733`, Secondary `#E7A728`
- Typography: Space Grotesk (headlines) + Inter (body)
- Materials: Glassforium logic, cinematic lighting, physics-based motion
- Non-negotiable design DNA

### 2. AICA Implementation Guide (`references/aica-implementation-guide.md`)
**Technical implementation for AICA sites:**
- Next.js 14 App Router structure
- Supabase database setup
- Framer Motion animations
- Component architecture
- Real functionality (newsletter, contact forms)
- SEO and performance optimization

## Usage Instructions

When this skill is invoked:

1. **Read both reference files** to understand the complete AICA system
2. **Apply the fixed visual identity** (black glass + gold) - no variations
3. **Follow the technical stack** for implementation (Next.js 14 + Supabase)
4. **Maintain the AICA ethos**: Elite, cinematic, intelligent, alive

## The AICA Standard

Every AICA project must pass the Four Pillars test:

1. **Intentional**: Every element has a clear purpose
2. **Cinematic**: Premium visual polish with depth and atmosphere
3. **Intelligent**: Smart interactions, thoughtful UX
4. **Alive**: Physics-based motion, responsive feedback

## Quality Checklist

Before completing any AICA project, verify:

- [ ] Black glass + gold circuit aesthetic maintained throughout
- [ ] Space Grotesk + Inter fonts properly loaded
- [ ] Framer Motion animations are smooth and physics-based
- [ ] Mobile experience is flawless
- [ ] All forms have real functionality (not just UI)
- [ ] Performance is excellent (fast load, optimized images)
- [ ] Accessibility standards met (WCAG AA)
- [ ] Design feels elite, cinematic, and purposeful
- [ ] Would a high-end exec say "Damn, this is clean"?

## Key Distinction

**AICA skill** = "Make it look like THIS" (fixed identity)
**design-guide-updated** = "Make it look like THEIRS, but with your caliber" (methodology, their brand)

This is YOUR brand. These colors, these materials, this identity - non-negotiable.

## References

- [AICA Framework](references/aica-framework.md) - Visual identity and design DNA
- [AICA Implementation Guide](references/aica-implementation-guide.md) - Technical stack and build process