skills.rest
dxiiren
dxiirenCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates Awwwards-style React landing pages with GSAP animations and strict layout rules.

Updated Aug 1, 2026
Search Tags:#landing page#react#ui design#tailwind#gsap#scroll animation#bento grid
One-click install
npx skills add https://github.com/dxiiren/project-skeleton --skill gpt-taste-dxiiren
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/dxiiren/project-skeleton/tree/main/.claude/skills-optional/taste-skill/gpt-tasteskill
Command: npx skills add https://github.com/dxiiren/project-skeleton --skill gpt-taste-dxiiren

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same layouts, produce cramped sections, leave gaps in bento grids, and use cheap meta-labels. This Skill enforces a rigorous design system so generated UI code is varied, well-spaced, and motion-rich. ## 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 look alike. - Strict Layout Rules: Enforces AIDA page structure, 2-3 line hero headings via wide containers, gapless bento grids with grid-flow-dense, and large section spacing. - Advanced GSAP Motion: Requires ScrollTrigger pinning, scrubbing text reveals, image scale/fade scroll, and card stacking in every page. - Use Case: Ask for a landing page for a SaaS product and receive a complete 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 design rules and review the design plan before the 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 pinned sections, scrubbing text reveals, image scale-and-fade effects, and card stacking. Static layouts are explicitly forbidden by the rules.

How to stop AI from generating repetitive website layouts?▼

The Skill simulates a Python randomization step seeded by the prompt's character count to deterministically select a hero architecture, typography stack, three components, and two GSAP paradigms. This prevents defaulting to the same left/right layout repeatedly.

What fonts does this design skill allow?▼

Only Satoshi, Cabinet Grotesk, Outfit, and Geist are permitted as typography stacks. Inter is explicitly banned, and the selection is made through the simulated randomization step rather than by default.

Why do bento grids have empty gaps and how is it fixed?▼

Gaps occur when col-span and row-span values do not interlock. The Skill mandates Tailwind's grid-flow-dense on every bento grid and requires mathematical verification in the design plan that no empty cells remain.

Does this work with React and Tailwind CSS?▼

Yes, all rules target React components styled with Tailwind CSS, using @gsap/react with ScrollTrigger for animations and @phosphor-icons/react for iconography. Images use picsum.photos seeds with CSS filters.

Related Skills

Explore More Design & Creative Skills→
4tie4tie

frontend-design

Design responsive, accessible frontend interfaces with distinctive visual identity and typography.

Community
Intermediate
jeremybrasherjeremybrasher

google-analytics

Analyze GA4 traffic, engagement, and conversions through NotFair MCP.

Community
Basic
dz07dz07

html-designer

Translate design concepts into semantic HTML and CSS with ARIA and responsive layouts.

Community
Advanced
suhwansuhwan

component-builder

Generate reusable React TSX UI components with CSS from design-system references.

Community
Advanced