skills.rest
noemdb
noemdbCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates React landing pages with GSAP animations, bento grids, and AIDA structure.

1|Updated Jan 10, 2024
Search Tags:#landing page#react#ui design#tailwind#gsap#scroll animation#bento grid
One-click install
npx skills add https://github.com/noemdb/cfla --skill gpt-taste-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/gpt-taste
Command: npx skills add https://github.com/noemdb/cfla --skill gpt-taste-noemdb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to produce repetitive layouts, narrow headings that wrap into many lines, gappy bento grids, invisible button text, and static pages without motion. This Skill enforces a strict design engineering process that eliminates these default failure patterns. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG step to select hero architectures, typography stacks, components, and GSAP paradigms so no two pages repeat the same layout. - Structural Rules: Enforces AIDA page structure, 2-3 line hero headings via wide containers, gapless bento grids using grid-flow-dense, and large section spacing. - Advanced Motion: Requires real GSAP ScrollTrigger implementations including pinning, scrubbing text reveals, card stacking, and image scale/fade effects. - Use Case: Ask for a SaaS landing page and receive a React/Tailwind page with a cinematic hero, dense bento feature grid, pinned scroll sections, and a pre-flight design plan verifying all constraints. ## Quick Start Ask the AI to build a landing page for your product using the gpt-taste skill and it will output a verified design plan followed by the React UI code.

Frequently Asked Questions about gpt-taste

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

FAQPage Schema
How do I generate a landing page with GSAP scroll animations?▼

Request a landing page and the skill outputs a design plan followed by React code using GSAP ScrollTrigger for pinning, scrubbing text reveals, card stacking, and image scale effects. All animations are tied to scroll position with proper trigger configuration.

How to prevent AI-generated hero headings from wrapping into many lines?▼

The skill enforces ultra-wide containers like max-w-5xl or max-w-6xl and clamp-based font sizing so the H1 flows horizontally in 2-3 lines maximum. The pre-flight design plan explicitly verifies the container width before any code is written.

What fonts does this design skill use for typography?▼

Typography stacks are randomly selected from Satoshi, Cabinet Grotesk, Outfit, or Geist via the simulated Python randomization step. Inter is explicitly banned to avoid generic default styling.

Does the skill work with Tailwind CSS grid layouts?▼

Yes, bento grids are built with Tailwind and must use grid-flow-dense so col-span and row-span values interlock with zero empty cells. The design plan includes a mathematical verification of grid density before code output.

Why does the skill require a design plan before writing code?▼

The mandatory pre-flight design plan forces verification of layout randomization, AIDA structure, hero line limits, grid density, and button contrast before any UI code is produced. This prevents common LLM failures like repetitive layouts and invisible button text.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
MattSenterMattSenter

senternet-site-init

Generates AGENTS.md, CLAUDE.md, and README.md documentation for completed Vite or Next.js sites.

Community
Intermediate
PMDevSolutionsPMDevSolutions
16

visual-qa-verification

Validate visual parity between a generated WordPress FSE theme and its Figma design.

Official
Advanced
Elric412Elric412
17

frontend-enhancer

Generate production-ready frontend interfaces with Tailwind CSS and semantic HTML.

Community
Advanced