shadcn-vite-iconify-landing-page

This skill provides a systematic framework for building, auditing, and optimizing marketing and product landing pages. It is designed for developers, marketers, and product managers who need to translate business goals into high-converting, production-ready React code. By following a structured approach to landing page anatomy—covering everything from above-the-fold persuasion sequences to below-the-fold doubt removal—this skill helps users create functional, accessible, and aesthetically distinctive web experiences. It emphasizes consistency, utilizing the shadcn/ui component library, Iconify for vector assets, and a mobile-first Tailwind CSS strategy to ensure high performance and maintainable code.

• Provides end-to-end landing page construction using React, Vite, TypeScript, and Tailwind CSS (v4).

• Offers expert-led conversion rate optimization (CRO) audits to evaluate existing pages, focusing on hero impact, CTA placement, and psychological persuasion.

• Implements a clear landing page anatomy including Navigation, Hero, Social Proof, Features, FAQ, and Footer sections.

• Delivers production-grade code snippets, prioritizing accessibility through semantic HTML and shadcn/ui component usage.

• Standardizes iconography via Iconify to maintain visual consistency without the bloat of large icon libraries.

• Supports rapid A/B testing ideation by providing actionable hypotheses and structural improvement recommendations.

• Use this skill when launching a new product, running a targeted ad campaign, or seeking to improve existing signup/sales page performance.

• Input requirements include the target audience, primary value proposition, and the specific conversion goal (e.g., email capture, demo sign-up, or waitlist).

• Outputs consist of a page strategy, section-by-section outlines, copy variations for headlines and CTAs, and implementation-ready TypeScript/React code.

• Operates under strict design constraints: one icon family per page, minimal CTA competition, and a focus on concrete visual assets over decorative filler.

• Note that this skill is optimized for Vite-based projects and assumes standard shadcn/ui CLI workflows for rapid component integration.