@muskanmeet/invoicing-design-system 0.1.0

package/.local/secondary_skills/github-solution-finder/SKILL.md

@@ -0,0 +1,174 @@
+---
+name: github-solution-finder
+description: Search GitHub for battle-tested open-source libraries and solutions
+---
+
+# GitHub Solution Finder
+
+Find battle-tested libraries instead of building from scratch. Use GitHub's search operators — they're far more precise than plain Google.
+
+## Search Operators (combine with spaces = AND)
+
+| Operator | Example | Effect |
+|---|---|---|
+| `stars:>N` | `stars:>1000` | More than N stars |
+| `stars:N..M` | `stars:100..500` | Between N and M |
+| `language:X` | `language:python` | Primary language |
+| `pushed:>DATE` | `pushed:>2025-06-01` | Commits after date — **the key freshness signal** |
+| `created:>DATE` | `created:>2024-01-01` | Repo created after date |
+| `topic:X` | `topic:cli` | Tagged with topic |
+| `license:X` | `license:mit` | Specific license |
+| `-X` | `-language:javascript` | Exclude (prefix any qualifier) |
+| `archived:false` | | Exclude archived repos |
+| `is:public fork:false` | | No forks |
+| `in:name` / `in:readme` | `http in:name` | Restrict where term matches |
+| `user:X` / `org:X` | `org:google` | Scope to owner |
+| `"exact phrase"` | `"rate limiter"` | Phrase match |
+| `NOT` | `redis NOT cache` | Exclude keyword (strings only) |
+
+## High-Signal Query Templates
+
+```text
+
+# Baseline: established + actively maintained
+<problem> language:<lang> stars:>500 pushed:>2025-06-01 archived:false
+
+# Find the dominant library (only a few results = clear winner)
+<problem> language:python stars:>5000
+
+# Hidden gems (newer, not yet famous, but active)
+<problem> language:go stars:50..500 pushed:>2025-09-01 fork:false
+
+# Curated lists — these exist for almost every topic
+awesome <topic> in:name stars:>1000
+
+# CLI tools
+<task> topic:cli stars:>200 pushed:>2025-01-01
+
+# Commercial-safe only
+<problem> license:mit OR license:apache-2.0 stars:>500
+
+# Boolean grouping
+(language:rust OR language:go) <problem> stars:>1000
+
+# Code search (different syntax — searches file contents)
+path:**/*.py "from fastapi import" symbol:RateLimiter
+
+```
+
+## Search Aggressively — webSearch Is Your Primary Tool
+
+**Use webSearch extensively.** Do not rely on a single query or a single source. Every solution search should involve multiple rounds of web searching across different angles — GitHub, package registries, blog posts, Stack Overflow, and comparison articles. Cast a wide net before narrowing down.
+
+### GitHub searches
+
+```text
+webSearch("site:github.com <problem> <language> stars")
+webSearch("site:github.com awesome <topic>")
+webSearch("site:github.com/issues <specific error message>")
+webSearch("best <language> library for <problem> 2026")
+```
+
+Note: GitHub-specific qualifiers like `language:`, `stars:>`, and `pushed:>` only work on GitHub's own search engine. Through `webSearch`, use natural-language equivalents (e.g. "python" instead of `language:python`). For precise filtering, use `gh search repos` if the GitHub CLI is available (see below).
+
+### Package registry searches
+
+```text
+webSearch("site:pypi.org <problem>")        # Python
+webSearch("site:npmjs.com <problem>")        # Node
+webSearch("site:crates.io <problem>")        # Rust
+webSearch("site:pkg.go.dev <problem>")       # Go
+```
+
+### Community and comparison searches
+
+```text
+webSearch("<lib A> vs <lib B> <language>")
+webSearch("<problem> <language> reddit")
+webSearch("<problem> best library site:stackoverflow.com")
+webSearch("<problem> comparison benchmark <language>")
+webSearch("awesome <topic> list github")
+```
+
+### Read what you find
+
+`webFetch` every promising repo URL to read the README directly. Don't just rely on search result snippets — actually read the README, check the examples, and look at the API surface before recommending anything. For comparison posts and blog articles, `webFetch` the full content to extract specific benchmarks and tradeoffs.
+
+## GitHub CLI (if available)
+
+```bash
+gh search repos "rate limiter" --language=python --stars=">1000" \
+  --sort=stars --limit=10 --json=name,stargazersCount,pushedAt,url,description
+
+gh api repos/OWNER/REPO --jq '{stars:.stargazers_count, pushed:.pushed_at, issues:.open_issues_count, license:.license.spdx_id, archived:.archived}'
+
+```
+
+## Health Evaluation — Check These Fast
+
+| Signal | Healthy | Walk away |
+|---|---|---|
+| Last commit | <3 months | >18 months |
+| Stars | >1000 (lib), >100 (niche) | <20 |
+| Open/closed issue ratio | <0.3 | >1.0 with no replies |
+| Contributors | 5+ | 1 (bus factor) |
+| "Used by" (sidebar) | >1000 | 0 |
+| Releases | Tagged, semver, changelog | No tags |
+| License | MIT, Apache-2.0, BSD | None, GPL/AGPL (if commercial) |
+| CI badge | Green | Missing or red |
+| `archived: true` banner | — | Instant no |
+
+**Red flags in issues:** Search the issue tracker for `"memory leak"`, `"abandoned"`, `"unmaintained"`, `"alternative"`. If maintainer hasn't replied to anything in 6 months, the project is effectively dead regardless of star count.
+
+**Download trend check:**
+
+- Python: `https://pypistats.org/packages/<name>` — declining = dying
+- npm: `https://npmtrends.com/<pkg1>-vs-<pkg2>` — compare candidates head-to-head
+- Check bundle size: `https://bundlephobia.com/package/<name>` (frontend only)
+
+## License TL;DR
+
+| License | Commercial OK | Must open-source your code? |
+|---|---|---|
+| MIT, BSD, Apache-2.0, ISC | Yes | No |
+| LGPL | Yes | Only if you modify the lib itself |
+| GPL | Yes | **Yes, if you distribute** (viral) |
+| AGPL | Yes | **Yes, even for SaaS** (network-viral) |
+| No LICENSE file | **No** | default is all rights reserved |
+
+## Awesome Lists (curated entry points)
+
+`sindresorhus/awesome` — the root of all awesome lists. Then: `awesome-python`, `awesome-go`, `awesome-rust`, `awesome-react`, `awesome-selfhosted`, `awesome-nodejs`, `free-for-dev`, `build-your-own-x` (learn by reimplementing), `public-apis`.
+
+## Comparison Output Template
+
+````markdown
+
+## pkg-name  [12.4k stars, pushed 2 weeks ago, MIT]
+github.com/owner/pkg-name
+
+**Does:** One-line pitch.
+**Fit:** Why it matches this specific problem.
+**Install:** `pip install pkg-name`
+
+**Pro:** Active, typed, 89% test coverage.
+**Con:** Pulls in 23 transitive deps; async-only API.
+
+```python
+from pkg import Thing
+Thing().do(x)  # minimal working example
+```
+
+````
+
+## Decision Rules
+
+1. **Two libs within 2x stars of each other** → pick the one pushed more recently
+2. **A lib with 50k stars but last commit 2023** → it's dead, find the fork (check "Forks" tab sorted by stars)
+3. **Lib does 10x more than needed** → check if you can vendor the 200 lines you actually need (with attribution)
+4. **Can't find anything with >100 stars** → problem may be too niche; search blog posts / Stack Overflow for how others solved it
+5. **Found 3+ viable options** → npmtrends/pypistats comparison, then read the top 5 closed issues of each
+
+## Output
+
+Always present key findings and recommendations as a plaintext summary in chat, even when also generating files. The user should be able to understand the results without opening any files.

