npm - @muskanmeet/invoicing-design-system - Versions diffs - 0.1.0 - Mend

@muskanmeet/invoicing-design-system 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (695) hide show

package/.local/skills/react-vite/references/seo.md ADDED Viewed

@@ -0,0 +1,158 @@
+# SEO Implementation Guide
+Follow this guide when building or optimizing a React + Vite web app for search engine visibility.
+## Critical SEO Foundations
+### Title & Meta Description
+- Every page needs a unique `<title>` (50-60 chars) with primary keyword near the start
+- Every page needs a `<meta name="description">` (150-160 chars) with a clear value proposition
+- For SPAs: implement dynamic titles per route (e.g., `document.title` or `react-helmet-async`)
+### Heading Structure
+- Exactly one `<h1>` per page/route containing the primary keyword
+- Logical hierarchy — no skipping from H1 to H3
+- Don't use headings purely for styling
+### Semantic HTML
+- Use `<header>`, `<main>`, `<nav>`, `<footer>`, `<article>`, `<section>` instead of generic `<div>` wrappers
+- Use `<a>` for navigation links, not click-handler divs
+- Use `<button>` for actions, `<a>` for navigation
+## Open Graph & Social Sharing
+Add to `<head>` on every page (or the SPA shell):
+```html
+<meta property="og:title" content="Page Title">
+<meta property="og:description" content="Page description">
+<meta property="og:image" content="https://yourdomain.com/og-image.png">
+<meta property="og:url" content="https://yourdomain.com/page">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Page Title">
+<meta name="twitter:description" content="Page description">
+<meta name="twitter:image" content="https://yourdomain.com/og-image.png">
+```
+For SPAs, these must be set server-side or in the static HTML shell for crawlers to see them.
+## Technical SEO
+### Images
+- All `<img>` tags need descriptive `alt` attributes (not "image1")
+- Add `width` and `height` attributes to prevent CLS
+- Use `loading="lazy"` on below-the-fold images
+- Prefer WebP format where possible
+### Links
+- Internal links use descriptive anchor text, not "click here"
+- External links use `rel="noopener noreferrer"`
+- No broken internal links — check route references match actual routes
+### Performance
+- Fonts: use `font-display: swap` in `@font-face` rules
+- Defer non-critical JS: `<script defer>` or dynamic imports
+- Inline critical CSS or ensure CSS loads early
+- Avoid render-blocking resources in `<head>`
+## Crawlability
+### robots.txt
+Create at the public directory root:
+```text
+User-agent: *
+Allow: /
+Sitemap: https://yourdomain.com/sitemap.xml
+```
+### sitemap.xml
+Create listing all public pages:
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://yourdomain.com/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <!-- Add all public routes -->
+</urlset>
+```
+For dynamic sites, generate the sitemap from routes programmatically.
+### Canonical URLs
+- Add `<link rel="canonical" href="https://yourdomain.com/current-page">` to each page
+- Prevents duplicate content issues between www/non-www, trailing slashes, query params
+## SPA-Specific Issues
+**Problem:** Crawlers may not execute JavaScript, so they see an empty `<div id="root">`.
+**Solutions (in order of preference):**
+1. **Pre-rendering:** Use a build-time tool to generate static HTML for each route (e.g., `vite-plugin-ssr`, `react-snap`)
+2. **Server-side rendering:** If using Next.js or Remix, SSR is built in — verify pages render server-side
+3. **Meta tag injection:** At minimum, ensure the HTML shell has good default meta tags hardcoded before any JS loads
+**SPA Routing:**
+- If using hash routing (`/#/about`), switch to browser history routing (`/about`) — search engines ignore hash fragments
+- Ensure the server returns the SPA shell for all routes (catch-all / wildcard route) so direct URL access works
+## Structured Data (JSON-LD)
+Add schema markup in a `<script type="application/ld+json">` block in the HTML — do NOT inject this dynamically. Choose based on site type:
+| Site Type | Schema |
+|-----------|--------|
+| Business / SaaS | `Organization`, `WebSite`, `WebApplication` |
+| Blog / Content | `Article`, `BlogPosting`, `BreadcrumbList` |
+| Product / Store | `Product`, `Offer`, `AggregateRating` |
+| Portfolio | `Person`, `CreativeWork` |
+| Local business | `LocalBusiness`, `PostalAddress` |
+Example for a SaaS landing page:
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebApplication",
+  "name": "App Name",
+  "description": "What the app does",
+  "url": "https://yourdomain.com",
+  "applicationCategory": "Category",
+  "operatingSystem": "Web"
+}
+</script>
+```
+## Pre-Launch Checklist
+- [ ] Every page has a unique `<title>` and `<meta name="description">`
+- [ ] One `<h1>` per page with relevant keyword
+- [ ] Open Graph and Twitter Card meta tags present
+- [ ] All images have descriptive `alt` text and dimensions
+- [ ] Semantic HTML elements used (`<main>`, `<nav>`, `<header>`, `<footer>`)
+- [ ] `robots.txt` exists and allows crawling
+- [ ] `sitemap.xml` exists and lists all public pages
+- [ ] Canonical URLs set on each page
+- [ ] No broken internal links
+- [ ] Fonts use `font-display: swap`
+- [ ] Below-fold images use `loading="lazy"`
+- [ ] Structured data (JSON-LD) added for site type
+- [ ] SPA routes work with direct URL access (no 404s)
+- [ ] Page loads in under 3 seconds on mobile

package/.local/skills/remove-image-background/.fingerprint ADDED Viewed

	@@ -0,0 +1 @@
1	+ fc1747ea2aac9bbfd5d979d307c1e0bb

package/.local/skills/remove-image-background/SKILL.md ADDED Viewed

@@ -0,0 +1,55 @@
+---
+name: remove-image-background
+description: Remove backgrounds from existing images, producing transparent PNG files.
+---
+# Remove Image Background Skill
+Remove the background from an existing image file in the project, producing a transparent PNG.
+## Available Functions
+### removeImageBackground(imagePath, ...)
+Remove the background from an existing image file.
+**Parameters:**
+- `imagePath` (str, required): Path to the input image file
+- `outputPath` (str, optional): Path to save the result PNG. Defaults to replacing the extension with `_no_bg.png`
+**Returns:** Dict with `outputPath` key containing the path to the saved result
+**Example:**
+```javascript
+const result = await removeImageBackground({
+    imagePath: "attached_assets/photo.jpg",
+    outputPath: "attached_assets/photo_no_bg.png"
+});
+console.log(`Result saved to: ${result.outputPath}`);
+```
+## When to Use
+- User has an existing image and wants its background removed
+- User uploads a photo and asks to make the background transparent
+- Creating transparent versions of logos, product photos, or portraits
+- Preparing images for compositing or overlay on other backgrounds
+## Best Practices
+1. **Output must be PNG**: The output file must have a `.png` extension since transparency requires PNG format
+2. **Use default output path when possible**: Omit `outputPath` to automatically save as `<original_name>_no_bg.png`
+3. **Supported input formats**: Works with common image formats (PNG, JPG, JPEG, WebP, etc.)
+## Output Location
+- Default output: Same directory as input, with `_no_bg.png` suffix
+- Custom output: Any path ending in `.png`
+## Limitations
+- Output format is always PNG (required for transparency)
+- Very complex backgrounds or low-contrast edges may not be perfectly removed
+- Works best with clear foreground subjects (people, objects, logos)

package/.local/skills/repl_setup/.fingerprint ADDED Viewed

	@@ -0,0 +1 @@
1	+ b09ec12a3189323f8f40b30b3fe60f7c

package/.local/skills/repl_setup/SKILL.md ADDED Viewed

@@ -0,0 +1,90 @@
+---
+name: repl_setup
+description: Setup and configure web applications in the Replit environment. Covers host configuration, frontend/backend connectivity, cache control, and framework-specific setup for Angular, React, Vite, and Vue.
+---
+# Repl Setup
+Guidelines for setting up and configuring web applications to work correctly in the Replit environment. Users see your application through a proxy (iframe), which requires specific configuration.
+## When to Use
+Use this skill when:
+- Setting up a new web application or frontend framework
+- The user cannot see your frontend changes
+- Configuring host settings for development servers
+- Connecting frontend code to backend APIs
+- Debugging visibility issues with the user's preview
+## When NOT to Use
+- For non-web applications (CLI tools, scripts, etc.)
+- When the application is already working correctly
+- For deployment/publishing issues (use the deployment skill)
+## Critical Replit Environment Rules
+### Host Configuration
+The user sees your frontend through a proxy within an iframe. **You must configure your development server to allow all hosts**, otherwise the user will never see your frontend.
+Every web framework needs its development configuration set to allow all hosts. If you don't know the specific configuration for a framework, use web search to find it.
+### Frontend Server Port
+Bind frontend servers to **0.0.0.0:5000**. Never bind anything else to port 5000.
+### No Docker or Virtual Environments
+Never use Docker, virtual environments, or containerization. Replit uses a Nix environment that doesn't support nested virtualization.
+## Stack-Specific Setup
+For framework-specific configuration, refer to these guides:
+- `.local/skills/repl_setup/references/angular.md` - Angular setup with allowedHosts and CLI flags
+- `.local/skills/repl_setup/references/react_vite.md` - React and Vite configuration
+- `.local/skills/repl_setup/references/vue.md` - Vue.js setup
+For Microsoft Fabric (MSFT_RAYFIN) apps, the standard Replit dev-server proxy rules don't apply — the project is published to the Microsoft Rayfin backend instead. Use the `msft-rayfin` skill for setup instructions and the `fabric-rayfin` skill for the deploy workflow.
+## Frontend-Backend Connectivity
+When your frontend calls a local backend API:
+1. **Get the public domain**: Run `env | grep DOMAIN` in the shell to get the website's public URL
+2. **Use the public URL**: Replace any `localhost` references with the public domain
+3. **Never use localhost**: You're in a cloud environment - the user cannot access your localhost
+```bash
+# Get the public domain for API calls
+env | grep DOMAIN
+```
+## Debugging Visibility Issues
+If the user reports they cannot see your changes:
+1. **Check workflow status**: Ensure the workflow is running and has been restarted after changes
+2. **Read console logs**: Check for errors and follow any instructions in the logs
+3. **Verify host configuration**: Confirm the framework's dev config allows all hosts (most common issue)
+4. **Cache control** (rare): If above checks pass, the issue may be caching
+   - Modify webserver code to disable cache storage
+   - Instruct user to use "empty cache and hard refresh" in developer tools
+## Workflow Setup Order
+Always set up frontend workflows first, then backend services. After completing any task:
+1. Re-run the workflows to ensure they're running
+2. Read the console logs to verify no errors
+3. Take a screenshot to confirm the frontend is visible
+## Best Practices
+1. **Verify host config early**: Check framework-specific allowedHosts before writing any code
+2. **Test visibility immediately**: After setup, verify the user can see the preview
+3. **Use public URLs**: Never hardcode localhost in frontend code
+4. **Restart after changes**: Server-side changes require workflow restart
+5. **Check logs first**: Console logs often reveal the root cause of issues

package/.local/skills/repl_setup/references/angular.md ADDED Viewed

@@ -0,0 +1,103 @@
+# Angular Setup
+Configuration requirements for Angular applications in the Replit environment.
+## Mandatory Setup Steps
+### 1. Disable Analytics
+Angular CLI analytics must be disabled during setup. Use the `--disable-analytics` flag or set it in configuration:
+```bash
+ng analytics off
+```
+### 2. Configure allowedHosts
+Set `allowedHosts: true` in `angular.json` to allow the Replit proxy to access your dev server:
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "serve": {
+          "options": {
+            "allowedHosts": true,
+            "host": "0.0.0.0",
+            "port": 5000
+          }
+        }
+      }
+    }
+  }
+}
+```
+### 3. Use Non-Interactive Commands
+Never use interactive Angular CLI tools. Always use command-line flags instead:
+```bash
+# Good - non-interactive
+ng generate component my-component --skip-tests --standalone
+# Bad - interactive (will hang)
+ng generate component
+```
+## Common Flags
+| Flag | Purpose |
+|------|---------|
+| `--skip-tests` | Skip test file generation |
+| `--standalone` | Create standalone component |
+| `--inline-style` | Use inline styles |
+| `--inline-template` | Use inline template |
+| `--style=css` | Specify style format |
+## Workflow Configuration
+```bash
+ng serve --host 0.0.0.0 --port 5000 --disable-host-check
+```
+Or configure in `angular.json`:
+```json
+{
+  "serve": {
+    "options": {
+      "host": "0.0.0.0",
+      "port": 5000,
+      "disableHostCheck": true
+    }
+  }
+}
+```
+## Troubleshooting
+### User Cannot See the Application
+1. Verify `allowedHosts: true` is set in `angular.json`
+2. Ensure the server is bound to `0.0.0.0` not `localhost`
+3. Check that port 5000 is being used
+4. Restart the workflow after configuration changes
+### CLI Commands Hang
+You're using an interactive command. Add the necessary flags to make it non-interactive:
+```bash
+# Instead of interactive prompts
+ng new my-app --routing --style=css --skip-git --skip-tests
+```
+### Build Errors After Setup
+Check console logs for specific errors. Common issues:
+- Missing peer dependencies
+- Version mismatches between Angular packages
+- TypeScript configuration issues

