@muskanmeet/invoicing-design-system 0.1.0

package/.local/secondary_skills/infographic-builder/antv-syntax.md

@@ -0,0 +1,470 @@
+# AntV Infographic Syntax Reference
+
+AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for streaming output and infographic rendering.
+
+## Core Structure
+
+Every infographic has three parts:
+
+1. **template** — the first line selects the visual template
+2. **data** — the content: title, description, and data items
+
+3. **theme** — optional style customization (palette, font, effects)
+
+## Syntax Rules
+
+- First line must be `infographic <template-name>`
+- Use `data`/`theme`blocks with two-space indentation within blocks
+
+- Key-value pairs use`key space value`(e.g.,`title My Title`)
+- Arrays use `-`as entry prefix
+
+-`icon`uses icon keywords (e.g.,`star fill`, `cloud`, `brain`)
+
+- `data`should contain`title`/`desc`+ the template-specific main data field
+
+- Do not output JSON, Markdown, or explanatory text — only the DSL syntax
+
+## Main Data Field by Template Category
+
+Use only one main data field per infographic. Do not mix them.
+
+| Template Category | Main Data Field | Notes |
+
+|-------------------|----------------|-------|
+
+|`list-*`|`lists`| Array of items with label, desc, icon |
+
+|`sequence-*`|`sequences`| Optional`order asc\\desc`|
+
+|`compare-*`|`compares`| Supports`children`for grouped comparisons |
+
+|`hierarchy-structure`|`items`| Each item is an independent hierarchy, nestable up to 3 levels |
+
+|`hierarchy-*`(others) |`root`| Single root, nested through`children`|
+
+|`relation-*`|`nodes`+`relations`| Simple relations can omit`nodes`, using arrow syntax |
+
+| `chart-*`|`values`| Numeric statistics, optional`category`|
+
+| Fallback |`items`| Use when uncertain about which field to use |
+
+## Special Rules
+
+-`compare-binary-*`and`compare-hierarchy-left-right-*`templates: must have exactly two root nodes; all comparison items hang under these two root nodes'`children`-`hierarchy-*`(non-structure): use single`root`, nested through `children`— do not repeat root
+
+-`relation-*`edge label syntax:`A -label-> B`or`A -->|label| B`
+
+## Basic Example
+
+```text
+
+infographic list-row-horizontal-icon-arrow
+
+data
+
+title Title
+
+desc Description
+
+lists
+
+- label Label
+
+value 12.5
+
+desc Explanation
+
+icon document text
+
+theme
+
+palette \#3b82f6 \#8b5cf6 \#f97316
+
+```
+
+## Data Syntax Examples by Category
+
+### list-* templates
+
+```text
+
+infographic list-grid-badge-card
+
+data
+
+title Feature List
+
+lists
+
+- label Fast
+
+icon flash fast
+
+- label Secure
+
+icon secure shield check
+
+```
+
+### sequence-* templates
+
+```text
+
+infographic sequence-steps-simple
+
+data
+
+sequences
+
+- label Step 1
+- label Step 2
+
+- label Step 3
+
+order asc
+
+```
+
+### hierarchy-* templates
+
+```text
+
+infographic hierarchy-structure
+
+data
+
+root
+
+label Company
+
+children
+
+- label Dept A
+- label Dept B
+
+```
+
+### compare-* templates
+
+```text
+
+infographic compare-swot
+
+data
+
+compares
+
+- label Strengths
+
+children
+
+- label Strong brand
+- label Loyal users
+
+- label Weaknesses
+
+children
+
+- label High cost
+- label Slow release
+
+```
+
+### Quadrant diagram
+
+```text
+
+infographic compare-quadrant-quarter-simple-card
+
+data
+
+compares
+
+- label High Impact & Low Effort
+- label High Impact & High Effort
+
+- label Low Impact & Low Effort
+- label Low Impact & High Effort
+
+```
+
+### chart-* templates
+
+```text
+
+infographic chart-column-simple
+
+data
+
+values
+
+- label Visits
+
+value 1280
+
+- label Conversion
+
+value 12.4
+
+```
+
+### relation-* templates
+
+Edge label syntax: `A -label-> B`or`A -->|label| B`
+
+```text
+
+infographic relation-dagre-flow-tb-simple-circle-node
+
+data
+
+nodes
+
+- id A
+
+label Node A
+
+- id B
+
+label Node B
+
+relations
+
+A - approves -> B
+
+A -->|blocks| B
+
+```
+
+### Fallback items example
+
+```text
+
+infographic list-row-horizontal-icon-arrow
+
+data
+
+items
+
+- label Item A
+
+desc Description
+
+icon sun
+
+- label Item B
+
+desc Description
+
+icon moon
+
+```
+
+## Theme Customization
+
+### Custom palette
+
+```text
+
+infographic list-row-horizontal-icon-arrow
+
+theme
+
+palette \#3b82f6 \#8b5cf6 \#f97316
+
+```
+
+### Dark theme with custom colors
+
+```text
+
+infographic list-row-horizontal-icon-arrow
+
+theme dark
+
+palette
+
+- \#61DDAA
+- \#F6BD16
+
+- \#F08BB4
+
+```
+
+### Hand-drawn style (rough)
+
+Use `theme.stylize`for built-in visual styles. Common styles:
+
+-`rough`— hand-drawn effect
+-`pattern`— pattern fill
+
+-`linear-gradient`/`radial-gradient` — gradient fills
+
+```text
+
+infographic list-row-horizontal-icon-arrow
+
+theme
+
+stylize rough
+
+base
+
+text
+
+font-family 851tegakizatsu
+
+```
+
+### Custom font
+
+```text
+
+theme
+
+base
+
+text
+
+font-family 851tegakizatsu
+
+```
+
+## Available Templates
+
+### Chart templates
+
+- `chart-bar-plain-text`-`chart-column-simple`-`chart-line-plain-text`-`chart-pie-compact-card`-`chart-pie-donut-pill-badge`-`chart-pie-donut-plain-text`-`chart-pie-plain-text`-`chart-wordcloud`
+
+### Comparison templates
+
+- `compare-binary-horizontal-badge-card-arrow`-`compare-binary-horizontal-simple-fold`-`compare-binary-horizontal-underline-text-vs`-`compare-hierarchy-left-right-circle-node-pill-badge`-`compare-quadrant-quarter-circular`-`compare-quadrant-quarter-simple-card`-`compare-swot`
+
+### Hierarchy templates
+
+- `hierarchy-mindmap-branch-gradient-capsule-item`-`hierarchy-mindmap-level-gradient-compact-card`-`hierarchy-structure`-`hierarchy-tree-curved-line-rounded-rect-node`-`hierarchy-tree-tech-style-badge-card`-`hierarchy-tree-tech-style-capsule-item`
+
+### List templates
+
+- `list-column-done-list`-`list-column-simple-vertical-arrow`-`list-column-vertical-icon-arrow`-`list-grid-badge-card`-`list-grid-candy-card-lite`-`list-grid-ribbon-card`-`list-row-horizontal-icon-arrow`-`list-sector-plain-text`-`list-zigzag-down-compact-card`-`list-zigzag-down-simple`-`list-zigzag-up-compact-card`-`list-zigzag-up-simple`
+
+### Relation templates
+
+- `relation-dagre-flow-tb-animated-badge-card`-`relation-dagre-flow-tb-animated-simple-circle-node`-`relation-dagre-flow-tb-badge-card`-`relation-dagre-flow-tb-simple-circle-node`
+
+### Sequence templates
+
+- `sequence-ascending-stairs-3d-underline-text`-`sequence-ascending-steps`-`sequence-circular-simple`-`sequence-color-snake-steps-horizontal-icon-line`-`sequence-cylinders-3d-simple`-`sequence-filter-mesh-simple`-`sequence-funnel-simple`-`sequence-horizontal-zigzag-underline-text`-`sequence-mountain-underline-text`-`sequence-pyramid-simple`-`sequence-roadmap-vertical-plain-text`-`sequence-roadmap-vertical-simple`-`sequence-snake-steps-compact-card`-`sequence-snake-steps-simple`-`sequence-snake-steps-underline-text`-`sequence-stairs-front-compact-card`-`sequence-stairs-front-pill-badge`-`sequence-timeline-rounded-rect-node`-`sequence-timeline-simple`-`sequence-zigzag-pucks-3d-simple`-`sequence-zigzag-steps-underline-text`
+
+## Template Selection Quick Reference
+
+| Use Case | Recommended Templates |
+
+|----------|----------------------|
+
+| Strict sequence (process/steps) | `sequence-*`|
+
+| Timeline |`sequence-timeline-*`|
+
+| Staircase diagram |`sequence-stairs-*`|
+
+| Roadmap |`sequence-roadmap-vertical-*`|
+
+| Zigzag path |`sequence-zigzag-*`|
+
+| Circular progress |`sequence-circular-simple`|
+
+| Snake steps |`sequence-color-snake-steps-*`, `sequence-snake-steps-*`|
+
+| Pyramid |`sequence-pyramid-simple`|
+
+| Funnel |`sequence-funnel-simple`|
+
+| Opinion listing |`list-row-*`or`list-column-*`|
+
+| Grid list (key points) |`list-grid-*`|
+
+| Binary comparison (pros/cons) |`compare-binary-*`|
+
+| SWOT analysis |`compare-swot`|
+
+| Quadrant analysis |`compare-quadrant-*`|
+
+| Tree diagram |`hierarchy-tree-*`|
+
+| Mind map |`hierarchy-mindmap-*`|
+
+| Org chart |`hierarchy-structure`|
+
+| Data charts |`chart-*`|
+
+| Flow / relationship diagram |`relation-*`|
+
+| Word cloud |`chart-wordcloud` |
+
+## Full Example
+
+Internet technology evolution infographic:
+
+```text
+
+infographic list-row-horizontal-icon-arrow
+
+data
+
+title Internet Technology Evolution
+
+desc From Web 1.0 to AI era, key milestones
+
+lists
+
+- time 1991
+
+label Web 1.0
+
+desc Tim Berners-Lee published the first website, opening the Internet era
+
+icon web
+
+- time 2004
+
+label Web 2.0
+
+desc Social media and user-generated content become mainstream
+
+icon account multiple
+
+- time 2007
+
+label Mobile
+
+desc iPhone released, smartphone changes the world
+
+icon cellphone
+
+- time 2015
+
+label Cloud Native
+
+desc Containerization and microservices architecture are widely used
+
+icon cloud
+
+- time 2020
+
+label Low Code
+
+desc Visual development lowers the technology threshold
+
+icon application brackets
+
+- time 2023
+
+label AI Large Model
+
+desc ChatGPT ignites the generative AI revolution
+
+icon brain
+
+```

