What is tech-product-landing?

A recipe for building landing pages for software tools, developer libraries, command-line programs, and other technical products. It uses a supplied React and Vite page structure with reusable sections and animations.

Use it to scaffold a landing-page project, adapt the template’s product text and data, and create sections such as features, documentation, technology lists, and usage steps.

It gives you a defined page layout and content locations, so you do not have to design and assemble a technical product page from scratch.

tech-product-landing — Skill for Claude Code and Codex by maystudios

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add maystudios/claude-skills --skill tech-product-landing

Clone the repo

git clone --depth 1 https://github.com/maystudios/claude-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/maystudios/claude-skills/tech-product-landing/github.svg)](https://agentmods.dev/skills/maystudios/claude-skills/tech-product-landing)

Your own site

<a href="https://agentmods.dev/skills/maystudios/claude-skills/tech-product-landing"><img src="https://agentmods.dev/badge/skills/maystudios/claude-skills/tech-product-landing/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/maystudios/claude-skills/tech-product-landing"><img src="https://agentmods.dev/badge/skills/maystudios/claude-skills/tech-product-landing.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 131 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,435 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00131	$0.01435
Opus 5.5	$0.00052	$0.00574
Sonnet 5.5	$0.00026	$0.00287
Haiku 4.5	$0.00013	$0.00144

Measured 2mo ago against content hash b43293d3bfd1, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

tech-product-landing scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

The scan reads SKILL.md. This mod also ships 3 executable files (assets/template/src/lib/utils.ts, assets/template/vite-env.d.ts, assets/template/vite.config.ts), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

tech-product-landing/SKILL.md · 151 lines

How it starts

The opening of the file, as written. The whole thing — 151 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Tech Product Landing Page

This skill produces landing pages by copying the complete maxsim-flutter source from assets/template/ and adapting the content for the target product. The design, animations, and structure stay identical — only the data arrays and product-specific strings change.

Step 1: Scaffold & Install

npm create vite@latest <project-name> -- --template react-ts
cd <project-name>
npm install motion lucide-react clsx tailwind-merge
npm install -D tailwindcss @tailwindcss/vite @types/node

Step 2: Copy Template Files

Read and copy every file from assets/template/ to the new project, preserving directory structure:

assets/template/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── vite-env.d.ts
└── src/
    ├── main.tsx
    ├── App.tsx
    ├── index.css
    ├── lib/utils.ts
    └── components/sections/
        ├── Navbar.tsx
        ├── Hero.tsx
        ├── Features.tsx
        ├── HowItWorks.tsx
        ├── TechStack.tsx
        ├── Docs.tsx
        └── Footer.tsx

Step 3: Content Replacements

All // ADAPT: comments in the template mark the exact locations to change. Summary:

Global string replacements

Find	Replace with
`maxsim-flutter`	your product name
`maystudios/maxsim-flutter`	your GitHub repo (`org/repo`)
`"maxsim-flutter"` (npm package in vite.config.ts)	your npm package name
`__MAXSIM_VERSION__`	rename to `__YOUR_PRODUCT_VERSION__` (3 files: vite-env.d.ts, Hero.tsx, Footer.tsx)

`index.html`

<title> and <meta name="description">

`vite.config.ts`

fetchNpmVersion("maxsim-flutter") → your npm package name
Or remove the fetch and use: const version = "1.0.0";
Rename __MAXSIM_VERSION__ define key

`index.css`

--color-accent: #3b82f6 → your brand color (blue=dev tools, green=SaaS, purple=AI)
Update --color-accent-light to a lighter shade

`Navbar.tsx`

navLinks array: add/remove sections to match your page
Brand name in the <a> element
GitHub URL (2 locations: desktop + mobile)

Read the full file on GitHub · 151 lines

Files

What ships with it

18 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 151 lines · 131 tokens per session scan A b43293d3bfd1

Subscribe to this mod's changes

tech-product-landing is a skill published in the GitHub repository maystudios/claude-skills (26 stars, last pushed 2mo ago), licensed MIT. It adds 131 tokens to every session and 1,435 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Claude Code Frontend Marketing and SEO React agent-skills ai-coding claude-skills llama-cpp ue5

apollo-graphql

Guidelines for developing GraphQL APIs and React applications using Apollo Client for state management, data fetching, and caching.

Mindrally/skills · 26 tokens

react-query

Guidelines for using React Query for data fetching, caching, and server state synchronization in React applications.

Mindrally/skills · 22 tokens

react-router-v7

React Router v7 framework mode conventions for route modules, data loaders, actions, and progressive enhancement. Use when building file-based routes with loaders/actions, handling form submissions with Form/useFetcher/useSubmit, adding route ErrorBoundary components, revalidating data after mutations, or migrating…

Mindrally/skills · 70 tokens

tech-product-landing