Shadcn + Vite Landing Page (Iconify)

What it does

This skill provides a complete playbook for designing, auditing, and implementing conversion-focused landing pages using a React + Vite + TypeScript stack with Tailwind and shadcn/ui components. It supplies a clear page anatomy, above-the-fold and below-the-fold checklists, copy/CTA templates, A/B test ideas, and starter code scaffolds that use Iconify for icons. Use it to produce production-ready pages or prioritized audit recommendations.

When to use it

Use this skill when a user requests a new marketing, product, or signup landing page, asks for a CRO-focused audit of an existing page, or needs ready-to-run React/Tailwind shadcn implementation code. It triggers on requests for landing page copy, hero/CTA guidance, section order, or shadcn+Vite starter scaffolds.

What's included

• Scripts: none (has_scripts=false)
• References: multiple reference docs in-repo (anatomy, setup, copy templates, aesthetic presets)
• Instructions: step-by-step anatomy, above-the-fold checklist, below-the-fold persuasion flow, component mapping, and implementation notes plus a starter LandingPage scaffold in assets.

Compatible agents

Best suited for agents that can generate code and copy (Copilot/Codex-like or Code-capable Claude/Gemini). It expects the agent to output React/TSX, Tailwind classes, and structured copy templates.