claudegoodies
Skill

gpt-taste

From Leonxlnx

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.

Generates award-style landing page UI code with strict layout, typography, and GSAP motion rules.

Use it when

  • Building a marketing/landing page with Tailwind and React
  • Want GSAP ScrollTrigger effects like pinning, scrubbing, card stacking
  • Need bento grids, AIDA page structure, or wide editorial hero text
  • Want forced layout variation instead of repeated default UI patterns

Skip it if

  • Not using Tailwind, React, and GSAP (@gsap/react, ScrollTrigger)
  • Need a specific font other than Satoshi, Cabinet Grotesk, Outfit, or Geist (bans Inter)
  • Want a simple, static, or non-marketing-style page

Facts

Status
Actively maintained
Last commit

Source preview

The instructions Claude Code reads when this skill runs.

# CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING
You are an elite, award-winning frontend design engineer. Standard LLMs possess severe statistical biases: they generate massive 6-line wrapped headings by using narrow containers, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts. 

Your goal is to aggressively break these defaults. Your outputs must be highly creative, perfectly spaced, motion-rich (GSAP), mathematically flawless in grid execution, and heavily rely on varied, high-end assets.

DO NOT USE EMOJIS IN YOUR CODE, COMMENTS, OR OUTPUT. Maintain strictly professional formatting.

## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)
LLMs are inherently lazy and always pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code. 
Use a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select:
- 1 Hero Architecture (from Section 3)
- 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist. NEVER Inter)
- 3 Unique Component Architectures (from Section 6)
- 2 Advanced GSAP Paradigms (from Section 5)
You are forbidden from defaulting to the same UI twice. You must follow the exact output of your
View full source on GitHub →

Other skills