litepik-dev

name	litepik-dev
description	comprehensive guide for developing, testing, and architecture within the Litepik AI Suite ecosystem

Litepik AI Suite Development Guide

This skill provides the core standards, patterns, and workflows for working on the Litepik AI Suite.

1. Architecture Overview

• Core Framework: React (Vite) + TypeScript.
• Visual Engine: React Flow (@xyflow/react) handles the canvas, nodes, and connections.
• AI Engine: services/ai/core.ts aggregates model calls.
• Critical: Currently enforced to use gemini-3-pro-preview or gemini-3-flash-preview. DO NOT change this unless explicitly authorized.
• State Management: Local React state + React Flow internal state (useNodesState, useEdgesState).

2. Directory Structure

/components
  /nodes          # Individual Node components (Research, Image, Agent, etc.)
  /common         # Shared UI (ErrorFallback, etc.)
  /MagicPrompt    # Floating AI assistant
/services
  /ai             # LLM integration (models.ts, core.ts)
  /logicEngine.ts # "Brain" converting node inputs -> outputs
/tests
  /unit           # Logic tests
  /components     # UI tests
  /integration    # Flow tests

3. Critical Patterns

A. Node Safety (The "NodeGuard" System)

Rule: NEVER export a raw node component to App.tsx. All nodes must be wrapped with withSafeNode to provide error isolation.

Incorrect:

// App.tsx
[NodeType.RESEARCH]: ResearchNode

Correct:

// App.tsx
import { withSafeNode } from './components/nodes/SafeNodeWrapper';
[NodeType.RESEARCH]: withSafeNode(ResearchNode)

B. AI Model Usage

• Strict Model: Use gemini-3-pro-preview or gemini-3-flash-preview.
• 404 Handling: The system has a hardcoded fallback in services/ai/core.ts. Do not remove the try-catch block in detectIntent.

C. Testing Standard

• Runner: Vitest + React Testing Library.
• Command: npx vitest run
• Requirement: New features must have at least one Unit Test (logic) and one Component Test (rendering).

4. Workflows

Adding a New Node

1. Define Type: Add entry to NodeType enum in types.ts.
2. Create Component: Create components/nodes/MyNewNode/index.tsx.
3. Register: Import in App.tsx and register in nodeTypes object wrapped with withSafeNode.
4. Tailwind: Use bg-slate-900, border-slate-700, text-slate-200 for consistency.

Modifying Logic

1. Update Engine: Edit services/logicEngine.ts.
2. Verify: Run npx vitest run tests/unit/LogicEngine.test.ts to ensure data transforms didn't break.

5. UI/UX Guidelines

• Theme: Dark Mode only (bg-slate-950).
• Accent: Indigo/Cyan (text-cyan-400, stroke-indigo-500).
• Glassmorphism: Use backdrop-blur-md and bg-slate-900/80 for floating panels.