---
name: modular-tech-hero
description: Create a dark infrastructure product page with a live local pipeline demo, actual JavaScript parser code and a labeled Python outline, modular metrics, and an accessible document-inspection accordion.
---

# Modular tech hero

Use for developer platforms, automation infrastructure, and document-processing product pages. Generate a dependency-free HTML starter:

```sh
python3 scripts/generate.py -o index.html --brand NEXUS --title 'Build once. Run anywhere.' --accent '#b6ec85'
```

The output is a local demonstration and makes no network calls. `--brand` allows 1–24 characters, `--title` 1–120, `--description` 1–300, and `--accent` takes a six-digit hex color. Text is escaped. All paths are relative to this skill.

Use `references/design.md` for composition and interaction details. Keep the sharp grid, restrained green accent, code panel, and visible processing flow. Preserve user-selected copy and product scope when adapting; do not invent performance promises or imply that the included sample connects to a real service.

The editable sample is labeled invoice text, not a PDF reader or remote service. The JavaScript tab shows the actual parsing and validation functions; Python is explicitly non-executed pseudocode.

Check that running valid and invalid samples moves through three stages, computes JSON results from the text, and updates local metrics and the document inspector. Require a vendor, an INVOICE heading, a three-letter currency of USD, and a finite non-negative amount with at most two decimal places and a maximum of 999,999,999.99. Verify language tabs, copy behavior, accordion state, mobile menu, focus indicators, and reduced-motion behavior. The sample button must prevent overlapping runs and clearly identify local sample data.