BABAT RED Project Skill

Vision

BABAT RED is a personal operating system, not a normal website. Build it as a set of focused Spaces that feel like dedicated apps while sharing one stable data layer and one coherent design language.

Primary Spaces:

• Core / Dashboard
• Finance
• Learning
• Documents
• Wardrobe
• AI
• Health
• Settings

Core Rules

• Keep the live Vanilla app stable unless the task explicitly targets it.
• Prefer scoped upgrades over big-bang migrations.
• Do not delete existing user data, localStorage schemas, IndexedDB schemas, or attachments.
• Preserve existing behavior unless the request clearly asks to change it.
• Test after code changes.
• If service worker cached live files change, update cache behavior intentionally.
• Keep untracked user files out of commits unless the user explicitly asks to include them.

Multi-Space Rules

• Treat each Space as its own app surface with its own dashboard, navigation, color accents, settings, and workflows.
• Do not show unrelated modules inside a focused Space unless it is a deliberate switcher or global system control.
• Prefer a profile or space switcher pattern for moving between Spaces.
• Keep shared primitives in shared components, services, utilities, or design tokens.
• Avoid duplicating business logic across Vanilla and React unless the migration path is documented.

Finance Space Rules

• Finance should feel like a private financial cockpit.
• Keep accounts, transactions, import, reports, investments, AI analysis, and settings grouped inside Finance.
• Do not mix Finance with school, wardrobe, documents, or electrician workflows.
• Protect user money data and avoid destructive reset actions.
• CSV import, category logic, and reporting should be service-based and testable.

Learning Space Rules

• Learning is a dedicated app for the electrician apprenticeship and the goal of moving toward grade 6.
• Include XP, level, streak, grade targets, exam mode, flashcards, AI tutor mockups, and electrician learning modules.
• Separate learning from worksite / job operations. Work time, projects, location, and material belong to Work / Baustelle, not the pure electrician learning surface.
• Electrician learning should include electrotechnics, installations, schemas, NIV / safety, tools, error analysis, ABU, and subject-specific summaries.
• Schema training should become interactive over time: component library, wire connections, validation, animated failure explanation, and repair advice.
• Do not add real AI API costs. AI tutor areas may be mockups or local-provider placeholders.

Design Style

• Use a dark, calm, premium technical style inspired by Interstellar, Christopher Nolan, Apple, Linear, Arc Browser, and control systems.
• Prefer precise panels, restrained glow, circuit lines, depth, and subtle 3D motion.
• Avoid childish colors, toy-like gradients, excessive decoration, and clutter.
• Use animation to clarify state, hierarchy, and navigation; do not animate just for noise.
• Respect reduced-motion settings.

Code Rules

• Read existing structure before editing.
• Use existing services, components, hooks, and data models when possible.
• Add abstractions only when they reduce real duplication or establish a reusable system.
• Keep React/Vite changes inside app/ unless intentionally bridging to the live root app.
• Keep Vanilla root changes small and tested because it is the current live app.
• Avoid unnecessary dependencies. Prefer official, maintained packages when a dependency is justified.
• Document architecture decisions in docs/ when they affect future agents.

AI-Agent Workflow

• Start with SKILL.md, AGENTS.md, docs/GRAPHIFY_README.md, and the relevant docs.
• For structured review and planning work, use the BABAT RED GStack-lite workflows in docs/GSTACK_WORKFLOW.md and .claude/commands/.
• Use Graphify artifacts to orient before large changes:
  • graphify-out/GRAPH_REPORT.md
  • graphify-out/graph.json
  • graphify-out/graph.html
• Inspect the real files after using the graph; the graph is an orientation aid, not source of truth.
• Make small, reviewable commits with clear summaries.
• Run the relevant tests or builds before finishing.

Never Do Automatically

• Do not wipe localStorage, IndexedDB, user files, attachments, or generated user data.
• Do not rewrite the whole app or migrate Vanilla to React without explicit approval.
• Do not deploy, rotate secrets, add paid APIs, or add cloud credentials without explicit approval.
• Do not commit unrelated user changes.
• Do not hide known test failures.
• Do not add broad tracking, analytics, or external calls without explaining the risk first.