gpt-taste

Generates award-level frontend UI code with GSAP animations, bento grids, and AIDA page structure.

Updated Apr 20, 2026
One-click install
npx skills add https://github.com/ShyamRavidath/oscc-detection-v2 --skill gpt-taste-shyamravidath
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/ShyamRavidath/oscc-detection-v2/tree/main/.agents/skills/gpt-taste
Command: npx skills add https://github.com/ShyamRavidath/oscc-detection-v2 --skill gpt-taste-shyamravidath

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same layouts, produce narrow multi-line hero headings, leave empty gaps in bento grids, and use cheap meta-labels. This Skill enforces a rigorous design engineering process that breaks those defaults and produces varied, motion-rich, editorial-quality UI code. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG step to select hero architectures, typography stacks, components, and GSAP animation paradigms so no two pages look alike. - Strict Layout Rules: Enforces wide hero containers with a 2-3 line H1 limit, gapless bento grids via grid-flow-dense, massive section spacing, and high-contrast buttons. - Advanced GSAP Motion: Requires real ScrollTrigger implementations including pinning, scrubbing text reveals, card stacking, and image scale/fade effects. - 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 every layout rule. ## 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 full 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 stop LLMs from generating repetitive landing page layouts?

Use a deterministic randomization step that selects hero layouts, typography stacks, components, and animation paradigms before coding. This Skill simulates a Python RNG seeded by the prompt so each generation picks a different combination instead of defaulting to the same layout.

How to build a bento grid with no empty gaps in Tailwind?

Apply grid-flow-dense (grid-auto-flow: dense) to the grid container and mathematically verify that col-span and row-span values interlock to fill every cell. Limit the grid to 3-5 intentional cards rather than many messy ones.

What GSAP animations work for scroll-driven landing pages?

Effective patterns include ScrollTrigger pinning where a title stays fixed while content scrolls, scrubbing text reveals where word opacity animates with scroll position, card stacking, and images scaling from 0.8 to 1.0 as they enter the viewport.

Does this Skill work with React and Tailwind CSS?

Yes, the Skill targets React component code styled with Tailwind utility classes and uses @gsap/react with ScrollTrigger for animations. It also references @phosphor-icons/react for icon marquees.

Why do AI-generated hero headings wrap into too many lines?

Narrow containers force headings to wrap into 4-6 lines. The fix is using ultra-wide containers like max-w-5xl or max-w-6xl with responsive clamp() font sizing so the H1 flows horizontally within 2-3 lines.