skills.rest
coolrobertj
coolrobertjCOMMUNITY
Explore all skills by this author →
GitHub

webpage-builder

Generates React, GSAP, and Tailwind landing pages from four user-provided answers.

1|Updated May 13, 2026
Search Tags:#landing page#frontend#react#vite#tailwind#gsap#website generator
One-click install
npx skills add https://github.com/coolrobertj/Agency-Cowork --skill webpage-builder-coolrobertj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webpage-builder
Source: https://github.com/coolrobertj/Agency-Cowork/tree/main/skills/webpage-builder/skills/webpage-builder
Command: npx skills add https://github.com/coolrobertj/Agency-Cowork --skill webpage-builder-coolrobertj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, vite, tailwindcss, gsap, lucide-react, fastapi, uvicorn, python-dotenv.

What problem does it solve? Building a polished, animated landing page from scratch requires coordinating design tokens, component architecture, scroll animations, and responsive layout, which is slow and error-prone when done manually. ## Core Features & Use Cases - Guided Intake: Collects brand name, aesthetic preset, value propositions, and CTA through exactly four questions before building. - Preset Design System: Applies one of four curated palettes and typography sets (Organic Tech, Midnight Luxe, Brutalist Signal, Vapor Clinic) or maps a custom DESIGN.md brand file. - Full Component Build: Scaffolds a Vite + React 19 project with Tailwind CSS, GSAP ScrollTrigger animations, and seven sections including navbar, hero, interactive feature cards, philosophy, stacking protocol cards, pricing, and footer. - Optional Add-Ons: Adds a FastAPI-backed chat widget connected to a local Agency CLI, or Microsoft branding components. - Use Case: A founder needs a waitlist landing page for a health startup; after answering four questions, the skill scaffolds the project, writes App.jsx with all animations, and launches a persistent dev server. ## Quick Start Ask your agent to build a landing page for your brand and answer the four questions it presents.

Frequently Asked Questions about webpage-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a landing page with React and GSAP animations?▼

Invoke the skill and answer four questions about brand, aesthetic preset, value propositions, and CTA. It scaffolds a Vite React project, configures Tailwind with preset color tokens, and writes App.jsx with GSAP ScrollTrigger animations for all seven sections.

What design presets are available for the landing page?▼

Four presets are available: Organic Tech, Midnight Luxe, Brutalist Signal, and Vapor Clinic, each with defined palettes, fonts, and image moods. A fifth option maps tokens from a custom DESIGN.md brand file in the project root.

Can I use my own brand colors instead of a preset?▼

Yes. Select preset E, which reads a DESIGN.md file from the project root and maps its color palette and typography rules to the preset token structure. If no DESIGN.md exists, you are prompted to create one first.

Why does the Vite dev server stop after the build on Windows?▼

Copilot CLI shell sessions kill Node processes when the session ends, including async and detached modes. The skill launches the server via Start-Process cmd.exe so it survives session cleanup, then verifies it responds on localhost:5173.

How do I add a chat widget to the generated site?▼

The skill adds a three-layer architecture: a Vite dev proxy, a FastAPI backend that runs the Agency CLI as a subprocess, and a ChatWindow React component with health polling and HTML response rendering.

Why is the last stacking card semi-transparent in the protocol section?▼

The GSAP stacking animation only targets cards before the last one, but scrub can leave inherited intermediate states. The skill forces the final card to full opacity, scale, and zero blur with gsap.set after configuring the triggers.

Related Skills

Explore More Design & Creative Skills→
Fabric-ProFabric-Pro
3

brand-guidelines

Create brand guidelines covering visual identity, tone of voice, color palettes, and typography.

Official
Basic
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
iblaiiblai
15

iblai-chat

Embed an AI chat widget into Next.js apps with session management.

Official
Intermediate
karenrebecagkarenrebecag

atom-code-component-workflow

Automate reusable Webflow Code Component creation with React and GSAP.

Community
Advanced