How it works
The real steps pulled from the SKILL.md — the agent runs them in this order.
- 01
Collect the product facts
Ask for (or infer from what the user gave): product name, one-line promise, the work objects the tool manages (issues, incidents, deploys, tickets...), the three views worth showing in the hero, five capabilities for the bento, how it connects to the developer workflow (branches,
- 02
Choose the output target
- 03
Plan sections and copy
Follow `references/section-inventory.md`. Keep the signature order: hero with the product window, wordmark marquee, metric cards, workspace bento, cycles tabs on the mint band, developer workflow, evaluation path, security, customers (quote carousel and story card), pricing, FAQ,
- 04
Plan and produce the imagery
Use `references/image-plan.md`. The product is drawn in HTML/CSS/SVG and is never a photo or a generated screenshot. Write one art-direction sentence, then define photo slots by role, only where a real company site uses photography: customer portraits for the quote carousel, the
- 05
Build to the craft bar
- 06
Single-file build and sandbox constraints
Build the single file with `node scripts/inline-assets.mjs <source.html> <index.html>`: it inlines every `images/`, `fonts/` and `assets/` reference as a data URI, downloads each `https://cdn.jsdelivr.net/fontsource/fonts/...woff2` named in the `@font-face` rules once and embeds
What's in the package
29 files · 887 KBSKILL.mddoc · 17 KBreferences/icon-library.mddoc · 3 KBreferences/image-plan.mddoc · 6 KBreferences/images/av-amaya.webpmedia · 2 KBreferences/images/av-daniel.webpmedia · 2 KBreferences/images/av-felix.webpmedia · 2 KBreferences/images/av-ingrid.webpmedia · 2 KBreferences/images/av-lucia.webpmedia · 3 KBreferences/images/av-mara.webpmedia · 2 KBreferences/images/av-noor.webpmedia · 2 KBreferences/images/av-owen.webpmedia · 2 KBreferences/images/av-tobi.webpmedia · 2 KBreferences/images/qf-amara.webpmedia · 2 KBreferences/images/qf-jonas.webpmedia · 2 KBreferences/images/qf-kenji.webpmedia · 2 KBreferences/images/qf-rhea.webpmedia · 2 KBreferences/images/quote-amara.webpmedia · 61 KBreferences/images/quote-jonas.webpmedia · 71 KBreferences/images/quote-kenji.webpmedia · 51 KBreferences/images/quote-rhea.webpmedia · 65 KBreferences/images/story-vantri.webpmedia · 143 KBreferences/images/team-tracklane.webpmedia · 135 KBreferences/motion-system.mddoc · 4 KBreferences/quality-checklist.mddoc · 4 KBreferences/section-inventory.mddoc · 5 KBreferences/style-guide.mddoc · 10 KBreferences/template.htmlweb · 262 KBscripts/inline-assets.mjscode · 5 KBscripts/validate-template.mjscode · 18 KB
Tracklane Devtool Landing
A developer-tool landing page on warm sand with a mint band, Inter Tight headlines and a restrained split hero.
- Files
- 29
- Scripts
- 2
- Source
- 887 KB
Where to put it
mkdir -p ~/.agents/skills
unzip bs-tracklane-devtool-landing.zip -d ~/.agents/skills/What it needs
- · 运行环境：node
Original English briefFrom the SKILL.md
Build a complete developer-tool marketing site in the tracklane style: warm sand canvas with mint section bands, near-black ink, calm Inter Tight headlines and a quiet split hero: a one-line headline, muted subtitle, four feature notes and a crisp live product window (board, cycle burn-up, roadmap) on the right. Includes a customer wordmark marquee, gradient metric cards, a five-tile workspace bento, tabbed cycles section, developer workflow with CLI, Git and API tabs, an evaluation path for technical buyers, security, a quote carousel with customer story, pricing with a billing switch, FAQ and sign-up CTA, plus pricing comparison, changelog, sign-in, sign-up, book-a-demo, security, customer story, company, legal and 404 routes and a working dark theme. Use for issue trackers, planning tools, dev tools and B2B SaaS, as standalone HTML or ported into Next.js, React, Vue, Svelte or Astro.
Keep going