package/.local/skills/repl_setup/references/react_vite.md ADDED Viewed

@@ -0,0 +1,121 @@
+# React and Vite Setup
+Configuration requirements for React applications using Vite in the Replit environment.
+## Mandatory Setup
+### Configure allowedHosts in vite.config.ts
+You **must** allow all hosts in your Vite configuration. Without this, the user will never see your application through the Replit proxy.
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: true,
+    // Or specify the Replit domains explicitly:
+    // allowedHosts: ['.replit.dev', '.repl.co']
+  },
+});
+```
+## Full Example Configuration
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: true,
+    strictPort: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});
+```
+## Hot Module Replacement (HMR)
+Vite's HMR works automatically in Replit. Frontend changes are reflected immediately without a manual restart.
+**Requires restart:**
+- vite.config.ts changes
+- Environment variable changes
+- Package installation
+**Does NOT require restart:**
+- React component changes
+- CSS/style changes
+- Asset changes
+## Connecting to Backend API
+When your React app calls a backend API, use the Replit domain instead of localhost:
+```typescript
+// Get the API URL from environment or use the Replit domain
+const API_URL = import.meta.env.VITE_API_URL || '';
+// Fetch from your backend
+const response = await fetch(`${API_URL}/api/users`);
+```
+For development, you can configure a proxy in vite.config.ts:
+```typescript
+export default defineConfig({
+  server: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```
+## Troubleshooting
+### User Cannot See the Application
+1. Verify `allowedHosts: true` is in vite.config.ts
+2. Confirm server is bound to `0.0.0.0` (not `127.0.0.1` or `localhost`)
+3. Check port is 5000
+4. Restart the workflow after config changes
+### Changes Not Appearing
+1. For config changes: Restart the workflow
+2. For component changes: HMR should handle it automatically
+3. If HMR fails: Check browser console for errors, then restart
+### Build Errors
+Check for:
+- Missing dependencies in package.json
+- TypeScript errors in source files
+- Invalid import paths

