Can I use this for complex web applications?

No, this skill is specifically optimized for static marketing sites and landing pages. For applications requiring authentication, state management, or CRUD operations, use the 'frontend-app' skill.

Why does it emphasize a 'docs-first' approach?

To ensure the AI uses the most up-to-date syntax and features for rapidly evolving libraries like Tailwind 4.x by fetching real-time documentation via MCP tools before generating code.

Does it support visual design inputs?

Yes, it is designed to work with vision-capable models like Gemini 3.1 to analyze sketches or logic diagrams and translate them into styled Tailwind and React components.

What technologies does this skill use?

It utilizes a modern stack including Vite 6.x, React 19, Tailwind CSS 4.x, shadcn/ui, Magic UI, and Framer Motion for high-end animations.

Premium Landing Page Architect

Name: Premium Landing Page Architect
Author: petrogurcak

bypetrogurcak

0•

デザインツール

Automates the creation of high-conversion, animated landing pages using a docs-first workflow with React, Tailwind CSS 4.x, and shadcn/ui.

This skill streamlines the development of marketing websites, product showcases, and conversion-focused landing pages by enforcing a documentation-first approach. It integrates modern frontend technologies like Vite 6.x, React 19, and Magic UI to produce visually stunning, accessible, and performant interfaces. By leveraging MCP tools to fetch the latest documentation for shadcn/ui and Framer Motion, it ensures that every component is built using current best practices and optimized animations, making it ideal for developers looking to launch professional-grade marketing assets quickly.

主な機能

01Pre-configured hooks for TypeScript checking, Prettier formatting, and console log auditing.

02Built-in support for Framer Motion animations and Bento Grid layouts.

03Automated project setup with Vite 6.x, React 19, and Tailwind 4.x.

04Docs-first workflow using MCP tools for real-time shadcn/ui and Magic UI reference.

05Visual prompting capabilities to convert sketches and wireframes into code via Gemini 3.1.

060 GitHub stars

ユースケース

01Launching a high-performance SaaS product landing page with animated hero sections.

02Converting low-fidelity wireframes or sketches into functional React prototypes.

03Building responsive 'Coming Soon' or pre-launch marketing pages with modern UI components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petrogurcak/skills frontend-lp

For use in Claude.ai and ChatGPT

Download Skill