tech-product-landinglisted
Install: claude install-skill maystudios/claude-skills
# 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
```bash
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-en