package/.local/secondary_skills/infographic-builder/react-fallback.md

@@ -0,0 +1,210 @@
+# React Component Fallback (Custom Infographics)
+
+Use this approach when the infographic needs multiple visualization types combined, when raw data needs analysis before visualization, or when no single AntV template fits the content.
+
+## When to Use
+
+- The content is raw data (CSV, bank transactions, spreadsheets) that needs analysis and categorization
+- The infographic combines multiple visualization types (summary stats + charts + tables + callouts)
+
+- The user wants a completely bespoke visual design
+- The user has specific brand requirements that need pixel-level control
+
+- No single AntV template category covers the content
+
+## Workflow
+
+### 1. Analyze the Data
+
+Before building, analyze and structure the raw data:
+
+- Compute totals, averages, percentages
+- Categorize items into meaningful groups
+
+- Identify the key insight or takeaway
+- Plan which sections and chart types will best communicate each data point
+
+This analysis step is critical — the React component will hardcode the computed values, so get the math right before writing any code.
+
+### 2. Create the Component Directory
+
+Ensure the infographics directory exists:
+
+```text
+
+mkdir -p artifacts/mockup-sandbox/src/components/mockups/infographics
+
+mkdir -p exports
+
+```
+
+### 3. Build the React Component
+
+Create the component at `artifacts/mockup-sandbox/src/components/mockups/infographics/<Name>.tsx`.
+
+Use a descriptive PascalCase name (e.g., `TransaccionesMarzo.tsx`, `ClimateStats.tsx`, `HiringProcess.tsx`).
+
+Design principles:
+
+- Set a fixed width on the root container (e.g., `w-[1000px]`or`w-[1050px]`) so the layout is predictable for screenshot export.
+- Use `min-h-screen`on the outer wrapper with a solid background color — no transparency.
+
+- Build data visualizations with inline SVG (donut charts, bar charts, etc.). Avoid heavy charting libraries — infographic charts are decorative and specific, not interactive.
+- Use`lucide-react`icons extensively — they compress meaning into small spaces and are pre-installed in the mockup sandbox.
+
+- Apply strong typographic hierarchy: large headline numbers, medium section headers, small body text.
+- Use color intentionally: 1 primary color, 1-2 accent colors, and neutral tones. Color should encode meaning (categories, income/expense, good/bad), not just decorate.
+
+- Add visual separators between sections (lines, color blocks, spacing) to create clear reading flow.
+- Include a "key insight" callout — one highlighted finding that the viewer gets within 3 seconds.
+
+- Do NOT use any interactive elements (hover states, clicks, animations). The output is a static image.
+
+### 4. Delegate to the Design Subagent (Optional)
+
+For best visual results on complex infographics, delegate the component build to a DESIGN subagent.
+
+The brief should include:
+
+- The infographic type and all pre-computed data (every number, label, section title, percentage)
+- The target dimensions (width x approximate height)
+
+- The target file path in the mockup sandbox
+- Any brand colors or style preferences from the user
+
+- The instruction: "Build this as a single static React component. No interactivity, no animations, no hover states. Use a fixed width container. Use inline SVG for any charts or data visualizations. The component will be exported as a static image."
+- "Do not use emojis anywhere in the design"
+
+Pass via`relevantFiles`:
+
+- The target component path
+- `artifacts/mockup-sandbox/src/index.css`(for Tailwind theme tokens)
+
+-`artifacts/mockup-sandbox/package.json` (for available dependencies)
+
+For data-heavy infographics (like financial summaries), it's often faster and more accurate to build the component directly rather than delegating — the data is specific and structured, and the design subagent might misrepresent numbers.
+
+### 5. Restart the Workflow
+
+After creating the component file, restart the mockup sandbox workflow so the Vite plugin discovers the new file and registers it in the component registry:
+
+```javascript
+
+await restartWorkflow({ workflowName: "artifacts/mockup-sandbox: Component Preview Server" });
+
+```
+
+Then wait 3-5 seconds for the server to restart and the component registry to regenerate. The Vite plugin uses file watching + fast-glob to discover components — a restart ensures the new file is picked up reliably.
+
+### 6. Export as Static Image
+
+Screenshot the component using the correct path format:
+
+```javascript
+
+screenshot({
+
+artifact_dir_name: "mockup-sandbox",
+
+path: "/preview/infographics/ComponentName",
+
+viewport_size: [1050, 1600],
+
+save_to: "exports/infographic-name.jpg"
+
+});
+
+```
+
+### Critical path rules
+
+- The `path`must NOT include`/__mockup` — the screenshot tool automatically prepends the artifact's preview path (`/__mockup`). If you include it, the URL will be `/__mockup/__mockup/preview/...`which shows the wrong page.
+- Correct:`path: "/preview/infographics/TransaccionesMarzo"`
+
+- Wrong: `path: "/__mockup/preview/infographics/TransaccionesMarzo"`
+
+### Viewport sizing tips
+
+- Start with a generous height (1500-1600px) to capture the full infographic on the first attempt.
+- If the bottom is cut off, increase the height by 100-200px and retake.
+
+- Match the width to the component's fixed width plus a small margin (e.g., component is `w-[1000px]`→ use viewport width 1050).
+- It's much easier to start tall and have whitespace at the bottom than to guess short and miss content.
+
+**First screenshot may be blank:** If the very first screenshot after restart shows a blank/white page, the Vite dev server may still be initializing. Wait a few more seconds and retake.
+
+### 7. Present to User
+
+Present the exported image via`present_asset`. Mention that the component is also viewable as a live page in the mockup sandbox if they want to iterate.
+
+## Component Template
+
+Minimal structural template showing the anatomy:
+
+```tsx
+
+import { ArrowDownLeft, ArrowUpRight, Wallet } from "lucide-react";
+
+function formatMoney(n: number) {
+
+return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 2 });
+
+}
+
+export function ExampleInfographic() {
+
+return (
+
+<div className="w-[1000px] min-h-screen bg-slate-50 p-12 font-sans">
+
+{/* Header with gradient background */}
+
+<header className="rounded-xl bg-gradient-to-br from-blue-900 to-blue-700 p-8 text-white mb-8">
+
+<h1 className="text-3xl font-bold">Title Here</h1>
+
+<p className="mt-1 text-blue-200">Subtitle or context</p>
+
+</header>
+
+{/* Key metrics row */}
+
+<div className="flex gap-4 mb-8">
+
+{/* Stat cards with colored left borders */}
+
+</div>
+
+{/* Visualization sections */}
+
+<section className="rounded-xl bg-white p-6 shadow-sm mb-8">
+
+{/* Inline SVG charts, data tables, icon grids */}
+
+</section>
+
+{/* Key insight callout */}
+
+<div className="rounded-xl bg-blue-50 border border-blue-200 p-5 mb-8">
+
+<strong>Key Insight:</strong> The most important finding goes here.
+
+</div>
+
+{/* Footer / Source */}
+
+<footer className="border-t border-slate-200 pt-4 text-sm text-slate-400 flex justify-between">
+
+<span>Source: Data Source Name</span>
+
+<span>Generated: Date</span>
+
+</footer>
+
+</div>
+
+);
+
+}
+
+```

package/.local/secondary_skills/insurance-optimizer/.fingerprint

@@ -0,0 +1 @@
+67c21991eeea9318772a2e7b606ac9ef