chravel-web

Enforce Chravel's premium dark/gold design system. Ensure new UI matches existing patterns for surfaces, typography, buttons, modals, cards, and empty states. Use when building new UI or reviewing UI changes for design consistency. Triggers on "design system", "does this match our style", "premium feel", "dark theme consistency", "gold accent".

Generate an interactive, evidence-grounded HTML architecture atlas for a codebase — a clickable "command center" mapping systems, important files, data flows, dependencies, dead/duplicate code, quality scores, and a refactor roadmap, written for both non-technical founders and engineers. Produces /codebase-atlas/{index.html,architecture-data.json,README.md}. Ships with a Chravel context addendum and instructions to swap it per repo. Triggers on "codebase atlas", "architecture atlas", "architecture dashboard", "architecture command center", "map the codebase", "codebase overview site", "technical diligence dashboard".

Generate UI screens, images, and videos that match Chravel's premium dark/gold design system. Wraps Google Stitch, Nano Banana, Higgsfield, and Seedance 2 (EvoLink) MCP servers with brand-aware prompting. Triggers on "design tool", "generate UI", "generate image", "generate video", "create visual", "brand asset", "stitch", "nano banana", "higgsfield", "seedance".

Generate polished App Store marketing screenshots with device frames, benefit headlines, and Chravel's premium dark/gold branding. Adapted from adamlyttleapps/claude-skill-aso-appstore-screenshots.

Best practices for Remotion - Video creation in React

Deep audit of AI agent architecture, tool usage, action safety, confirmation UX, orchestration quality, prompt boundaries, and mutation reliability. Use to evaluate whether an AI-powered product's tool-calling and agent flows are robust, safe, understandable, and scalable, then recommend or implement the highest-leverage fixes without breaking product behavior.

Implement and debug the Chravel AI Concierge feature — the AI travel assistant that helps with trip planning, recommendations, and coordination. Use when building concierge features, adding tool actions, or debugging AI responses. Triggers on "AI concierge", "concierge feature", "trip assistant", "AI recommendation", "concierge tool".

Gemini API reference for Chravel development. Current model specs, SDK usage, function calling patterns, and multimodal capabilities. Use when building with Gemini models, implementing function calling, using structured outputs, or needing current model specifications. Triggers on "gemini api", "gemini model", "google genai sdk", "gemini function calling", "gemini structured output".

Debug and implement Gemini API and Gemini Live voice integration in Chravel. Use when working with AI concierge, Gemini Live sessions, function calling, multimodal content, or voice interaction. Triggers on "gemini", "AI concierge bug", "voice chat", "gemini live", "function calling", "google AI".

Researches, designs, upgrades, migrates, and implements Google AI / Gemini / Vertex AI / Firebase AI Logic / Maps / Gmail / Calendar / Drive / speech / embeddings / multimodal RAG features using the latest official documentation first, with production-readiness, Supabase Edge Functions, Cloud Console setup, OAuth verification, and secret-management requirements built in. Use whenever the user asks about Gemini models, Vertex AI, Gemini Live, Google Maps grounding, embeddings, Firebase AI Logic, Google Cloud Console setup, Gmail import, OAuth scopes, Chirp, TTS/STT, multimodal RAG, model upgrades, SDK migration, or any Google API architecture or implementation decision for ChravelApp.

Deep audit for mobile parity across web, PWA, and native-wrapper experiences. Use to find feature gaps, layout drift, interaction mismatches, broken mobile-first flows, touch-target issues, empty-state inconsistencies, and platform-specific regressions, then recommend or implement the highest-leverage parity fixes without breaking product behavior.

Deep UX and design-system consistency audit for production apps. Use to identify visual drift, modal inconsistency, token mismatch, spacing variance, interaction-pattern fragmentation, and cross-platform UI divergence, then recommend or implement the highest-leverage fixes without breaking product behavior.

Create a Product Requirements Document (PRD) for a Chravel feature. Produces structured markdown with user stories, acceptance criteria, and Chravel-specific technical approach. Triggers on "write a PRD", "create PRD", "plan feature", "new feature spec", "product requirements for".

Convert a Chravel PRD markdown document to Ralph's prd.json format for autonomous multi-story execution. Triggers on "convert PRD to ralph", "set up ralph", "prepare for ralph", "create prd.json", "run ralph on this PRD".

