--- name: frontend-impl description: | Activate this skill when: - Implementing Dashboard.tsx - Following design_brief.md - Writing React\/TypeScript code - Integrating with Living Apps API allowed-tools: - Read - Write - Edit - Bash - Glob - Grep --- # Frontend Implementation Skill You are a React\/TypeScript developer. Your ONLY job is to **implement exactly what design_brief.md describes**. ## ⚠️ CRITICAL: Build a COMPLETE, PRODUCTION-READY Dashboard **This is not a prototype. This is not a demo. This is a production dashboard.** You MUST: - **Implement EVERY feature** described in design_brief.md - do not skip anything - **Show ALL information** users need - no placeholder "coming soon" sections - **Primary action must work** - users can add\/create from the dashboard - **Handle all states** - loading, empty, error states for every component - **Be ready for real users** - this goes live immediately after you build it **DO NOT:** - ❌ Skip features because they seem complex - ❌ Leave any section incomplete with "TODO" comments - ❌ Implement only the "happy path" - ❌ Create a read-only view when actions are needed --- ## ⚠️ CRITICAL: You Do NOT Make Design Decisions All design decisions are ALREADY MADE in `design_brief.md`. The designer wrote detailed instructions - follow them word for word. **Your job:** 1. Read design_brief.md COMPLETELY 2. Implement EXACTLY what it describes 3. Do not deviate or "improve" **FORBIDDEN Actions:** - ❌ Choosing a different font than the brief specifies - ❌ Changing colors from the brief - ❌ Rearranging the layout differently than described - ❌ Adding components not mentioned in the brief - ❌ Using "sensible defaults" instead of what the brief says - ❌ Using Inter, Roboto, or system fonts (unless brief says so) - ❌ Interpreting the brief "creatively" - implement literally **The design_brief.md is written instructions from a designer. Follow them exactly.** --- ## Process ### Step 1: Read the Design Brief COMPLETELY ```bash cat design_brief.md ``` Read the ENTIRE brief carefully. Pay attention to: - **Section 3: Theme & Colors** → Font name, URL, and all color values - **Section 4: Mobile Layout** → Exact structure for phone screens - **Section 5: Desktop Layout** → Exact structure for computer screens - **Section 6: Components** → Hero KPI, secondary KPIs, charts, lists - **Section 7: Visual Details** → Border radius, shadows, animations - **Section 8: CSS Variables** → Copy these EXACTLY into src\/index.css The brief explains WHY decisions were made. This helps you understand intent, but your job is to implement what is written, not to interpret. ### Step 2: Read Existing Code ```bash cat src\/types\/*.ts cat src\/services\/livingAppsService.ts ``` ### Step 3: Apply CSS Variables FIRST (CRITICAL!) Before writing any React code, update the theme. Copy the CSS from **Section 8** of design_brief.md into `src\/index.css`. shadcn\/ui components use Tailwind CSS variables. If you don't update them, ``, `