gpt-taste

Generate React UI designs with GSAP ScrollTrigger motion and bento grids.

Updated Dec 4, 2025
One-click install
npx skills add https://github.com/PolliticalSolutions/political-portal --skill gpt-taste-polliticalsolutions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/PolliticalSolutions/political-portal/tree/main/.agents/skills/gpt-taste
Command: npx skills add https://github.com/PolliticalSolutions/political-portal --skill gpt-taste-polliticalsolutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid generic, low-quality UI output by enforcing elite layout structure, rigorous grid math, and advanced GSAP motion patterns.

Core Features & Use Cases

  • Python-driven true randomization: Selects hero layout, typography stack, component architectures, and GSAP paradigms using a deterministic “mock Python” RNG so the design doesn’t collapse into the same default layout.
  • AIDA-compliant page architecture: Forces a Navigation bar, Attention hero, Interest bento/features, Desire motion sequences, and Action footer sections with large, cinematic spacing.
  • Gapless bento grids and strict motion rules: Enforces dense grids with no empty cells, hover physics, pinned/stacking ScrollTriggers, scrubbing text reveals, and image scale/fade scroll behavior.

Quick Start

Use the gpt-taste skill to generate a full React + GSAP page layout that follows AIDA structure, uses gapless grid execution, and includes deterministic randomized hero/typography/motion choices for a cinematic, premium UI.

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 React UI with cinematic GSAP ScrollTrigger animations?

Generate React UI with cinematic GSAP ScrollTrigger animations by enforcing pinned scroll-scrubbed motion, hover physics, and image scale-fade behavior to produce premium, award-level product pages.

What's the best way to build gapless bento grids in React?

Build gapless bento grids in React by enforcing dense grid interlocking math with no empty cells, ensuring strict visual hierarchy and component patterns that interlock seamlessly across modern product layouts.

How does deterministic randomization prevent generic UI design output?

Deterministic randomization prevents generic UI design output by selecting hero layouts, typography stacks, and GSAP animation paradigms through a mock Python RNG, ensuring deterministic stylistic variety instead of default layouts.

Can I use AIDA page architecture for modern React product pages?

Apply AIDA page architecture to React product pages by forcing Navigation, Attention hero, Interest bento features, Desire motion sequences, and Action footer sections with large, cinematic spacing.

Does this approach work without external dependencies for layout grid execution?

Layout grid execution works without external dependencies, enforcing strict H1 line-length constraints, no meta labels, and validated visual hierarchy directly within React generation tasks.

Why does my generated React UI lack premium motion and spacing?

Generated React UI lacks premium motion and spacing when it misses advanced GSAP paradigms, rigorous grid math, and cinematic spacing rules, resulting in generic, low-quality output instead of award-level design.