Chravel-specific architecture audit covering feature modules, Supabase integration layers, component hierarchy, state management, and routing structure. Use when evaluating ChravelApp structure, planning major features, or assessing technical debt. Triggers on "audit chravel architecture", "how is chravel structured", "tech debt review".

Chravel-specific bug reproduction workflow. Reproduce bugs in the Chravel codebase before fixing them, with awareness of Chravel's critical paths, common regressions, and testing infrastructure. Triggers on "bug in chravel", "chravel regression", "trip loading bug", "auth bug", "reproduce this chravel bug".

Audit Chravel's mobile web and PWA experience for parity with desktop. Covers feature availability, touch ergonomics, layout density, and platform-specific behavior. Use when checking mobile experience or debugging mobile-specific issues. Triggers on "mobile parity", "PWA issue", "does this work on mobile", "mobile layout broken", "touch targets".

Prevent the top Chravel regressions — Trip Not Found, auth desync, RLS leaks, chat rendering breaks, and payment state drift. Use when making changes to trip loading, auth, realtime, or payments. Auto-triggers when editing critical path files. Triggers on "regression check", "will this break trips", "is this safe", "Trip Not Found", "auth regression".

Implement and debug Chravel's payment features — RevenueCat subscriptions, trip payment requests, expense splitting, and balance management. Use when working on payments, subscriptions, entitlements, or billing. Triggers on "payment", "RevenueCat", "subscription", "expense split", "billing", "entitlement", "balance".

Audit Chravel's performance on critical paths — trip loading, chat rendering, map interactions, and mobile responsiveness. Use when investigating slow loads, jank, excessive re-renders, or bundle size issues. Triggers on "performance", "slow loading", "janky", "re-rendering too much", "bundle size", "why is this slow".

Pre-release checklist for Chravel deploys to Vercel production. Covers build validation, auth flows, critical paths, mobile testing, and rollback planning. Use before any production deploy. Triggers on "ready to deploy", "release checklist", "can we ship this", "pre-deploy check".

Navigate the Chravel codebase. Find where features live, understand module boundaries, and locate the right files for any change. Use when unfamiliar with where something lives or when starting work on a new area. Triggers on "where is", "find the code for", "repo map", "codebase overview", "what file handles".

Implement and debug Chravel's Smart Import feature — AI-powered import of trip data from emails, PDFs, links, and other sources. Use when working on import flows, parsing logic, or artifact ingestion. Triggers on "smart import", "import from email", "import PDF", "parse reservation", "artifact import".

Audit and implement Supabase Row-Level Security policies, edge functions, and auth integration for Chravel. Use when modifying database access patterns, adding tables, writing RLS policies, or debugging permission issues. Triggers on "RLS", "row level security", "supabase policy", "edge function", "permission denied", "auth issue with supabase".

Audit Chravel's UI for visual consistency, component reuse, and interaction pattern coherence across features. Use when checking design consistency, finding visual drift, or standardizing UI patterns. Triggers on "UI consistency", "visual drift", "component consistency", "does this match our design system".

Use this skill when building applications with Gemini models, Gemini API, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or needing current model specifications. Covers SDK usage (google-genai for Python, @google/genai for JavaScript/TypeScript), model selection, and API capabilities.

Use when scheduling recurring monitoring, babysitting PRs, watching deploys, supervising Ralph, running smoke checks, or any periodic engineering supervision task. Triggers on "/loop", "babysit", "watch", "monitor", "check every", "keep an eye on". NOT for feature implementation (use Ralph), event-driven automation (use hooks), or durable scheduling (use CI).

Use when creating a new Product Requirements Document (PRD) for a feature. Triggers on "write a PRD", "create PRD", "plan feature", "new feature spec". Produces structured markdown with user stories, acceptance criteria, and technical approach.

Use when converting a PRD markdown document to Ralph's prd.json format for autonomous execution. Triggers on "convert PRD to ralph", "set up ralph", "prepare for ralph", "create prd.json from PRD".

Use when scheduling recurring monitoring, babysitting PRs, watching deploys, supervising Ralph, running smoke checks, or any periodic engineering supervision task. Triggers on "/loop", "babysit", "watch", "monitor", "check every", "keep an eye on". NOT for feature implementation (use Ralph), event-driven automation (use hooks), or durable scheduling (use CI).

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.