fuel-price/.agents/skills/superdesign/INIT.md

You are performing a SuperDesign Init — analyzing this repository to build UI context files that SuperDesign agent will use for design tasks.

Output Directory

Write all files to .superdesign/init/ in the project root.

Analysis Steps

1. Detect Framework & Component Library

Scan package.json, config files (next.config.*, vite.config.*, rsbuild.config.*, nuxt.config.*, etc.), and import patterns to determine:

• Framework: React, Vue, Svelte, Angular, etc.
• Meta-framework: Next.js, Nuxt, Remix, Astro, etc.
• Component library: shadcn/ui, Ant Design, MUI, Chakra, Radix, custom, etc.
• CSS approach: Tailwind, CSS Modules, styled-components, vanilla CSS, etc.

2. Write components.md

Identify the project's shared/reusable UI component directory (e.g., src/components/ui/, components/, packages/ui/).

IMPORTANT: Include FULL source code for each component, not just descriptions. SuperDesign needs the actual implementation to reproduce accurately.

For each component, include:

• File path
• Component name
• Brief description (1 line)
• Key props if obvious from the export
• FULL source code in fenced code blocks

Focus on shared UI primitives (Button, Input, Dialog, Card, Select, Checkbox, Table, Tabs, etc.), not page-specific components.

⚠️ This file should contain the ACTUAL CODE of components, not just a list of names.

3. Write layouts.md

Find and READ all shared layout components. These are the components that appear on every page or across multiple pages:

• App shell / root layout
• Navigation bar (top nav, bottom nav)
• Sidebar
• Header / top bar
• Footer
• Breadcrumb
• Layout wrappers / HOCs

For each, include:

• File path
• Full source code (copy the entire file content)
• Brief description of what it renders

This is critical — SuperDesign needs the actual layout code to reproduce pages accurately.

4. Write routes.md

Map out the page/route structure:

• For file-based routing (Next.js, Nuxt): list route files and their paths
• For config-based routing (React Router, Vue Router): read the router config
• For each route, include: URL path, component file path, layout used
• Include the FULL router config file if it exists (e.g., router/index.ts, routes.ts)

For key pages (home, dashboard, main features), include a brief summary of what the page renders.

5. Write theme.md

Extract the design system / theme tokens. Include FULL file contents, not summaries:

• Read and include FULL CSS variable definitions (:root, [data-theme], etc.)
• Read and include FULL Tailwind config (tailwind.config.*) — especially theme.extend
• Read and include any theme provider files
• Read and include globals.css, index.css, or equivalent
• Capture: colors, fonts, spacing scale, border radius, shadows, breakpoints

IMPORTANT: Include the COMPLETE raw files in fenced code blocks:

• Full tailwind.config.ts/js content
• Full globals.css / index.css content
• Full CSS variable definitions
• Any design token files

6. Write pages.md

For each key page/route in the app (home, dashboard, main features — up to 10 pages), build a complete component dependency tree by tracing imports recursively.

For each page:

1. Start from the page component file
2. Trace ALL local imports (relative ./Foo, ../Bar, alias @/components/Baz — skip node_modules)
3. For each import, trace ITS imports recursively
4. Present as an indented tree showing every file the page depends on

Format:

## / (Home Page)
Entry: src/app/(home)/home-page.tsx
Dependencies:
- src/components/home-ui/elegant-header.tsx
  - src/components/team/create-team-modal.tsx
- src/components/home-ui/elegant-hero-section.tsx
  - src/components/home-ui/home-hero-input.tsx
  - src/components/home-ui/persona-selector.tsx
  - src/components/home-ui/dev-workflow-view.tsx
  - src/components/home-ui/import-site-modal.tsx
- src/components/home-ui/elegant-project-grid.tsx
  - src/components/home-ui/elegant-project-card.tsx
- src/app/(home)/components/template-browse-section.tsx
  - src/app/(home)/components/template-card.tsx
- src/components/layout/Footer.tsx

This tree is the SINGLE SOURCE OF TRUTH for which files to pass as --context-file when designing a page. If a file appears in the tree, it MUST be included.

Prioritize the most important/complex pages (home, dashboard, settings, etc.). Skip trivial pages (404, offline, status).

7. Write extractable-components.md

Catalog UI components from the codebase that can be extracted as reusable SuperDesign DraftComponent entities. These are components that appear on multiple pages or define shared UI patterns (navigation, cards, headers, footers).

Organize by category:

Layout Components (appear on most pages)

• NavBar / TopNav / BottomNav
• Sidebar
• Header / AppBar
• Footer
• App Shell / Layout Wrapper

Basic Components (used across pages)

• Button variants
• Card components
• Input / Form fields
• Badge / Tag
• Avatar
• Tab components

For each extractable component, include:

• Name (PascalCase, e.g., NavBar, HeroSection)
• Source file path (e.g., src/components/layout/NavBar.tsx)
• Category: layout or basic
• Brief description (1 line)
• Key props to extract — ONLY state/navigation props that change per page:
  • Active state: activeItem, currentTab, isActive
  • Navigation URLs: homeHref, searchHref, profileHref
  • Visibility flags: showNotification, showBadge
  • Dynamic counts: badgeCount, notificationCount
• Hardcoded elements (NOT props): icon names, text labels, CSS classes, image sources

Format:

## NavBar
- Source: `src/components/layout/NavBar.tsx`
- Category: layout
- Description: Main top navigation with logo, search, and user menu
- Extractable props: activeItem (string, default: "home"), showNotification (boolean, default: false)
- Hardcoded: Logo SVG, menu items text, icon names, all CSS

This file serves as a "menu" — the design workflow reads it to decide which components to extract before generating drafts.

Format Guidelines

• Use markdown with clear headings
• Include file paths as code spans
• For components.md: include FULL source code of each component in fenced code blocks
• For layouts.md: include FULL file contents in fenced code blocks
• For theme.md: include raw token values, CSS variables, and Tailwind config — not just descriptions
• For pages.md: include complete dependency trees with indentation showing nesting depth
• For extractable-components.md: include component name, source path, category, description, and key props — NOT full source code (that's in components.md and layouts.md)
• Keep descriptions concise — the goal is machine-readable context, not documentation

Key Principle: INCLUDE ACTUAL CODE

The init files should contain actual implementation code (.tsx, .css, .ts), not just documentation or descriptions. SuperDesign needs real code to reproduce UI accurately. Be generous with the content — more context is always better than less.