diff --git a/data/tools.json b/data/tools.json
index d1ebf57..c720805 100644
--- a/data/tools.json
+++ b/data/tools.json
@@ -79,23 +79,8 @@
       "shortDescription": "Parse, validate, mask, search, and export .env files entirely in the browser.",
       "longDescription": "## .env Parser & Validator\n\nA privacy-first developer utility for inspecting .env configuration files locally without uploads, servers, or dependencies.\n\n### Features\n\n- Paste, upload, or drag and drop .env files\n- Parses comments, blank lines, quoted values, escaped characters, empty values, and spaces around equals signs\n- Detects duplicate keys, malformed lines, invalid names, whitespace issues, empty values, invalid quotes, unused comments, and suspicious values\n- Masks sensitive variables such as API keys, secrets, passwords, tokens, private keys, and database URLs by default\n- Live search, filtering, sorting, pagination, and validation statistics\n- Exports pretty or minified JSON and cleaned .env files with duplicate and comment options\n- Keyboard shortcuts for opening, clearing, searching, and downloading\n- Works completely offline in a single browser-only HTML file",
       "category": "utilities",
-      "tags": [
-        "configuration",
-        "developer-tools",
-        "dotenv",
-        "env",
-        "offline",
-        "parser",
-        "security",
-        "validator"
-      ],
-      "techStack": [
-        "Clipboard API",
-        "CSS3",
-        "FileReader API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["configuration", "developer-tools", "dotenv", "env", "offline", "parser", "security", "validator"],
+      "techStack": ["Clipboard API", "CSS3", "FileReader API", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -105,22 +90,8 @@
       "shortDescription": "Parse .env files under strict rules, with detailed line-by-line validation, quick-fix suggestions, and metrics.",
       "longDescription": "## .env Parser & Validator (Strict Mode)\n\nA highly precise developer utility for strict validation of .env configuration files. Detects syntax anomalies, invalid characters, unclosed quotes, duplicate definitions, and style issues, complete with actionable inline fixes.\n\n### Features\n\n- Strict key validation: enforces alphanumeric character sets and correct start characters\n- Line-by-line visual analyzer showing green, yellow (warning), and red (error) status\n- Actionable 'Quick Fix' options to automatically correct spaces, quote wrapping, keys, and duplicate definitions\n- Dashboard displaying summary metrics (valid, empty, duplicate, warning, and error keys)\n- Normalization/Sanitization export options: trim spaces, enforce uppercase keys, strip/keep inline comments, normalize quotes\n- Fast local processing: all parses happen in-browser offline with zero server uploads",
       "category": "utilities",
-      "tags": [
-        "configuration",
-        "developer-tools",
-        "dotenv",
-        "env",
-        "offline",
-        "parser",
-        "security",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["configuration", "developer-tools", "dotenv", "env", "offline", "parser", "security", "validator"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -130,22 +101,8 @@
       "shortDescription": "Generate a comprehensive accessibility matrix comparing all background and foreground color combinations against WCAG 2.1 contrast guidelines.",
       "longDescription": "## A11y Contrast Grid Generator\n\nAn interactive utility to evaluate a color palette's accessibility by generating a comprehensive grid comparing all background/foreground color combinations against WCAG 2.1 contrast guidelines.\n\n### Features\n\n- **Interactive Palette Manager**: Add, edit, or delete custom colors (HEX, RGB, HSL) with real-time swatch previews.\n- **Accessibility Compliance Matrix**: Generates a matrix comparing every color as background against every color as foreground, displaying contrast ratios and WCAG status (AA, AAA, or Fail) for normal and large text.\n- **Intelligent Filtering**: Filter the grid to show only compliant combinations, only AA-compliant, or only AAA-compliant pairs.\n- **Design Tokens Export**: Export color combinations as Tailwind configurations, CSS custom properties, SCSS variables, or JSON.\n- **Export Capabilities**: Export the final contrast grid as an SVG, CSV, or formatted HTML snippet.",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "color",
-        "contrast",
-        "css",
-        "design-system",
-        "developer-tools",
-        "ui",
-        "wcag"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "color", "contrast", "css", "design-system", "developer-tools", "ui", "wcag"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -155,24 +112,8 @@
       "shortDescription": "Visually create and customize robots.txt files with support for multiple user-agents, crawl rules, sitemaps, and instant code generation.",
       "longDescription": "## Advanced Robots.txt Generator\n\nGenerate a valid robots.txt file through an intuitive visual interface. Configure multiple user-agent groups, Allow/Disallow directives, Crawl-delay values, optional Host directives, and XML Sitemaps while seeing the generated robots.txt update instantly.\n\n### Features\n\n- Visual editor for robots.txt generation\n- Support for multiple User-agent groups\n- Add Allow and Disallow rules with one click\n- Optional Crawl-delay directive for each user-agent\n- Optional Host directive support\n- Add multiple XML Sitemap URLs\n- Built-in presets including Allow All, Disallow All, Standard SEO, and WordPress Base\n- Live syntax-highlighted robots.txt preview\n- Copy generated robots.txt to the clipboard\n- Download the generated file as robots.txt\n- Fully responsive interface with modern dark theme\n- Built with HTML, CSS, and Vanilla JavaScript with no backend required",
       "category": "web-seo",
-      "tags": [
-        "crawler",
-        "generator",
-        "robots",
-        "robots-txt",
-        "search-engine",
-        "seo",
-        "sitemap",
-        "user-agent",
-        "webmaster",
-        "website"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["crawler", "generator", "robots", "robots-txt", "search-engine", "seo", "sitemap", "user-agent", "webmaster", "website"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -182,21 +123,8 @@
       "shortDescription": "Draft image alt text and get instant feedback on whether it's clear, concise, and accessible.",
       "longDescription": "## Alt Text Helper\n\nPreview an image locally, draft its alt text, and get instant guidance on whether the description is too vague, too long, repetitive, or missing detail — with a scaffold to help you start. Runs fully offline.\n\n### Features\n\n- Upload or drag-and-drop an image to preview it locally (never uploaded)\n- Insert a guided fill-in scaffold to start a description\n- Flags common issues: too vague, too long, repetitive, redundant \"image of\" openers, unfilled placeholders, and filenames\n- Live character counter with screen-reader-friendly length guidance\n- Tips for writing accessible, context-aware alt text\n- Copy the final alt text to the clipboard\n- Clear and start over with one click\n- Fully responsive, keyboard accessible, and works offline",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "alt-text",
-        "content",
-        "image",
-        "utility",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "alt-text", "content", "image", "utility", "web"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -206,21 +134,8 @@
       "shortDescription": "Visually create and customize CSS cubic-bezier() easing functions with a live animation preview.",
       "longDescription": "## Animation Cubic-Bezier Editor\n\nA professional visual editor for crafting custom CSS easing functions.\n\n### Features\n\n- **Interactive Canvas:** Draggable control points to visually sculpt your bezier curve.\n- **Live Preview:** Real-time animation box to instantly test how your easing feels.\n- **Smart Presets:** One-click load standard easings (`ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`).\n- **Instant Export:** Auto-generates standard-compliant `cubic-bezier()` CSS syntax with a 1-click copy feature.\n- **Offline First:** Operates entirely client-side using Vanilla JS and native SVG manipulation.",
       "category": "css",
-      "tags": [
-        "animation",
-        "bezier",
-        "css",
-        "easing",
-        "frontend",
-        "generator",
-        "transition"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "SVG",
-        "Vanilla JS"
-      ],
+      "tags": ["animation", "bezier", "css", "easing", "frontend", "generator", "transition"],
+      "techStack": ["CSS3", "HTML5", "SVG", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -232,20 +147,8 @@
       "name": "API Response Mocker",
       "shortDescription": "Define custom JSON responses and simulate API endpoints directly in the browser.",
       "status": "live",
-      "tags": [
-        "api",
-        "developer-tools",
-        "endpoint",
-        "json",
-        "mock",
-        "response",
-        "testing"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ]
+      "tags": ["api", "developer-tools", "endpoint", "json", "mock", "response", "testing"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"]
     },
     {
       "id": "aria-role-reference",
@@ -253,22 +156,8 @@
       "shortDescription": "A fast, offline reference for common WAI-ARIA roles with attributes, semantic alternatives, and examples.",
       "longDescription": "## ARIA Role Reference\n\nBrowse and search common WAI-ARIA roles as a quick offline reference. Each role shows its purpose, commonly used attributes, the preferred semantic HTML alternative, a copyable code example, and common mistakes to avoid.\n\n### Features\n\n- Searchable, category-grouped list of common ARIA roles\n- Instant filtering by role name, category, or purpose\n- Purpose and description for each role\n- Commonly used ARIA attributes shown as chips\n- Semantic HTML alternative highlighted where one exists\n- Copyable code example demonstrating correct usage\n- Common accessibility mistakes for each role\n- Fully responsive, keyboard accessible, and works offline",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "aria",
-        "html",
-        "reference",
-        "semantic-html",
-        "utility",
-        "web-development"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "aria", "html", "reference", "semantic-html", "utility", "web-development"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -278,23 +167,8 @@
       "shortDescription": "Encode plain text characters into binary byte structures, or translate stream bits back into readable text.",
       "longDescription": "## ASCII / UTF-8 Text to Binary Converter\n\nA lightweight, client-side educational utility for mapping character strings directly to binary sequences. Input plain text strings to watch them translate instantly into formatted 8-bit octet blocks, or paste raw binary bitstreams to decode them back into standard plain-text strings.\n\n### Features\n\n- Real-time bidirectional encoding and decoding actions\n- Formatted 8-bit visual grid displaying text character mapping highlights\n- One-click copy-to-clipboard functionality\n- Sample configurations loaded automatically on click\n- Session clearing functions\n- Dark and light theme configurations derived from system values\n- Privacy-first layout executing entirely client-side with no network data transfers",
       "category": "text",
-      "tags": [
-        "ascii",
-        "binary",
-        "converter",
-        "decoder",
-        "encoder",
-        "low-level",
-        "math",
-        "science",
-        "text",
-        "utf-8"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["ascii", "binary", "converter", "decoder", "encoder", "low-level", "math", "science", "text", "utf-8"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -304,21 +178,8 @@
       "shortDescription": "Calculate and simplify aspect ratios instantly. Supports common presets and outputs decimal ratio and CSS padding-bottom values.",
       "longDescription": "## Aspect Ratio Calculator\n\nA quick utility for calculating and simplifying aspect ratios from any width and height.\n\n### Features\n\n- Real-time calculation as you type\n- Simplified ratio (e.g. 16:9, 4:3)\n- Decimal ratio for CSS and design tools\n- CSS padding-bottom percentage for responsive containers\n- Common presets (16:9, 4:3, 1:1, 21:9)\n- Copy result to clipboard\n- Light and dark mode support\n- Works completely offline",
       "category": "image",
-      "tags": [
-        "aspect-ratio",
-        "calculator",
-        "design",
-        "frontend",
-        "image",
-        "responsive",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["aspect-ratio", "calculator", "design", "frontend", "image", "responsive", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -328,19 +189,8 @@
       "shortDescription": "A simple, offline utility to encode raw text into Base64 format and decode Base64 strings back to text.",
       "longDescription": "## Base64 Encoder / Decoder\n\nA simple, offline utility to encode raw text into Base64 format and decode Base64 strings back into human-readable text.\n\n### Features\n\n- **Instant Conversion:** Real-time encoding and decoding as you type.\n- **File Upload:** Select small files (like images) and instantly convert them to Base64 data URIs.\n- **Offline First:** Operates entirely client-side using Vanilla JS.\n- **Error Detection:** Automatically identifies invalid Base64 input and prevents UI crashes.",
       "category": "utilities",
-      "tags": [
-        "base64",
-        "decoder",
-        "developer-tools",
-        "encoder",
-        "text",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["base64", "decoder", "developer-tools", "encoder", "text", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -350,21 +200,8 @@
       "shortDescription": "Convert images to Base64 data URIs, or decode Base64 strings back into viewable images.",
       "longDescription": "## Base64 Image Converter\n\nConvert an image to a Base64 data URI, or decode a Base64 string / data URI back into a viewable image — entirely offline, with no upload.\n\n### Features\n\n- Encode: upload or drag-and-drop an image to get its Base64 data URI\n- Copy the Base64 string or a ready-to-use CSS `url()` value\n- Decode: paste a data URI or raw Base64 to preview and download the image\n- Live preview with file size and encoded length shown\n- Clear/reset either panel independently\n- Fully responsive, keyboard accessible, and works offline",
       "category": "image",
-      "tags": [
-        "base64",
-        "converter",
-        "decoder",
-        "encoder",
-        "image",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "FileReader API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["base64", "converter", "decoder", "encoder", "image", "utility"],
+      "techStack": ["CSS3", "FileReader API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -374,21 +211,8 @@
       "shortDescription": "A simulated bash terminal to play with and learn common commands, entirely in your browser.",
       "longDescription": "## Bash Sandbox\n\nA simulated bash terminal environment that runs entirely in your browser. It's a safe and fun way to learn and experiment with common shell commands like `ls`, `cd`, `cat`, `mkdir`, and `echo` without any risk to your system. The sandbox operates on a virtual file system that resets on every page load.\n\n### Features\n\n- A realistic terminal-like interface.\n- Support for core commands: `ls`, `cd`, `cat`, `mkdir`, `touch`, `pwd`, `echo`, `clear`, and `help`.\n- A virtual file system to navigate and manipulate.\n- Command history using up/down arrow keys.\n- Tab autocompletion for paths.\n- Works entirely offline.",
       "category": "utilities",
-      "tags": [
-        "bash",
-        "cli",
-        "command-line",
-        "learning",
-        "offline",
-        "sandbox",
-        "shell",
-        "terminal"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["bash", "cli", "command-line", "learning", "offline", "sandbox", "shell", "terminal"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -398,18 +222,8 @@
       "shortDescription": "Convert between binary, decimal, hexadecimal, and octal.",
       "longDescription": "## Binary Decimal Converter\n\nConvert between binary, decimal, hexadecimal, and octal.\n\n### Features\n\n- Single HTML file\n- Works offline\n- Dark mode support\n- Responsive design",
       "category": "utilities",
-      "tags": [
-        "binary",
-        "converter",
-        "decimal",
-        "hex",
-        "numbers"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["binary", "converter", "decimal", "hex", "numbers"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -419,21 +233,8 @@
       "shortDescription": "Design CSS box shadows visually with live preview, presets, and copy-ready output.",
       "longDescription": "## Box Shadow Generator\n\nA visual CSS box-shadow designer for developers and designers.\n\n### Features\n\n- Interactive sliders for offset X/Y, blur radius, spread, and opacity\n- Color picker for shadow color\n- Inset shadow toggle\n- Multiple shadow layers support\n- Preset shadow styles\n- Live preview with customizable element\n- One-click copy of generated CSS code\n- Responsive, mobile-friendly design\n- Works completely offline",
       "category": "css",
-      "tags": [
-        "box-shadow",
-        "css",
-        "design",
-        "frontend",
-        "generator",
-        "shadow",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["box-shadow", "css", "design", "frontend", "generator", "shadow", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -443,21 +244,8 @@
       "shortDescription": "Analyze HTML to verify canonical URL implementation and identify common SEO issues.",
       "longDescription": "## Canonical URL Checker\n\nAnalyze pasted HTML to detect missing, duplicate, invalid, relative, or incorrectly placed canonical tags.\n\n### Features\n- Detects missing canonical tags\n- Identifies duplicate canonical tags\n- Validates absolute canonical URLs\n- Detects relative or empty canonical URLs\n- Checks if the canonical tag is placed inside the <head> section\n- Provides SEO recommendations\n- Copy analysis report\n- Download report as a text file\n- Works completely offline",
       "category": "web-seo",
-      "tags": [
-        "canonical",
-        "html",
-        "meta",
-        "search-engine-optimization",
-        "seo",
-        "url",
-        "validation",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["canonical", "html", "meta", "search-engine-optimization", "seo", "url", "validation", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -467,20 +255,8 @@
       "shortDescription": "Analyze HTML to verify canonical URL implementation and identify common SEO issues.",
       "longDescription": "## Canonical URL Checker\n\nPaste your HTML source to verify canonical URL implementation and detect common SEO issues like missing or duplicate canonical tags.\n\n### Features\n\n- Paste HTML source for instant analysis.\n- Detects missing, duplicate, or malformed canonical tags.\n- Highlights common SEO pitfalls.\n- Single HTML file, works offline.\n- Responsive design with dark mode support.",
       "category": "web-seo",
-      "tags": [
-        "canonical",
-        "checker",
-        "html",
-        "seo",
-        "url",
-        "validation",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["canonical", "checker", "html", "seo", "url", "validation", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -490,18 +266,8 @@
       "shortDescription": "Transform text between UPPERCASE, lowercase, camelCase, snake_case, and more.",
       "longDescription": "## Case Converter\n\nA tool that transforms input text between different case and casing conventions. Useful for developers who need to quickly reformat variable names, headings, or copy between styles (e.g. converting a sentence into camelCase for a JS variable, or into CONSTANT_CASE for an env var), as well as writers who want quick title-casing or sentence-casing for headings and copy.\n\n### Features\n- Convert text to UPPERCASE, lowercase, Title Case, and Sentence case\n- Convert to programming case styles: camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE\n- Fun/novelty conversions: aLtErNaTiNg CaSe and iNVERSE CaSe\n- Live character and word count for the input\n- One-click \"Copy result\" button with confirmation feedback\n- Smart word-splitting that correctly re-splits existing camelCase/snake_case/kebab-case input before converting to a new format\n- Fully keyboard accessible, dark mode support",
       "category": "text",
-      "tags": [
-        "case",
-        "developer-tools",
-        "formatting",
-        "string-manipulation",
-        "text"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["case", "developer-tools", "formatting", "string-manipulation", "text"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -511,21 +277,8 @@
       "shortDescription": "Interactively build Unix file permissions and get the numeric and symbolic chmod values.",
       "longDescription": "## Chmod Calculator\n\nToggle read, write, and execute permissions for owner, group, and others to instantly generate the numeric (octal) and symbolic chmod representations, with plain-English explanations.\n\n### Features\n\n- Interactive permission matrix for owner, group, and others\n- Live numeric (octal) output (e.g. 755, 644, 777)\n- Live symbolic representation (e.g. rwxr-xr-x)\n- Special permission bits: SetUID, SetGID, sticky bit\n- Ready-to-use `chmod` command line\n- Plain-English explanation of the current permission set\n- Common presets (644, 755, 600, 700, 777, 664, 775)\n- One-click copy for numeric, symbolic, and command values\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "utilities",
-      "tags": [
-        "chmod",
-        "developer-tools",
-        "filesystem",
-        "linux",
-        "permissions",
-        "unix",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["chmod", "developer-tools", "filesystem", "linux", "permissions", "unix", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -535,20 +288,8 @@
       "shortDescription": "Visually synchronize and convert time across multiple global timezones.",
       "longDescription": "## Chrono / Timezone Converter\n\nA visual timezone converter and timeline slider designed to help developers and remote teams coordinate meetings and server deployment windows across the globe.\n\n### Features\n- Select and add multiple timezones to your dashboard\n- Interactive timeline scrubber to see synced local times\n- Highlight working hours (9 AM - 5 PM) to easily spot overlapping availability\n- Reset to current 'Now' time with a single click\n- 100% offline using native Intl API",
       "category": "utilities",
-      "tags": [
-        "converter",
-        "time",
-        "timeline",
-        "timezone",
-        "utility",
-        "world-clock"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Intl API",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "time", "timeline", "timezone", "utility", "world-clock"],
+      "techStack": ["CSS3", "HTML5", "Intl API", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -558,20 +299,8 @@
       "shortDescription": "A color space analysis canvas that plots custom colors onto a CIE 1931 chromaticity diagram against sRGB, Display P3, and Rec.2020 gamut boundaries.",
       "longDescription": "## CIE Chromaticity Gamut Visualizer\n\nStandard web utilities convert values between code formats but hide the physical constraints of display hardware. This tool provides an interactive environment that maps color coordinates directly onto the formal CIE 1931 chromaticity horseshoe layout, allowing developers and designers to verify real-world device limitations.\n\n### Features\n\n- **Interactive Horseshoe Blueprint**: A crisp, high-performance coordinate space mapping spectral locus coordinates instantly through client rendering loops.\n- **Gamut Matrix Overlays**: Side-by-side color space comparison vectors demonstrating the coverage deltas between sRGB, wide-gamut Display P3, and ultra-wide Rec.2020.\n- **Clipping & Gamut Warning**: Automatic transformation algebra that alerts you when a selected color is clipped by standard display limitations.\n- **Multi-Format Plotting**: Drop in standard web inputs like HEX, RGB, HSL, or modern high-definition spaces like LCH and Lab to observe their real physical footprint.\n- **Zero-Dependency Core**: A standalone color diagnostic environment configured completely inside a single self-contained document using native JS mathematics.",
       "category": "color",
-      "tags": [
-        "cie-1931",
-        "color-space",
-        "display-p3",
-        "gamut-mapping",
-        "srgb",
-        "visualizer"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["cie-1931", "color-space", "display-p3", "gamut-mapping", "srgb", "visualizer"],
+      "techStack": ["Canvas API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -581,20 +310,8 @@
       "shortDescription": "Visually create complex CSS clip-path shapes and instantly copy the generated code.",
       "longDescription": "## Clip Path Generator\n\nA visual CSS `clip-path` generator for developers and designers.\n\n### Features\n\n- Interactive visual editor with draggable control points\n- Preset shapes (Triangle, Chevron, Star, Hexagon, Circle, etc.) for a quick start\n- Real-time preview of the CSS clip-path effect\n- One-click \"Copy CSS\" functionality for the generated code\n- Responsive, mobile-friendly design\n- Works completely offline",
       "category": "css",
-      "tags": [
-        "clip-path",
-        "css",
-        "design",
-        "frontend",
-        "generator",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["clip-path", "css", "design", "frontend", "generator", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -604,21 +321,8 @@
       "shortDescription": "Store, categorize, and retrieve code snippets with syntax highlighting, entirely offline.",
       "longDescription": "## Code Snippet Manager\n\nA personal, offline code snippet manager that allows developers to store, categorize, and quickly retrieve frequently used code blocks. It features syntax highlighting for various programming languages, a search function, and one-click copy-to-clipboard functionality. All snippets are stored locally in the browser's `localStorage`.\n\n### Features\n\n- Add, edit, and delete code snippets.\n- Assign a language (e.g., JavaScript, Python, CSS) to each snippet.\n- Syntax highlighting via a lightweight CDN library (Highlight.js).\n- Search and filter snippets by name, language, or tags.\n- One-click copy to clipboard.\n- Persist snippets in `localStorage`.\n- Import/Export snippets as a JSON file.",
       "category": "utilities",
-      "tags": [
-        "code",
-        "developer-tools",
-        "manager",
-        "offline",
-        "snippet",
-        "storage",
-        "syntax-highlighting"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "LocalStorage API",
-        "Vanilla JS"
-      ],
+      "tags": ["code", "developer-tools", "manager", "offline", "snippet", "storage", "syntax-highlighting"],
+      "techStack": ["CSS3", "HTML5", "LocalStorage API", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -628,17 +332,8 @@
       "shortDescription": "Simulate how colors and images appear with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia to design more accessible interfaces.",
       "longDescription": "## Color Blindness Simulator\n\nSimulate how colors and images appear under different types of color vision deficiency. Upload an image or pick a color to see how it looks with Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.\n\n### Features\n\n- Single HTML file\n- Works offline\n- Dark mode support\n- Responsive design",
       "category": "color",
-      "tags": [
-        "accessibility",
-        "color",
-        "design",
-        "vision"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["accessibility", "color", "design", "vision"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -648,21 +343,8 @@
       "shortDescription": "Preview how colors and images appear under different types of color vision deficiency.",
       "longDescription": "## Color Blindness Simulator\n\nAn accessibility-focused tool that simulates how colors and images appear to people with different types of color vision deficiencies. Designers and developers can test UI elements, graphics, and uploaded images to create more inclusive experiences.\n\n### Features\n\n- Live color picker with instant simulation\n- Upload images for accessibility preview\n- Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia\n- Side-by-side comparison with the original\n- Copy HEX and RGB color values\n- Responsive, offline-first design\n- Works entirely in the browser without external APIs",
       "category": "color",
-      "tags": [
-        "accessibility",
-        "color",
-        "color-blindness",
-        "design",
-        "image",
-        "simulation",
-        "ui"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["accessibility", "color", "color-blindness", "design", "image", "simulation", "ui"],
+      "techStack": ["Canvas API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -672,22 +354,8 @@
       "shortDescription": "Blend two colors to generate a mixed color and a five-shade palette instantly.",
       "longDescription": "## Color Mixer\n\nBlend two colors using a perceptually accurate color mixing algorithm to generate a mixed color and a harmonious five-shade palette. Adjust the mix ratio, view RGB and HSL values, copy color codes with one click, and switch between light and dark themes.\n\n### Features\n\n- Mix two colors with a live preview\n- Adjustable color mix ratio slider\n- Generates a five-shade color palette\n- Displays HEX, RGB, and HSL color values\n- One-click HEX code copying\n- Light and dark theme support\n- Responsive and mobile-friendly design\n- Fully offline and self-contained",
       "category": "color",
-      "tags": [
-        "color",
-        "color-mixer",
-        "design",
-        "hex",
-        "hsl",
-        "offline",
-        "palette",
-        "responsive",
-        "rgb"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "color-mixer", "design", "hex", "hsl", "offline", "palette", "responsive", "rgb"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -697,17 +365,8 @@
       "shortDescription": "Mix colors and generate harmonious color palettes.",
       "longDescription": "## Color Mixer Tool\n\nMix colors and generate harmonious color palettes.\n\n### Features\n\n- Single HTML file\n- Works offline\n- Dark mode support\n- Responsive design",
       "category": "color",
-      "tags": [
-        "color",
-        "harmony",
-        "mixer",
-        "palette"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "harmony", "mixer", "palette"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -717,22 +376,8 @@
       "shortDescription": "Extract dominant colors and generate beautiful palettes directly from images in your browser.",
       "longDescription": "## Color Palette Extractor\n\nA client-side image utility that allows users to upload an image and automatically extracts its most dominant colors, generating a beautiful, harmonious color palette.\n\n### Features\n\n- Drag-and-drop or click to upload an image file (JPG, PNG, WebP)\n- Automatically extracts the top 5-7 dominant colors using client-side canvas processing and color quantization algorithms\n- Displays a visual palette of the extracted colors with one-click \"Copy HEX\" and \"Copy RGB\" buttons\n- Interactive preview of the uploaded image\n- Works completely offline and entirely in the browser with no backend servers\n- Responsive, beautiful dark-mode UI with subtle glassmorphism effects",
       "category": "image",
-      "tags": [
-        "canvas",
-        "colors",
-        "design",
-        "extraction",
-        "image",
-        "palette",
-        "utility"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["canvas", "colors", "design", "extraction", "image", "palette", "utility"],
+      "techStack": ["Canvas API", "CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -742,19 +387,8 @@
       "shortDescription": "Generate beautiful random color combinations for designers and frontend developers.",
       "longDescription": "## Color Palette Generator\n\nA modern tool that creates beautiful color combinations for designers and frontend developers. Press spacebar to rapidly generate new palettes.\n\n### Features\n\n- Generate 5-color palettes instantly\n- Lock individual colors (🔒/🔓) while regenerating the rest\n- Click to instantly copy HEX codes to your clipboard\n- Export as CSS root variables\n- Export as a JSON array file\n- Fully responsive layout for mobile testing",
       "category": "color",
-      "tags": [
-        "color",
-        "css",
-        "design",
-        "hex",
-        "palette",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "css", "design", "hex", "palette", "ui"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -764,23 +398,8 @@
       "shortDescription": "Pick a color and view it in HEX, RGB, HSL, and HSV, with generated shades and recent colors.",
       "longDescription": "## Color Picker\n\nPick a color visually and instantly see its value across HEX, RGB, HSL, and HSV. Edit any format to synchronize the rest, generate a shade strip, and build a running palette of recently used colors.\n\n### Features\n\n- Interactive color picker using the native browser color input\n- Live values in HEX, RGB, HSL, and HSV\n- Edit any supported format to synchronize the others\n- Live contrast preview against white and black\n- One-click copy for each format\n- Recently selected colors palette\n- Generated lighter/darker shade strip\n- Clear/reset to the default color\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "color",
-      "tags": [
-        "color",
-        "css",
-        "developer-tools",
-        "hex",
-        "hsl",
-        "hsv",
-        "picker",
-        "rgb",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "css", "developer-tools", "hex", "hsl", "hsv", "picker", "rgb", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -790,21 +409,8 @@
       "shortDescription": "Load multiple commands and copy them one at a time with a terminal-style interface.",
       "longDescription": "## Command Step Loader\n\nA terminal-inspired productivity tool for developers who frequently execute multiple commands sequentially.\n\n### Features\n\n- Paste multiple commands at once\n- Load commands line-by-line\n- Previous and Next navigation\n- One-click copy for the current command\n- Progress indicator showing current position\n- Terminal-style interface with CRT effects\n- Works completely offline",
       "category": "utilities",
-      "tags": [
-        "commands",
-        "copy",
-        "developer-tools",
-        "git",
-        "loader",
-        "terminal",
-        "workflow"
-      ],
-      "techStack": [
-        "Clipboard API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["commands", "copy", "developer-tools", "git", "loader", "terminal", "workflow"],
+      "techStack": ["Clipboard API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -814,20 +420,8 @@
       "shortDescription": "Paste a git log excerpt and generate interactive-rebase plans + normalized Conventional Commits suggestions.",
       "longDescription": "## Commit Message & Range Cleaner\n\nParse git log outputs and visually design interactive rebases. Automatically audit and normalize commit messages into compliant Conventional Commits standards.\n\n### Features\n\n- Parse standard multiline git log outputs or compact git log --oneline listings\n- Order commits sequentially from oldest to newest to match Git rebase workflow expectations\n- Automatically translate messy commit subjects into Conventional Commits patterns\n- Flag unquoted keywords, casing, periods, and length violations with inline visual warnings\n- Customize rebase actions (pick, reword, squash, fixup, drop, edit) on an interactive planner dashboard\n- Copy generated git-rebase-todo contents directly to terminal rebase sessions\n- Export summaries of reworded changelogs and download configurations as JSON files",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "git",
-        "offline",
-        "planner",
-        "rebase",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "git", "offline", "planner", "rebase", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -837,21 +431,8 @@
       "shortDescription": "Build Conventional Commits-formatted commit messages with live preview and validation.",
       "longDescription": "## Commit Message Generator\n\nBuild a properly formatted commit message following the Conventional Commits specification. Choose a type, optional scope, description, body, and footer — including breaking-change notes — with a live preview as you type.\n\n### Features\n\n- Full set of Conventional Commits types (feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert)\n- Plain-English explanation and a clickable example for each type\n- Optional scope, body, and footer sections\n- BREAKING CHANGE footer generation with the `!` header marker\n- Live preview that updates as fields change\n- Character counter for the subject line (recommended ≤50 characters)\n- Validation against common Conventional Commits mistakes\n- One-click copy to the clipboard\n- Clear/reset the form with a single click\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "utilities",
-      "tags": [
-        "commit",
-        "conventional-commits",
-        "developer-tools",
-        "git",
-        "github",
-        "utility",
-        "version-control"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["commit", "conventional-commits", "developer-tools", "git", "github", "utility", "version-control"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -861,18 +442,8 @@
       "shortDescription": "A visual builder and live tester for CSS Container Queries (@container) that react to parent dimensions rather than the viewport.",
       "longDescription": "## Container Query Sandbox\n\nResponsive design is moving beyond the browser window. Container Queries allow components to adapt based on their parent container's size, but testing them can be tedious. This sandbox provides a visual environment to define named containers, set breakpoint rules, and resize the parent element in real-time to watch your component reflow.\n\n### Features\n\n- **Live Container Resizing:** Drag-resizable demo stages (width and height) to test responsive behavior without browser window manipulation.\n- **Real CSS Application:** Generates and injects actual `@container` CSS, ensuring 100% browser-accurate rendering.\n- **Visual Rule Builder:** Add or remove breakpoints (`min-width`/`max-width`) and edit associated CSS declarations via an intuitive UI.\n- **Active Breakpoint Badges:** Real-time feedback indicators that highlight which query is currently firing.\n- **CQ Units Demo:** Includes a sample element using container query length units (`cqw`, `cqi`) to demonstrate context-aware scaling.\n- **Zero-Dependency Engine:** High-performance, responsive layout tool built entirely in a single HTML file using Vanilla JS and CSS.",
       "category": "css",
-      "tags": [
-        "container-queries",
-        "css",
-        "layout",
-        "responsive-design",
-        "visual-builder"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["container-queries", "css", "layout", "responsive-design", "visual-builder"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -882,20 +453,8 @@
       "shortDescription": "A performance debugging tool that visualizes content-visibility: auto states to help developers track layout and paint skipping.",
       "longDescription": "## Content-Visibility & Intersection Debugger\n\nModern browser optimizations like `content-visibility: auto` are powerful but often invisible. This debugger renders a long, complex page and overlays live status indicators for every section. It uses the `contentvisibilityautostatechange` event to show exactly when off-screen sections are skipped from layout and paint cycles.\n\n### Features\n\n- **Live Rendering Monitor:** Real-time visual overlays show whether sections are currently rendered or skipped.\n- **Event Visualization:** Tracks `contentvisibilityautostatechange` events to log the exact moment the browser optimizes rendering.\n- **Performance Insight:** Helps developers understand the impact of CSS containment on browser performance and Web Vitals.\n- **Interactive Demo:** Manipulate a tall, heavy DOM structure to stress-test browser optimization.\n- **Zero-Dependency Engine:** High-performance, responsive performance visualization tool built entirely in a single HTML file using Vanilla JS and CSS.",
       "category": "utilities",
-      "tags": [
-        "css",
-        "debug",
-        "intersection-observer",
-        "performance",
-        "rendering",
-        "web-vitals"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "Web Performance API"
-      ],
+      "tags": ["css", "debug", "intersection-observer", "performance", "rendering", "web-vitals"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "Web Performance API"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -905,22 +464,8 @@
       "shortDescription": "Check the WCAG 2.1 contrast ratio between two colors with AA/AAA compliance and a live text preview.",
       "longDescription": "## Contrast Checker\n\nEvaluate the contrast ratio between a foreground and background color against WCAG 2.1 guidelines. Pick or enter colors in HEX, RGB, or HSL and instantly see the ratio, compliance status, and a live text preview.\n\n### Features\n\n- Foreground and background color pickers or HEX/RGB/HSL text entry\n- Real-time WCAG 2.1 contrast ratio\n- Compliance status for AA and AAA, normal and large text\n- Live preview of normal and large text using the selected colors\n- One-click swap of foreground and background\n- Double-click to copy any color value\n- Reset to default colors\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "color",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "color",
-        "contrast",
-        "css",
-        "developer-tools",
-        "ui",
-        "wcag"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "color", "contrast", "css", "developer-tools", "ui", "wcag"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -930,21 +475,8 @@
       "shortDescription": "WCAG 2.1 AA/AAA contrast checker with live UI previews and an automatic fix suggestion.",
       "longDescription": "## Contrast Checker (A11y)\n\nEvaluate foreground/background color combinations against WCAG 2.1 contrast guidelines, with live previews of real UI elements and an automatic suggestion when a combination fails.\n\n### Features\n\n- Foreground/background color pickers or HEX/RGB/HSL text entry\n- Real-time WCAG 2.1 contrast ratio with AA/AAA pass/fail badges (normal and large text)\n- Live preview of headings, body text, buttons, and links using the selected colors\n- Automatic suggestion of an accessible foreground color when AA fails, with one-click apply\n- Swap foreground/background colors\n- Copy any color value to the clipboard\n- Reset to accessible default colors\n- Brief explanation of why AA and AAA matter\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "color",
-        "contrast",
-        "css",
-        "developer-tools",
-        "ui",
-        "wcag"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "color", "contrast", "css", "developer-tools", "ui", "wcag"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -954,19 +486,8 @@
       "shortDescription": "Inspect, create, edit, delete, and search cookies for the current site — no dev tools required.",
       "longDescription": "## Cookie Viewer\n\nA browser-based cookie management tool that lets you work with cookies on the current origin without opening DevTools.\n\n### Features\n\n- View all JavaScript-readable cookies for the current page\n- Search cookies by name or value in real time\n- Create new cookies with configurable value, max-age, and SameSite attributes\n- Edit existing cookie values inline and save changes\n- Delete individual cookies or clear all at once\n- Copy cookie names and values to clipboard\n- Displays metadata (path, domain, secure status) for each cookie\n- Note explaining that HttpOnly cookies are not visible to JavaScript",
       "category": "browser-network",
-      "tags": [
-        "browser",
-        "cookies",
-        "developer-tools",
-        "inspector",
-        "privacy",
-        "storage"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["browser", "cookies", "developer-tools", "inspector", "privacy", "storage"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -976,20 +497,8 @@
       "shortDescription": "Build and customize cron schedules with presets, instant validation, explanations, and upcoming run previews.",
       "longDescription": "## Cron Expression Builder\n\nDesign cron schedules with an elegant interface, common presets, instant validation, human-readable explanations, and next-run previews.",
       "category": "utilities",
-      "tags": [
-        "automation",
-        "cron",
-        "devops",
-        "expression",
-        "jobs",
-        "scheduler",
-        "time"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["automation", "cron", "devops", "expression", "jobs", "scheduler", "time"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -999,23 +508,8 @@
       "shortDescription": "Visualize upcoming cron run times across multiple timezones with a timeline and export.",
       "longDescription": "## Cron Run Planner\n\nValidate and build cron expressions while visualizing future run executions across multiple global timezones on an interactive timeline grid.\n\n### Features\n\n- Build cron expressions with a step-by-step visual form builder\n- Instant syntax validation using the Croner engine\n- Translate cron syntax to plain English description using cRonstrue\n- Set local base timezone and compare run executions in multiple target zones\n- Detect and badge target working hours (9 AM - 5 PM on weekdays)\n- Interactive horizontal timeline plotting next runs (10, 30, or 50 events)\n- Export scheduled runs as CSV or JSON format data",
       "category": "utilities",
-      "tags": [
-        "cron",
-        "developer-tools",
-        "offline",
-        "planner",
-        "scheduler",
-        "time",
-        "timezone"
-      ],
-      "techStack": [
-        "croner",
-        "cronstrue",
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["cron", "developer-tools", "offline", "planner", "scheduler", "time", "timezone"],
+      "techStack": ["croner", "cronstrue", "CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1025,17 +519,8 @@
       "shortDescription": "Visually create CSS animations and export keyframes without manually writing CSS.",
       "longDescription": "## CSS Animation Builder\n\nA visual tool for creating CSS animations with keyframe editing and live preview.\n\n### Features\n\n- Visual keyframe editor\n- Live animation preview\n- Export generated CSS keyframes\n- Dark mode support",
       "category": "css",
-      "tags": [
-        "animation",
-        "css",
-        "generator",
-        "keyframes"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["animation", "css", "generator", "keyframes"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1045,24 +530,8 @@
       "shortDescription": "Convert between Hex, RGB, HSL, HSLA, and OKLCH color formats instantly with a visual picker.",
       "longDescription": "## CSS Color Converter\n\nA comprehensive color format converter with an integrated visual color picker for developers and designers.\n\n### Features\n\n- Convert between Hex, RGB, HSL, HSLA, and OKLCH color formats\n- Interactive color picker with saturation/lightness spectrum canvas\n- HSL sliders for fine-tuned color adjustment\n- Preset color palette for quick selection\n- Nearest CSS named color detection\n- One-click copy for all output formats\n- Real-time preview swatch with hex display\n- Light and dark mode support\n- Responsive, mobile-friendly design\n- Works completely offline",
       "category": "color",
-      "tags": [
-        "color",
-        "color-picker",
-        "converter",
-        "css",
-        "hex",
-        "hsl",
-        "oklch",
-        "rgb"
-      ],
-      "techStack": [
-        "Canvas API",
-        "Clipboard API",
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "color-picker", "converter", "css", "hex", "hsl", "oklch", "rgb"],
+      "techStack": ["Canvas API", "Clipboard API", "CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1072,19 +541,8 @@
       "shortDescription": "A visual analyzer for deeply nested CSS var() fallback chains that tracks down evaluation paths and silent invalid-value bugs.",
       "longDescription": "## CSS Custom Property Fallback Chain Debugger\n\nDeeply nested CSS custom property chains like `var(--a, var(--b, var(--c, red)))` can become black boxes when troubleshooting layouts. This debugger isolates your custom property chains and visualizes their resolution logic cell-by-cell. It exposes complex browser behaviors, such as when a variable is defined but carries a value invalid for its context, causing the browser to silently fall through to the next declaration.\n\n### Features\n\n- **Visual Chain Mapping:** Paste any CSS rule containing nested custom properties to see an instant, hierarchical tree of its fallback execution path.\n- **State Simulation Panels:** Experiment by flagging variables as missing, properly set, or explicitly invalid at computed-value time to observe structural reactions.\n- **Silent Failure Detection:** Highlights the exact point where an invalid property causes a silent failure—a notorious and elusive modern CSS bug.\n- **Production Blueprint Analysis:** View the precise computed result alongside detailed W3C spec compliance summaries explaining the layout engine's choice.\n- **Zero-Dependency Engine:** High-fidelity, instantly updating execution trace built entirely natively in a single HTML file using Vanilla JS.",
       "category": "css",
-      "tags": [
-        "css",
-        "custom-properties",
-        "debugging",
-        "layout",
-        "parser",
-        "variables"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "custom-properties", "debugging", "layout", "parser", "variables"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1094,22 +552,8 @@
       "shortDescription": "Compare multiple CSS easing curves side-by-side on a shared graph and in an animated race preview.",
       "longDescription": "## CSS Easing Visualizer\n\nCompare multiple CSS easing curves side-by-side — see their shape on a shared graph and watch them race in an animated preview, so you can pick the right motion feel by comparison rather than editing one curve in isolation.\n\n### Features\n\n- Add and remove multiple curves (named presets or custom cubic-bezier values)\n- Shared, color-coded SVG graph plotting each curve's progress over time\n- Animated race track with one ball per curve, driven by the Web Animations API\n- Adjustable shared duration for a fair comparison\n- Legend showing each curve's resolved CSS easing value\n- Runs completely offline",
       "category": "css",
-      "tags": [
-        "animation",
-        "comparison",
-        "css",
-        "cubic-bezier",
-        "easing",
-        "frontend"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "SVG",
-        "Vanilla JS",
-        "Web Animations API"
-      ],
+      "tags": ["animation", "comparison", "css", "cubic-bezier", "easing", "frontend"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "SVG", "Vanilla JS", "Web Animations API"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1119,20 +563,8 @@
       "shortDescription": "Compare multiple CSS easing curves side-by-side on a shared graph and in an animated race preview.",
       "longDescription": "## CSS Easing Visualizer\n\nVisualize and compare multiple CSS easing curves on a shared graph with a live animated race preview.\n\n### Features\n\n- Side-by-side easing curve comparison.\n- Animated race preview for timing functions.\n- Supports cubic-bezier and named easings.\n- Interactive graph with overlaid curves.\n- Single HTML file, works offline.\n- Responsive design with dark mode support.",
       "category": "css",
-      "tags": [
-        "animation",
-        "css",
-        "cubic-bezier",
-        "easing",
-        "timing",
-        "transition",
-        "visualizer"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["animation", "css", "cubic-bezier", "easing", "timing", "transition", "visualizer"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1142,21 +574,8 @@
       "shortDescription": "Build CSS Grid layouts visually with configurable columns, rows, gap, and sizing options.",
       "longDescription": "## CSS Grid Generator\n\nA visual CSS Grid layout builder for developers and designers.\n\n### Features\n\n- Configurable columns (1–12) and rows (1–8) via sliders\n- Adjustable gap size with live preview\n- Column sizing modes: Equal (1fr), Auto, Responsive (minmax), Max-content\n- Row sizing modes: Equal (1fr), Auto, Min-content, Max-content\n- Live grid preview with numbered cells\n- One-click copy of generated CSS code\n- Responsive, mobile-friendly design\n- Works completely offline",
       "category": "css",
-      "tags": [
-        "css",
-        "css-grid",
-        "design",
-        "frontend",
-        "generator",
-        "layout",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "css-grid", "design", "frontend", "generator", "layout", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1166,20 +585,8 @@
       "shortDescription": "Visually design, warp, and generate complex, modern mesh gradients using draggable color pins and control handles.",
       "longDescription": "## CSS Mesh Gradient Generator\n\nA visual playground to design, warp, and generate complex, modern mesh gradients using draggable color pins and control handles, exporting CSS and clean SVG code.\n\n### Features\n\n- **Visual Warp Canvas**: Interactive canvas with dynamic color points and editable major/minor control handles.\n- **Color Pin Adjustments**: Drag-and-drop color pins to warp, adjust coordinates, and customize individual colors.\n- **Aesthetics Controls**: Customize blend radius, background noise overlay, opacity, and base color.\n- **Design Presets**: Built-in visual presets (Aurora Borealis, Sunset Dreams, Holographic Pearl, Cotton Candy) for quick inspiration.\n- **Instant Exports**: Copies Layered CSS, Single-Class CSS, and clean SVG code.",
       "category": "css",
-      "tags": [
-        "css",
-        "designer",
-        "developer-tools",
-        "gradient",
-        "mesh-gradient",
-        "svg",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "designer", "developer-tools", "gradient", "mesh-gradient", "svg", "ui"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1189,18 +596,8 @@
       "shortDescription": "Break down CSS selectors into their specificity score and see which rule wins a conflict.",
       "longDescription": "## CSS Specificity Calculator\n\nPaste CSS selectors or a full stylesheet and see each selector's specificity broken down into ID, class, and element counts, ranked by which rule would win.\n\n### Features\n\n- Parses individual selectors or a full pasted stylesheet\n- Breaks down specificity into ID, class/attribute/pseudo-class, and element/pseudo-element counts\n- Correctly handles :is(), :not(), :has(), and :where() per the CSS specification\n- Ranks selectors to show which one wins a conflict\n- Flags !important usage separately\n- Syntax-highlighted selector display\n- Copy results as plain text\n- Light and dark mode support\n- Works completely offline",
       "category": "css",
-      "tags": [
-        "css",
-        "debugging",
-        "frontend",
-        "selector",
-        "specificity"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "debugging", "frontend", "selector", "specificity"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1210,19 +607,8 @@
       "shortDescription": "Instantly convert between px, rem, em, vw, vh, and percentages.",
       "longDescription": "## CSS Unit Converter\n\nA professional utility for frontend developers to instantly convert between absolute and relative CSS units.\n\n### Features\n\n- **Comprehensive Conversions:** Supports `px`, `rem`, `em`, `vw`, `vh`, `%`, and `pt`.\n- **Dynamic Base Context:** Set custom base font sizes and viewport dimensions for highly accurate relative calculations.\n- **Real-Time Engine:** Values update instantly across all unit fields as you type.\n- **One-Click Copy:** Copy individual values instantly to your clipboard.\n- **Offline First:** Zero dependencies, running entirely within the browser memory.",
       "category": "css",
-      "tags": [
-        "converter",
-        "css",
-        "design",
-        "frontend",
-        "units",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "css", "design", "frontend", "units", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1232,19 +618,8 @@
       "shortDescription": "Extract, edit, preview, copy, and download CSS custom properties with a live theme preview.",
       "longDescription": "## CSS Variable Explorer\n\nA standalone tool to extract CSS custom properties (variables), edit them visually, preview theme changes in real time, and export the updated CSS.\n\n### Features\n\n- Extract CSS variables from pasted CSS\n- Search variables instantly\n- Edit variable values\n- Color picker for color variables\n- Live theme preview\n- Copy generated CSS\n- Download updated CSS file\n- Fully offline and self-contained",
       "category": "css",
-      "tags": [
-        "color-picker",
-        "css",
-        "custom-properties",
-        "preview",
-        "theme",
-        "variables"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color-picker", "css", "custom-properties", "preview", "theme", "variables"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1254,18 +629,8 @@
       "shortDescription": "Explore, edit, and export CSS custom properties with live preview and a glassmorphism UI.",
       "longDescription": "## CSS Variable Explorer & Theme Generator\n\nA glassmorphism-styled tool for exploring and editing CSS custom properties.\n\n### Features\n\n- Browse and edit CSS variables in real time\n- Live preview of changes\n- Export generated theme\n- Glassmorphism UI design",
       "category": "css",
-      "tags": [
-        "css",
-        "custom-properties",
-        "explorer",
-        "theme",
-        "variables"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "custom-properties", "explorer", "theme", "variables"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1275,21 +640,8 @@
       "shortDescription": "Construct ready-to-run cURL commands for REST APIs with headers, auth, body types, query params, and file uploads.",
       "longDescription": "## Curl Builder\n\nBuild and copy shell-ready cURL commands with support for query parameters, headers, auth modes, JSON/form/raw bodies, and multipart file upload.\n\n### Features\n\n- Select HTTP method and request URL\n- Add query parameters and custom headers\n- Basic auth and bearer token support\n- JSON / form / raw body payload support\n- Multipart file upload field support\n- Copy command to clipboard instantly\n- Offline-first single HTML file with no dependencies",
       "category": "json-api",
-      "tags": [
-        "api",
-        "command",
-        "curl",
-        "developer-tools",
-        "http",
-        "request",
-        "rest",
-        "terminal"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "command", "curl", "developer-tools", "http", "request", "rest", "terminal"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1299,23 +651,8 @@
       "shortDescription": "Query DNS records for any domain via DNS-over-HTTPS, with no terminal or backend required.",
       "longDescription": "## DNS Record Lookup\n\nQuery common DNS record types for any domain using public DNS-over-HTTPS (DoH) endpoints, directly from your browser.\n\n### Features\n\n- Lookup A, AAAA, MX, TXT, CNAME, NS, SOA, and CAA records\n- Choose between Cloudflare and Google Public DNS providers\n- Displays TTL, response status, and response time\n- Human-readable explanations for common DNS errors (NXDOMAIN, SERVFAIL, REFUSED)\n- Color-coded badges per record type\n- Copy individual records or the full JSON response\n- Download results as a JSON file\n- Session query history for quick re-lookups\n- Fully responsive, keyboard accessible, and works entirely in the browser",
       "category": "browser-network",
-      "tags": [
-        "browser",
-        "debugging",
-        "developer-tools",
-        "dns",
-        "dns-over-https",
-        "doh",
-        "domain",
-        "network"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["browser", "debugging", "developer-tools", "dns", "dns-over-https", "doh", "domain", "network"],
+      "techStack": ["CSS3", "Fetch API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1325,19 +662,8 @@
       "shortDescription": "Generate a complete favicon pack and integration tags from any image, offline.",
       "longDescription": "## Favicon Generator\n\nA client-side tool that turns any image into a full favicon pack — no server, no upload.\n\n### Features\n\n- Generates 7 sizes (16, 32, 48, 64, 180, 192, 512px)\n- Center-crop auto-resize via Canvas\n- Live preview grid with individual downloads\n- Ready-to-paste HTML `<link>` tags\n- One-click ZIP export of the full pack\n- Works completely offline",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "favicon",
-        "generator",
-        "image",
-        "offline"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "favicon", "generator", "image", "offline"],
+      "techStack": ["Canvas API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1347,17 +673,8 @@
       "shortDescription": "Experiment with Flexbox properties visually and copy the generated CSS.",
       "longDescription": "## Flexbox Playground\n\nA visual tool for experimenting with CSS Flexbox layouts in real time.\n\n### Features\n\n- Configure flex-direction, justify-content, align-items, align-content, flex-wrap, and gap\n- Live preview with configurable item count\n- Copy generated CSS to clipboard\n- Responsive layout — works on desktop and mobile\n- Dark mode via prefers-color-scheme",
       "category": "css",
-      "tags": [
-        "css",
-        "flexbox",
-        "layout",
-        "playground"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "flexbox", "layout", "playground"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1367,21 +684,8 @@
       "shortDescription": "Visual calculator and simulator for generating CSS clamp() fluid typography and spacing expressions.",
       "longDescription": "## Fluid Typography & CSS clamp() Calculator Studio\n\nA privacy-first client-side tool to calculate, preview, and generate responsive fluid typography and spacing using CSS `clamp(min, preferred, max)`.\n\n### Features\n\n- Visual Fluid Math Engine: Auto-calculates linear interpolation formulas (`clamp(min, calc(rem + vw), max)`) based on target viewports\n- Interactive Viewport Simulator: Drag-resizable stage to test fluid text reflow live across mobile, tablet, and desktop dimensions\n- Modular Type Ramp Generator: Quick-generate full typography scales (`sm`, `base`, `lg`, `xl`, `2xl`, `3xl`) using popular ratio presets (Major Second, Major Third, Golden Ratio)\n- One-Click CSS Variable Export: Export formatted CSS custom properties or utility class blocks (`--text-base: clamp(...)`)\n- Persistent Dark/Light theme mode",
       "category": "css",
-      "tags": [
-        "calculation",
-        "clamp",
-        "css",
-        "css-variables",
-        "developer-tools",
-        "fluid-typography",
-        "responsive",
-        "typography"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["calculation", "clamp", "css", "css-variables", "developer-tools", "fluid-typography", "responsive", "typography"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1391,20 +695,8 @@
       "shortDescription": "A comprehensive, 100% offline PDF utility to merge, split, rotate, watermark, and reorder pages locally using pdf-lib.",
       "longDescription": "## Full Client-Side PDF Toolkit\n\nStop relying on third-party web apps that require uploading sensitive documents to remote servers or installing heavy desktop software just to rearrange a few pages. This toolkit brings a complete, production-grade PDF editor directly into your browser using `pdf-lib`.\n\n### Features\n\n- **Client-Side Merging & Splitting:** Combine separate PDF files or slice documents into individual page ranges locally.\n- **Visual Page Management:** Interactive thumbnail layout to drag-and-drop, rotate, or delete pages on the fly.\n- **Watermarking & Page Numbers:** Easily overlay custom text watermarks and apply professional page numbers.\n- **Selective Page Extraction:** Export targeted subsections of a document into new, clean files instantly.\n- **Absolute Privacy:** 100% client-side execution means your confidential documents never touch an external server.\n- **Zero-Dependency Core:** High-performance responsive UI built completely in a single self-contained HTML file.",
       "category": "utilities",
-      "tags": [
-        "client-side",
-        "document-editor",
-        "offline",
-        "pdf",
-        "pdf-lib",
-        "utilities"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "pdf-lib",
-        "Vanilla JS"
-      ],
+      "tags": ["client-side", "document-editor", "offline", "pdf", "pdf-lib", "utilities"],
+      "techStack": ["CSS3", "HTML5", "pdf-lib", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -1414,19 +706,8 @@
       "shortDescription": "An interactive accessibility tester that parses raw HTML to compute tab-order overlays, flag positive tabindex errors, and simulate keyboard navigation.",
       "longDescription": "## Full Keyboard Navigation & Focus Order Auditor\n\nTesting keyboard accessibility shouldn't rely on guesswork or static checklists. This auditor parses raw HTML inputs and dynamically calculates the true, computed focus sequence—factoring in natural DOM order, `tabindex` rules, and hidden element states.\n\n### Features\n\n- **Computed Tab-Order Overlays:** Visualizes the exact traversal sequence with numbered pathway indicators overlaid directly onto your markup.\n- **Anti-Pattern Diagnostics:** Automatically detects and warns against destructive layout practices like positive `tabindex` values and missing focus indicators.\n- **Interactive Navigation Simulator:** Step forward and backward through the focus loop using standard keyboard inputs to verify user flow.\n- **Deep Element Inspection:** Inspect why specific elements receive focus, ensuring compliance with modern accessibility (a11y) standards.\n- **Zero-Dependency Core:** A completely client-side performance and accessibility suite built natively in a single self-contained file.",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "focus-order",
-        "keyboard-navigation",
-        "testing",
-        "utilities"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "focus-order", "keyboard-navigation", "testing", "utilities"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -1436,18 +717,8 @@
       "shortDescription": "Explain any Git command in plain English, with full flag-by-flag breakdowns for the most commonly used commands.",
       "longDescription": "## Git Command Explainer\n\nType or paste a Git command and get a clear, accurate explanation. Every Git porcelain command gets a command-level explanation, and the most commonly used commands get a full flag-by-flag breakdown.\n\n### Features\n\n- Command-level explanations covering the full range of Git porcelain commands\n- Deep flag-by-flag breakdown for 26 high-usage commands (add, commit, push, pull, fetch, merge, rebase, reset, checkout, switch, restore, branch, stash, log, diff, cherry-pick, revert, tag, clone, remote, clean, blame, init, show, worktree, config)\n- Correctly parses combined short flags (e.g. -am splits into -a and -m) and flag arguments\n- Flags destructive or irreversible operations with a clear warning (e.g. reset --hard, push --force, clean -fd)\n- Honest fallback for unrecognized commands or flags instead of guessing\n- Clickable example commands to try instantly\n- Light and dark mode support\n- Works completely offline",
       "category": "utilities",
-      "tags": [
-        "cli",
-        "developer-tools",
-        "explainer",
-        "git",
-        "version-control"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["cli", "developer-tools", "explainer", "git", "version-control"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1457,18 +728,8 @@
       "shortDescription": "Generate boilerplate .gitignore files for various technologies instantly, offline.",
       "longDescription": "## Git Ignore Generator\n\nA simple, offline tool to generate .gitignore files.\n\n### Features\n\n- Select from popular templates (Node, Python, Java, C++, Go, Ruby, PHP, React, Vue, Angular, Rust, macOS, Windows, Linux, VSCode, IntelliJ, Vim, Android, iOS)\n- Real-time preview\n- Searchable tag interface\n- Copy to clipboard\n- Download .gitignore file\n- Works completely offline",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "generator",
-        "git",
-        "gitignore",
-        "offline"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "generator", "git", "gitignore", "offline"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1478,21 +739,8 @@
       "shortDescription": "Generate a professional GitHub profile README with live stats and an editable preview.",
       "longDescription": "## GitHub Profile README Generator\n\nThis tool helps developers create a professional and visually appealing README for their GitHub profile. It provides a simple form to input personal details and automatically generates the corresponding Markdown, complete with social links, skill badges, and live-fetched GitHub statistics.\n\n### Features\n\n- Live Markdown editor with a rendered preview tab.\n- Fetches and displays GitHub stats (total stars, forks, contributions) automatically.\n- Generates sections for a bio, tech stack (with badges), and social media links (with icons).\n- Allows for direct editing of the generated Markdown.\n- Provides \"Copy Markdown\" and \"Download README.md\" functionality.\n- Runs entirely in the browser, ensuring user privacy.",
       "category": "utilities",
-      "tags": [
-        "api",
-        "developer-tools",
-        "generator",
-        "github",
-        "markdown",
-        "profile",
-        "readme"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "developer-tools", "generator", "github", "markdown", "profile", "readme"],
+      "techStack": ["CSS3", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1502,21 +750,8 @@
       "shortDescription": "Validate GitHub Personal Access Tokens against the GitHub API with a sleek glass-themed UI.",
       "longDescription": "## GitHub Token Validator (Glass)\n\nA glass-themed GitHub token validator that checks Personal Access Tokens against the GitHub API.\n\n### Features\n\n- Validates classic PATs, fine-grained PATs, OAuth tokens, and GitHub App tokens\n- Displays user identity, scopes, and rate limit info\n- Token type detection with format-based badges\n- Show/hide token toggle for privacy\n- Dark and light mode with aurora backdrop\n- Responsive glass-style UI\n- Works in the browser — no server required",
       "category": "utilities",
-      "tags": [
-        "api",
-        "developer-tools",
-        "github",
-        "glassmorphism",
-        "security",
-        "token",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "developer-tools", "github", "glassmorphism", "security", "token", "validator"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1526,18 +761,8 @@
       "shortDescription": "Glassmorphism-themed GitHub Token Validator tool that allows users to validate GitHub Personal Access Tokens directly in the browser.",
       "longDescription": "## GitHub Token Validator (Glassmorphism)\n\nA Glassmorphism-themed GitHub token validator that checks Personal Access Tokens against the GitHub API.\n\n### Features\n\n- Glassmorphism-style UI with command-line aesthetics\n- Validates GitHub Personal Access Tokens (classic, fine-grained, or OAuth)\n- Displays user identity, scopes, and token metadata\n- Real-time validation with clear status indicators\n- Works in the browser — no server required",
       "category": "utilities",
-      "tags": [
-        "github",
-        "terminal",
-        "token",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["github", "terminal", "token", "validator"],
+      "techStack": ["CSS3", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1547,18 +772,8 @@
       "shortDescription": "Validate GitHub Personal Access Tokens with a sleek, modern interface. Token never leaves your browser.",
       "longDescription": "## GitHub Token Validator (Modern)\n\nA modern-themed GitHub token validator with clean UI.\n\n### Features\n\n- Validate GitHub Personal Access Tokens\n- Display user identity and scopes\n- Token never leaves the browser\n- Modern, clean design",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "github",
-        "security",
-        "token",
-        "validation"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "github", "security", "token", "validation"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1568,18 +783,8 @@
       "shortDescription": "Validate GitHub Personal Access Tokens with a terminal-style UI that displays user identity and scopes.",
       "longDescription": "## GitHub Token Validator (Terminal)\n\nA terminal-themed GitHub token validator that checks Personal Access Tokens against the GitHub API.\n\n### Features\n\n- Terminal-style UI with command-line aesthetics\n- Validates GitHub Personal Access Tokens (classic, fine-grained, or OAuth)\n- Displays user identity, scopes, and token metadata\n- Real-time validation with clear status indicators\n- Works in the browser — no server required",
       "category": "utilities",
-      "tags": [
-        "github",
-        "terminal",
-        "token",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["github", "terminal", "token", "validator"],
+      "techStack": ["CSS3", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1589,19 +794,8 @@
       "shortDescription": "Validate GitHub Personal Access Tokens with a clean, modern, and responsive card-based interface GitHub style.",
       "longDescription": "## GitHub Token Validator GitHub Style\n\nValidate GitHub Personal Access Tokens and inspect owner, scopes, and status with a beautiful, responsive, modern card UI.\n\n### Features\n\n- Modern card-based responsive layout with dark mode support.\n- Validates GitHub Personal Access Tokens (classic, fine-grained, or OAuth tokens) securely in the browser.\n- Displays Token Metadata including user avatar, username, and active scopes.\n- Show/Hide Token Toggle for privacy and easier screen sharing.\n- Real-Time Validation Results with clean status indicators and loading spinners.\n- Built with Tailwind CSS and Vanilla JS with no external build steps.",
       "category": "utilities",
-      "tags": [
-        "github",
-        "modern",
-        "responsive",
-        "token",
-        "validator"
-      ],
-      "techStack": [
-        "Fetch API",
-        "HTML5",
-        "Tailwind CSS",
-        "Vanilla JS"
-      ],
+      "tags": ["github", "modern", "responsive", "token", "validator"],
+      "techStack": ["Fetch API", "HTML5", "Tailwind CSS", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1611,20 +805,8 @@
       "shortDescription": "Validate GitHub Personal Access Tokens with a clean, straightforward interface.",
       "longDescription": "## GitHub Token Validator\n\nValidate GitHub Personal Access Tokens and inspect owner, scopes, and status with a simple, distraction-free interface.\n\n### Features\n\n- Clean and Minimal UI focused on token validation and inspection\n- Validates GitHub Personal Access Tokens (classic, fine-grained, or OAuth tokens) securely in the browser\n- Displays Token Metadata including username, active scopes/permissions, and response headers\n- Show/Hide Token Toggle for privacy and easier screen sharing\n- Real-Time Validation Results with clear status indicators and error messages\n- Lightweight, Offline-First implementation built with native web technologies and no external dependencies",
       "category": "utilities",
-      "tags": [
-        "crt",
-        "github",
-        "retro",
-        "terminal",
-        "token",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["crt", "github", "retro", "terminal", "token", "validator"],
+      "techStack": ["CSS3", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1634,20 +816,8 @@
       "shortDescription": "Validate GitHub Personal Access Tokens with a retro terminal themed interface.",
       "longDescription": "## GitHub Token Validator Retro\n\nValidate GitHub Personal Access Tokens and inspect owner, scopes, and status in a classic command-line CRT style.\n\n### Features\n\n- Green CRT Terminal Interface with scanline overlays, flickering, and glowing text\n- Validates GitHub Personal Access Tokens (classic, fine-grained, or OAuth tokens) securely in the browser\n- Displays Token Metadata including username, active scopes/permissions, and headers\n- ASCII Art Terminal Banner and blinking terminal command prompts\n- Show/Hide Token Toggle for privacy when sharing screens\n- Offline-First Styling utilizing native monospace font fallbacks with VT323 font integration",
       "category": "utilities",
-      "tags": [
-        "crt",
-        "github",
-        "retro",
-        "terminal",
-        "token",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["crt", "github", "retro", "terminal", "token", "validator"],
+      "techStack": ["CSS3", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1657,21 +827,8 @@
       "shortDescription": "Generate sleek, frosted-glass UI effects for your components.",
       "longDescription": "## Glassmorphism Generator\n\nA visual CSS generator that allows developers and designers to instantly create frosted glass effects (glassmorphism) for UI components.\n\n### Features\n\n- Interactive sliders for blur radius, transparency (opacity), and saturation\n- Live preview area showing the glass effect overlaid on a vibrant background image or gradient\n- Color picker to adjust the glass tint (light vs dark glass)\n- Controls for border and shadow to enhance the 3D effect\n- One-click \"Copy CSS\" functionality for the generated code\n- Responsive and modern UI design\n- Works completely offline",
       "category": "css",
-      "tags": [
-        "css",
-        "design",
-        "frontend",
-        "frosted-glass",
-        "generator",
-        "glassmorphism",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "design", "frontend", "frosted-glass", "generator", "glassmorphism", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1681,22 +838,8 @@
       "shortDescription": "Visually build linear or radial CSS gradients with multiple color stops and copy-ready CSS.",
       "longDescription": "## Gradient Builder\n\nVisually create and customize CSS gradients. Add multiple color stops, drag them to adjust position, switch between linear and radial gradients, and instantly preview the result as production-ready CSS.\n\n### Features\n\n- Linear and radial gradients\n- Add, remove, reorder, and edit multiple color stops\n- Drag color stops on a visual track to adjust position\n- Linear angle (0-360°) with preset directions\n- Radial shape (circle/ellipse) and position\n- Live preview updates instantly with every change\n- Generates both `background` and `background-image` CSS\n- One-click copy or download of the generated CSS\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "color",
-      "tags": [
-        "color",
-        "css",
-        "designer",
-        "developer-tools",
-        "gradient",
-        "linear-gradient",
-        "radial-gradient",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "css", "designer", "developer-tools", "gradient", "linear-gradient", "radial-gradient", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1706,19 +849,8 @@
       "shortDescription": "A visual designer for CSS grid-template-areas that validates rectangular constraints and generates production-ready layout code.",
       "longDescription": "## Grid Areas Architect\n\nStop wrestling with complex ASCII-art string layouts in your CSS. Grid Areas Architect is a visual design tool for CSS `grid-template-areas`. Paint named regions directly onto a grid canvas and let the tool handle the syntax generation.\n\n### Features\n\n- **Visual Painting:** Define layout regions by clicking and dragging on a live grid canvas.\n- **Rectangular Validation:** Automatically enforces CSS Grid constraints—it validates that each named region forms a perfect rectangle, preventing invalid layout syntax before it reaches your codebase.\n- **Production-Ready Code:** Instantly generates the full `grid-template-areas` string alongside the corresponding per-area `grid-area` CSS blocks.\n- **Live Scoped Preview:** See your layout render in real-time as you paint, ensuring the spatial structure matches your design intent.\n- **Zero-Dependency Engine:** A high-performance, responsive layout tool built entirely in a single HTML file using Vanilla JS and CSS.",
       "category": "css",
-      "tags": [
-        "css",
-        "css-grid",
-        "layout",
-        "tool",
-        "ui-design",
-        "web-dev"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "css-grid", "layout", "tool", "ui-design", "web-dev"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1728,20 +860,8 @@
       "shortDescription": "Generate SHA-1, SHA-256 and SHA-512 hashes instantly in your browser.",
       "longDescription": "## Hash Generator\n\nGenerate SHA-1, SHA-256 and SHA-512 hashes locally using the browser Web Crypto API.\n\n### Features\n\n- Generate SHA-1, SHA-256 and SHA-512 hashes\n- Live hashing while typing\n- File input support\n- Copy hash to clipboard\n- Uppercase output option\n- Works completely offline",
       "category": "utilities",
-      "tags": [
-        "crypto",
-        "developer-tools",
-        "hash",
-        "sha1",
-        "sha256",
-        "sha512"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "Web Crypto API"
-      ],
+      "tags": ["crypto", "developer-tools", "hash", "sha1", "sha256", "sha512"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "Web Crypto API"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1751,24 +871,8 @@
       "shortDescription": "Generate and verify MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes for text or files entirely in the browser.",
       "longDescription": "## Hash Generator\n\nGenerate cryptographic hash values for text and files using common hashing algorithms, entirely offline in your browser.\n\n### Features\n\n- Generate MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes\n- Hash plain text with live updates\n- Hash files using raw binary data for accurate checksums\n- Display file name, size, and MIME type\n- Copy individual hash values with one click\n- Verify hashes by comparing generated and expected values\n- Clear all inputs and generated hashes with a single action\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "utilities",
-      "tags": [
-        "checksum",
-        "cryptography",
-        "developer-tools",
-        "hash",
-        "md5",
-        "security",
-        "sha1",
-        "sha256",
-        "sha384",
-        "sha512"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "Web Crypto API"
-      ],
+      "tags": ["checksum", "cryptography", "developer-tools", "hash", "md5", "security", "sha1", "sha256", "sha384", "sha512"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "Web Crypto API"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1778,24 +882,8 @@
       "shortDescription": "Visualize a page's heading hierarchy and catch skipped levels, missing or duplicate H1s.",
       "longDescription": "## Heading Structure Visualizer\n\nAnalyze HTML content and visualize its heading hierarchy (h1–h6) as an indented outline. Paste HTML or load a webpage via URL to catch skipped heading levels, multiple or missing h1 elements, and other structural accessibility issues.\n\n### Features\n\n- Paste HTML or load a webpage via URL (subject to CORS)\n- Visualizes the heading hierarchy as an indented outline\n- Flags skipped heading levels (e.g. h2 → h4)\n- Detects multiple or missing h1 elements\n- Shows heading text, level, and source order\n- Summary statistics (total headings, count per level)\n- Copy the generated outline to the clipboard\n- Clear/reset with a single click\n- Fully responsive, keyboard accessible, and works entirely offline (except optional URL loading)\n\nPasted or fetched HTML is parsed into a detached document and never rendered live, so no scripts execute and no remote resources load from untrusted markup.",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "developer-tools",
-        "document-outline",
-        "headings",
-        "html",
-        "seo",
-        "wcag"
-      ],
-      "techStack": [
-        "CSS3",
-        "DOMParser API",
-        "Fetch API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "developer-tools", "document-outline", "headings", "html", "seo", "wcag"],
+      "techStack": ["CSS3", "DOMParser API", "Fetch API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1805,18 +893,8 @@
       "shortDescription": "Generate valid hreflang link tags for multilingual and multi-regional websites.",
       "longDescription": "## Hreflang Tag Generator\n\nGenerate copy-ready HTML hreflang tags for multilingual websites. Supports multiple language-region combinations, x-default, validation, and runs entirely offline.\n\n### Features\n\n- Multiple language and region entries\n- ISO language and region validation\n- x-default support\n- Copy-ready HTML output\n- Runs completely offline",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "hreflang",
-        "html",
-        "international",
-        "seo"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "hreflang", "html", "international", "seo"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1826,20 +904,8 @@
       "shortDescription": "Generate valid hreflang link tags with a retro CRT terminal aesthetic.",
       "longDescription": "## Hreflang Tag Generator (Retro)\n\nA retro CRT terminal-styled variant of the Hreflang Tag Generator. Same functionality — generate copy-ready HTML, XML Sitemap, or HTTP Header hreflang tags for multilingual websites — wrapped in a phosphor-green scanline aesthetic.\n\n### Features\n\n- Multiple language and region entries with live validation\n- ISO language and region validation with inline errors\n- x-default support with URL validation\n- HTML, XML Sitemap, and HTTP Header output formats\n- Duplicate hreflang code detection\n- Non-blocking validation warnings and best-practice hints\n- Copy, download, and share controls\n- Light/dark theme toggle with localStorage persistence\n- Keyboard shortcuts for all actions\n- CRT scanline overlay and phosphor glow effects\n- Runs completely offline",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "hreflang",
-        "html",
-        "international",
-        "retro",
-        "seo"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "hreflang", "html", "international", "retro", "seo"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1849,22 +915,8 @@
       "shortDescription": "Encode text into named, decimal, or hex HTML entities, or decode entities back into readable text.",
       "longDescription": "## HTML Entity Converter\n\nConvert text between plain characters and HTML entities. Encode special characters into named, decimal, or hexadecimal entities, or decode entities back into readable text using the browser's own parser.\n\n### Features\n\n- Encode plain text into HTML entities in real time\n- Decode HTML entities back into readable text\n- Named, decimal, and hexadecimal entity formats\n- Option to preserve safe ASCII letters/digits during encoding\n- Live side-by-side input and output\n- One-click copy of the output, or swap output back into input\n- Clear/reset both panels with a single click\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "text",
-      "tags": [
-        "decoding",
-        "developer-tools",
-        "encoding",
-        "entities",
-        "html",
-        "text",
-        "unicode",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["decoding", "developer-tools", "encoding", "entities", "html", "text", "unicode", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -1874,19 +926,8 @@
       "shortDescription": "An interactive playground to simulate and test HTTP headers like Cache-Control, ETag, and Last-Modified across different browser navigation states.",
       "longDescription": "## HTTP Cache-Control Simulator\n\nHTTP caching rules can feel abstract and difficult to debug in a live production environment. This simulator provides a visual sandbox where you can configure custom response headers and observe exactly how a browser evaluates cache freshness across various navigation actions.\n\n### Features\n\n- **Header Configuration Sandbox:** Tweak `Cache-Control` directives (`max-age`, `no-cache`, `no-store`, `must-revalidate`) and set custom validators like `ETag` and `Last-Modified` tokens.\n- **Navigation Action Triggers:** Simulate explicit user behaviors including fresh page loads, standard reloads, hard refetches, and back/forward browser navigation.\n- **Visual Pipeline Execution:** Real-time feedback showing whether a request results in a network fetch (200 OK), a server revalidation (304 Not Modified), or a local memory/disk cache hit.\n- **Request/Response Inspection:** Watch the client dynamically construct conditional request headers like `If-None-Match` and `If-Modified-Since` based on the current cache state.\n- **Zero-Dependency Architecture:** A completely self-contained responsive dashboard running entirely in the browser using Vanilla JS and native CSS layout structures.",
       "category": "utilities",
-      "tags": [
-        "browser-internals",
-        "caching",
-        "developer-tools",
-        "http",
-        "network",
-        "visualizer"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["browser-internals", "caching", "developer-tools", "http", "network", "visualizer"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1896,22 +937,8 @@
       "shortDescription": "Construct HTTP headers interactively while verifying correctness, format, duplicates, and casing to generate canonical header blocks.",
       "longDescription": "## HTTP Header Builder & Canonicalization Checker\n\nA professional developer utility to build, validate, and canonicalize HTTP request headers. Supports format audits for Authorization, Content-Type, Cache-Control, and custom headers, complete with multi-casing, deduplication, and code generation.\n\n### Features\n\n- Build request headers interactively with enable/disable, add, edit, and delete controls\n- Autocomplete for common headers with explanation and default placeholder value suggestions\n- Protocol target selectors: checks canonical casing rules for HTTP/1.1 (Pascal-Case) vs HTTP/2+ (lowercase)\n- Duplicate resolver: merges multi-value headers with comma separator, and overrides single-value headers\n- Format validations for Authorization (Basic/Bearer/Token), Content-Type (MIME type check), Connection, Cache-Control, Cookie, and Host\n- One-click normalizing casing and deduplication fixes\n- Output request headers as raw canonical text block, curl flags, fetch dictionary, or Python dictionary",
       "category": "utilities",
-      "tags": [
-        "api",
-        "canonicalization",
-        "curl",
-        "developer-tools",
-        "headers",
-        "http",
-        "offline",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "canonicalization", "curl", "developer-tools", "headers", "http", "offline", "validator"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1921,21 +948,8 @@
       "shortDescription": "Send a request to any URL and inspect its HTTP response headers, status code, and timing.",
       "longDescription": "## HTTP Header Inspector\n\nSend a request to any URL and inspect the response — status code, timing, content type, and all exposed response headers. Useful for debugging caching, security headers, and CORS behavior without opening browser dev tools.\n\n### Features\n\n- URL input with GET / HEAD method selector\n- Status code, response time, and content type shown as status pills\n- Full response headers table, alphabetically sorted\n- Clear note explaining CORS-limited header visibility for cross-origin requests\n- Copy headers as plain text\n- Download the result as JSON\n- Runs entirely client-side",
       "category": "browser-network",
-      "tags": [
-        "cors",
-        "developer-tools",
-        "headers",
-        "http",
-        "inspector",
-        "network"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["cors", "developer-tools", "headers", "http", "inspector", "network"],
+      "techStack": ["CSS3", "Fetch API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1945,22 +959,8 @@
       "shortDescription": "Inspect HTTP response headers, understand their purpose, and analyze security, caching, CORS, and performance information.",
       "longDescription": "## HTTP Header Inspector\n\nInspect and analyze HTTP response headers from any URL or pasted raw headers. Learn what each header does through categorized explanations, identify security-related headers, review caching directives, and inspect CORS behavior.\n\n### Features\n\n- Fetch headers directly from a URL\n- Analyze pasted raw HTTP headers\n- Categorized header explanations (Security, CORS, Caching, Cookies, Content, Networking)\n- Search and filter headers instantly\n- Copy individual headers or all headers\n- Responsive design with keyboard accessibility\n- Works completely offline for pasted headers",
       "category": "browser-network",
-      "tags": [
-        "api",
-        "caching",
-        "cors",
-        "developer-tools",
-        "headers",
-        "http",
-        "network",
-        "security"
-      ],
-      "techStack": [
-        "CSS3",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "caching", "cors", "developer-tools", "headers", "http", "network", "security"],
+      "techStack": ["CSS3", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1970,18 +970,8 @@
       "shortDescription": "Create, validate, organize, preview, import, and export HTTP request headers locally in your browser.",
       "longDescription": "## HTTP Request Header Builder\n\nBuild and manage HTTP request headers with validation and export.\n\n### Features\n\n- Create and organize HTTP request headers\n- Header validation\n- Import and export headers\n- Preview formatted output\n- Works entirely offline",
       "category": "json-api",
-      "tags": [
-        "api",
-        "headers",
-        "http",
-        "request",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "headers", "http", "request", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -1991,20 +981,8 @@
       "shortDescription": "A professional browser-based prepress studio for ICC-accurate CMYK conversions, soft-proofing, gamut analysis, and Delta E calculations.",
       "longDescription": "## ICC-Aware Print Color Converter & Soft Proof Studio\n\nStop opening heavy desktop publishing suites just to verify whether a digital design will reproduce accurately in print. This application brings professional color management and soft-proofing into the browser, replacing naive conversion formulas with advanced device-independent color transformations.\n\n### Features\n\n- **Precise ICC Color Processing:** Simulate standard printing conditions like FOGRA39, SWOP, and GRACoL with correct chromatic adaptation and rendering intents.\n- **Interactive Soft-Proofing Engine:** Evaluate paper white absorption, dot gain, and out-of-gamut clipping side-by-side with before/after controls.\n- **Deep Color Space Synchronization:** Seamless live input mapping across OKLCH, LAB, P3, Adobe RGB, and sRGB color models.\n- **Detailed Print Diagnostics:** Total Ink Coverage (TAC) warnings, rich black detection, registration black checks, and comprehensive Delta E (76, 94, 2000) metrics.\n- **Prepress Utility Suite:** Ink usage estimators, spot color matching, and professional report generation.\n- **Zero-Dependency Architecture:** A lightning-fast, self-contained creative studio built entirely on client-side Vanilla JS and Canvas specifications.",
       "category": "color",
-      "tags": [
-        "cmyk",
-        "color-management",
-        "icc-profile",
-        "prepress",
-        "print",
-        "soft-proof"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["cmyk", "color-management", "icc-profile", "prepress", "print", "soft-proof"],
+      "techStack": ["Canvas API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -2014,22 +992,8 @@
       "shortDescription": "Inspect an image's width, height, aspect ratio, orientation, size, format, and megapixels locally.",
       "longDescription": "## Image Dimension Checker\n\nInspect the dimensions and basic properties of any image instantly. Upload or drag in an image to see its width, height, aspect ratio, orientation, file size, format, and megapixel count — all processed locally with nothing uploaded.\n\n### Features\n\n- Upload via file picker or drag-and-drop\n- Width and height in pixels\n- Aspect ratio in simplified and decimal forms\n- Orientation detection (Landscape, Portrait, Square)\n- File size and image format\n- Total megapixel count\n- Live image preview\n- Copy image info to the clipboard\n- Clear and reset with one click\n- Fully responsive, keyboard accessible, and works offline",
       "category": "image",
-      "tags": [
-        "aspect-ratio",
-        "browser",
-        "dimensions",
-        "image",
-        "metadata",
-        "resolution",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "File API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["aspect-ratio", "browser", "dimensions", "image", "metadata", "resolution", "utility"],
+      "techStack": ["CSS3", "File API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2039,19 +1003,8 @@
       "shortDescription": "Extract and view EXIF, GPS, and other hidden metadata locally without uploading your images.",
       "longDescription": "## Image Metadata Viewer\n\nAn offline web utility designed to extract and display hidden metadata (EXIF, IPTC, XMP) embedded inside image files. It helps developers, photographers, and privacy-conscious users inspect camera settings, geolocation data, creation dates, and copyright information locally without uploading private photos to an external server.\n\n### Features\n\n- **Drag-and-Drop:** Instantly load and parse images.\n- **Extensive Parsing:** Extracts detailed EXIF data (camera model, exposure, focal length, ISO, GPS coordinates).\n- **Export to JSON:** Download the extracted data for programmatic use.\n- **Offline First:** Operates entirely client-side using Vanilla JS.\n- **Privacy Focused:** Your images never leave your device.",
       "category": "image",
-      "tags": [
-        "exif",
-        "image",
-        "inspector",
-        "metadata",
-        "photo",
-        "viewer"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["exif", "image", "inspector", "metadata", "photo", "viewer"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2061,20 +1014,8 @@
       "shortDescription": "Real-time Abstract Syntax Tree (AST) visualizer and parser studio for JavaScript and JSON code.",
       "longDescription": "## Interactive AST Visualizer & Parser Studio\n\nA privacy-first client-side tool to inspect, parse, and visualize Abstract Syntax Trees (ASTs) for JavaScript and JSON.\n\n### Features\n\n- Real-Time AST Parser: Recursively tokenizes and parses JS code into structured AST nodes\n- Interactive Tree Inspector: Expandable node tree view with node type badges, line numbers, and node properties\n- Scope & Symbol Table Analyzer: Inspect variable declarations, function parameters, and scope bindings\n- Presets Library: Quick-load sample code (Variable Declarations, Functions, Binary Expressions, Async/Await)\n- One-Click JSON Export: Copy AST JSON or download `.json` file\n- Persistent Dark/Light theme mode",
       "category": "utilities",
-      "tags": [
-        "ast",
-        "compiler",
-        "developer-tools",
-        "javascript",
-        "parser",
-        "syntax-tree",
-        "tree-visualization"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["ast", "compiler", "developer-tools", "javascript", "parser", "syntax-tree", "tree-visualization"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -2084,21 +1025,8 @@
       "shortDescription": "Interactive visual GUI editor for constructing, formatting, and exporting SQL queries across multiple database dialects.",
       "longDescription": "## Interactive SQL Query Builder & Formatter\n\nA privacy-first client-side tool to visually construct, format, and generate SQL queries (`SELECT`, `INSERT`, `UPDATE`, `DELETE`) across PostgreSQL, MySQL, SQLite, and MS SQL Server.\n\n### Features\n\n- Visual Clause Builder: Construct `SELECT`, `WHERE`, `JOIN` (`INNER`, `LEFT`, `RIGHT`), `GROUP BY`, `ORDER BY`, and `LIMIT` using interactive UI controls\n- Dialect Switcher: Format generated syntax specifically for PostgreSQL, MySQL, SQLite, and SQL Server\n- Preset Schemas: Quick-load mock database schemas (E-Commerce Store, Blog/CMS, SaaS Auth)\n- Instant Code Exports: Copy formatted SQL query or download `.sql` file\n- Persistent Dark/Light theme mode",
       "category": "json-api",
-      "tags": [
-        "database",
-        "developer-tools",
-        "formatter",
-        "mysql",
-        "postgresql",
-        "query-builder",
-        "sql",
-        "sqlite"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["database", "developer-tools", "formatter", "mysql", "postgresql", "query-builder", "sql", "sqlite"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2108,20 +1036,8 @@
       "shortDescription": "Interactive tool to create, solve, and print custom Word Search grid puzzles with drag-highlighting.",
       "longDescription": "## Interactive Word Search Generator & Solver\n\nA privacy-first client-side tool to generate, interactively solve, and export custom Word Search puzzles.\n\n### Features\n\n- Custom Word Lists & Presets: Quick-load preset categories (Programming Languages, Frameworks, Animals, Countries) or type custom word lists\n- Interactive Grid Solver: Click and drag across letters to highlight and find hidden words with real-time progress tracking\n- Customizable Grid Dimensions: Select 10x10, 12x12, or 15x15 puzzle matrix sizes\n- Solution Reveal Toggle: Inspect answer locations with one-click answer highlight mode\n- Print & Export Mode: Clean printable worksheet layout for classroom or offline paper solving\n- Persistent Dark/Light theme mode",
       "category": "text",
-      "tags": [
-        "developer-tools",
-        "game",
-        "generator",
-        "interactive",
-        "puzzle",
-        "text",
-        "word-search"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "game", "generator", "interactive", "puzzle", "text", "word-search"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2131,18 +1047,8 @@
       "shortDescription": "Convert between JSON and CSV formats with bidirectional conversion and custom delimiters.",
       "longDescription": "## JSON CSV Converter\n\nA bidirectional converter between JSON arrays and CSV text, with support for custom delimiters.\n\n### Features\n\n- Two-way conversion: JSON to CSV and CSV to JSON\n- Custom delimiter support (comma, tab, semicolon, pipe)\n- Proper CSV quoting for values containing delimiters or quotes\n- Sample data buttons for quick testing\n- Live row/item count stats\n- Success feedback on conversion\n- Dark mode support via prefers-color-scheme\n- Works completely offline",
       "category": "json-api",
-      "tags": [
-        "converter",
-        "csv",
-        "data",
-        "json",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "csv", "data", "json", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2152,18 +1058,8 @@
       "shortDescription": "Compare two JSON objects semantically with added, removed, and modified value highlighting.",
       "longDescription": "## JSON Diff Viewer\n\nCompare two JSON objects while ignoring formatting differences. Highlights added, removed, and modified values with a clear side-by-side visual diff. Useful for API responses, configuration files, and debugging JSON changes.",
       "category": "json-api",
-      "tags": [
-        "api",
-        "compare",
-        "diff",
-        "json",
-        "viewer"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "compare", "diff", "json", "viewer"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2173,22 +1069,8 @@
       "shortDescription": "Format, validate, and minify JSON locally in your browser.",
       "longDescription": "## JSON Formatter\n\nA clean, offline JSON formatter for quickly validating and transforming JSON without sending data to a server.\n\n### Features\n\n- Format JSON with 2-space or 4-space indentation\n- Minify JSON to a single line\n- Show validation errors with line and column details\n- Count keys, characters, and file size\n- Copy formatted output to the clipboard\n- Download output as a JSON file\n- Automatic and manual dark mode\n- Works completely offline",
       "category": "json-api",
-      "tags": [
-        "developer-tools",
-        "formatter",
-        "json",
-        "minify",
-        "offline",
-        "prettify",
-        "validator"
-      ],
-      "techStack": [
-        "Blob API",
-        "Clipboard API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "formatter", "json", "minify", "offline", "prettify", "validator"],
+      "techStack": ["Blob API", "Clipboard API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2198,22 +1080,8 @@
       "shortDescription": "Paste a JSON document, build/test JSONPath expressions, and preview matching nodes/values offline.",
       "longDescription": "## JSON Path Explorer\n\nAn interactive developer utility to evaluate JSONPath expressions against any JSON document locally in the browser.\n\n### Features\n\n- Paste or upload a local JSON file to query\n- Write and test JSONPath expressions with real-time evaluation\n- Custom syntax validator highlighting failing segments in the query path\n- Interactive breadcrumbs and collapsible JSON tree matches\n- Select preset datasets (Book Store, User Profiles, GitHub API) with recommended queries\n- Keep a local query history of past expressions",
       "category": "json-api",
-      "tags": [
-        "api",
-        "developer-tools",
-        "json",
-        "jsonpath",
-        "offline",
-        "query",
-        "testing"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "jsonpath-plus",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "developer-tools", "json", "jsonpath", "offline", "query", "testing"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "jsonpath-plus", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2223,17 +1091,8 @@
       "shortDescription": "Validate JSON data against a JSON Schema.",
       "longDescription": "## JSON Schema Validator\n\nValidate JSON data against a JSON Schema.\n\n### Features\n\n- Single HTML file\n- Works offline\n- Dark mode support\n- Responsive design",
       "category": "json-api",
-      "tags": [
-        "api",
-        "json",
-        "schema",
-        "validation"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "json", "schema", "validation"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2243,21 +1102,8 @@
       "shortDescription": "Validate JSON data against JSON Schema with live error reporting, syntax highlighting, and detailed validation results.",
       "longDescription": "## JSON Schema Validator\n\nValidate JSON data against a JSON Schema in real time. Edit the schema and JSON side by side, instantly detect validation errors, and view the exact JSON path for every issue.\n\n### Features\n\n- Live JSON Schema validation\n- Real-time syntax highlighting for JSON\n- Detailed validation errors with JSON Pointer paths\n- Built-in sample templates for quick testing\n- Supports Draft-07 JSON Schema features\n- Instant parsing and validation feedback\n- Responsive interface for desktop and mobile\n- Works completely offline in the browser",
       "category": "json-api",
-      "tags": [
-        "api",
-        "developer-tools",
-        "draft-07",
-        "json",
-        "json-schema",
-        "schema",
-        "validation",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "developer-tools", "draft-07", "json", "json-schema", "schema", "validation", "validator"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2267,16 +1113,8 @@
       "shortDescription": "Convert between JSON and CSV formats instantly.",
       "longDescription": "## JSON to CSV Converter\n\nConvert JSON to CSV and vice versa.",
       "category": "json-api",
-      "tags": [
-        "converter",
-        "csv",
-        "json"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "csv", "json"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2286,20 +1124,8 @@
       "shortDescription": "Convert raw JSON payloads into strongly-typed definitions for TypeScript, Go, Rust, JSON Schema, JSDoc, Python, or C#.",
       "longDescription": "## JSON to Type Definitions Converter\n\nConvert raw JSON payloads into strongly-typed definitions for TypeScript interfaces, Go structs, Rust structs, JSON Schema, JSDoc comments, Python TypedDicts, or C# Classes completely client-side in the browser.\n\n### Features\n\n- **Raw JSON Playground**: Instantly validates and formats pasted or uploaded JSON payloads.\n- **Multi-Language Outputs**: Generate definitions for TypeScript, Go, Rust, JSON Schema, JSDoc, Python TypedDict, or C# Classes.\n- **Configuration Controls**: Toggle options for handling optional vs. required fields, handling null/empty structures, and renaming root interfaces.\n- **Advanced Parser**: Smart detection of nested object hierarchies and array items to generate clean, unified schemas.\n- **Developer UX**: Syntax-highlighted output with dark mode, one-click copy-to-clipboard, and direct file download options.",
       "category": "json-api",
-      "tags": [
-        "api",
-        "converter",
-        "developer-tools",
-        "json",
-        "parsing",
-        "typescript",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "converter", "developer-tools", "json", "parsing", "typescript", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2309,20 +1135,8 @@
       "shortDescription": "Generate Schema.org JSON-LD structured data with live preview, copy, and download support.",
       "longDescription": "## JSON-LD / Schema.org Generator\n\nGenerate valid Schema.org JSON-LD structured data for websites using an intuitive offline interface. Create structured data for Organization, Person, Article, Product, Event, FAQ Page, and Breadcrumb List schemas with real-time JSON preview.\n\n### Features\n\n- Generate JSON-LD structured data\n- Supports Organization, Person, Article, Product, Event, FAQ Page, and Breadcrumb List schemas\n- Dynamic form fields based on selected schema type\n- Real-time JSON-LD preview\n- One-click copy to clipboard\n- Download generated JSON as a `.json` file\n- Reset form\n- Responsive and mobile-friendly design\n- Works completely offline with no external dependencies",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "json",
-        "jsonld",
-        "schema",
-        "schema.org",
-        "seo",
-        "structured-data"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "json", "jsonld", "schema", "schema.org", "seo", "structured-data"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2332,20 +1146,8 @@
       "shortDescription": "Generate Schema.org JSON-LD structured data with live preview, copy, and download support.",
       "longDescription": "## JSON-LD Schema.org Generator\n\nGenerate valid Schema.org JSON-LD structured data snippets for improved SEO and rich search results.\n\n### Features\n\n- Multiple schema types (Article, Product, FAQ, etc.).\n- Live JSON-LD preview as you type.\n- Copy to clipboard and download support.\n- Validation against Schema.org standards.\n- Single HTML file, works offline.\n- Responsive design with dark mode support.",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "json-ld",
-        "schema",
-        "schema.org",
-        "seo",
-        "structured-data",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "json-ld", "schema", "schema.org", "seo", "structured-data", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2355,22 +1157,8 @@
       "shortDescription": "Build and sign JSON Web Tokens with HS256/HS384/HS512 using Web Crypto API — entirely in your browser.",
       "longDescription": "## JWT Builder & Signer\n\nA client-side JWT generator that lets you compose header and payload JSON, pick an HMAC algorithm, and sign the token — all without leaving your browser.\n\n### Features\n\n- Interactive JSON editors for header and payload with live validation status\n- Algorithm selector (HS256, HS384, HS512) that auto-updates the header\n- Secret key input with show/hide toggle\n- Live JWT generation as you type using the Web Crypto API\n- Colour-coded token output (header / payload / signature)\n- Copy the signed JWT to clipboard in one click\n- Reset button to restore defaults\n- Dark/light theme toggle with localStorage persistence\n- Works completely offline — nothing leaves your browser",
       "category": "json-api",
-      "tags": [
-        "api",
-        "builder",
-        "encoder",
-        "json-web-token",
-        "jwt",
-        "offline",
-        "security",
-        "signing"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "Web Crypto API"
-      ],
+      "tags": ["api", "builder", "encoder", "json-web-token", "jwt", "offline", "security", "signing"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "Web Crypto API"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2380,22 +1168,8 @@
       "shortDescription": "Decode and inspect JSON Web Tokens — header, payload, claims, and expiry — entirely in your browser.",
       "longDescription": "## JWT Decoder\n\nA clean, offline JWT inspector that decodes any JSON Web Token and breaks it down into its three parts with syntax highlighting, standard claim parsing, and expiry detection.\n\n### Features\n\n- Colour-coded token structure (header / payload / signature)\n- Syntax-highlighted JSON for header and payload\n- Standard claims table (iss, sub, aud, exp, nbf, iat, jti) with human-readable timestamps\n- Expiry detection — shows Valid, Expired, or Decoded status badge\n- Copy individual parts (header JSON, payload JSON, signature) or all as combined JSON\n- Auto-decode on paste — no button click needed\n- Works completely offline — nothing leaves your browser",
       "category": "json-api",
-      "tags": [
-        "auth",
-        "decoder",
-        "developer-tools",
-        "json-web-token",
-        "jwt",
-        "offline",
-        "security",
-        "token"
-      ],
-      "techStack": [
-        "Clipboard API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["auth", "decoder", "developer-tools", "json-web-token", "jwt", "offline", "security", "token"],
+      "techStack": ["Clipboard API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2405,21 +1179,8 @@
       "shortDescription": "Paste HTML and get a prioritized offline accessibility audit (labels, headings, ARIA hints, contrast guidance).",
       "longDescription": "## Local A11y Snapshot Scanner\n\nAudit HTML code snippets locally for common accessibility violations (WCAG compliance) entirely client-side without any server processing.\n\n### Features\n\n- Audit pasted or uploaded HTML snippets locally using native browser DOMParser\n- Categorize findings by severity (Error, Warning, Info) in a visual dashboard summary\n- Scan for labeling gaps: checks input controls, select, textarea, and buttons for accessible text/labels\n- Check heading structural integrity and outline outline sequence hops\n- Audit missing image alternative text tags or empty alt tags on linked graphics\n- Find focus flow conflicts: identifies keyboard-focusable nodes nested in aria-hidden wrappers\n- Copy recommended remediation code snippets directly to resolve issues\n- Export comprehensive audit findings as JSON or copy plain text summaries",
       "category": "accessibility",
-      "tags": [
-        "a11y",
-        "accessibility",
-        "audit",
-        "html",
-        "offline",
-        "scanner",
-        "testing"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["a11y", "accessibility", "audit", "html", "offline", "scanner", "testing"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2429,23 +1190,8 @@
       "shortDescription": "Browse, search, edit, import, and export localStorage entries for the current origin.",
       "longDescription": "## LocalStorage Explorer\n\nBrowse, inspect, search, edit, import, and export localStorage entries for the current origin — all locally in your browser.\n\n### Features\n\n- Searchable table of all localStorage key-value pairs\n- View, edit, add, and delete entries\n- Automatic JSON detection with pretty-printing\n- Search and filter by key or value\n- Copy keys or values to the clipboard\n- Export all data as a JSON file\n- Import previously exported JSON with validation\n- Storage statistics (entry count and estimated size)\n- Clear all data with a confirmation step\n- Fully responsive, keyboard accessible, and works entirely offline\n\nNote: due to the browser's Same-Origin Policy, this tool can only access localStorage belonging to its own origin, not other websites.",
       "category": "browser-network",
-      "tags": [
-        "browser",
-        "debugging",
-        "developer-tools",
-        "json",
-        "localstorage",
-        "storage",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "FileReader API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS",
-        "Web Storage API"
-      ],
+      "tags": ["browser", "debugging", "developer-tools", "json", "localstorage", "storage", "utility"],
+      "techStack": ["CSS3", "FileReader API", "Google Fonts", "HTML5", "Vanilla JS", "Web Storage API"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2455,18 +1201,8 @@
       "shortDescription": "Generate placeholder lorem ipsum text for designs and mockups.",
       "longDescription": "## Lorem Ipsum Generator\n\nGenerate customizable lorem ipsum placeholder text for use in designs, wireframes, and mockups.\n\n### Features\n- Choose number of paragraphs or words\n- Copy to clipboard with one click\n- Works fully offline",
       "category": "text",
-      "tags": [
-        "generator",
-        "ipsum",
-        "lorem",
-        "placeholder",
-        "text"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "ipsum", "lorem", "placeholder", "text"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2476,18 +1212,8 @@
       "shortDescription": "Write and preview Markdown in real time, offline.",
       "longDescription": "## Markdown Previewer\n\nA standalone Markdown editor with live preview that works completely offline.\n\n### Features\n\n- Live Markdown preview\n- Support for headings, lists, tables, links, images, blockquotes, task lists, and code blocks\n- Copy generated HTML\n- Export rendered HTML\n- Focus mode\n- Word and character count\n- Responsive design\n- Works completely offline",
       "category": "text",
-      "tags": [
-        "editor",
-        "html",
-        "markdown",
-        "offline",
-        "preview"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["editor", "html", "markdown", "offline", "preview"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2497,20 +1223,8 @@
       "shortDescription": "Interactive grid editor to create, format, align, and convert Markdown tables.",
       "longDescription": "## Markdown Table Builder & Converter\n\nA privacy-first client-side developer utility for constructing, formatting, aligning, and converting Markdown tables directly in the browser.\n\n### Features\n\n- Interactive spreadsheet-like grid editor with inline cell editing\n- Dynamic row and column addition and deletion\n- Per-column alignment selectors (Left, Center, Right)\n- Import raw CSV, TSV, or JSON data directly into editable Markdown tables\n- Toggle between visually padded ASCII aligned columns and compact syntax\n- One-click copy and instant .md file download\n- Dark and light theme modes with localStorage persistence\n- Works 100% offline with zero dependencies",
       "category": "text",
-      "tags": [
-        "converter",
-        "csv",
-        "generator",
-        "markdown",
-        "table",
-        "text",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "csv", "generator", "markdown", "table", "text", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2520,17 +1234,8 @@
       "shortDescription": "Generate Markdown tables easily with this visual tool.",
       "longDescription": "## Markdown Table Generator\n\nGenerate Markdown tables easily with this visual tool.\n\n### Features\n\n- Single HTML file\n- Works offline\n- Dark mode support\n- Responsive design",
       "category": "text",
-      "tags": [
-        "formatting",
-        "generator",
-        "markdown",
-        "table"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["formatting", "generator", "markdown", "table"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2541,19 +1246,8 @@
       "shortDescription": "A cute pink-themed Markdown table generator with live preview and one-click copy.",
       "longDescription": "Markdown Table Generator (Girly) is a charming, pastel-themed utility for creating GitHub-flavored Markdown tables quickly and effortlessly. Users can define the number of rows and columns, edit cell values in an intuitive interface, preview the generated Markdown in real time, and copy the output with a single click. Designed with a playful pink aesthetic, smooth animations, and a responsive layout, it combines productivity with an enjoyable user experience while remaining a lightweight, standalone HTML tool.",
       "category": "text",
-      "tags": [
-        "editor",
-        "generator",
-        "girly",
-        "markdown",
-        "productivity",
-        "table"
-      ],
-      "techStack": [
-        "CSS",
-        "HTML",
-        "JavaScript"
-      ],
+      "tags": ["editor", "generator", "girly", "markdown", "productivity", "table"],
+      "techStack": ["CSS", "HTML", "JavaScript"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2563,20 +1257,8 @@
       "shortDescription": "Generate essential HTML meta tags with a live preview and copy-ready code.",
       "longDescription": "## Meta Tag Generator\n\nCreate essential HTML meta tags for your website in real time. This tool helps developers generate SEO-friendly meta tags including title, description, keywords, author, robots, viewport, charset, and theme color.\n\n### Features\n- Live meta tag generation\n- Live preview of page information\n- Character counters for title and description\n- One-click copy to clipboard\n- Reset all fields instantly\n- Responsive design\n- Works completely offline\n- Single self-contained HTML file with no external dependencies",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "head",
-        "html",
-        "meta",
-        "metadata",
-        "seo",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "head", "html", "meta", "metadata", "seo", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2586,17 +1268,8 @@
       "shortDescription": "Create soft, extruded UI elements with customizable neumorphic shadows.",
       "longDescription": "## Neumorphism Generator\n\nA visual tool for creating soft UI / neumorphic design effects.\n\n### Features\n\n- Convex, concave, and flat shadow styles\n- Adjustable distance, blur, border radius, and intensity\n- Custom background color picker with dynamic shadow colors\n- Live preview that updates in real time\n- Copy generated CSS to clipboard\n- Dark mode via prefers-color-scheme\n- Responsive layout for mobile and desktop",
       "category": "css",
-      "tags": [
-        "css",
-        "neumorphism",
-        "shadow",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "neumorphism", "shadow", "ui"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2606,25 +1279,8 @@
       "shortDescription": "Extract text from images entirely offline using client-side OCR.",
       "longDescription": "## OCR Text Extractor\n\nExtract text from images entirely in your browser using client-side OCR (Tesseract.js).\n\n### Features\n\n- Drag-and-drop image upload (PNG, JPG, WebP)\n- Offline OCR (downloads language data on first run, then reuses cached files)\n- Progress bar for initialization and recognition\n- Canvas preprocessing (upscaling + contrast) to improve accuracy\n- Copy extracted text to clipboard",
       "category": "text",
-      "tags": [
-        "extractor",
-        "image",
-        "ocr",
-        "offline",
-        "text",
-        "utility"
-      ],
-      "techStack": [
-        "Canvas API",
-        "Clipboard API",
-        "CSS3",
-        "FileReader API",
-        "HTML5",
-        "Tesseract.js",
-        "Vanilla JS",
-        "WASM",
-        "Web Workers"
-      ],
+      "tags": ["extractor", "image", "ocr", "offline", "text", "utility"],
+      "techStack": ["Canvas API", "Clipboard API", "CSS3", "FileReader API", "HTML5", "Tesseract.js", "Vanilla JS", "WASM", "Web Workers"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -2634,23 +1290,8 @@
       "shortDescription": "Validate Open Graph tags from any public URL with social previews, health score, and JSON export.",
       "longDescription": "## Open Graph Checker\n\nFetch and analyze Open Graph metadata from any public URL with tri-proxy fallback, live social previews for Facebook, Twitter/X, and LinkedIn, and actionable recommendations.\n\n### Features\n\n- Tri-proxy CORS fallback for maximum compatibility\n- Social previews for Facebook, Twitter/X, and LinkedIn\n- Weighted OG health score (0–100) with grade\n- Tag-by-tag validation checklist with recommendations\n- Raw extracted meta tag table\n- Copy plain-text report or export full JSON\n- Dark/light theme with system preference\n- Works completely offline UI, fetches on demand",
       "category": "web-seo",
-      "tags": [
-        "analyzer",
-        "checker",
-        "meta-tags",
-        "open-graph",
-        "seo",
-        "social-media",
-        "validator",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "DOMParser API",
-        "Fetch API",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["analyzer", "checker", "meta-tags", "open-graph", "seo", "social-media", "validator", "web"],
+      "techStack": ["CSS3", "DOMParser API", "Fetch API", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2660,21 +1301,8 @@
       "shortDescription": "Compare og:* tags with expected profile schemas, audit tag limits or conflicts, and preview social sharing layout cards.",
       "longDescription": "## Open Graph Debugger & Meta Diff\n\nA visual auditor for SEO metadata elements, validating og:* and twitter:* tags against standard target schemas (Blog, Article, Product). Detects missing fields, invalid types, length truncations, localhost URL links, and casing issues with platform checklist integration.\n\n### Features\n\n- Interactive tag grid comparing expected schema targets vs provided meta values\n- Pre-defined schemas for Basic Open Graph, Rich Article/Blog, and Product/E-Commerce pages\n- Validation tests checking og:type, absolute/localhost URL rules, required tags, and title/description lengths\n- Highlights conflicts: detects discrepancies between og:url and canonical links, or og:* and twitter:* variables\n- Real-time mockup visual preview cards for Facebook and Twitter summary feeds\n- Copy-paste optimized head block generator with customization option switches",
       "category": "web-seo",
-      "tags": [
-        "api",
-        "facebook",
-        "meta",
-        "open-graph",
-        "seo",
-        "twitter",
-        "validator"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "facebook", "meta", "open-graph", "seo", "twitter", "validator"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2684,20 +1312,8 @@
       "shortDescription": "Generate Open Graph meta tags with a live tri-platform preview (Facebook, Twitter, LinkedIn) and copy-ready HTML.",
       "longDescription": "## Open Graph Generator\n\nBuild complete Open Graph metadata with real-time validation scores, tri-platform social card previews, and copy-ready HTML output.\n\n### Features\n\n- Live preview for Facebook, Twitter/X, and LinkedIn\n- Real-time OG tag validation with 7-point checklist\n- Character counters with warnings for title (60) and description (155)\n- Dark/light theme with system preference detection\n- One-click copy of clean HTML meta tags\n- Works completely offline",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "meta-tags",
-        "open-graph",
-        "preview",
-        "seo",
-        "social-media",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "meta-tags", "open-graph", "preview", "seo", "social-media", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2707,26 +1323,8 @@
       "shortDescription": "Analyze meta tags, social previews, and SEO metadata for any URL with actionable scores.",
       "longDescription": "## Open Graph Inspector\n\nA comprehensive Open Graph and meta tag analyzer that fetches any URL and breaks down its social sharing metadata, SEO tags, and rich preview data.\n\n### Features\n\n- **URL or Paste HTML** - Enter a URL to fetch, or paste raw HTML directly\n- **Social Previews** - See exactly how links appear on Facebook, Twitter, LinkedIn, and other platforms\n- **OG Tag Analysis** - Scores your Open Graph tags (og:title, og:description, og:image, etc.) out of 7\n- **Twitter Card Analysis** - Validates Twitter Card meta tags (5-point check)\n- **SEO Metadata Check** - Evaluates standard SEO tags like title, description, canonical, and robots\n- **Actionable Scores** - Color-coded pass/fail indicators with specific recommendations\n- **Favicon Detection** - Finds and displays all linked icons\n- **Keyboard Shortcuts** - Full keyboard navigation support for power users\n- **Export Results** - Download analysis as JSON\n- **Dark Mode** - Automatic dark/light theme with manual toggle\n- **CORS Proxy Fallback** - Multiple proxy strategies for fetching cross-origin URLs\n- **Clipboard Paste** - Paste HTML directly from clipboard for offline analysis",
       "category": "web-seo",
-      "tags": [
-        "analyzer",
-        "facebook",
-        "meta-tags",
-        "open-graph",
-        "preview",
-        "previewer",
-        "seo",
-        "social-media",
-        "twitter-card",
-        "validator"
-      ],
-      "techStack": [
-        "Clipboard API",
-        "CSS3",
-        "Fetch API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["analyzer", "facebook", "meta-tags", "open-graph", "preview", "previewer", "seo", "social-media", "twitter-card", "validator"],
+      "techStack": ["Clipboard API", "CSS3", "Fetch API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2736,19 +1334,8 @@
       "shortDescription": "Generate unique, collision-free variation color schemes based on color theory metrics, offline.",
       "longDescription": "## Palette Generator\n\nA modern client-side color utility that creates harmonious, perceptually balanced color palettes instantly.\n\n### Features\n\n- **Harmony Schemes:** Supports Complementary, Analogous, Triadic, Tetradic, and Monochromatic configurations.\n- **Collision-Free Engine:** Uses a perceptually weighted color distance metric to eliminate duplicate or nearly identical colors.\n- **Dynamic Variations:** Instantly shifts brightness, saturation, and hue steps with a non-clamping variation seed system.\n- **Real-Time Interface:** Syncs hex textual data inputs with system color pickers automatically without refreshing.\n- **Export Ecosystem:** One-click JSON generation containing complete schema distributions and formatted strings tagged with active metrics.\n- **Works Completely Offline:** Fully self-contained without tracking servers or external framework dependency overhead.",
       "category": "color",
-      "tags": [
-        "color",
-        "color-tools",
-        "generator",
-        "offline",
-        "palette"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "color-tools", "generator", "offline", "palette"],
+      "techStack": ["Canvas API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2758,20 +1345,8 @@
       "shortDescription": "Generate highly secure, cryptographic random passwords instantly. 100% offline, privacy guaranteed.",
       "longDescription": "## Password Generator\n\nA secure, client-side password generator that creates strong, random passwords. It runs entirely offline in the browser, ensuring that no passwords are ever sent over a network or stored on a server.\n\n### Features\n\n- Interactive slider to choose password length (e.g., 4 to 64 characters)\n- Toggle options for Uppercase, Lowercase, Numbers, and Symbols\n- **New:** Option to exclude ambiguous characters (e.g., i, l, 1, L, o, 0, O) to improve readability\n- Real-time password strength indicator based on entropy\n- \"One-click copy\" to instantly copy the generated password to the clipboard\n- 100% offline and secure—runs entirely in the browser using the native Web Crypto API (`crypto.getRandomValues`) for cryptographic randomness",
       "category": "utilities",
-      "tags": [
-        "generator",
-        "offline",
-        "password",
-        "privacy",
-        "security",
-        "utility"
-      ],
-      "techStack": [
-        "Crypto API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "offline", "password", "privacy", "security", "utility"],
+      "techStack": ["Crypto API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2781,19 +1356,8 @@
       "shortDescription": "A professional color science studio for generating perceptually uniform color scales in OKLCH and CIELAB with live UI previews and design system exports.",
       "longDescription": "## Perceptually Uniform Palette Interpolator\n\nTraditional gradient generators interpolate colors in sRGB or HSL space, resulting in muddy midpoints, severe brightness dips, and unnatural hue shifts. This tool brings professional color science into the browser, allowing designers and developers to build mathematically balanced, perceptually uniform color scales using modern OKLCH and CIELAB mathematics.\n\n### Features\n\n- **Advanced Color Spaces:** Interpolate smoothly across OKLCH, CIELAB, HSL, and RGB with customizable shortest-path, longest-path, increasing, and decreasing hue rules.\n- **Precision Parametric Controls:** Tweak lightness progression curves, chroma scaling, saturation bias, and gamma correction across 5 to 11 scale steps.\n- **Educational Comparison Mode:** Visually isolate and understand the perceptual flaws of legacy color spaces compared to modern human-centric models.\n- **Comprehensive Design Token Output:** Copy or download production-ready code for Tailwind CSS configurations, CSS Custom Properties, SCSS, JSON, and Adobe ASE files.\n- **Live Component Testing:** Real-time UI playground that applies your generated palette to buttons, cards, text badges, and charts to verify visual hierarchy before deployment.\n- **Accessibility Auditing:** Built-in WCAG contrast checks, text color pairing, and color blindness simulation filters.\n- **Zero-Dependency Architecture:** A lightning-fast, self-contained creative application running entirely client-side using Vanilla JS and native Canvas APIs.",
       "category": "color",
-      "tags": [
-        "accessibility",
-        "color-science",
-        "css",
-        "design-system",
-        "oklch",
-        "palette-generator"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["accessibility", "color-science", "css", "design-system", "oklch", "palette-generator"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2803,19 +1367,8 @@
       "shortDescription": "A refactoring tool that converts legacy physical CSS properties to direction-aware logical properties with live RTL/LTR previews.",
       "longDescription": "## Physical → Logical CSS Properties Translator\n\nMigrating legacy codebases to modern, internationalized layouts is a daunting task. This translator automates the process of identifying physical properties like `margin-left` and `border-right` and converting them into their modern logical equivalents (`margin-inline-start`, `border-inline-end`). \n\n### Features\n\n- **Automated Refactoring:** Quickly convert standard CSS blocks into robust, direction-agnostic styles compatible with `dir=\"rtl\"` and `dir=\"ltr\"` layouts.\n- **Live Symmetry Sandbox:** See exactly how your component reacts to direction changes. The side-by-side preview panel highlights layout breakage caused by fixed physical properties.\n- **Educational Side-by-Side:** Provides a clear breakdown of the transformation logic, helping teams understand why `padding-left` fails when switching to right-to-left languages.\n- **Modern Shorthand Support:** Correctly handles complex shorthand property expansions into their logical block/inline equivalents.\n- **Zero-Dependency Core:** A fast, responsive developer utility built natively to handle heavy CSS parsing entirely client-side.",
       "category": "css",
-      "tags": [
-        "css",
-        "i18n",
-        "internationalization",
-        "logical-properties",
-        "refactoring",
-        "rtl"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["css", "i18n", "internationalization", "logical-properties", "refactoring", "rtl"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2825,17 +1378,8 @@
       "shortDescription": "Bidirectionally convert between JSON and CSV with nested flattening and live preview.",
       "longDescription": "## Premium JSON/CSV Converter\n\nA beautiful, premium JSON to CSV and CSV to JSON converter featuring automatic flattening of nested JSON objects, custom delimiter support, and a live data preview table.",
       "category": "json-api",
-      "tags": [
-        "converter",
-        "csv",
-        "data",
-        "json"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "csv", "data", "json"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2845,21 +1389,8 @@
       "shortDescription": "Generate customizable privacy policies for websites and apps with live preview, copy, and download.",
       "longDescription": "## Privacy Policy Generator\n\nGenerate customizable privacy policies for websites and apps using a simple form with live preview.\n\n### Features\n\n- Fill-in form with common policy clauses\n- GDPR and CCPA compliance options\n- Live preview of generated policy\n- Copy to clipboard and download\n- Works completely offline",
       "category": "web-seo",
-      "tags": [
-        "ccpa",
-        "gdpr",
-        "generator",
-        "legal",
-        "policy",
-        "privacy",
-        "seo",
-        "website"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["ccpa", "gdpr", "generator", "legal", "policy", "privacy", "seo", "website"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2869,18 +1400,8 @@
       "shortDescription": "Generate symmetrical retro 8-bit sprites using cellular automata and random noise.",
       "longDescription": "## Procedural Pixel Art Sprite Generator & Animator\n\nCreate a web-based pixel art creator and procedural asset generator using HTML, CSS, and JavaScript. The application leverages cellular automata and symmetric random noise to automatically generate retro sprites (e.g. spaceships, monsters, items) and animate them using pixel grid timelines.\n\n### Features\n\n- Educates developers on procedural logic, cellular automata (Conway's rules), and random seeding.\n- Provides an interactive UI for creating, generating, and exporting retro pixel art.\n- Demonstrates timeline frames and sprite sheet generation techniques.",
       "category": "image",
-      "tags": [
-        "canvas",
-        "enhancement",
-        "game-dev",
-        "javascript",
-        "procedural-generation"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["canvas", "enhancement", "game-dev", "javascript", "procedural-generation"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2890,18 +1411,8 @@
       "shortDescription": "Instantly generate customizable, high-quality QR codes offline.",
       "longDescription": "## QR Code Generator\n\nA client-side QR Code Generator that allows users to instantly convert text, URLs, or data into high-quality QR codes. It runs completely offline in the browser.\n\n### Features\n\n- Instant, real-time generation as the user types\n- Input fields for standard Text or URLs\n- Options to customize the QR code (e.g., Foreground color, Background color, and Error Correction Level)\n- Ability to download the generated QR code as a PNG image\n- 100% offline—no data is sent to external servers",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "generator",
-        "offline",
-        "qrcode",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "generator", "offline", "qrcode", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2911,22 +1422,8 @@
       "shortDescription": "Build and parse URL query strings visually, with support for duplicate keys and full URL assembly.",
       "longDescription": "## Query String Builder\n\nBuild and parse URL query strings without manually encoding values. Add key-value pairs, generate properly encoded query parameters, or paste an existing query string/URL to break it apart into editable rows.\n\n### Features\n\n- Add, edit, and remove query parameter rows dynamically\n- Support for multiple values on the same key\n- Real-time encoded query string generation\n- Parse an existing query string or full URL into editable pairs\n- Build a full URL from a base URL plus parameters\n- Toggle between encoded and readable preview modes\n- Copy the query string or full URL to the clipboard\n- Clear/reset all parameters with a single click\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "json-api",
-      "tags": [
-        "api",
-        "decoding",
-        "developer-tools",
-        "encoding",
-        "query-string",
-        "url",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "URLSearchParams API",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "decoding", "developer-tools", "encoding", "query-string", "url", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "URLSearchParams API", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2936,22 +1433,8 @@
       "shortDescription": "Visually create CSS border-radius values with live preview, presets, and copy-ready CSS output.",
       "longDescription": "## Radii - Border Radius Generator\n\nA visual border-radius playground for creating custom CSS corner shapes.\n\n### Features\n\n- Live preview of border radius changes\n- Individual corner controls\n- Slider and numeric input synchronization\n- PX and % unit support\n- Link all corners mode\n- Preset shapes (Sharp, Soft, Circle, Leaf, Drop)\n- Shuffle/random shape generator\n- Copy CSS output\n- Responsive layout\n- Works completely offline\n\nPerfect for designing cards, buttons, blobs, and modern UI components.",
       "category": "css",
-      "tags": [
-        "border-radius",
-        "css",
-        "design",
-        "frontend",
-        "generator",
-        "playground",
-        "radius",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["border-radius", "css", "design", "frontend", "generator", "playground", "radius", "ui"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -2962,19 +1445,8 @@
       "shortDescription": "A modern base converter with real-time conversion, bit manipulation, and light/dark mode.",
       "longDescription": "RADIX — Base Converter is a standalone utility for converting numbers between binary, decimal, hexadecimal, and octal in real time. It features an interactive 8-bit switch bank that lets users flip individual bits and instantly see the converted values across all supported number systems. The tool includes input validation for each base, one-click copy functionality for conversion results, responsive design, keyboard accessibility, and a built-in light/dark theme toggle. Designed with a clean, modern interface, it is useful for students, developers, and anyone working with binary data or number system conversions.",
       "category": "utilities",
-      "tags": [
-        "base-converter",
-        "binary",
-        "decimal",
-        "hexadecimal",
-        "number-system",
-        "octal"
-      ],
-      "techStack": [
-        "CSS",
-        "HTML",
-        "JavaScript"
-      ],
+      "tags": ["base-converter", "binary", "decimal", "hexadecimal", "number-system", "octal"],
+      "techStack": ["CSS", "HTML", "JavaScript"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -2984,17 +1456,8 @@
       "shortDescription": "Generate a professional GitHub README.md with customizable sections. Copy or download instantly.",
       "longDescription": "## README Template Generator\n\nGenerate a professional GitHub README.md with customizable sections including project title, description, badges, installation, usage, contributing, and license.\n\n### Features\n\n- Single HTML file\n- Customizable sections\n- Copy or download instantly\n- Dark mode support\n- Responsive design",
       "category": "text",
-      "tags": [
-        "generator",
-        "markdown",
-        "readme",
-        "template"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "markdown", "readme", "template"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3004,20 +1467,8 @@
       "shortDescription": "A powerful in-browser archive editor to explore directory trees, preview text/images inline, modify file contents, and re-download ZIPs locally.",
       "longDescription": "## Real Zip Archive Explorer & Editor\n\nStop relying on basic extract-and-list viewers or heavy desktop applications just to tweak a single file inside a compressed archive. This tool brings full archive management directly into your browser window, letting you inspect, modify, and repackage ZIP files on the fly.\n\n### Features\n\n- **Interactive Directory Explorer:** Browse internal file trees, expand nested directories, and navigate complex folder structures effortlessly.\n- **Inline Asset Previews:** View code files, text documents, and image assets directly in the preview pane without extracting them to disk.\n- **Mutative Editing Suite:** Add new files, delete unwanted entries, or replace existing files dynamically within the archive.\n- **Client-Side Repackaging:** Re-compress and download your updated `.zip` file instantly with zero server round-trips.\n- **Complete Privacy:** Operates entirely offline using modern web compression libraries, keeping your files strictly secure on your machine.\n- **Zero-Dependency Core:** A high-performance responsive interface built completely in a single self-contained HTML file.",
       "category": "utilities",
-      "tags": [
-        "7-zip",
-        "archive",
-        "client-side",
-        "file-explorer",
-        "utility",
-        "zip"
-      ],
-      "techStack": [
-        "CSS3",
-        "fflate",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["7-zip", "archive", "client-side", "file-explorer", "utility", "zip"],
+      "techStack": ["CSS3", "fflate", "HTML5", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -3027,18 +1478,8 @@
       "shortDescription": "Test regular expressions against custom text with live highlighting and replacement.",
       "longDescription": "## Regex Playground\n\nCreate an interactive Regular Expression Playground where users can test regular expressions against custom input text with live highlighting. The tool supports different regex flags and provides instant feedback.",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "javascript",
-        "regex",
-        "testing",
-        "validation"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "javascript", "regex", "testing", "validation"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3048,22 +1489,8 @@
       "shortDescription": "Visual syntax flowchart generator and plain-English explainer for Regular Expressions.",
       "longDescription": "## RegEx Railroad Diagram & Explainer\n\nA privacy-first client-side developer utility for parsing Regular Expressions, generating interactive syntax railroad diagrams, and providing plain-English breakdowns.\n\n### Features\n\n- Visual Railroad Flowchart: Renders syntax diagrams showing matching tracks, groups, character classes, and quantifiers\n- Plain-English Breakdown: Explains regex tokens step-by-step in human-readable terms\n- Live Match Inspector: Tests sample strings against pattern with group capture analysis\n- Preset Library: Quick-load patterns for email, URL, IPv4, phone numbers, dates, and hex colors\n- One-click SVG Export and JavaScript Code snippet generator\n- Dark and light theme modes with localStorage persistence\n- Works 100% offline with zero dependencies",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "diagram",
-        "flowchart",
-        "parser",
-        "regex",
-        "regexp",
-        "utility",
-        "visualizer"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "SVG",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "diagram", "flowchart", "parser", "regex", "regexp", "utility", "visualizer"],
+      "techStack": ["CSS3", "HTML5", "SVG", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3073,18 +1500,8 @@
       "shortDescription": "A polished regex testing workbench with live matching, flag toggles, and match group inspection.",
       "longDescription": "## Regexa — Pattern Workbench\n\nAn advanced regex testing tool with a developer-focused UI.\n\n### Features\n\n- Live regex matching with highlighting\n- Flag toggles (g, i, m, s, u)\n- Match group inspection\n- JetBrains Mono typography\n- Dark-themed workbench UI",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "javascript",
-        "patterns",
-        "regex",
-        "testing"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "javascript", "patterns", "regex", "testing"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3094,20 +1511,8 @@
       "shortDescription": "Test responsive layouts instantly via URL or raw HTML sandbox with intelligent scaling.",
       "longDescription": "## Responsive Breakpoint Tester\n\nA professional utility for web developers to preview websites at common device widths and custom breakpoints.\n\n### Features\n\n- **Dual Testing Modes:** Test live URLs or use the Local Sandbox to paste raw HTML/CSS (bypassing `X-Frame-Options` restrictions).\n- **Intelligent Scaling:** Automatically scales down the viewport to fit your screen if the target device resolution exceeds your physical monitor size.\n- **Smart Presets:** Instantly switch between Mobile, Tablet, Laptop, and Desktop resolutions.\n- **Custom Controls:** Define exact custom dimensions and instantly rotate device orientation.\n- **Offline Sandbox:** The HTML paste functionality operates 100% offline within your browser.",
       "category": "web-seo",
-      "tags": [
-        "breakpoint",
-        "css",
-        "design",
-        "frontend",
-        "responsive",
-        "tester",
-        "ui"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["breakpoint", "css", "design", "frontend", "responsive", "tester", "ui"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3117,20 +1522,8 @@
       "shortDescription": "Preview a srcset/sizes image at common device breakpoints and see which source the browser selects.",
       "longDescription": "## Responsive Image Simulator\n\nPreview a responsive image (`srcset`/`sizes`) at common device breakpoints and see exactly which source the browser selects and at what rendered width. Useful for debugging responsive image markup without manually resizing a real browser window.\n\n### Features\n\n- Editable srcset, sizes, and fallback src fields with validation\n- Breakpoint tabs for common device widths (mobile, tablet, laptop, desktop, wide)\n- Renders the real `<img>` element at the chosen viewport width and reads its actual `currentSrc`\n- Info cards showing viewport width, selected source, natural image size, and active sizes value\n- Explanatory note on how the simulation reflects real browser image-selection behavior\n- Runs entirely client-side",
       "category": "image",
-      "tags": [
-        "breakpoints",
-        "image",
-        "responsive",
-        "simulator",
-        "sizes",
-        "srcset"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["breakpoints", "image", "responsive", "simulator", "sizes", "srcset"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3140,21 +1533,8 @@
       "shortDescription": "Visually build, manage, and export standard-compliant robots.txt files with live syntax highlighting.",
       "longDescription": "## Robots.txt Generator\n\nA professional, offline-capable SEO utility designed to help webmasters and developers create valid `robots.txt` files through an intuitive visual interface.\n\n### Features\n\n- **Visual Rule Builder:** Easily add multiple User-Agent groups and configure specific Allow/Disallow directives without writing syntax manually.\n- **Global Directives:** Manage global configurations like XML Sitemaps, Crawl-delay, and Host declarations.\n- **Live Syntax Highlighting:** View your generated `robots.txt` in real-time with an integrated, lightweight syntax highlighter.\n- **1-Click Presets:** Instantly load common SEO configurations (e.g., Allow All, Disallow All, Standard SEO, WordPress Base).\n- **Zero Dependencies:** Operates entirely client-side using the native DOM and Blob API for secure, immediate file generation.\n- **Premium Developer UI:** Designed with a modern, split-screen console layout featuring comprehensive dark/light mode support.",
       "category": "web-seo",
-      "tags": [
-        "bot",
-        "crawler",
-        "generator",
-        "robots.txt",
-        "seo",
-        "sitemap",
-        "web"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "Web Blob API"
-      ],
+      "tags": ["bot", "crawler", "generator", "robots.txt", "seo", "sitemap", "web"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "Web Blob API"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3164,17 +1544,8 @@
       "shortDescription": "Test your website at different screen resolutions.",
       "longDescription": "## Screen Resolution Tester\n\nTest your website at different screen resolutions.\n\n### Features\n\n- Single HTML file\n- Works offline\n- Dark mode support\n- Responsive design",
       "category": "browser-network",
-      "tags": [
-        "breakpoints",
-        "responsive",
-        "testing",
-        "viewport"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["breakpoints", "responsive", "testing", "viewport"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3184,18 +1555,8 @@
       "shortDescription": "A visual editor to generate pure CSS scroll-driven animations using animation-timeline: scroll() and view().",
       "longDescription": "## Scroll-Driven Animation Timeline Builder\n\nThe era of relying on heavy JavaScript libraries for scroll animations is over. This tool is a visual builder for the bleeding-edge CSS `animation-timeline` property. Map your `@keyframes` directly to scroll progress or element visibility, and generate pure CSS scroll-linked animations with zero JavaScript.\n\n### Features\n\n- **Visual Timeline Editor:** Tie animation states to scroll percentages or element intersection ranges instead of seconds and milliseconds.\n- **Live Scrollable Demo Pane:** Scrub a mock page up and down to see exactly how your parallax, progress bar, or reveal animation behaves in real-time.\n- **`scroll()` vs `view()` Toggles:** Instantly switch between container-scroll tracking and element-intersection tracking.\n- **View Timeline Ranges:** A visual UI to easily configure complex `entry`, `contain`, and `exit` boundary ranges.\n- **Production-Ready Export:** Generates the exact pure CSS required to drop the scroll-driven animation directly into your project.\n- **Zero-Dependency Engine:** A flawlessly responsive layout and tool interface built entirely natively.",
       "category": "css",
-      "tags": [
-        "animation",
-        "css",
-        "scroll-timeline",
-        "tool",
-        "visual-builder"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["animation", "css", "scroll-timeline", "tool", "visual-builder"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3205,21 +1566,8 @@
       "shortDescription": "Build/validate recommended security headers (especially CSP) with rule explanations and safe templates.",
       "longDescription": "## Security Header Coach\n\nConfigure, audit, and export HTTP security response headers locally in your browser. Features live compliance auditing for Content-Security-Policy (CSP) injection gaps and HSTS preload compatibility rules.\n\n### Features\n\n- Interactively configure HTTP security headers (CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy)\n- Grade your configuration on a scale of A+ to F using our built-in compliance score calculator\n- Scan CSP directives for common scripting vulnerabilities, wildcard domains, and missing quotes on keywords\n- Check HSTS configuration settings against standard Google Chrome/Firefox preloading criteria\n- View detailed coach remediation reports for errors, warnings, and guidelines\n- Copy formatted configs directly for Nginx, Apache (.htaccess), Next.js, Node.js Express, and Cloudflare Workers\n- Export and import your custom configs as JSON files",
       "category": "web-seo",
-      "tags": [
-        "api",
-        "csp",
-        "developer-tools",
-        "headers",
-        "hsts",
-        "security",
-        "seo"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "csp", "developer-tools", "headers", "hsts", "security", "seo"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3229,19 +1577,8 @@
       "shortDescription": "A standalone Sitemap Generator that helps users create valid XML sitemaps for websites entirely offline.",
       "longDescription": "## Sitemap Generator\n\nA standalone Sitemap Generator that helps users create valid XML sitemaps for websites.\n\n### Features\n\n- Add multiple website URLs individually.\n- **New:** Bulk Import a list of URLs instantly via copy-paste.\n- Set last modified (lastmod) date.\n- Configure change frequency (changefreq) and priority values.\n- Generate valid XML sitemap with real-time XML preview.\n- One-click copy generated XML or download as sitemap.xml.\n- Works completely offline with no dependencies.",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "offline",
-        "seo",
-        "sitemap",
-        "web",
-        "xml"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "offline", "seo", "sitemap", "web", "xml"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3251,18 +1588,8 @@
       "shortDescription": "Generate valid XML sitemaps instantly. Offline, fast, and secure.",
       "longDescription": "## Sitemap Generator\n\nQuickly generate valid XML sitemaps for your website with configurable URL entries, priorities, and change frequencies.\n\n### Features\n\n- Add multiple URLs with priority and changefreq.\n- Generates valid XML sitemap output.\n- Copy to clipboard and download support.\n- Instant generation, no server required.\n- Single HTML file, works offline.\n- Responsive design with dark mode support.",
       "category": "web-seo",
-      "tags": [
-        "generator",
-        "seo",
-        "sitemap",
-        "web",
-        "xml"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["generator", "seo", "sitemap", "web", "xml"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3272,22 +1599,8 @@
       "shortDescription": "Convert any text into a clean, SEO-friendly URL slug with customizable formatting.",
       "longDescription": "## Slug Generator\n\nConvert titles, headings, or phrases into clean, SEO-friendly URL slugs in real time. Normalizes accented and Unicode characters, strips punctuation, and lets you customize casing, separators, and number handling.\n\n### Features\n\n- Generates slugs in real time as you type\n- Optional lowercase conversion\n- Customizable separator (hyphen or underscore)\n- Removes punctuation, special characters, and extra whitespace\n- Normalizes accented/Unicode characters (e.g. Café → cafe)\n- Option to keep or remove numbers\n- Live preview of the generated slug\n- One-click copy to the clipboard\n- Clear/reset with a single click\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "web-seo",
-      "tags": [
-        "developer-tools",
-        "generator",
-        "seo",
-        "slug",
-        "text",
-        "url",
-        "utility",
-        "web-development"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "generator", "seo", "slug", "text", "url", "utility", "web-development"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3297,19 +1610,8 @@
       "shortDescription": "A serverless bundle size analyzer that decodes raw source maps and VLQ data to map byte weights to original source files.",
       "longDescription": "## Source Map Explorer\n\nStop setting up heavy terminal configurations just to inspect your production builds. This tool brings advanced bundle analysis directly into a single browser window. By manually parsing Base64 VLQ mapping lines locally, it visualizes the composition of your distribution bundles and reveals exactly which original modules are costing you bytes.\n\n### Features\n\n- **Client-Side VLQ Engine:** Decodes production variable-length quantities entirely via native client JS to cross-reference minified code spots with original locations.\n- **Hierarchical Treemap:** Explore bundle weights dynamically with an interactive canvas breakdown that scales paths from top-level modules down to unique files.\n- **Bloat Detection:** Instantly spot massive third-party packages or accidental duplicate inclusions that are quietly driving up network transfer times.\n- **Comprehensive File Support:** Supports detached `.map` assets, standard production bundles, and modular files containing embedded inline source directives.\n- **Zero-Dependency Core:** A highly performant, single-file diagnostic interface built completely natively without framework layers or network dependencies.",
       "category": "utilities",
-      "tags": [
-        "bundle-optimization",
-        "developer-tools",
-        "source-maps",
-        "tool",
-        "visualizer",
-        "vlq"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["bundle-optimization", "developer-tools", "source-maps", "tool", "visualizer", "vlq"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3319,21 +1621,8 @@
       "shortDescription": "A professional browser-based asset pipeline tool featuring genuine bin-packing algorithms, interactive previews, and multi-format CSS/SVG exports.",
       "longDescription": "## Sprite Sheet Packer & CSS/SVG Symbol Generator\n\nReplace heavy desktop software and cumbersome plugins with a high-performance, browser-based asset pipeline tool. Powered by true bin-packing algorithms (MaxRects, Guillotine, Skyline), this application packs mixed-size sprites with minimal wasted space, generating optimized texture atlases and production-ready code instantly.\n\n### Features\n\n- **Advanced Bin-Packing Algorithms:** Implements MaxRects, Skyline, and Guillotine strategies to optimize texture space for irregular sprites.\n- **Interactive Visual Preview:** Smooth zoom, pan, bounding box inspection, and checkerboard transparency views for precise quality control.\n- **Multi-Format Code Generation:** Instantly outputs CSS rules, SCSS/LESS mixins, Tailwind configurations, and TexturePacker-compatible JSON metadata.\n- **SVG Symbol Pipelines:** Seamlessly combine vector graphics into optimized SVG symbol sheets with inline or external reference support.\n- **Complete ZIP Export:** Package your sprite sheets, JSON metadata, and style sheets into a single download with one click.\n- **Absolute Privacy:** 100% client-side image processing utilizing modern HTML5 Canvas APIs and JSZip, keeping files secure on your device.",
       "category": "image",
-      "tags": [
-        "bin-packing",
-        "css",
-        "graphics",
-        "sprite-sheet",
-        "svg",
-        "texture-packer"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "HTML5",
-        "JSZip",
-        "Vanilla JS"
-      ],
+      "tags": ["bin-packing", "css", "graphics", "sprite-sheet", "svg", "texture-packer"],
+      "techStack": ["Canvas API", "CSS3", "HTML5", "JSZip", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3343,18 +1632,8 @@
       "shortDescription": "Translate standard SQL queries instantly into MongoDB Aggregation Pipeline JSON arrays.",
       "longDescription": "## SQL to MongoDB Translator\n\nDevelopers migrating from relational databases to MongoDB often struggle to write complex NoSQL queries. This tool allows users to write standard SQL queries (including SELECT, WHERE, GROUP BY, ORDER BY, and LIMIT) and instantly translates them into the equivalent MongoDB Aggregation Pipeline JSON array.\n\n### Features\n\n- Write SQL in a clean editor with basic auto-formatting\n- Translates `SELECT/FROM` into `$project` stages\n- Translates `WHERE` conditions into `$match` stages\n- Translates `GROUP BY` into `$group` with basic aggregations (COUNT, SUM, AVG)\n- Translates `ORDER BY` into `$sort`\n- Translates `LIMIT` into `$limit`\n- Client-side parser ensuring privacy (no backend required)\n- Instantly copy the resulting JSON pipeline",
       "category": "utilities",
-      "tags": [
-        "converter",
-        "database",
-        "mongodb",
-        "nosql",
-        "sql"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "database", "mongodb", "nosql", "sql"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3364,20 +1643,8 @@
       "shortDescription": "A serverless, WASM-powered SQLite database browser. Drag in a .sqlite file to browse tables, run real SQL queries, and export results entirely offline.",
       "longDescription": "## SQLite File Browser & Query Runner\n\nStop installing heavy desktop applications just to peek inside a local database file. This tool is a fully functional SQLite browser that runs entirely in your web browser. By dragging and dropping a raw `.sqlite` or `.db` file into the window, you can instantly explore its contents, run complex SQL queries, and export the results.\n\n### Features\n\n- **Client-Side Execution:** Powered by `sql.js` (WebAssembly), meaning no servers are involved and your database files never leave your machine.\n- **Schema Inspector:** Easily navigate through database tables, inspect column data types, and view row counts at a glance.\n- **Live Query Editor:** Write and execute real SQL queries with a responsive data grid displaying the output.\n- **Export Results:** Download the results of your queries instantly as CSV or JSON files.\n- **Zero-Dependency UI:** A fast, responsive, and clean dashboard layout built natively in a single HTML file.",
       "category": "utilities",
-      "tags": [
-        "database",
-        "offline",
-        "sql",
-        "sqlite",
-        "tool",
-        "wasm"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "WebAssembly"
-      ],
+      "tags": ["database", "offline", "sql", "sqlite", "tool", "wasm"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "WebAssembly"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3387,19 +1654,8 @@
       "shortDescription": "Compress and optimize raw SVG code by removing unnecessary metadata, empty tags, and comments.",
       "longDescription": "## SVG Optimizer\n\nA single-file tool to compress and optimize raw SVG code by removing unnecessary metadata, empty tags, and comments.\n\n### Features\n\n- Paste raw SVG code for instant optimization\n- Removes `<title>`, `<desc>`, `<!-- comments -->`, and empty tags\n- Live visual preview container to ensure SVG integrity\n- Instantly copy or download optimized minified SVG\n- Works completely offline locally in your browser",
       "category": "image",
-      "tags": [
-        "compressor",
-        "image-tools",
-        "minify",
-        "optimizer",
-        "svg"
-      ],
-      "techStack": [
-        "CSS3",
-        "DOMParser",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["compressor", "image-tools", "minify", "optimizer", "svg"],
+      "techStack": ["CSS3", "DOMParser", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3409,22 +1665,8 @@
       "shortDescription": "Interactive vector canvas editor to manipulate SVG path commands, Bezier curves, and export clean SVG code.",
       "longDescription": "## SVG Path Visualizer & Curve Editor\n\nA privacy-first client-side tool to draw, edit, and inspect SVG paths and Bezier curves (`<path d=\"...\">`).\n\n### Features\n\n- Interactive Vector Canvas: Visualizes anchor nodes and Bezier control handles for path commands\n- Command Breakdown: Human-readable step-by-step breakdown of commands (Move, Line, Cubic Bezier, Close Path)\n- Shape Presets: Quick-load preset vector shapes (Heart, Star, Shield, Cloud, Arrow, Checkmark)\n- Instant Code Exports: Copy raw path `d` attribute, full `<svg>` markup, or download `.svg` file\n- Persistent Dark/Light theme mode",
       "category": "image",
-      "tags": [
-        "bezier",
-        "canvas",
-        "developer-tools",
-        "graphics",
-        "icon",
-        "path",
-        "svg",
-        "vector"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "SVG",
-        "Vanilla JS"
-      ],
+      "tags": ["bezier", "canvas", "developer-tools", "graphics", "icon", "path", "svg", "vector"],
+      "techStack": ["CSS3", "HTML5", "SVG", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3434,23 +1676,8 @@
       "shortDescription": "Paste raw SVG markup and preview it instantly, with validation and quick export options.",
       "longDescription": "## SVG Previewer\n\nPaste raw SVG markup and see it rendered instantly. Validates the markup, shows a checkerboard background to reveal transparency, and offers quick export to `.svg`, `.png`, a data URI, or the clipboard.\n\n### Features\n\n- Instant live preview as you type\n- Validation with clear error messages for malformed markup\n- Checkerboard, white, black, and dark background options\n- Zoom control for inspecting fine detail\n- Shows viewBox, width/height, element count, and file size\n- Basic format/indent for messy markup\n- Copy the SVG source or a data URI\n- Download as `.svg` or rasterized `.png`\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "image",
-      "tags": [
-        "converter",
-        "image",
-        "preview",
-        "previewer",
-        "svg",
-        "utility",
-        "vector"
-      ],
-      "techStack": [
-        "Canvas API",
-        "CSS3",
-        "DOMParser API",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "image", "preview", "previewer", "svg", "utility", "vector"],
+      "techStack": ["Canvas API", "CSS3", "DOMParser API", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3460,19 +1687,8 @@
       "shortDescription": "Paste Tailwind utility classes and get the equivalent hand-written CSS rule.",
       "longDescription": "## Tailwind → Vanilla CSS Converter\n\nPaste a string of Tailwind utility classes and get the equivalent hand-written CSS rule. Useful for learning what a Tailwind class compiles to, or migrating a small component away from Tailwind without pulling in the framework.\n\n### Features\n\n- Editable CSS selector plus a Tailwind class input\n- Covers spacing, flex/grid layout, sizing, typography, a color palette subset, borders, radius, and shadow utilities\n- Handles responsive/state prefixes (`md:`, `hover:`) by converting the base utility with a note\n- Lists any unrecognized classes instead of failing silently\n- One-click copy of the generated CSS\n- Runs completely offline",
       "category": "css",
-      "tags": [
-        "converter",
-        "css",
-        "frontend",
-        "tailwind",
-        "utility-classes"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "css", "frontend", "tailwind", "utility-classes"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3482,23 +1698,8 @@
       "shortDescription": "Find the closest matching Tailwind CSS color and shade for any HEX, RGB, or HSL input.",
       "longDescription": "## Tailwind Color Finder\n\nEnter a color using a picker, HEX, RGB, or HSL, and instantly find the closest matching Tailwind CSS color and shade using RGB distance. Displays the matching utility classes and lets you browse the full default palette.\n\n### Features\n\n- Input via color picker, HEX, RGB, or HSL — all kept in sync\n- Finds the closest Tailwind color and shade (e.g. blue-500, emerald-600)\n- Shows matching bg-/text-/border-/fill-/stroke- utility classes\n- Side-by-side comparison of your color and the matched color\n- Similarity score based on color distance\n- One-click copy of any class name or hex value\n- Searchable browser for the complete Tailwind default palette\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "color",
-      "tags": [
-        "color",
-        "css",
-        "developer-tools",
-        "frontend",
-        "hex",
-        "palette",
-        "rgb",
-        "tailwind",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["color", "css", "developer-tools", "frontend", "hex", "palette", "rgb", "tailwind", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3508,18 +1709,8 @@
       "shortDescription": "Paste Tailwind utility classes and get the equivalent hand-written CSS rule.",
       "longDescription": "## Tailwind to Vanilla CSS Converter\n\nConvert Tailwind CSS utility classes into their equivalent vanilla CSS properties for learning or migration.\n\n### Features\n\n- Paste Tailwind classes to get vanilla CSS output.\n- Supports common utility classes.\n- Instant conversion with live preview.\n- Copy output to clipboard.\n- Single HTML file, works offline.\n- Responsive design with dark mode support.",
       "category": "css",
-      "tags": [
-        "converter",
-        "css",
-        "developer-tools",
-        "tailwind",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "css", "developer-tools", "tailwind", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3529,18 +1720,8 @@
       "shortDescription": "Calculate your current average and find out exactly what you need on the final.",
       "longDescription": "## Target Grade & GPA Forecaster\n\nCalculate your current average and find out exactly what you need on the final exam to achieve your target grade.",
       "category": "utilities",
-      "tags": [
-        "calculator",
-        "education",
-        "grades",
-        "student",
-        "university"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["calculator", "education", "grades", "student", "university"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3550,19 +1731,8 @@
       "shortDescription": "Compare two blocks of text and see line-level and word-level differences, side-by-side or unified.",
       "longDescription": "## Text Diff Viewer\n\nCompare two blocks of plain text and instantly see what changed, with both unified and side-by-side split views.\n\n### Features\n\n- Line-level diff highlighting (added / removed / modified)\n- Word-level highlighting within modified lines for precise change detection\n- Toggle between Unified and Split view modes\n- Hide unchanged lines to focus on differences\n- Copy diff output in plain-text unified format\n- Light and dark mode support\n- Works completely offline",
       "category": "text",
-      "tags": [
-        "compare",
-        "diff",
-        "text",
-        "utility",
-        "viewer"
-      ],
-      "techStack": [
-        "Clipboard API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["compare", "diff", "text", "utility", "viewer"],
+      "techStack": ["Clipboard API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3572,21 +1742,8 @@
       "shortDescription": "Convert Unix timestamps to human-readable dates and back, with local time, UTC, and relative time.",
       "longDescription": "## Timestamp Converter\n\nConvert Unix timestamps to human-readable dates, or dates back to Unix time, in either direction. Useful for developers, testers, and analysts working with logs, APIs, and scheduling systems.\n\n### Features\n\n- Convert Unix timestamps (seconds or milliseconds) to readable dates\n- Convert a date/time back to a Unix timestamp\n- Results shown in local time, UTC, ISO 8601, and relative (\"3 hours ago\") form\n- Live conversion as you type\n- One-click \"Use current time\" button\n- Per-value copy to clipboard\n- Clear/reset with a single click\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "utilities",
-      "tags": [
-        "converter",
-        "date",
-        "developer-tools",
-        "time",
-        "timestamp",
-        "unix",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["converter", "date", "developer-tools", "time", "timestamp", "unix", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3596,22 +1753,8 @@
       "shortDescription": "Preview how Twitter/X cards appear with live updates for Summary and Summary Large Image layouts.",
       "longDescription": "## Twitter / X Card Preview\n\nPreview how your content may appear when shared on Twitter/X. Enter a title, description, image URL, website URL, and choose between Summary or Summary Large Image card layouts to see a live preview.\n\n### Features\n\n- Live Twitter/X card preview\n- Supports Summary and Summary Large Image card types\n- Real-time preview updates\n- Website domain extraction from URL\n- Reset form functionality\n- Responsive and mobile-friendly design\n- Fully offline and self-contained",
       "category": "web-seo",
-      "tags": [
-        "offline",
-        "preview",
-        "responsive",
-        "seo",
-        "social-media",
-        "twitter",
-        "twitter-card",
-        "web",
-        "x"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["offline", "preview", "responsive", "seo", "social-media", "twitter", "twitter-card", "web", "x"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3621,22 +1764,8 @@
       "shortDescription": "Inspect every character's Unicode code point, UTF-8/UTF-16 bytes, category, and escape sequences.",
       "longDescription": "## Unicode Inspector\n\nInspect Unicode characters in real time as you type or paste text. See each character's code point, best-effort name or category, UTF-8/UTF-16 byte representation, HTML entity, and JavaScript escape sequence — with invisible and whitespace characters flagged.\n\n### Features\n\n- Real-time character-by-character inspection\n- Unicode code point (e.g. U+1F600)\n- Character name where available, else Unicode category via native \\p{} property detection\n- UTF-8 and UTF-16 byte/code-unit representations\n- HTML entity and JavaScript Unicode escape sequences\n- Highlights invisible/whitespace characters (tabs, newlines, NBSP, zero-width spaces, BOM, etc.)\n- Total character and UTF-16 code unit counts\n- One-click copy of any code point\n- Clear/reset with a single click\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "text",
-      "tags": [
-        "character",
-        "developer-tools",
-        "encoding",
-        "text",
-        "unicode",
-        "utf16",
-        "utf8",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["character", "developer-tools", "encoding", "text", "unicode", "utf16", "utf8", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3646,21 +1775,8 @@
       "shortDescription": "Encode and decode URLs or percent-encoded strings instantly using native browser APIs.",
       "longDescription": "## URL Encoder / Decoder\n\nA fast, offline utility for encoding and decoding URLs, query parameters, and percent-encoded strings using native JavaScript APIs.\n\n### Features\n- Encode complete URLs using encodeURI()\n- Encode query parameters using encodeURIComponent()\n- Decode percent-encoded strings using decodeURIComponent()\n- Real-time conversion as you type\n- Detects invalid or malformed percent-encoded strings\n- Character counters for input and output\n- Copy output to clipboard\n- Swap input and output\n- Load built-in examples\n- Fully responsive design with dark mode support\n- Works completely offline with no external dependencies",
       "category": "json-api",
-      "tags": [
-        "decode",
-        "decoder",
-        "encode",
-        "encoder",
-        "percent-encoding",
-        "uri",
-        "url",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["decode", "decoder", "encode", "encoder", "percent-encoding", "uri", "url", "utility"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3670,20 +1786,8 @@
       "shortDescription": "Parse any User-Agent string into a readable breakdown of browser, engine, OS, device, and CPU architecture.",
       "longDescription": "## User Agent Parser\n\nParse any User-Agent string — or your current browser — into a plain, readable breakdown. Identifies the browser and version, rendering engine, operating system and version, device type, and CPU architecture when available. All parsing happens entirely offline.\n\n### Features\n\n- Paste and parse any User-Agent string instantly\n- Detects browser name and version\n- Detects operating system and version (when available)\n- Detects rendering engine (Blink, Gecko, WebKit, Trident, etc.)\n- Detects device type (Desktop, Mobile, Tablet, Bot, Smart TV)\n- Displays CPU architecture when advertised\n- One-click \"Use current browser\" button to parse `navigator.userAgent`\n- Copy parsed info as formatted text or JSON\n- Clear/reset with a single click\n- Fully responsive, keyboard accessible, and works completely offline",
       "category": "browser-network",
-      "tags": [
-        "browser",
-        "debugging",
-        "network",
-        "parser",
-        "user-agent",
-        "utility"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["browser", "debugging", "network", "parser", "user-agent", "utility"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3693,18 +1797,8 @@
       "shortDescription": "Generate random v4 UUIDs instantly, offline.",
       "longDescription": "## UUID Generator\n\nA simple, offline tool to generate v4 UUIDs.\n\n### Features\n\n- Instant generation\n- Multiple quantities (1, 5, 10, 50)\n- Copy to clipboard\n- Works completely offline",
       "category": "utilities",
-      "tags": [
-        "developer-tools",
-        "generator",
-        "offline",
-        "uuid"
-      ],
-      "techStack": [
-        "Crypto API",
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["developer-tools", "generator", "offline", "uuid"],
+      "techStack": ["Crypto API", "CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3714,21 +1808,8 @@
       "shortDescription": "Live browser, screen, and viewport details — resize or rotate to see them update in real time.",
       "longDescription": "## Viewport / Screen Info\n\nDisplays detailed information about the browser, screen, and viewport in real time, using standard browser APIs — no dev tools required.\n\n### Features\n\n- Viewport width/height and Visual Viewport dimensions\n- Screen resolution and available screen size\n- Device pixel ratio (DPR)\n- Screen orientation (portrait/landscape)\n- Color depth and pixel depth\n- Outer window dimensions\n- Touch support and max touch points\n- Current URL, protocol, hostname, and user agent\n- Live updates on resize, orientation change, and connectivity change\n- Copy all device information to the clipboard\n- Fully responsive, keyboard accessible, and works entirely offline",
       "category": "browser-network",
-      "tags": [
-        "browser",
-        "debugging",
-        "developer-tools",
-        "device",
-        "responsive",
-        "screen",
-        "viewport"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["browser", "debugging", "developer-tools", "device", "responsive", "screen", "viewport"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3738,15 +1819,8 @@
       "shortDescription": "A compiler and visual simulator engine for Turing Machine rules (State / Read / Write / Move / Next).",
       "longDescription": "## Visual Turing Machine\n\nSimulator for Turing Machine rules.",
       "category": "utilities",
-      "tags": [
-        "simulator",
-        "turing"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["simulator", "turing"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -3756,20 +1830,8 @@
       "shortDescription": "A live performance diagnostics environment that uses PerformanceObserver to capture, visualize, and debug INP, LCP, and CLS events in real time.",
       "longDescription": "## Web Vitals Jank Profiler\n\nStop reading static definitions of web performance metrics. This interactive profiler lets you trigger and inspect bad user experience metrics live. By hooking directly into the browser's native `PerformanceObserver` API, it monitors and graphs Core Web Vitals while giving you specific controls to break the page's responsiveness.\n\n### Features\n\n- **Real-Time Observer Engine:** Captures LCP, CLS, and INP metrics directly from the browser context as they happen.\n- **Controlled Chaos Controls:** Intentionally inject long tasks, force synchronous layouts, or trigger sudden shifts to watch metric gauges react instantly.\n- **Visual Interaction Diagnostics:** Maps exact browser events to visual indicators, drawing bounding outlines over shifting elements to make invisible paint bugs obvious.\n- **Telemetry Breakdown:** Inspect the detailed performance entries generated by the layout engine, illuminating exactly what blocks the main thread.\n- **Zero-Dependency Core:** A standalone client-side benchmarking suite built inside a single file with native JS and CSS grid telemetry displays.",
       "category": "utilities",
-      "tags": [
-        "diagnostic",
-        "jank",
-        "layout-thrashing",
-        "performance",
-        "performance-observer",
-        "web-vitals"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS",
-        "Web Performance API"
-      ],
+      "tags": ["diagnostic", "jank", "layout-thrashing", "performance", "performance-observer", "web-vitals"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS", "Web Performance API"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3779,23 +1841,8 @@
       "shortDescription": "Interactive WebRTC playground to test peer connections, SDP offers/answers, ICE candidates, and DataChannel messaging.",
       "longDescription": "## WebRTC P2P Signal & Data Channel Testing Studio\n\nA privacy-first client-side tool to test WebRTC peer connections, SDP negotiation, and DataChannel messaging.\n\n### Features\n\n- Auto-Loopback & Manual Signaling: Connect local WebRTC peers automatically in one click or perform manual SDP offer/answer exchanges\n- STUN & ICE Candidate Inspector: Test custom STUN server URLs and inspect gathered host, srflx, and relay ICE candidates\n- Live P2P DataChannel Playground: Send text and binary payloads with live round-trip latency (RTT) measurement\n- Connection State Diagnostics: Monitor real-time badges for signalingState, iceGatheringState, iceConnectionState, and connectionState\n- Persistent Dark/Light theme mode",
       "category": "browser-network",
-      "tags": [
-        "browser",
-        "datachannel",
-        "developer-tools",
-        "ice",
-        "networking",
-        "p2p",
-        "sdp",
-        "stun",
-        "turn",
-        "webrtc"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["browser", "datachannel", "developer-tools", "ice", "networking", "p2p", "sdp", "stun", "turn", "webrtc"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Hard",
       "status": "live"
     },
@@ -3805,20 +1852,8 @@
       "shortDescription": "A developer client to connect to, inspect, send messages to, and debug WebSocket connections and Server-Sent Events (SSE) streams in real time.",
       "longDescription": "## WebSocket & SSE Sandbox Client\n\nA developer client to connect to, inspect, send messages to, and debug WebSocket connections and Server-Sent Events (SSE) streams in real time entirely within the browser.\n\n### Features\n\n- **Flexible Endpoints**: Support for secure and insecure protocols (ws://, wss://, http://, https://).\n- **Message Composer**: Build and send messages supporting raw text, formatted JSON, and customizable mock templates.\n- **Timeline Stream Logger**: Search-filterable log showing incoming/outgoing events, server-sent events, errors, and connection states with timestamps.\n- **Auto-Ping/Keepalive**: Custom ping intervals to keep connection alive, tracking latency and metrics.\n- **Headers & Custom Protocols**: Custom headers configuration (utilizing a fetch-based stream reader for SSE) and subprotocol negotiation for WS handshakes.",
       "category": "browser-network",
-      "tags": [
-        "api",
-        "browser",
-        "developer-tools",
-        "network",
-        "sse",
-        "testing",
-        "websocket"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "browser", "developer-tools", "network", "sse", "testing", "websocket"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3828,21 +1863,8 @@
       "shortDescription": "Real-time word, character, and sentence counter for text of any length.",
       "longDescription": "## Word / Character Counter\n\nA minimalist, real-time text analysis tool. Type or paste text to instantly see word, character, and sentence counts — built for writers, marketers, and developers who need quick length checks without ad-heavy websites.\n\n### Features\n\n- Real-time character count (including spaces)\n- Real-time word count\n- Real-time sentence count\n- Character count excluding spaces, line count, and estimated reading time\n- Copy text or clear/reset with one click\n- Clean, responsive, minimalist interface\n- Fully functional offline with zero dependencies",
       "category": "text",
-      "tags": [
-        "characters",
-        "counter",
-        "productivity",
-        "text",
-        "utility",
-        "words"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "js-yaml",
-        "Vanilla JS"
-      ],
+      "tags": ["characters", "counter", "productivity", "text", "utility", "words"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "js-yaml", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
     },
@@ -3852,24 +1874,8 @@
       "shortDescription": "Test XPath expressions against XML documents instantly, offline.",
       "longDescription": "A lightweight XPath playground that runs entirely in your browser. Paste in an XML document, write an XPath expression, and see matching nodes, strings, numbers, or booleans update live as you type. Includes example queries to get started, one-click copying of results, and match count / result type stats — all with zero dependencies and no data ever leaving your machine.",
       "category": "utilities",
-      "tags": [
-        "client-side",
-        "developer-tools",
-        "dom",
-        "offline",
-        "parser",
-        "query",
-        "testing",
-        "validator",
-        "web-scraping",
-        "xml",
-        "xpath"
-      ],
-      "techStack": [
-        "CSS3",
-        "HTML5",
-        "Vanilla JS"
-      ],
+      "tags": ["client-side", "developer-tools", "dom", "offline", "parser", "query", "testing", "validator", "web-scraping", "xml", "xpath"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
       "difficulty": "Medium",
       "status": "live"
     },
@@ -3879,25 +1885,21 @@
       "shortDescription": "Convert between YAML and JSON in either direction, with validation and pretty-printed output.",
       "longDescription": "## YAML / JSON Converter\n\nConvert data between YAML and JSON in both directions. Paste YAML or JSON, instantly see it converted to the other format, and get clear validation errors if the input doesn't parse.\n\n### Features\n\n- Convert YAML to JSON and JSON to YAML\n- Live input/output preview with instant updates\n- Syntax validation with clear error messages\n- Pretty-printed output with configurable indentation (2/4 spaces or tab)\n- Copy converted output to the clipboard, or use it as the next input\n- Clear/reset with a single click\n- Supports nested objects, arrays, strings, numbers, booleans, and null\n- Fully responsive, keyboard accessible, and works offline once loaded",
       "category": "json-api",
-      "tags": [
-        "api",
-        "config",
-        "converter",
-        "developer-tools",
-        "json",
-        "parsing",
-        "utility",
-        "yaml"
-      ],
-      "techStack": [
-        "CSS3",
-        "Google Fonts",
-        "HTML5",
-        "js-yaml",
-        "Vanilla JS"
-      ],
+      "tags": ["api", "config", "converter", "developer-tools", "json", "parsing", "utility", "yaml"],
+      "techStack": ["CSS3", "Google Fonts", "HTML5", "js-yaml", "Vanilla JS"],
       "difficulty": "Easy",
       "status": "live"
+    },
+    {
+      "id": "tfidf-search-engine",
+      "name": "TF-IDF Search Engine",
+      "shortDescription": "A client-side search index that ranks documents by TF-IDF relevance, with full scoring breakdown shown.",
+      "longDescription": "## TF-IDF Search Engine\n\nPaste in multiple text documents and build a search index (inverted index) entirely client-side, then search across all documents with results ranked by TF-IDF (Term Frequency-Inverse Document Frequency) relevance score instead of simple keyword matching. Aimed at developers who want to understand how real search engines rank results — no backend, no database, no external search library, everything runs in a single HTML file. Highlights matched terms in each result and shows a transparent scoring ledger (tf × idf per term) so ranking never feels like a black box.",
+      "category": "utilities",
+      "tags": ["search", "tf-idf", "inverted-index", "developer-tools", "ranking", "text-analysis"],
+      "techStack": ["CSS3", "HTML5", "Vanilla JS"],
+      "difficulty": "Medium",
+      "status": "live"
     }
   ]
 }
diff --git a/tools/tfidf-search-engine.html b/tools/tfidf-search-engine.html
new file mode 100644
index 0000000..205ff86
--- /dev/null
+++ b/tools/tfidf-search-engine.html
@@ -0,0 +1,822 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TF·IDF Search Index</title>
+    <style>
+      :root {
+        --ink: #0f1116;
+        --panel: #171a21;
+        --panel-2: #1d2129;
+        --line: #2a2f3a;
+        --text: #ece7d8;
+        --muted: #8a8f9c;
+        --muted-2: #5f6572;
+        --gold: #e0a640;
+        --gold-dim: rgba(224, 166, 64, 0.16);
+        --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+        --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        background: var(--ink);
+        color: var(--text);
+        font-family: var(--sans);
+        line-height: 1.5;
+        min-height: 100vh;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        * {
+          animation: none !important;
+          transition: none !important;
+        }
+      }
+
+      a {
+        color: var(--gold);
+      }
+
+      .wrap {
+        max-width: 1180px;
+        margin: 0 auto;
+        padding: 32px 24px 80px;
+      }
+
+      .stamp {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--muted);
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        padding: 6px 14px;
+      }
+
+      .stamp::before {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--gold);
+        box-shadow: 0 0 0 3px var(--gold-dim);
+      }
+
+      header {
+        margin: 22px 0 36px;
+      }
+
+      h1 {
+        font-family: var(--mono);
+        font-weight: 600;
+        font-size: clamp(28px, 4vw, 44px);
+        margin: 0 0 10px;
+        letter-spacing: -0.01em;
+      }
+
+      h1 .dot {
+        color: var(--gold);
+      }
+      h1 .sub {
+        font-family: var(--sans);
+        font-weight: 400;
+        color: var(--muted);
+        font-size: 0.5em;
+        display: block;
+        margin-top: 6px;
+        letter-spacing: 0;
+      }
+
+      .tagline {
+        color: var(--muted);
+        max-width: 60ch;
+        margin: 0;
+        font-size: 15px;
+      }
+
+      .layout {
+        display: grid;
+        grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
+        gap: 20px;
+        align-items: start;
+      }
+
+      @media (max-width: 860px) {
+        .layout {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .panel {
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        padding: 20px;
+      }
+
+      .panel-head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        margin-bottom: 14px;
+        gap: 12px;
+      }
+
+      h2 {
+        font-family: var(--mono);
+        font-size: 13px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--muted);
+        margin: 0;
+      }
+
+      .count-pill {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--muted-2);
+      }
+
+      .doc-card {
+        background: var(--panel-2);
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        padding: 12px;
+        margin-bottom: 10px;
+      }
+
+      .doc-card-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+      }
+
+      .doc-label {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--gold);
+      }
+
+      .remove-btn {
+        background: none;
+        border: none;
+        color: var(--muted-2);
+        cursor: pointer;
+        font-size: 13px;
+        padding: 2px 6px;
+        border-radius: 6px;
+      }
+      .remove-btn:hover {
+        color: var(--text);
+        background: var(--line);
+      }
+      .remove-btn:focus-visible {
+        outline: 2px solid var(--gold);
+        outline-offset: 2px;
+      }
+
+      textarea {
+        width: 100%;
+        min-height: 84px;
+        resize: vertical;
+        background: var(--ink);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        color: var(--text);
+        font-family: var(--sans);
+        font-size: 13.5px;
+        padding: 10px;
+      }
+      textarea:focus-visible,
+      input:focus-visible {
+        outline: 2px solid var(--gold);
+        outline-offset: 1px;
+        border-color: var(--gold);
+      }
+
+      .btn-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 12px;
+      }
+
+      button {
+        font-family: var(--sans);
+        font-size: 13.5px;
+        font-weight: 600;
+        padding: 9px 14px;
+        border-radius: 8px;
+        border: 1px solid var(--line);
+        background: var(--panel-2);
+        color: var(--text);
+        cursor: pointer;
+        transition:
+          border-color 0.15s ease,
+          background 0.15s ease;
+      }
+      button:hover {
+        border-color: var(--muted-2);
+      }
+      button:focus-visible {
+        outline: 2px solid var(--gold);
+        outline-offset: 2px;
+      }
+
+      button.primary {
+        background: var(--gold);
+        color: #1a1206;
+        border-color: var(--gold);
+      }
+      button.primary:hover {
+        background: #e9b357;
+      }
+      button.primary:disabled {
+        background: var(--panel-2);
+        color: var(--muted-2);
+        border-color: var(--line);
+        cursor: not-allowed;
+      }
+
+      .status-line {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--muted-2);
+        margin-top: 12px;
+        min-height: 16px;
+      }
+      .status-line.ready {
+        color: var(--gold);
+      }
+
+      .search-input-row {
+        position: relative;
+        margin-bottom: 18px;
+      }
+
+      #searchInput {
+        width: 100%;
+        background: var(--panel-2);
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        color: var(--text);
+        font-size: 15px;
+        padding: 13px 14px;
+      }
+      #searchInput:disabled {
+        color: var(--muted-2);
+        cursor: not-allowed;
+      }
+      #searchInput::placeholder {
+        color: var(--muted-2);
+      }
+
+      .empty-state {
+        color: var(--muted-2);
+        font-size: 13.5px;
+        padding: 18px 4px;
+        border: 1px dashed var(--line);
+        border-radius: 10px;
+        text-align: center;
+      }
+
+      .result {
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        margin-bottom: 12px;
+        overflow: hidden;
+        background: var(--panel-2);
+      }
+
+      .result-summary {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        padding: 14px 16px;
+        cursor: pointer;
+        list-style: none;
+      }
+      .result-summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .rank-badge {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--muted);
+        width: 22px;
+        flex-shrink: 0;
+      }
+
+      .result-title {
+        font-family: var(--mono);
+        font-size: 13.5px;
+        color: var(--text);
+        flex-shrink: 0;
+      }
+
+      .score-bar-track {
+        flex: 1;
+        height: 6px;
+        background: var(--ink);
+        border-radius: 999px;
+        overflow: hidden;
+        min-width: 60px;
+      }
+      .score-bar-fill {
+        height: 100%;
+        background: var(--gold);
+        border-radius: 999px;
+      }
+
+      .score-value {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--gold);
+        flex-shrink: 0;
+        width: 52px;
+        text-align: right;
+      }
+
+      .snippet {
+        padding: 0 16px 16px;
+        font-size: 13.5px;
+        color: var(--muted);
+        border-top: 1px solid var(--line);
+        margin-top: -1px;
+        padding-top: 12px;
+      }
+
+      .snippet mark {
+        background: var(--gold-dim);
+        color: var(--gold);
+        border-radius: 3px;
+        padding: 0 2px;
+      }
+
+      .ledger {
+        margin: 12px 16px 16px;
+        border-top: 1px dashed var(--line);
+        padding-top: 12px;
+      }
+
+      .ledger-head {
+        font-family: var(--mono);
+        font-size: 10.5px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--muted-2);
+        margin-bottom: 8px;
+      }
+
+      .ledger-row {
+        display: flex;
+        align-items: baseline;
+        font-family: var(--mono);
+        font-size: 12.5px;
+        gap: 8px;
+        padding: 3px 0;
+      }
+
+      .ledger-term {
+        color: var(--text);
+      }
+
+      .ledger-leader {
+        flex: 1;
+        border-bottom: 1px dotted var(--muted-2);
+        margin-bottom: 4px;
+      }
+
+      .ledger-figures {
+        color: var(--muted);
+        white-space: nowrap;
+      }
+      .ledger-figures .tfidf {
+        color: var(--gold);
+      }
+
+      footer {
+        margin-top: 40px;
+        color: var(--muted-2);
+        font-size: 12.5px;
+        font-family: var(--mono);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <span class="stamp">Search Index · Client-Side · No Dependencies</span>
+
+      <header>
+        <h1>TF<span class="dot">·</span>IDF<span class="sub">A search engine you can see the reasoning of</span></h1>
+        <p class="tagline">Paste in a handful of documents, build an index, then search. Every result shows exactly how its score was computed — term frequency, inverse document frequency, and the product of the two — so ranking stops being a black box.</p>
+      </header>
+
+      <main class="layout">
+        <section class="panel">
+          <div class="panel-head">
+            <h2>01 — Documents</h2>
+            <span class="count-pill" id="docCount">0 loaded</span>
+          </div>
+
+          <div id="docList"></div>
+
+          <div class="btn-row">
+            <button id="addDocBtn" type="button">+ Add document</button>
+            <button id="loadSampleBtn" type="button">Load sample set</button>
+          </div>
+          <div class="btn-row">
+            <button id="buildBtn" class="primary" type="button">Build index</button>
+          </div>
+          <div class="status-line" id="indexStatus">No index built yet.</div>
+        </section>
+
+        <section class="panel">
+          <div class="panel-head">
+            <h2>02 — Search</h2>
+            <span class="count-pill" id="resultCount"></span>
+          </div>
+
+          <div class="search-input-row">
+            <input type="text" id="searchInput" placeholder="Build an index first, then search…" disabled autocomplete="off" />
+          </div>
+
+          <div id="results">
+            <div class="empty-state">Results will rank here once you build an index and search.</div>
+          </div>
+        </section>
+      </main>
+
+      <footer>Runs entirely in your browser. Nothing you paste here is sent anywhere.</footer>
+    </div>
+
+    <script>
+      (function () {
+        "use strict";
+
+        var docListEl = document.getElementById("docList");
+        var docCountEl = document.getElementById("docCount");
+        var addDocBtn = document.getElementById("addDocBtn");
+        var loadSampleBtn = document.getElementById("loadSampleBtn");
+        var buildBtn = document.getElementById("buildBtn");
+        var indexStatusEl = document.getElementById("indexStatus");
+        var searchInput = document.getElementById("searchInput");
+        var resultsEl = document.getElementById("results");
+        var resultCountEl = document.getElementById("resultCount");
+
+        var docSeq = 0;
+        var docs = []; // { id, textareaEl }
+        var index = null; // built index: { docs: [{id,title,text,termCounts,totalTerms}], df: Map, N }
+
+        var SAMPLE_DOCS = ["The quick brown fox jumps over the lazy dog. Foxes are agile hunters found across many habitats.", "Search engines rank documents by relevance. A common technique is TF-IDF, which balances how often a term appears in a document against how common that term is across all documents.", "Dogs are loyal companions and one of the oldest domesticated animals. Unlike foxes, most dog breeds are highly social with humans.", "Term frequency measures how often a word appears within a single document, while inverse document frequency measures how rare that word is across the whole collection.", "The fox and the hound is a classic story about an unlikely friendship between a fox and a dog, despite their natural roles as predator and prey."];
+
+        function escapeForAttr(str) {
+          return String(str);
+        }
+
+        function makeDocCard(id, initialText) {
+          var card = document.createElement("div");
+          card.className = "doc-card";
+          card.dataset.docId = id;
+
+          var head = document.createElement("div");
+          head.className = "doc-card-head";
+
+          var label = document.createElement("span");
+          label.className = "doc-label";
+          label.textContent = "Document " + id;
+
+          var removeBtn = document.createElement("button");
+          removeBtn.type = "button";
+          removeBtn.className = "remove-btn";
+          removeBtn.textContent = "Remove";
+          removeBtn.addEventListener("click", function () {
+            card.remove();
+            docs = docs.filter(function (d) {
+              return d.id !== id;
+            });
+            updateDocCount();
+            invalidateIndex();
+          });
+
+          head.appendChild(label);
+          head.appendChild(removeBtn);
+
+          var textarea = document.createElement("textarea");
+          textarea.placeholder = "Paste or type a document here…";
+          textarea.value = initialText || "";
+          textarea.addEventListener("input", invalidateIndex);
+
+          card.appendChild(head);
+          card.appendChild(textarea);
+          docListEl.appendChild(card);
+
+          docs.push({ id: id, textareaEl: textarea });
+          updateDocCount();
+        }
+
+        function addDocument(initialText) {
+          docSeq += 1;
+          makeDocCard(docSeq, initialText);
+        }
+
+        function updateDocCount() {
+          docCountEl.textContent = docs.length + " loaded";
+        }
+
+        function invalidateIndex() {
+          if (index !== null) {
+            index = null;
+            searchInput.disabled = true;
+            searchInput.placeholder = "Documents changed — rebuild the index…";
+            indexStatusEl.textContent = "Documents changed since last build. Rebuild the index.";
+            indexStatusEl.classList.remove("ready");
+            resultsEl.innerHTML = "";
+            var empty = document.createElement("div");
+            empty.className = "empty-state";
+            empty.textContent = "Results will rank here once you build an index and search.";
+            resultsEl.appendChild(empty);
+            resultCountEl.textContent = "";
+          }
+        }
+
+        function tokenize(text) {
+          var matches = String(text)
+            .toLowerCase()
+            .match(/[a-z0-9]+/g);
+          return matches || [];
+        }
+
+        function buildIndex() {
+          var built = [];
+          docs.forEach(function (d) {
+            var text = d.textareaEl.value.trim();
+            if (!text) return;
+            var tokens = tokenize(text);
+            var termCounts = new Map();
+            tokens.forEach(function (t) {
+              termCounts.set(t, (termCounts.get(t) || 0) + 1);
+            });
+            built.push({
+              id: d.id,
+              text: text,
+              termCounts: termCounts,
+              totalTerms: tokens.length
+            });
+          });
+
+          if (built.length === 0) {
+            indexStatusEl.textContent = "Add at least one non-empty document first.";
+            indexStatusEl.classList.remove("ready");
+            return;
+          }
+
+          var df = new Map();
+          built.forEach(function (doc) {
+            doc.termCounts.forEach(function (_, term) {
+              df.set(term, (df.get(term) || 0) + 1);
+            });
+          });
+
+          index = { docs: built, df: df, N: built.length };
+
+          var termCount = df.size;
+          indexStatusEl.textContent = "Index ready — " + built.length + " document" + (built.length === 1 ? "" : "s") + ", " + termCount + " unique term" + (termCount === 1 ? "" : "s") + ".";
+          indexStatusEl.classList.add("ready");
+
+          searchInput.disabled = false;
+          searchInput.placeholder = "Search the index…";
+          resultsEl.innerHTML = "";
+          var empty = document.createElement("div");
+          empty.className = "empty-state";
+          empty.textContent = "Type a query above to see ranked results.";
+          resultsEl.appendChild(empty);
+          resultCountEl.textContent = "";
+        }
+
+        function idf(term) {
+          var df = index.df.get(term) || 0;
+          return Math.log(index.N / (1 + df)) + 1;
+        }
+
+        function tf(term, doc) {
+          if (doc.totalTerms === 0) return 0;
+          return (doc.termCounts.get(term) || 0) / doc.totalTerms;
+        }
+
+        function runSearch(query) {
+          resultsEl.innerHTML = "";
+          var qTokens = Array.from(new Set(tokenize(query)));
+
+          if (qTokens.length === 0) {
+            var hint = document.createElement("div");
+            hint.className = "empty-state";
+            hint.textContent = "Type a query above to see ranked results.";
+            resultsEl.appendChild(hint);
+            resultCountEl.textContent = "";
+            return;
+          }
+
+          var scored = index.docs
+            .map(function (doc) {
+              var breakdown = [];
+              var score = 0;
+              qTokens.forEach(function (term) {
+                if (doc.termCounts.has(term)) {
+                  var tfVal = tf(term, doc);
+                  var idfVal = idf(term);
+                  var contrib = tfVal * idfVal;
+                  score += contrib;
+                  breakdown.push({ term: term, tf: tfVal, idf: idfVal, tfidf: contrib });
+                }
+              });
+              breakdown.sort(function (a, b) {
+                return b.tfidf - a.tfidf;
+              });
+              return { doc: doc, score: score, breakdown: breakdown };
+            })
+            .filter(function (r) {
+              return r.score > 0;
+            });
+
+          scored.sort(function (a, b) {
+            return b.score - a.score;
+          });
+
+          resultCountEl.textContent = scored.length + " match" + (scored.length === 1 ? "" : "es");
+
+          if (scored.length === 0) {
+            var none = document.createElement("div");
+            none.className = "empty-state";
+            none.textContent = "No documents match \u201c" + query + "\u201d.";
+            resultsEl.appendChild(none);
+            return;
+          }
+
+          var maxScore = scored[0].score;
+
+          scored.forEach(function (r, i) {
+            resultsEl.appendChild(renderResult(r, i + 1, maxScore, qTokens));
+          });
+        }
+
+        function buildSnippet(text, qTokens) {
+          var lower = text.toLowerCase();
+          var firstIdx = -1;
+          qTokens.forEach(function (term) {
+            var idx = lower.indexOf(term);
+            if (idx !== -1 && (firstIdx === -1 || idx < firstIdx)) firstIdx = idx;
+          });
+          var windowSize = 220;
+          var start = firstIdx === -1 ? 0 : Math.max(0, firstIdx - 60);
+          var end = Math.min(text.length, start + windowSize);
+          var snippet = text.slice(start, end);
+          var prefix = start > 0 ? "\u2026" : "";
+          var suffix = end < text.length ? "\u2026" : "";
+          return prefix + snippet + suffix;
+        }
+
+        // Builds highlighted snippet as safe DOM nodes (no innerHTML with raw text),
+        // preventing any injected markup in pasted documents from executing.
+        function appendHighlightedSnippet(container, snippetText, qTokens) {
+          if (qTokens.length === 0) {
+            container.appendChild(document.createTextNode(snippetText));
+            return;
+          }
+          var escaped = qTokens.map(function (t) {
+            return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          });
+          var pattern = new RegExp("\\b(" + escaped.join("|") + ")\\b", "gi");
+          var lastIndex = 0;
+          var match;
+          while ((match = pattern.exec(snippetText)) !== null) {
+            if (match.index > lastIndex) {
+              container.appendChild(document.createTextNode(snippetText.slice(lastIndex, match.index)));
+            }
+            var mark = document.createElement("mark");
+            mark.textContent = match[0];
+            container.appendChild(mark);
+            lastIndex = match.index + match[0].length;
+            if (match.index === pattern.lastIndex) pattern.lastIndex++;
+          }
+          if (lastIndex < snippetText.length) {
+            container.appendChild(document.createTextNode(snippetText.slice(lastIndex)));
+          }
+        }
+
+        function renderResult(r, rank, maxScore, qTokens) {
+          var wrapper = document.createElement("details");
+          wrapper.className = "result";
+
+          var summary = document.createElement("summary");
+          summary.className = "result-summary";
+
+          var rankBadge = document.createElement("span");
+          rankBadge.className = "rank-badge";
+          rankBadge.textContent = "#" + rank;
+
+          var title = document.createElement("span");
+          title.className = "result-title";
+          title.textContent = "Document " + r.doc.id;
+
+          var track = document.createElement("span");
+          track.className = "score-bar-track";
+          var fill = document.createElement("span");
+          fill.className = "score-bar-fill";
+          var pct = maxScore > 0 ? Math.max(4, (r.score / maxScore) * 100) : 0;
+          fill.style.width = pct + "%";
+          track.appendChild(fill);
+
+          var scoreVal = document.createElement("span");
+          scoreVal.className = "score-value";
+          scoreVal.textContent = r.score.toFixed(3);
+
+          summary.appendChild(rankBadge);
+          summary.appendChild(title);
+          summary.appendChild(track);
+          summary.appendChild(scoreVal);
+
+          var snippetEl = document.createElement("div");
+          snippetEl.className = "snippet";
+          var snippetText = buildSnippet(r.doc.text, qTokens);
+          appendHighlightedSnippet(snippetEl, snippetText, qTokens);
+
+          var ledger = document.createElement("div");
+          ledger.className = "ledger";
+          var ledgerHead = document.createElement("div");
+          ledgerHead.className = "ledger-head";
+          ledgerHead.textContent = "Scoring ledger — tf \u00d7 idf per matched term";
+          ledger.appendChild(ledgerHead);
+
+          r.breakdown.forEach(function (b) {
+            var row = document.createElement("div");
+            row.className = "ledger-row";
+
+            var term = document.createElement("span");
+            term.className = "ledger-term";
+            term.textContent = b.term;
+
+            var leader = document.createElement("span");
+            leader.className = "ledger-leader";
+
+            var figures = document.createElement("span");
+            figures.className = "ledger-figures";
+            var tfidfSpan = document.createElement("span");
+            tfidfSpan.className = "tfidf";
+            tfidfSpan.textContent = b.tfidf.toFixed(3);
+            figures.appendChild(document.createTextNode("tf " + b.tf.toFixed(3) + "  idf " + b.idf.toFixed(3) + "  = "));
+            figures.appendChild(tfidfSpan);
+
+            row.appendChild(term);
+            row.appendChild(leader);
+            row.appendChild(figures);
+            ledger.appendChild(row);
+          });
+
+          wrapper.appendChild(summary);
+          wrapper.appendChild(snippetEl);
+          wrapper.appendChild(ledger);
+          return wrapper;
+        }
+
+        addDocBtn.addEventListener("click", function () {
+          addDocument("");
+        });
+
+        loadSampleBtn.addEventListener("click", function () {
+          docListEl.innerHTML = "";
+          docs = [];
+          docSeq = 0;
+          SAMPLE_DOCS.forEach(function (t) {
+            addDocument(t);
+          });
+          invalidateIndex();
+        });
+
+        buildBtn.addEventListener("click", buildIndex);
+
+        searchInput.addEventListener("input", function () {
+          if (index === null) return;
+          runSearch(searchInput.value);
+        });
+
+        // Seed with the sample set so the tool is immediately useful on open.
+        SAMPLE_DOCS.forEach(function (t) {
+          addDocument(t);
+        });
+      })();
+    </script>
+  </body>
+</html>
diff --git a/tools/tfidf-search-engine.png b/tools/tfidf-search-engine.png
new file mode 100644
index 0000000..24b8789
Binary files /dev/null and b/tools/tfidf-search-engine.png differ