package/.local/skills/repl_setup/references/vue.md ADDED Viewed

@@ -0,0 +1,102 @@
+# Vue.js Setup
+Configuration requirements for Vue.js applications in the Replit environment.
+## Vite-based Vue Projects (Recommended)
+Most modern Vue projects use Vite. Configure `vite.config.ts`:
+```typescript
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: true,
+  },
+});
+```
+## Vue CLI Projects
+For older Vue CLI projects, configure `vue.config.js`:
+```javascript
+module.exports = {
+  devServer: {
+    host: '0.0.0.0',
+    port: 5000,
+    allowedHosts: 'all',
+    // Or use disableHostCheck for older versions:
+    // disableHostCheck: true,
+  },
+};
+```
+## Nuxt.js Projects
+For Nuxt 3, configure `nuxt.config.ts`:
+```typescript
+export default defineNuxtConfig({
+  devServer: {
+    host: '0.0.0.0',
+    port: 5000,
+  },
+  vite: {
+    server: {
+      allowedHosts: true,
+    },
+  },
+});
+```
+For Nuxt 2, configure `nuxt.config.js`:
+```javascript
+export default {
+  server: {
+    host: '0.0.0.0',
+    port: 5000,
+  },
+};
+```
+## Connecting to Backend API
+Use environment variables for API URLs:
+```typescript
+// composables/useApi.ts
+export const useApi = () => {
+  const baseUrl = import.meta.env.VITE_API_URL || '';
+  return {
+    fetch: (endpoint: string) => fetch(`${baseUrl}${endpoint}`),
+  };
+};
+```
+## Troubleshooting
+### User Cannot See the Application
+1. Verify host configuration allows all hosts
+2. Confirm binding to `0.0.0.0` on port 5000
+3. Restart workflow after configuration changes
+4. Check console logs for startup errors
+### Hot Reload Not Working
+1. Check for errors in terminal output
+2. Verify Vite/webpack is running in watch mode
+3. Clear browser cache and hard refresh
+### Build Errors
+- Check for missing dependencies
+- Verify Vue version compatibility with plugins
+- Review TypeScript errors if using Vue with TypeScript

package/.local/skills/replit-docs/.fingerprint ADDED Viewed

	@@ -0,0 +1 @@
1	+ d43aed528f9bcc2b05f8e68944c4e95f