package/.local/secondary_skills/infographic-builder/.fingerprint

@@ -0,0 +1 @@
+4e73c622e83058ae072ee7177d841314

package/.local/secondary_skills/infographic-builder/SKILL.md

@@ -0,0 +1,317 @@
+---
+name: infographic-builder
+description: Build infographics that visualize data, processes, comparisons, and timelines.
+---
+
+# Infographic Builder
+
+Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.
+
+## Infographic = Information Structure + Visual Expression
+
+## When to Use
+
+- The user asks to "create an infographic" or "make a visual summary"
+- The user wants to turn data, stats, or a process into a visual one-pager
+
+- The user asks for a "data graphic", "visual explainer", or "information poster"
+- The user provides data or content and asks to "visualize" it in a static format
+
+- The user asks for a timeline, comparison chart, process flow, or statistical summary as a designed visual (not an interactive dashboard)
+
+Do NOT use this skill when:
+
+- The user wants an interactive dashboard (use `data-visualization` instead)
+- The user wants a multi-slide presentation (use `slides` instead)
+
+- The user just wants a simple chart embedded in an app (use a charting library directly)
+
+## Two Approaches
+
+### Primary: AntV Infographic (DSL-based)
+
+Use this for infographics where the content maps cleanly to a **single visualization type** — a list, a sequence, a comparison, a hierarchy, a chart, or a relationship diagram. AntV Infographic provides 60+ pre-built templates with a simple DSL syntax. It's fast and produces polished results. Read `antv-syntax.md` for the full DSL specification and template list.
+
+### Fallback: React Component (Mockup Sandbox)
+
+Use this when the infographic needs **multiple visualization types combined** (e.g., summary stats + bar chart + pie chart + detailed table), when the user provides raw data that needs analysis and categorization before visualization (e.g., bank transactions, CSV data), or when the layout doesn't fit any single AntV template. Read `react-fallback.md` for this workflow.
+
+#### How to choose
+
+- Content fits one template category (e.g., "show a process flow", "make a SWOT analysis") → **AntV**
+- Content is raw data needing analysis, or requires multiple chart types in one visual → **React fallback**
+
+- User wants a completely bespoke design or pixel-level control → **React fallback**
+
+## Infographic Types → Template Categories
+
+| Content Type | Best For | AntV Template Category |
+
+|-------------|----------|----------------------|
+
+| **Statistical** | Numbers, percentages, survey results | `chart-*` (pie, bar, column, line) |
+
+| **Process / Flow** | Step-by-step workflows, how-tos | `sequence-*` (steps, funnel, pyramid, stairs) |
+
+| **Comparison** | Side-by-side analysis, pros/cons, SWOT | `compare-*` (binary, swot, quadrant) |
+
+| **Timeline** | Historical events, project phases, roadmaps | `sequence-timeline-*`,`sequence-roadmap-*` |
+
+| **Hierarchical** | Org structures, category breakdowns, mind maps | `hierarchy-*` (tree, mindmap, structure) |
+
+| **List / Informational** | Tips, facts, feature lists | `list-*` (grid, row, column, zigzag) |
+
+| **Relationships** | Flow diagrams, dependency graphs | `relation-*` (dagre flow) |
+
+| **Word Cloud** | Keyword frequency, topic prominence | `chart-wordcloud` |
+
+| **Multi-section summary**| Financial reports, data analysis, dashboards |**React fallback** (no single AntV template fits) |
+
+## AntV Infographic Workflow
+
+### Step 1: Understand User Requirements
+
+Before creating an infographic, understand the user's needs and the information they want to express.
+
+- If the user provides a clear content description, break it down into a clear and concise structure.
+- Otherwise, ask for clarification (e.g., "What data or content should the infographic show?", "Do you have a preference for the visual style?")
+
+Extract:
+
+- **Title and subtitle** — the main headline and supporting context
+- **Data points** — numbers, labels, descriptions, icons for each item
+
+- **Sections/items** — logical groupings (3-7 sections work best)
+- **Source attribution** — where the data comes from (if applicable)
+
+- **Style preferences** — colors, dark/light theme, hand-drawn style (if any)
+
+Do not invent data or placeholder text. If the user provides incomplete content, ask for the missing pieces.
+
+**Language rule:** Always respect the language of user input. If the user inputs in Chinese, all text in the syntax must also be in Chinese. Same for any other language.
+
+### Step 2: Select Template and Write DSL
+
+Choose the right template from the available templates list (see `references/antv-syntax.md` for the full list).
+
+Template selection guide:
+
+- Strict sequence (process/steps/development trend) → `sequence-*`
+- Timeline → `sequence-timeline-*`
+
+- Staircase diagram → `sequence-stairs-*`
+- Roadmap → `sequence-roadmap-vertical-*`
+
+- Zigzag path → `sequence-zigzag-*`
+- Circular progress → `sequence-circular-simple`
+
+- 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-*`
+- Hierarchical structure (tree diagram) → `hierarchy-tree-*`
+
+- Mind map → `hierarchy-mindmap-*`
+- Org chart / structure → `hierarchy-structure`
+
+- Data charts (bar, pie, line) → `chart-*`
+- Relationship / flow diagram → `relation-*`
+
+- Word cloud → `chart-wordcloud`
+
+Write the AntV Infographic DSL syntax. The syntax rules are documented in `references/antv-syntax.md` — read it before writing any DSL.
+
+Key syntax rules:
+
+- First line must be `infographic <template-name>`
+- Use `data`/`theme` blocks with two-space indentation
+
+- Key-value pairs use `key space value`; arrays use`-` as entry prefix
+- Main data field depends on template category:
+
+- `list-*`→`lists`
+- `sequence-*`→`sequences`
+
+- `compare-*`→`compares`
+- `hierarchy-structure`→`items`
+
+- `hierarchy-*`(others) → single`root`with nested`children`
+- `relation-*`→`nodes`+`relations`
+
+- `chart-*`→`values`
+- Use `items` as fallback when uncertain
+
+### Step 3: Render as HTML File
+
+Create a complete HTML file using this template:
+
+```html
+
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+
+<meta charset="utf-8" />
+
+<title>{title} - Infographic</title>
+
+<style>
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body { width: 100%; height: 100%; }
+
+#container { width: 100%; height: 100%; }
+
+</style>
+
+</head>
+
+<body>
+
+<div id="container"></div>
+
+<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
+
+<script>
+
+const infographic = new AntVInfographic.Infographic({
+
+container: '#container',
+
+width: '100%',
+
+height: '100%',
+
+});
+
+document.fonts?.ready.then(() => {
+
+infographic.render(`{syntax}`);
+
+}).catch((error) => {
+
+console.error('Error waiting for fonts to load:', error);
+
+infographic.render(`{syntax}`);
+
+});
+
+</script>
+
+</body>
+
+</html>
+
+```
+
+Replace `{title}`with the actual title and`{syntax}` with the AntV Infographic DSL.
+
+Save the file as `exports/<title-slug>-infographic.html` (use kebab-case for the filename).
+
+### Step 4: Export as Static Image
+
+To capture the HTML file as a static image:
+
+1. Copy the HTML file into the mockup sandbox's public directory (`artifacts/mockup-sandbox/public/`) so it's accessible via the dev server.
+2. Restart the mockup sandbox workflow so Vite picks up the new public file.
+
+3. Wait a few seconds for the server to restart and the CDN script to load.
+4. Screenshot the page:
+
+```javascript
+
+screenshot({
+
+artifact_dir_name: "mockup-sandbox",
+
+path: "/<filename>.html",
+
+viewport_size: [1200, 900],
+
+save_to: "exports/<title-slug>-infographic.jpg"
+
+});
+
+```
+
+**Important:** The `path`parameter is relative to the artifact's preview path — the tool automatically prepends`/__mockup`. So use`/<filename>.html`, not`/__mockup/<filename>.html`.
+
+If the screenshot approach has issues with CDN loading (blank page, missing fonts), the HTML file itself is the deliverable — present it to the user and mention they can open it in any browser to view and export as SVG.
+
+### Step 5: Deliver to User
+
+Present results:
+
+- The exported `.jpg`image file via`present_asset` (primary deliverable)
+- Mention the HTML file path and that it can be opened in a browser for full-resolution SVG export
+
+- Ask: "Let me know if you'd like to adjust the template, colors, or content."
+
+## React Fallback Workflow (Summary)
+
+When using the React fallback (see `references/react-fallback.md` for full details):
+
+1. **Analyze the data** — categorize, aggregate, and compute totals/percentages before building
+2. **Create the component** at `artifacts/mockup-sandbox/src/components/mockups/infographics/<Name>.tsx`
+
+3. **Restart the mockup sandbox workflow** — the Vite plugin needs to discover the new file. Always restart after creating a new component file.
+4. **Wait 3-5 seconds** after restart for the dev server and component registry to settle
+
+5. **Screenshot** using the correct path format:
+
+```javascript
+
+screenshot({
+
+artifact_dir_name: "mockup-sandbox",
+
+path: "/preview/infographics/<ComponentName>",
+
+viewport_size: [1050, 1600],
+
+save_to: "exports/<name>-infographic.jpg"
+
+});
+
+```
+
+**Path rules:** The `path`must NOT include`/__mockup`— the screenshot tool prepends the artifact's preview path automatically. Use`/preview/infographics/<ComponentName>`.
+
+**Viewport sizing:** Start with a tall viewport (1500-1600px height) to capture the full infographic. If content is cut off at the bottom, increase the height and retake. It's easier to start tall and trim than to guess short and miss content.
+
+1. **Present** the exported image via `present_asset`
+
+## Tips for Great Infographics
+
+- **Less is more.** Remove anything that doesn't help the audience understand the key message. Every element should earn its space.
+- **One key takeaway.** The best infographics have a single dominant insight that the viewer gets within 3 seconds.
+
+- **Visual encoding over text.** Use size, color, position, and icons to convey meaning instead of long text blocks.
+- **Reading flow.** Guide the eye with clear visual hierarchy — numbering, arrows, and color progression all help.
+
+- **Contrast for emphasis.** Make the most important numbers visually dominant — large, bold, colored.
+- **Consistent visual language.** Pick an icon style, color palette, and typographic scale — then stick with them throughout.
+
+- **Use themes.** AntV supports dark themes, custom palettes, hand-drawn style (`stylize rough`), pattern fills, and gradients. Use them to match the user's brand or preferences.
+
+## Checklist Before Delivering
+
+- [ ] All data and content from the user is accurately represented (no invented data)
+- [ ] The infographic uses the most appropriate approach (AntV for single-type, React for multi-type)
+
+- [ ] Text language matches the user's input language
+- [ ] Theme/palette matches any brand preferences the user specified
+
+- [ ] The exported image captures the full infographic — no cut-off content at the bottom
+- [ ] Source attribution is included if the user provided data sources
+
+- [ ] The image file has been presented to the user via `present_asset`