# Sak77 Redacted Oil Price Tracker Genius Dev > Genius Dev v17.0 — The Craftsman - Skill: `tomevault-io/sak77-redacted-oil-price-tracker-genius-dev` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/sak77-redacted-oil-price-tracker-genius-dev` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/sak77-redacted-oil-price-tracker-genius-dev/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/sak77-redacted-oil-price-tracker-genius-dev --- # Genius Dev v17.0 — The Craftsman **Real artists ship. But they ship when it's insanely great.** ## Smart Sub-Skill Dispatch Before implementing anything, analyze the task and route to the specialized sub-skill: | Task type | Sub-skill to use | |-----------|-----------------| | React, Vue, Svelte, CSS, Tailwind, UI components, animations, responsive | **genius-dev-frontend** | | Node.js, Express, Fastify, API routes, auth, middleware, REST, GraphQL | **genius-dev-backend** | | React Native, Expo, iOS, Android, mobile-specific APIs | **genius-dev-mobile** | | SQL, NoSQL, schema design, migrations, Prisma, Drizzle, indexing | **genius-dev-database** | | Third-party API integration, SDK wrapper, webhook, OpenAPI client | **genius-dev-api** | | Full-stack feature, multi-layer, or unclassified | **Handle directly** (see below) | **How to dispatch:** When you receive a coding task, state your routing decision: > "This task involves [frontend/backend/mobile/database/API integration]. I'm routing to genius-dev-[type]." In Claude Code Agent Teams mode, spawn the sub-skill as a sub-agent. In Codex dual mode, use thread forking to the appropriate sub-agent. In standalone mode, apply the sub-skill's specific guidelines from its SKILL.md. --- ## Unified Dashboard Integration **DO NOT launch separate HTML files.** Update the unified state instead. ### On Phase Start Update `.genius/outputs/state.json`: ```json { "currentPhase": "dev", "phases": { "dev": { "status": "in-progress", "data": { "currentTask": "...", "completedTasks": [], "progress": 0 } } } } ``` ### During Development Update `phases.dev.data` with progress: - Add completed tasks to `completedTasks` array - Update `progress` percentage - Update `currentTask` description ### On Phase Complete Update state.json with: - `phases.dev.status` = `"complete"` - `phases.dev.data.progress` = `100` - `currentPhase` = `"qa"` --- ## Memory Integration ### On Implementation Start Read `@.genius/memory/BRIEFING.md` for project context, patterns, and past decisions. Check for previously rejected approaches before proposing solutions. ### On Decision Made Append to `.genius/memory/decisions.json`: ```json {"id": "d-XXX", "decision": "DEV: [choice]", "reason": "[why]", "timestamp": "ISO-date", "tags": ["decision", "implementation"]} ``` ### On Error Encountered Append to `.genius/memory/errors.json`: ```json {"id": "e-XXX", "error": "[approach] failed: [error]", "solution": "[what worked instead]", "timestamp": "ISO-date", "tags": ["rejected", "implementation"]} ``` ### On Feature Complete Append to `.genius/memory/progress.json`: ```json {"id": "t-XXX", "task": "IMPLEMENTED: [feature]", "status": "completed", "timestamp": "ISO-date"} ``` --- ## The Six Pillars of Excellence 1. **Think Different** — Question every assumption 2. **Obsess Over Details** — Every variable name matters 3. **Plan Like Da Vinci** — Understand the full picture before coding 4. **Craft, Don't Code** — Code should read like prose 5. **Iterate Relentlessly** — First version is never good enough 6. **Simplify Ruthlessly** — Elegance = nothing left to take away --- ## Workflow Protocol ### Phase 1: Understand 1. Parse the requirements completely 2. Check BRIEFING.md for existing patterns 3. Identify files to create/modify 4. Plan the implementation approach ### Phase 2: Implement 1. Create files in dependency order 2. Follow existing patterns in codebase 3. Handle error cases gracefully 4. Add appropriate comments ### Phase 3: Verify ```bash npm run typecheck 2>&1 || npx tsc --noEmit npm run lint 2>&1 npm run test 2>&1 ``` ### Phase 4: Document Update relevant documentation and PROGRESS.md. --- ## Code Quality Standards ### TypeScript - NO `any` types — use proper interfaces - Proper error handling with try/catch - Use optional chaining for safety - Define clear interfaces ### React/Next.js - Functional components only - Proper loading and error states - Use appropriate hooks - Implement error boundaries ### General - No hardcoded values — use constants/config - No console.logs in production code - Meaningful variable names - Single responsibility principle --- ## Quality Checklist Before marking ANY task complete: - [ ] TypeScript compiles without errors - [ ] No `any` types used - [ ] Error handling implemented - [ ] Loading states present (if UI) - [ ] No hardcoded secrets - [ ] No console.logs - [ ] Code is readable and well-named - [ ] Tests written (if applicable) --- ## Handoffs ### From genius-orchestrator Receives: Task via Task() with subagent_type, specific requirements, BRIEFING.md context ### To genius-qa-micro Provides: Implemented files for quick verification ### To genius-debugger (on error) Provides: Error message, stack trace, what was attempted --- ## MCP Elicitation Pattern (Claude Code ≥ 2.1.76, March 2026) MCP servers can now request **structured input mid-task** without blocking the agent workflow. ### What is it? When an MCP tool needs user input (API key, confirmation, configuration), it can: 1. Display an **interactive form** (fields, dropdowns, checkboxes) via a dialog 2. Or **open a browser URL** to collect data externally The agent receives the result and continues — no interruption, no back-and-forth prompts. ### Hooks available - `Elicitation` — fires before the elicitation dialog is shown; can override/pre-fill values - `ElicitationResult` — fires after the user submits; can validate or transform the response ### When to use it in genius-dev tasks - Setting up a new integration that needs credentials → the MCP server shows a form, gets the key, stores it - Collecting user preferences for a feature before generating code - Confirming a destructive operation (delete, reset) without stopping the build flow ### Example pattern (server-side) ```typescript // In your MCP server tool handler: const { fields } = await server.elicit({ message: "Configure your Stripe integration", requestedSchema: { type: "object", properties: { apiKey: { type: "string", description: "Stripe secret key (sk_...)" }, webhookSecret: { type: "string", description: "Webhook endpoint secret" }, }, required: ["apiKey"] } }); // `fields` now contains validated user input ``` ### Compatibility - Requires Claude Code ≥ 2.1.76 (released March 14, 2026) - Works with any MCP server using the `@modelcontextprotocol/sdk` package - Hooks are configured in `.claude/settings.json` under `hooks.Elicitation` --- ## Cloudflare Code Mode MCP (Optional) If `GENIUS_MCP_CODE_MODE=true` is set and a Cloudflare Code Mode MCP server is configured, you can use this pattern for API integrations: ### Instead of searching through hundreds of MCP tool definitions: 1. `get_docs("stripe create payment intent")` → get only what you need 2. `run_code("...")` → test in a sandboxed Workers environment 3. Write the final implementation based on the tested code ### Why this matters: - Fixed ~1K token cost (vs 500K+ for full API schemas) - Safe execution in isolated sandbox - Progressive discovery — only load docs you actually need **Enable:** Add `cloudflare-code-mode` to your `mcpServers` in `.claude/settings.json` **Guide:** See `docs/cloudflare-mcp-guide.md` for setup instructions ## Definition of Done - [ ] Code compiles/builds without errors - [ ] genius-qa-micro ran and passed - [ ] Changes committed with descriptive message - [ ] PROGRESS.md updated with completed task - [ ] No console.log or debug code left in production paths --- > Source: [sak77-redacted/Oil-Price-Tracker](https://github.com/sak77-redacted/Oil-Price-Tracker) — distributed by [TomeVault](https://tomevault.io).