araskova-cookbook

The official Araskova Cookbook — design system, code standards, production component library, branding guidelines, and AI agent enforcement framework for all Araskova software products.

Built by Araskova · Deep Tech Company · Kerala, India · araskova.com

⚠ Why This Exists (CRITICAL)

This is not just a UI library. This is an Autonomic Enforcement Framework for AI agents.

As we use LLM-powered tools (Cursor, Claude, Copilot, Gemini) to write software, they often default to generic, uninspired, "MVP-style" code (e.g., standard Tailwind colors, boring layouts). That is unacceptable at Araskova.

The araskova-cookbook solves this by aggressively injecting the "Illusive Standard" directly into the system prompts of every agent working in the project. It forces them to use our exact design tokens, typography scale, scroll reveals, and micro-animations on every single prompt, without the user ever having to remind them.

What Is This?

The araskova-cookbook package does three things:

1. Agent Enforcement — After running init, every AI agent (Cursor, Claude, Gemini, Copilot, Codex) automatically reads and enforces the Araskova Cookbook on every single prompt. The user doesn't need to say anything — it just works.

2. Component Snippets — Real, production-ready components from the Araskova codebase are available via CLI. Copy them directly into your project.

3. Design Tokens — Import official Araskova brand tokens directly into TypeScript/JS code.

Installation

# npm
npm install araskova-cookbook

# pnpm
pnpm add araskova-cookbook

# bun (preferred)
bun add araskova-cookbook

Quick Start

Step 1 — Run init in your project

# Bun (Preferred)
bunx araskova-cookbook init

# pnpm
pnpm dlx araskova-cookbook init

# npm
npx araskova-cookbook init

This writes the following files into your project root:

| File | Agent | |---|---| | .cursorrules | Cursor IDE | | CLAUDE.md | Claude Code | | GEMINI.md | Gemini / Antigravity IDE | | AGENTS.md | OpenAI Codex / Generic | | .github/copilot-instructions.md | GitHub Copilot |

After this, every AI agent in your project automatically enforces the Araskova Cookbook on every prompt. No user input needed.

CLI Commands

# Initialize agent enforcement in your project
araskova-cookbook init

# Scaffold a component and its dependencies into your project
araskova-cookbook add Hero
araskova-cookbook add Nav

# Inject GitHub Actions CI/CD enforcement for PRs
araskova-cookbook init-ci

# Generate an isolated Vibecoder sandbox environment
araskova-cookbook sandbox

# Export design tokens as JSON for external apps (Tauri/React Native)
araskova-cookbook export-tokens

# List all available component snippets
araskova-cookbook snippets

# Print a specific component snippet
araskova-cookbook snippet Hero

# Print the full cookbook
araskova-cookbook read

# Get the path to COOKBOOK.md
araskova-cookbook path

# Print version
araskova-cookbook version

Available Snippets

| Name | Category | Description | |---|---|---| | SiteLayout | layout | Root layout wrapper (Preloader + Cursor + Nav + Footer) | | Nav | layout | Fixed nav bar with mobile overlay | | Footer | layout | Footer with character-stagger wordmark | | Preloader | layout | Cinematic loading screen | | Hero | home | Full-viewport hero with live clock + wordmark | | HorizontalScroll | home | Capabilities hover-reveal list | | StatsBar | home | Stats grid with count-up animations | | Marquee | home | Dual-row infinite scroll marquee | | CTABanner | home | CTA section with sliding-fill button | | BrandLogo | shared | ARASKOVA wordmark (Michroma) | | CustomCursor | shared | Custom cursor dot | | PageHeader | shared | Inner-page hero header |

Design Tokens

import { tokens } from 'araskova-cookbook';

// Colors
tokens.colors.brand.accent   // '#e73f07' — Araskova Orange-Red
tokens.colors.brand.dark     // '#0a0a0a' — Page background
tokens.colors.brand.light    // '#f3f3f2' — Primary text

// Typography
tokens.typography.fontFamilies.logo     // Orbitron — headings
tokens.typography.fontFamilies.mono     // Space Mono — metadata
tokens.typography.letterSpacing.tight   // '-0.04em'

// Animation
tokens.animation.easing.spring  // 'cubic-bezier(0.16, 1, 0.3, 1)'

The Araskova Standard

Every agent operating in an Araskova project must:

• Use bg-brand-dark / text-brand-accent — never generic colors
• Use var(--font-logo) (Orbitron) for headings, var(--font-mono) (Space Mono) for labels
• Apply max-w-[1600px] mx-auto for all containers
• Use IntersectionObserver + .reveal class for scroll animations
• Apply spring easing: cubic-bezier(0.16, 1, 0.3, 1)
• Build with TanStack Start + Tailwind CSS v4 + TypeScript

License

UNLICENSED — Confidential & Proprietary. Araskova Internal Use Only.

Authored under the directive of Founder Jack Harper (Illusiveman).