# Aica

> Provides Kelvin Garr's fixed AICA brand identity and Next.js 14 implementation guide for building his personal sites and AICA-branded projects.

- Skill: `majiayu000/aica` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/aica`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/aica/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media, Web & Frontend, Branding & Logos, Design Systems, Frontend Frameworks
- Tags: Aica, Brand Identity, Design System, Framer Motion, Nextjs, Supabase, Visual Identity
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/majiayu000/aica

---


# 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