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	$0.00066	$0.00718
Sonnet 5	$0.00026	$0.00287
Haiku 4.5	$0.00013	$0.00144

Measured 11d ago against content hash b43293d3bfd1, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, 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 11d 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.

11d 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 (22 stars, last pushed 27d ago), licensed MIT. It adds 131 tokens to every session and 1,435 once invoked, about $0.0007 per session on Opus 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

react-senior-interview

Interactive 10-question multiple-choice React interview, by theSeniorDev — drawn from the same principles as react-senior-code-review. Asks which level you're interviewing for (junior/mid/senior) and shifts difficulty to match. Per-question feedback. Final score with a breakdown by dimension and personalized study…

the-senior-dev/senior-dev-skills · 113 tokens

react-senior-code-review

Senior-level review of a React feature, by theSeniorDev — structure & boundaries, state & data flow, performance & rendering, types/forms/testability/a11y, and styling architecture & motion. Recommends design patterns by name when one fits. Produces prioritized findings (Critical → Nit) with file:line, why, and a…

the-senior-dev/senior-dev-skills · 127 tokens

ui-web

Generate slop-free UI for React + Tailwind + shadcn/ui. Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, page, landing, app, or any web interface. Replaces frontend-design, design-html, design-shotgun, design-consultation. Two phases — tokens first (with approval gate)…

rshzrh/ui-design-skills · 99 tokens

react-expert

Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries…

Jeffallan/claude-skills · 79 tokens

extract-source-sample

Given the path to a finished content-goose ad-run folder, extract everything that defines that ad — recipe shot list, VO script, characters, voices, world, atom-skills, master mp4 — and emit a source-sample.json in the exact shape the upload-ad-sample skill writes to the Goose Ads library. Also links every character…

gooseworks-ai/goose-skills · 160 tokens

ss-studio

Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…

bitjaru/styleseed · 75 tokens