--- name: mint-noir-saas-site description: Turn a brief into a polished single-file AI commerce SaaS landing page, starting from a verified template with 5 hash-routed views (home, pricing, resources, events, changelog) and offline Geist, Geist Mono and Instrument Serif fonts. The validator flags leftover sample content, dead links, broken images and, in a browser, dead controls. version: 0.1.1 delivery: download-only category: web --- # Mint Noir SaaS Site You are turning a brief into one finished HTML page, and you do it by editing a template that already works instead of writing markup from scratch. Keep the look of the shipped template: type set in Geist, Geist Mono and Instrument Serif on #07090a surfaces. Everything structural is already in `assets/template.html`: design tokens, layout, the router, every interactive part and the responsive rules. Your job is content, data and images. ## Example `assets/template.html` is the worked example. Open it in a browser to see the finished page filled with made-up content (5 routed views, 0 image slots). It is the starting point, not a finished result: every name, number and sentence in it is made up. ## Delivery Download-only. The skill runs in your own Agent or in a local terminal, and no key is needed: the scripts here never call a model or reach the network. ## Workflow 1. **Collect the brief.** Ask for what the page must say, as a short checklist: who it is for, the single promise, the proof (numbers, names, quotes the user can stand behind), the calls to action and their real destinations. Fill any gap with plausible wording, and keep a list of every fact you made up so you can hand it back at the end. 2. **Pick the page language.** `en` or `zh-CN`, English unless the user asks otherwise. The choice drives ``, the copy, the validator flag `--site-lang` and the font stack (see Language). 3. **Make a work folder.** Copy `assets/template.html` to `work/src.html`. Copy `assets/fonts/` to `work/fonts/`. Never edit files inside the skill folder itself. Commands below write `scripts/...` and `work/...` as relative paths: run them from a folder where both resolve, or spell out the full path of the skill's `scripts/` folder. 4. **Edit content and data.** Rewrite headings, paragraphs, labels, link targets, `alt` text and `aria-label` values. Most of the copy is plain markup; the repeated lists live in a few script constants, so replace their entries instead of hunting through markup: - `PAGES`: A list of 5 entries. - `ROLES`: A list of 3 entries. Interface strings also hide inside the script: date and number formats, toast and form-error messages, labels that change on click ("Show 3 more"), plural endings, and any product screens the script draws. After the markup is done, search the script for quoted English sentences and for `toLocaleDateString` or `toLocaleString` calls. Replace every item of the sample identity: `Corvel`, `Rafael Ortiz`, `Aiko Morimoto`, `Seo-yeon Park`. Warnings (not errors) also point at first names, initials and other words that may belong to the sample, such as `Tobias Renner`, `Marcus Delane`, `Priya Vantelle`, `Owen Hartigan`, `Saskia Holm`, `Rafael`, `Aiko`, `Seo-yeon`; check each one. Every link needs a real destination: the template may contain placeholder links (`href="#"`, or profile links that only show a notice in a preview), so give each a real URL or remove it. When the brief has no URL yet, use an `example.com` address and say so in your reply; the validator then only warns (`placeholder-domain`). Delete the instruction comments the template carries (those that start with `REPLACE`), because the validator treats them as leftovers. Remove sections the brief does not need together with their menu links and styles. If the user supplies brand colours or fonts, re-theme through the template's colour tokens (its CSS custom properties, in both themes where there are two) and keep the layout, sections and motion as they are. A heading font may only be switched to another font bundled in `assets/fonts/`. Never link a font from another site. Keep the ids listed in `assets/validate.config.json` (`requiredIds`); the template scripts look them up. If the brief really drops a whole view, copy that file to `work/validate.config.json`, delete that view's ids from `requiredIds`, and pass `--config work/validate.config.json` to the validator. 5. **Handle images.** This template has no photos. Do not add remote images; draw with inline SVG or CSS. 6. **Build one file.** Run `node scripts/inline-assets.mjs work/src.html work/index.html`. It embeds images and fonts as data URIs and stops on a missing or damaged file. 7. **Validate.** Run `node scripts/validate.mjs work/index.html --mode site --site-lang ` and repeat until it exits 0. The exit code is 1 while any error remains. Add `--lang zh-CN` to get messages in Chinese (a Windows console that is not UTF-8 shows them garbled: run `chcp 65001` first) and `--out work/report` for `report.json` plus HTML reports. 8. **Look at it in a browser (optional, recommended).** Add `--browser --screenshot work/shots`. A headless Chrome or Edge opens the page, clicks the controls, walks the routes and writes screenshots; open the screenshots and judge them yourself. Exit code 3 means no browser was found. 9. **Report back.** Say what you drafted versus what the user supplied, list placeholder and generated images, and give the path of `work/index.html`. ## Language - Set `` or `` to match the copy, and run the validator with the same `--site-lang`. - For `zh-CN`, translate visible text, `alt`, `aria-label`, `placeholder`, form errors and the ``. Put a CJK family in every `font-family` stack, for example `"PingFang SC", "Noto Sans SC", "Microsoft YaHei"`, before the generic fallback. - Chinese copy does not need Latin-style letter spacing or all-caps; remove `text-transform: uppercase` and positive `letter-spacing` where they sit on translated text. - The validator warns (`lang-mixed`) about English sentences it can see on a `zh-CN` page. Short words and strings assembled in the script ("All", "2 posts") slip through, so open every route and read it. - `--lang` only changes the language of validator messages and reports. It never changes the page. ## Rules - The finished page is a single self-contained file: no remote scripts, fonts, images or stylesheets, no network calls, no `alert` or `window.open`. - Icons are inline SVG. Do not use emoji or dingbat characters. - Do not invent real people, customers, certifications, awards or legal claims. State only what the user confirmed, and label generated portraits as illustrations. - Never put credentials or tokens in the page, in logs or in the report. ## Failure boundaries - The validator checks structure, leftovers, assets and (with `--browser`) basic behaviour. It cannot judge taste, copy quality or whether a claim is true. - Dead-control detection is heuristic. A control whose effect is invisible in the page (copying to the clipboard, for instance) shows up as dead; see `references/validation.md` for how the template handles that. - `--browser` needs a local Chrome or Edge. Without one, the static checks still run. - Large image sets can push the file past the 5 MB soft limit (8 MB hard limit). Use fewer or smaller images. ## FAQ - **Can I use the template inside a framework project?** Yes, as a visual and behavioural reference. The scripts in this skill only validate standalone HTML files. - **Why does the validator fail on words I did not write?** Those are leftovers of the sample content. Replace them, or remove the section they sit in. - **Which Node version?** 18 or newer for the static checks; `--browser` also works on 18 because it drives Chrome through a small local server. ## Files - `assets/template.html`: the working template (source of truth for markup, CSS and script). - `assets/fonts/`: bundled variable fonts with their OFL licence. - `assets/validate.config.json`: sample identity, required ids, route names and documented exceptions for the validator. - `assets/agent-mode.json`: generator marker and template checksum. - `references/style-guide.md`: tokens, type, surfaces, components and voice. - `references/sections.md`: every view and section with its id. - `references/motion.md`: what moves, how fast, and how reduced motion is handled. - `references/validation.md`: every validator rule with its default severity. - `references/third-party-notices.md`: font licences and image notes. - `scripts/validate.mjs`, `scripts/inline-assets.mjs`, `scripts/lib/`: the checks and the single-file builder (zero dependencies).