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 - Visual identity and design DNA
• AICA Implementation Guide - Technical stack and build process