@exreve/exk 1.0.0

package/shared/types.ts

@@ -0,0 +1,488 @@
+// ============ Core Types ============
+
+export interface ChoiceRequest {
+  choiceId: string
+  question: string
+  options: Array<{ label: string; value: string }>
+  timeout?: number
+}
+
+export interface ChoiceResponse {
+  choiceId: string
+  selectedValue: string | null
+}
+
+export interface Schedule {
+  scheduleId: string
+  name: string
+  intervalMinutes: number
+  prompts: string[]
+  enabled: boolean
+  paused?: boolean
+  continuous?: boolean
+  lastRun?: string
+  nextRun?: string
+  runningPrompts?: string[]
+}
+
+export interface Project {
+  projectId: string
+  deviceId: string
+  name: string
+  path: string
+  sourcePath?: string
+  guidelines?: string // Per-project guidelines/prompts for Claude agent
+  schedules?: Schedule[]
+  archived?: boolean // Whether the project is archived
+  createdAt: string
+  updatedAt: string
+}
+
+export interface Session {
+  id: string
+  projectId: string
+  deviceId: string
+  createdAt: string
+  logFile: string
+  status: 'idle' | 'active' | 'processing'
+  model: string // AI model to use (e.g., 'glm-5', 'glm-4.7', 'glm-4.5-air')
+  name?: string // Optional: AI-generated session name from first prompt
+}
+
+export interface Device {
+  deviceId: string
+  name: string
+  ipAddress?: string
+  hostname?: string
+  email?: string
+  approved?: boolean
+  approvedAt?: string
+  registeredAt: string
+  lastSeen: string
+  guidelines?: string // Account-level guidelines/prompts for Claude agent
+  cloudflared?: {
+    authenticated: boolean
+    authenticatedAt?: string
+    accountId?: string
+    accountName?: string
+    apiToken?: string // API token (not exposed to frontend, only stored)
+    zoneId?: string
+    tunnelId?: string // Tunnel ID configured on device
+    tunnelName?: string // Tunnel name configured on device
+  }
+  containers?: {
+    enabled: boolean
+    runtime?: 'docker' | 'podman'
+    version?: string
+    activeContainers?: Array<{
+      containerId: string
+      name: string
+      image: string
+      status: 'running' | 'stopped' | 'exited' | 'paused'
+      ports: Array<{ host: number; container: number }>
+      createdAt: string
+    }>
+  }
+}
+
+export interface Script {
+  id: string
+  name: string
+  description: string
+  command: string
+  createdAt: string
+}
+
+export interface Enhancer {
+  id: string
+  title: string
+}
+
+export interface User {
+  id: string
+  email: string
+  createdAt: string
+  lastLoginAt?: string
+  settings?: {
+    whisperModel?: 'small' | 'turbo'
+    enabledModules?: string[]
+    moduleSettings?: Record<string, any>
+  }
+}
+
+export interface PromptMessage {
+  sequence: number
+  output: SessionOutput
+}
+
+export interface Prompt {
+  promptId: string
+  sessionId: string
+  text: string
+  status: 'pending' | 'running' | 'completed' | 'error' | 'cancelled'
+  createdAt: string
+  startedAt?: string
+  completedAt?: string
+  messages?: SessionOutput[] // Optional in-memory cache
+}
+
+export interface SessionOutput {
+  type: 'stdout' | 'stderr' | 'exit' | 'system' | 'user' | 'assistant' | 'tool_result' | 'tool_progress' | 'result' | 'auth_status' | 'progress' | 'stream_event' | 'todo_write'
+  data: string | object
+  timestamp: number
+  metadata?: {
+    messageType?: string
+    subtype?: string
+    toolName?: string
+    toolResult?: any
+    toolUseId?: string
+    parentToolUseId?: string | null
+    progress?: {
+      current?: number
+      total?: number
+      message?: string
+    }
+    [key: string]: any
+  }
+}
+
+// ============ Socket Event Data Types ============
+
+export interface ClientInfo {
+  type: 'web' | 'cli'
+  deviceId?: string
+  userEmail?: string // User email for web clients
+}
+
+export interface RegisterData {
+  type: 'web' | 'cli'
+  deviceId?: string
+}
+
+export interface SessionSubscribeData {
+  sessionId: string
+  // Note: Sync is now prompt-based, not session-based
+  // Clients sync individual prompts via prompt:sync
+}
+
+
+export interface SessionPromptData {
+  sessionId: string
+  prompt: string
+  promptId?: string // Optional when sending from client, required when routing to device
+  enhancers?: string[] // Optional: list of skill/enhancer names to apply
+  projectPath?: string // Optional: project path when routing to device
+  model?: string // Optional: AI model to use for this session
+  enabledModules?: string[] // Optional: list of enabled module IDs (sent by backend to CLI)
+  moduleSettings?: Record<string, any> // Optional: per-module settings (sent by backend to CLI)
+}
+
+export interface DeviceRegisterData {
+  deviceId: string
+  name?: string
+  ipAddress?: string
+  hostname?: string
+  email?: string
+}
+
+export interface ScriptCreateData {
+  name: string
+  description: string
+  command: string
+}
+
+export interface ScriptRunData {
+  scriptId: string
+}
+
+export interface ProjectCreateData {
+  deviceId: string
+  name: string
+  path: string
+  sourcePath?: string
+  projectId?: string // Optional, backend generates if not provided
+}
+
+export interface ProjectListData {
+  deviceId?: string
+}
+
+export interface ProjectDeleteData {
+  projectId: string
+}
+
+export interface SessionCreateData {
+  projectId: string
+  model?: string // Optional: AI model to use (defaults to glm-5.1)
+}
+
+// ============ Project Configuration Types ============
+
+export interface ProjectApp {
+  name: string
+  description?: string
+  type: 'http' | 'tcp' | 'udp' | 'websocket' | 'grpc' | 'other'
+  port?: number
+  protocol?: string
+  directory?: string // Directory where this app is located (relative to project root, empty string for root)
+  framework?: string // e.g., 'react', 'express', 'fastapi', 'django'
+  appType?: 'static-frontend' | 'backend' // Detected app type for runner selection
+  buildDir?: string // Build output directory for static frontends (dist/build/public)
+  env?: Record<string, string> // Environment variables
+  endpoints?: string[] // HTTP endpoints/routes (e.g., ['/api', '/api/v1', '/'])
+  healthCheck?: {
+    url?: string
+    command?: string
+  }
+  buildCommand?: string
+  startCommand: string // Required: how to start the app
+  stopCommand?: string // Optional: how to stop the app (defaults to killing process)
+  restartCommand?: string // Optional: how to restart (defaults to stop + start)
+  dependencies?: string[]
+}
+
+export interface ProjectConfig {
+  version: string
+  projectName: string
+  description?: string
+  apps: ProjectApp[] // Renamed from services
+  directories?: string[] // Multiple directories/apps in the project
+  metadata?: {
+    analyzedAt?: string
+    analyzedBy?: string
+    framework?: string
+    language?: string
+    packageManager?: string
+  }
+}
+
+export interface ProjectConfigData {
+  projectId: string
+  config: ProjectConfig
+}
+
+export interface ProjectConfigUpdateData {
+  projectId: string
+  config: Partial<ProjectConfig>
+}
+
+// ============ Socket Events Interface ============
+
+export interface SocketEvents {
+  // Client → Server
+  register: (data: RegisterData) => void
+  'session:subscribe': (data: SessionSubscribeData) => void
+  'session:unsubscribe': (data: SessionSubscribeData) => void
+  'project:create': (data: ProjectCreateData, callback: (response: { success: boolean; project?: Project; error?: string }) => void) => void
+  'project:update:guidelines': (data: { projectId: string; guidelines: string }, callback: (response: { success: boolean; project?: Project; error?: string }) => void) => void
+  'project:list': (data: ProjectListData & { includeArchived?: boolean }, callback: (response: { projects: Project[] }) => void) => void
+  'project:delete': (data: ProjectDeleteData, callback: (response: { success: boolean; error?: string }) => void) => void
+  'project:archive': (data: { projectId: string; archived: boolean }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'device:update:guidelines': (data: { deviceId: string; guidelines: string }, callback: (response: { success: boolean; device?: Device; error?: string }) => void) => void
+  'session:create': (data: SessionCreateData, callback: (response: { success: boolean; session?: Session; error?: string }) => void) => void
+  'session:update:model': (data: { sessionId: string; model: string }, callback: (response: { success: boolean; session?: Session; error?: string }) => void) => void
+  'session:delete': (data: { sessionId: string }, callback: (response: { success: boolean }) => void) => void
+  'session:prompt': (data: SessionPromptData, callback: (response: { success: boolean; promptId?: string; error?: string }) => void) => void
+  'prompts:list': (data: { sessionId: string }, callback: (response: { prompts: Prompt[]; error?: string }) => void) => void
+  'prompt:messages': (data: { promptId: string; fromTimestamp?: number }, callback: (response: { promptId: string; messages: SessionOutput[]; latestTimestamp: number; hasMore: boolean; error?: string }) => void) => void
+  'prompt:sync': (data: { promptId: string; lastTimestamp?: number }, callback: (response: { promptId: string; messages: SessionOutput[]; latestTimestamp: number; hasMore: boolean; error?: string }) => void) => void
+  'device:register': (data: DeviceRegisterData, callback: (response: { success: boolean; device?: Device }) => void) => void
+  'sessions:list': (callback: (response: { sessions: Session[] }) => void) => void
+  'devices:list': (callback: (response: { devices: Device[] }) => void) => void
+  'scripts:list': (callback: (response: { scripts: Script[] }) => void) => void
+  'script:create': (data: ScriptCreateData, callback: (response: { success: boolean; script?: Script }) => void) => void
+  'script:run': (data: ScriptRunData, callback: (response: { success: boolean; error?: string }) => void) => void
+  'app:start': (data: { projectId: string; appName: string }, callback: (response: { success: boolean; error?: string; processId?: string }) => void) => void
+  'app:stop': (data: { projectId: string; appName: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'app:restart': (data: { projectId: string; appName: string }, callback: (response: { success: boolean; error?: string; processId?: string }) => void) => void
+  'app:status': (data: { projectId: string; appName?: string }, callback: (response: { success: boolean; apps?: Array<{ name: string; running: boolean; processId?: string; pid?: number }>; error?: string }) => void) => void
+  'app:logs': (data: { projectId: string; appName: string; follow?: boolean }, callback: (response: { success: boolean; logs?: string; error?: string }) => void) => void
+  'cloudflared:check': (data: { deviceId: string }, callback: (response: { success: boolean; installed: boolean; hasCert: boolean; authenticated: boolean; tunnelId?: string; tunnelName?: string; error?: string }) => void) => void
+  'cloudflared:sync': (data: { deviceId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'cloudflared:login:start': (data: { deviceId: string }, callback: (response: { success: boolean; loginUrl?: string; alreadyLoggedIn?: boolean; certPath?: string; error?: string }) => void) => void
+  'cloudflared:login:complete': (data: { deviceId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'cloudflared:regenerate': (data: { deviceId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'cloudflared:tunnels:list': (data: { deviceId: string }, callback: (response: { success: boolean; tunnels?: Array<{ id: string; name: string; created_at: string }>; error?: string }) => void) => void
+  'cloudflared:routes:list': (data: { deviceId: string; tunnelId?: string }, callback: (response: { success: boolean; routes?: Array<{ id: string; name: string; type: string; content: string; zone_name: string }>; error?: string }) => void) => void
+  'cloudflared:route:get': (data: { deviceId: string; tunnelId: string; routeId: string; hostname: string }, callback: (response: { success: boolean; route?: { hostname: string; port: number }; error?: string }) => void) => void
+  'cloudflared:route:create': (data: { deviceId: string; tunnelId: string; hostname: string; port: number; zoneId?: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'cloudflared:route:update': (data: { deviceId: string; tunnelId: string; routeId: string; hostname: string; port: number; zoneId?: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'cloudflared:route:delete': (data: { deviceId: string; tunnelId: string; routeId: string; hostname: string; zoneId?: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'github:status': (data: { projectId: string }, callback: (response: { success: boolean; isRepo?: boolean; hasChanges?: boolean; branch?: string; remote?: string; changedFiles?: Array<{ path: string; status: string }>; changesCount?: number; error?: string }) => void) => void
+  'fs:list': (data: { deviceId: string; dirPath: string }, callback: (response: { success: boolean; entries?: Array<{ name: string; path: string; isDir: boolean }>; error?: string }) => void) => void
+  'fs:write': (data: { deviceId: string; filePath: string; content: string; encoding?: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'github:commit': (data: { projectId: string; message?: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'github:push': (data: { projectId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'github:discard': (data: { projectId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'schedule:add': (data: { projectId: string; name: string; intervalMinutes?: number; prompts: string[]; continuous?: boolean }, callback: (response: { success: boolean; schedule?: Schedule; error?: string }) => void) => void
+  'schedule:update': (data: { projectId: string; scheduleId: string; name?: string; intervalMinutes?: number; prompts?: string[]; enabled?: boolean; paused?: boolean; continuous?: boolean }, callback: (response: { success: boolean; schedule?: Schedule; error?: string }) => void) => void
+  'schedule:trigger': (data: { projectId: string; scheduleId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'schedule:delete': (data: { projectId: string; scheduleId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  // Container management
+  'container:check': (data: { deviceId: string }, callback: (response: { success: boolean; enabled: boolean; runtime?: 'docker' | 'podman'; version?: string; error?: string }) => void) => void
+  'container:list': (data: { deviceId: string }, callback: (response: { success: boolean; containers?: Array<{ containerId: string; name: string; image: string; status: string; ports: Array<{ host: number; container: number }>; createdAt: string }>; error?: string }) => void) => void
+  'container:start': (data: { deviceId: string; name: string; image: string; ports?: Array<{ host: number; container: number }>; env?: Record<string, string>; runAsRoot?: boolean }, callback: (response: { success: boolean; containerId?: string; error?: string }) => void) => void
+  'container:stop': (data: { deviceId: string; containerId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'container:remove': (data: { deviceId: string; containerId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'container:logs': (data: { deviceId: string; containerId: string; lines?: number }, callback: (response: { success: boolean; logs?: string; error?: string }) => void) => void
+  // Device token generation (for container auth bypass)
+  'device:generate-token': (data: { deviceId: string; description?: string }, callback: (response: { success: boolean; token?: string; error?: string }) => void) => void
+  'device:list-tokens': (data: { deviceId: string }, callback: (response: { success: boolean; tokens?: Array<{ token: string; createdAt: string; lastUsed?: string; description?: string }>; error?: string }) => void) => void
+  'device:revoke-token': (data: { deviceId: string; token: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  // User settings
+  'user:settings:get': (callback: (response: { success: boolean; settings?: { whisperModel?: string; userChoiceEnabled?: boolean }; error?: string }) => void) => void
+  // User choice feedback
+  'user:choice:response': (data: { sessionId: string; choiceId: string; selectedValue: string | null }) => void
+  // Image generation
+  'image:generate': (data: { prompt: string }, callback: (response: { success: boolean; imageUrl?: string; error?: string }) => void) => void
+  // Image save to client
+  'image:save': (data: { images: Array<{ name: string; data: string }> }, callback: (response: { success: boolean; savedCount?: number; error?: string }) => void) => void
+
+  // Server → Client
+  registered: (data: { socketId: string; type: string }) => void
+  'session:created': (session: Session) => void
+  'session:updated': (session: Session) => void
+  'session:deleted': (data: { sessionId: string }) => void
+  'session:status:updated': (data: { sessionId: string; status: 'idle' | 'active' | 'processing' }) => void
+  'prompt:created': (data: { promptId: string; sessionId: string; text: string; status: 'pending' | 'running' | 'completed' | 'error' | 'cancelled' }) => void
+  'prompt:cancel': (data: { promptId: string; sessionId: string }, callback: (response: { success: boolean; error?: string }) => void) => void
+  'prompt:updated': (data: Prompt) => void
+  'session:state': (data: { sessionId: string; prompts: Prompt[]; isActive: boolean }) => void
+  'prompt:sync:messages': (data: { promptId: string; messages: SessionOutput[]; latestTimestamp: number; hasMore: boolean }) => void
+  'prompt:output': (data: { sessionId: string; promptId: string; type: string; data: string; timestamp: number; metadata?: any }) => void
+  'session:exited': (data: { sessionId: string; exitCode: number | null }) => void
+  'session:result': (data: { sessionId: string; promptId: string; exitCode: number | null }) => void
+  'session:transcription': (data: { text: string }) => void
+  'session:processing': (data: { status: string }) => void
+  'session:prompt:received': (data: { sessionId: string; prompt: string; timestamp: number }) => void
+  'session:error': (data: { error: string }) => void
+  'device:registered': (device: Device) => void
+  'project:created': (project: Project) => void
+  'project:updated': (project: Project) => void
+  'project:deleted': (data: { projectId: string }) => void
+  'device:updated': (device: Device) => void
+  'projects:list': (data: { projects: Project[] }) => void
+  'project:config:updated': (data: { projectId: string; config: ProjectConfig }) => void
+  'project:config:analyzed': (data: { projectId: string; config: ProjectConfig }) => void
+  'project:config:analyze:error': (data: { projectId: string; error: string }) => void
+  'script:created': (script: Script) => void
+  'script:started': (data: { scriptId: string; script: Script }) => void
+  'app:started': (data: { projectId: string; appName: string; processId: string; pid?: number }) => void
+  'app:stopped': (data: { projectId: string; appName: string }) => void
+  'app:restarted': (data: { projectId: string; appName: string; processId: string; pid?: number }) => void
+  'app:status:update': (data: { projectId: string; apps: Array<{ name: string; running: boolean; processId?: string; pid?: number }> }) => void
+  'app:log': (data: { projectId: string; appName: string; log: string; timestamp: number }) => void
+  'cloudflared:status:updated': (data: { deviceId: string; authenticated: boolean; accountId?: string; accountName?: string }) => void
+  'cloudflared:login:url': (data: { deviceId: string; loginUrl: string }) => void
+  'cloudflared:login:completed': (data: { deviceId: string }) => void
+  'github:status:updated': (data: { projectId: string; isRepo: boolean; hasChanges: boolean; branch?: string; remote?: string; changedFiles?: Array<{ path: string; status: string }>; changesCount?: number }) => void
+  'schedule:added': (data: { projectId: string; schedule: Schedule }) => void
+  'schedule:updated': (data: { projectId: string; schedule: Schedule }) => void
+  'schedule:deleted': (data: { projectId: string; scheduleId: string }) => void
+  'container:status:updated': (data: { deviceId: string; containers: Array<{ containerId: string; name: string; image: string; status: string; ports: Array<{ host: number; container: number }>; createdAt: string }> }) => void
+  'user:choice:request': (data: { sessionId: string; choiceId: string; question: string; options: Array<{ label: string; value: string }>; timeout?: number }) => void
+}
+
+// ============ Response Types ============
+
+export interface SuccessResponse {
+  success: boolean
+  error?: string
+}
+
+export interface SessionResponse extends SuccessResponse {
+  session?: Session
+}
+
+export interface DeviceResponse extends SuccessResponse {
+  device?: Device
+}
+
+export interface ScriptResponse extends SuccessResponse {
+  script?: Script
+}
+
+export interface SessionsListResponse {
+  sessions: Session[]
+}
+
+export interface DevicesListResponse {
+  devices: Device[]
+}
+
+export interface ScriptsListResponse {
+  scripts: Script[]
+}
+
+export interface EnhancersListResponse {
+  enhancers: Enhancer[]
+}
+
+// ============ Module Types ============
+
+export type ModuleCategory = 'agent' | 'ui' | 'integration' | 'experimental'
+
+export type ModuleSettingType = 'boolean' | 'string' | 'number' | 'select' | 'multiselect'
+
+export interface ModuleSettingSchema {
+  key: string
+  type: ModuleSettingType
+  label: string
+  description?: string
+  default?: any
+  options?: Array<{ label: string; value: any }>
+  required?: boolean
+}
+
+export interface ModulePermission {
+  resource: string
+  actions: string[]
+}
+
+export interface ModuleRoute {
+  path: string
+  component: string
+  permissions?: string[]
+}
+
+export interface ModuleEndpoint {
+  method: 'get' | 'post' | 'put' | 'delete'
+  path: string
+  handler: string
+}
+
+export interface ModuleFrontendConfig {
+  socketEvents?: string[]
+  routes?: ModuleRoute[]
+}
+
+export interface ModuleBackendConfig {
+  socketHandlers?: Record<string, string>
+  endpoints?: ModuleEndpoint[]
+  middleware?: string[]
+}
+
+export interface ModuleState {
+  initial?: Record<string, any>
+  persistKey?: string
+}
+
+export interface Module {
+  id: string
+  name: string
+  description: string
+  icon?: string
+  version: string
+  category: ModuleCategory
+  enabledByDefault?: boolean // If true, module is enabled by default for new users
+  settingsSchema?: ModuleSettingSchema[]
+  permissions?: ModulePermission[]
+  frontend?: ModuleFrontendConfig
+  backend?: ModuleBackendConfig
+  state?: ModuleState
+}
+
+export interface ModuleRegistry {
+  modules: Record<string, Module>
+  enabledModules: string[]
+}

package/skills/code-review.md

@@ -0,0 +1,49 @@
+---
+name: code-review
+description: Thoroughly review code for quality, security, performance, and best practices. Use this skill when the user asks to review, audit, or analyze code.
+---
+
+This skill guides comprehensive code reviews that identify issues, security vulnerabilities, performance problems, and violations of best practices.
+
+## Review Process
+
+1. **Understanding Context**: Identify the code's purpose, language, framework, and intended use case.
+
+2. **Security Analysis**: Look for:
+   - SQL injection, XSS, CSRF vulnerabilities
+   - Hardcoded secrets or API keys
+   - Insecure authentication/authorization
+   - Dependency vulnerabilities
+   - Input validation issues
+
+3. **Code Quality**: Assess:
+   - Code organization and structure
+   - Naming conventions
+   - Error handling
+   - Edge case coverage
+   - Code duplication
+
+4. **Performance**: Evaluate:
+   - Algorithmic complexity
+   - Memory usage patterns
+   - Database query efficiency
+   - Caching opportunities
+   - Unnecessary re-renders (frontend)
+
+5. **Best Practices**: Check for:
+   - Language/framework idioms
+   - Design patterns
+   - SOLID principles
+   - Testing coverage gaps
+   - Documentation issues
+
+## Output Format
+
+Provide a structured review with:
+- **Summary**: Overall assessment and priority issues
+- **Critical Issues**: Security vulnerabilities or bugs that must be fixed
+- **Warnings**: Potential problems or code smells
+- **Suggestions**: Improvements for code quality and maintainability
+- **Positive Notes**: Well-implemented aspects
+
+Be specific with file:line references and provide code examples for fixes.

package/skills/front-glass.md

@@ -0,0 +1,36 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality using clearglass/glassmorphism aesthetic. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+---
+
+This skill guides **clearglass (glassmorphism)** frontends: production-grade, distinctive, avoiding generic "AI slop." Implement real code with attention to aesthetic detail. The user provides requirements (component, page, app) and may give purpose, audience, or constraints.
+
+## Design Thinking
+
+Before coding: **Purpose**—what problem, who uses it. **Tone**—iOS-inspired frosted glass, premium and refined (calm, confident, slightly iridescent); not brutalist or playful. **Constraints**—contrast and readability non-negotiable. **Differentiation**—frosted panels with a subtle rainbow shimmer on the edges; unmistakable and cohesive. Execute with precision; keep glass to nav, modals, cards (two or three per screen), not everything.
+
+## Clearglass Sentiment
+
+**Core**: Frosted glass over dark space, hint of iridescence, warm gold accent. iOS control center meets dark high-end app—layers you can almost see through, soft blur, delicate borders in a spectrum (pink → orange → yellow → green → cyan → purple → pink). Dark background so glass floats; gold sparingly for primary actions and highlights. Refined, uncluttered, quietly luxurious.
+
+- **Glass**: Secondary only (nav, modals, cards, sidebars). Strong blur and slight saturation; enough opacity for readable text. Two or three glass surfaces per screen.
+- **Iridescence**: Subtle rainbow gradient on panel edges—thin shimmer, understated. Separates clearglass from generic glassmorphism.
+- **Color**: Dark base; glass semi-transparent, tinted dark. White/near-white text with subtle shadow when needed. Gold only for CTAs and key highlights. Soft white/light-gray borders at low opacity.
+- **Typography**: Clear, confident; system fonts, medium-to-bold. Generous size; contrast and light shadow so text stays legible on glass.
+- **Motion**: Smooth, short transitions; slight scale-down on press. No flashy or drawn-out animation—personality from glass and edge.
+- **Space**: Generous padding and rounding; negative space so few glass elements stand out. Asymmetry when it serves hierarchy.
+- **Depth**: Layered shadows and faint inner highlight so panels feel lifted. Transparent root chrome over map/gradient/image when appropriate.
+
+**Text vs. icon-only**: Where **text and readability matter** (labels, cards, modals, nav with words)—use full clearglass: darker, more opaque glass; iridescent edges; text shadows. Where **only an icon or compact control matters** (floating filter/location button over a map)—lighter, whitish glass; clearer border; compact round/pill; no text, so no readability trade-off. Choose per element: full clearglass for reading; lighter filter-button style for recognize-and-tap.
+
+## Rules
+
+**DO**: Glass sparingly. Full clearglass where text matters; lighter glass for icon-only controls. Contrast and readability above all for text. Rainbow shimmer on content panels; gold for primary actions only. System fonts. Respect reduced motion/transparency; solid fallbacks where blur isn’t supported.
+
+**DON’T**: Cover the screen in glass; sacrifice readability; use thin or decorative fonts; rely on color alone; ignore a11y or performance; drift to generic AI style.
+
+**A11y & performance**: WCAG contrast; legible text on glass (shadow when needed). Honor reduced motion/transparency. Few blurred layers—a few well-placed elements are enough.
+
+---
+
+**Remember**: Clearglass = frosted glass over dark, rainbow on the edges, gold for emphasis. Precision and restraint; sentiment consistent and memorable.

package/skills/frontend-design.md

@@ -0,0 +1,41 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.