{"id":"f9b4fb15-0fee-49a6-a403-9b2efceee07c","shortId":"ysKysG","kind":"skill","title":"gpt-taste","tagline":"Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids.","description":"# CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING\n\n## When to Use\n\n- Use when the user asks for an award-level landing page, marketing page, or creative frontend with cinematic motion.\n- Use when GSAP, pinned scroll, scrubbing, card stacking, horizontal motion, or other advanced animation is appropriate.\n- Use when the output must avoid narrow six-line hero headings, cheap meta labels, empty bento cells, and generic left-right sections.\n\n## Limitations\n\n- This skill assumes a frontend project can support GSAP or equivalent animation libraries; check dependencies and performance budgets before implementation.\n- Heavy scroll animation, pinning, and media effects require browser testing across desktop and mobile viewports before release.\n- Do not apply cinematic motion when the user asks for a restrained interface, low-motion accessibility mode, or simple maintenance change.\n\n\nYou 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.\n\nYour 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.\n\nDO NOT USE EMOJIS IN YOUR CODE, COMMENTS, OR OUTPUT. Maintain strictly professional formatting.\n\n## 1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)\nLLMs 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.\nUse a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select:\n- 1 Hero Architecture (from Section 3)\n- 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist. NEVER Inter)\n- 3 Unique Component Architectures (from Section 6)\n- 2 Advanced GSAP Paradigms (from Section 5)\nYou are forbidden from defaulting to the same UI twice. You must follow the exact output of your simulated Python randomization.\n\n## 2. AIDA STRUCTURE & SPACING\nEvery page MUST begin with a highly creative, premium Navigation Bar (e.g., floating glass pill, or minimal split nav).\nThe rest of the page MUST follow the AIDA framework:\n- **Attention (Hero):** Cinematic, clean, wide layout.\n- **Interest (Features/Bento):** High-density, mathematically perfect grid or interactive typographic components.\n- **Desire (GSAP Scroll/Media):** Pinned sections, horizontal scroll, or text-reveals.\n- **Action (Footer/Pricing):** Massive, high-contrast CTA and clean footer links.\n**SPACING RULE:** Add huge vertical padding between all major sections (e.g., `py-32 md:py-48`). Sections must feel like distinct, cinematic chapters. Do not cramp elements together.\n\n## 3. HERO ARCHITECTURE & THE 2-LINE IRON RULE\nThe Hero must breathe. It must NOT be a narrow, 6-line text wall.\n- **The Container Width Fix:** You MUST use ultra-wide containers for the H1 (e.g., `max-w-5xl`, `max-w-6xl`, `w-full`). Allow the words to flow horizontally.\n- **The Line Limit:** The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this.\n- **Hero Layout Options (Randomly Assigned via Python):**\n  1. *Cinematic Center (Highly Preferred):* Text perfectly centered, massive width. Below the text, exactly two high-contrast CTAs. Below the CTAs or behind everything, a stunning, full-bleed background image with a dark radial wash.\n  2. *Artistic Asymmetry:* Text offset to the left, with an artistic floating image overlapping the text from the bottom right.\n  3. *Editorial Split:* Text left, image right, but with massive negative space.\n- **Button Contrast:** Buttons must be perfectly legible. Dark background = white text. Light background = dark text. Invisible text is a failure.\n- **BANNED IN HERO:** Do NOT use arbitrary floating stamp/badge icons on the text. Do NOT use pill-tags under the hero. Do NOT place raw data/stats in the hero.\n\n## 4. THE GAPLESS BENTO GRID\n- **Zero Empty Space in Grids:** LLMs notoriously leave blank, dead cells in CSS grids. You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid. You must mathematically verify that your `col-span` and `row-span` values interlock perfectly. No grid shall have a missing corner or empty void.\n- **Card Restraint:** Do not use too many cards. 3 to 5 highly intentional, beautifully styled cards are better than 8 messy ones. Fill them with a mix of large imagery, dense typography, or CSS effects.\n\n## 5. ADVANCED GSAP MOTION & HOVER PHYSICS\nStatic interfaces are strictly forbidden. You must write real GSAP (`@gsap/react`, `ScrollTrigger`).\n- **Hover Physics:** Every clickable card and image must react. Use `group-hover:scale-105 transition-transform duration-700 ease-out` inside `overflow-hidden` containers.\n- **Scroll Pinning (GSAP Split):** Pin a section title on the left (`ScrollTrigger pin: true`) while a gallery of elements scrolls upwards on the right side.\n- **Image Scale & Fade Scroll:** Images must start small (`scale: 0.8`). As they scroll into view, they grow to `scale: 1.0`. As they scroll out of view, they smoothly darken and fade out (`opacity: 0.2`).\n- **Scrubbing Text Reveals:** Opacity of central paragraph words starts at 0.1 and scrubs to 1.0 sequentially as the user scrolls.\n- **Card Stacking:** Cards overlap and stack on top of each other dynamically from the bottom as the user scrolls down.\n\n## 6. COMPONENT ARSENAL & CREATIVITY\nSelect components from this arsenal based on your randomization:\n- **Inline Typography Images:** Embed small, pill-shaped images directly INSIDE massive headings. Example: `I shape <span className=\"inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2\" style={{backgroundImage: 'url(...)'}}></span> digital spaces.`\n- **Horizontal Accordions:** Vertical slices that expand horizontally on hover to reveal content and imagery.\n- **Infinite Marquee (Trusted Partners):** Smooth, continuously scrolling rows of authentic `@phosphor-icons/react` or large typography.\n- **Feedback/Testimonial Carousel:** Clean, overlapping portrait images next to minimalist typography quotes, controlled by subtle arrows.\n\n## 7. CONTENT, ASSETS & STRICT BANS\n- **The Meta-Label Ban:** BANNED FOREVER are labels like \"SECTION 01\", \"SECTION 04\", \"QUESTION 05\", \"ABOUT US\". Remove them entirely. They look cheap and unprofessional.\n- **Image Context & Style:** Use `https://picsum.photos/seed/{keyword}/1920/1080` and match the keyword to the vibe. Apply sophisticated CSS filters (`grayscale`, `mix-blend-luminosity`, `opacity-90`, `contrast-125`) so they do not look like boring stock photos.\n- **Creative Backgrounds:** Inject subtle, professional ambient design. Use deep radial blurs, grainy mesh gradients, or shifting dark overlays. Avoid flat, boring colors.\n- **Horizontal Scroll Bug:** Wrap the entire page in `<main className=\"overflow-x-hidden w-full max-w-full\">` to absolutely prevent horizontal scrollbars caused by off-screen animations.\n\n## 8. MANDATORY PRE-FLIGHT <design_plan>\nBefore writing ANY React/UI code, you MUST output a `<design_plan>` block containing:\n1. **Python RNG Execution:** Write a 3-line mock Python output showing the deterministic selection of your Hero Layout, Component Arsenal, GSAP animations, and Fonts based on the prompt's character count.\n2. **AIDA Check:** Confirm the page contains Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), Action (Footer).\n3. **Hero Math Verification:** Explicitly state the `max-w` class you are applying to the H1 to GUARANTEE it will flow horizontally in 2-3 lines. Confirm NO stamp icons or spam tags exist.\n4. **Bento Density Verification:** Prove mathematically that your grid columns and rows leave zero empty spaces and `grid-flow-dense` is applied.\n5. **Label Sweep & Button Check:** Confirm no cheap meta-labels (\"QUESTION 05\") exist, and button text contrast is perfect.\nOnly output the UI code after this rigorous verification is complete.","tags":["gpt","taste","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-gpt-taste","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/gpt-taste","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34768 github stars · SKILL.md body (8,340 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T18:51:25.245Z","embedding":null,"createdAt":"2026-04-18T21:38:15.669Z","updatedAt":"2026-04-23T18:51:25.245Z","lastSeenAt":"2026-04-23T18:51:25.245Z","tsv":"'-10':963 '-105':813 '-125':1088 '-2':977 '-24':961 '-3':1228 '-32':449 '-48':452 '-700':818 '-90':1086 '/1920/1080':1068 '/react':1010 '/seed/':1066 '0.1':896 '0.2':885 '0.8':861 '01':196,1045 '04':1047 '05':194,1049,1273 '1':256,312,318,564,1155 '1.0':871,900 '2':336,364,469,527,601,1187,1227 '3':317,329,465,529,621,754,1161,1203 '3rem':546 '4':531,683,1238 '5':342,532,756,781,1261 '5.5':548 '5vw':547 '5xl':505 '6':173,335,483,534,926 '6xl':509 '7':1029 '8':765,1139 'absolut':1129 'access':148 'accordion':984 'across':125 'action':426,1201 'add':439 'advanc':66,337,782 'aggress':212 'aida':15,365,395,1188 'align':968 'align-middl':967 'allow':513 'alway':270 'ambient':1103 'anim':67,106,117,1138,1177 'appli':134,1076,1216,1260 'appropri':69 'arbitrari':659 'architectur':314,332,467 'arrow':1028 'arsenal':928,934,1175 'artist':602,611 'ask':38,140 'asset':241,1031 'assign':561 'assum':97 'asymmetri':603 'attent':397,1195 'authent':1006 'auto':713 'avoid':75,1116 'award':42,159 'award-level':41 'award-win':158 'awwward':27 'awwwards-level':26 'background':594,641,645,1099 'backgroundimag':979 'ban':653,1033,1038,1039 'bar':378 'base':935,1180 'beauti':759 'begin':371 'behind':587 'bento':22,86,186,686,718,1198,1239 'better':763 'bg':971,974 'bg-center':973 'bg-cover':970 'bias':169 'blank':696 'bleed':593 'blend':1083 'block':959,1153 'blur':1108 'bore':1095,1118 'bottom':619,920 'break':213,262 'breath':476 'browser':123 'budget':112 'bug':1122 'button':199,633,635,1264,1276 'cabinet':322 'card':60,746,753,761,803,906,908 'carousel':1015 'catastroph':538 'caus':1133 'cell':87,698 'center':566,571,975 'central':891 'chang':153 'chapter':459 'charact':298,1185 'cheap':82,189,1057,1268 'check':108,1189,1265 'cinemat':52,135,399,458,565 'clamp':545 'class':1213 'classnam':956 'clean':400,434,1016 'clickabl':802 'code':248,292,1148,1285 'col':727 'col-span':726 'color':1119 'column':1247 'comment':249 'complet':1291 'compon':331,414,927,931,1174 'confirm':1190,1230,1266 'contain':180,488,497,552,826,1154,1193 'content':994,1030 'context':1061 'continu':1002 'contrast':431,581,634,1087,1278 'control':1025 'core':24 'corner':742 'count':299,1186 'cover':972 'cramp':462 'creativ':49,221,375,929,1098 'css':700,779,1078 'cta':432 'ctas':582,585 'dark':598,640,646,1114 'darken':880 'data/stats':679 'dead':697 'deep':1106 'default':215,347 'dens':710,715,776,1258 'densiti':407,1240 'depend':109 'design':29,162,1104 'desir':415,1199 'desktop':126 'determinist':295,1168 'digit':981 'direct':25,948 'distinct':457 'driven':259 'durat':817 'dynam':917 'e.g':297,379,447,501 'eas':820 'ease-out':819 'editori':622 'effect':121,780 'element':463,845 'elit':7,157 'emb':942 'emoji':245 'empti':85,183,689,744,1252 'end':240 'endless':202 'engin':30,163 'ensur':555 'entir':1054,1125 'equival':105 'everi':368,717,801 'everyth':588 'exact':357,577 'exampl':952 'exceed':526 'execut':232,285,1158 'exist':1237,1274 'expand':988 'explicit':1207 'fade':854,882 'failur':539,652 'features/bento':404 'feedback/testimonial':1014 'feel':455 'fill':768 'filter':1079 'first':273 'fix':490 'flat':1117 'flawless':229 'flight':1143 'float':380,612,660 'flow':517,709,714,1224,1257 'follow':355,393 'font':542,1179 'footer':435,1202 'footer/pricing':427 'forbidden':345,791 'forev':1040 'format':255 'framework':396 'frontend':11,50,99,161 'full':512,592,966 'full-ble':591 'galleri':843 'gap':184 'gapless':21,685 'geist':326 'generat':6,171 'generic':89 'glass':381 'goal':209 'gpt':2 'gpt-tast':1 'gradient':1111 'graini':1109 'grayscal':1080 'grid':23,187,231,410,687,692,701,708,712,719,737,1246,1256 'grid-auto-flow':711 'grid-flow-dens':707,1255 'grotesk':323 'group':810 'group-hov':809 'grow':868 'gsap':9,56,103,227,338,416,783,796,829,1176,1200 'gsap-heavi':8 'gsap/react':797 'guarante':1221 'h':962 'h1':500,523,1219 'head':81,176,951 'heavi':10,115 'heavili':234 'hero':18,80,313,398,466,474,557,655,674,682,1172,1196,1204 'hidden':825 'high':220,239,374,406,430,567,580,757 'high-contrast':429,579 'high-dens':405 'high-end':238 'horizont':62,420,518,983,989,1120,1131,1225 'hover':785,799,811,991 'huge':440 'icon':662,1009,1233 'imag':595,613,626,805,852,856,941,947,1019,1060 'imageri':775,996 'implement':114 'infinit':997 'inher':267 'inject':1100 'inlin':939,958 'inline-block':957 'insid':822,949 'intent':758 'inter':328 'interact':412 'interest':403,1197 'interfac':144,788 'interlock':734 'invis':198,648 'iron':471 'keyword':1067,1072 'label':84,192,1037,1042,1262,1271 'land':44 'larg':774,1012 'layout':207,274,402,558,1173 'lazi':268 'leav':181,695,1250 'left':91,608,625,837 'left-right':90 'left/right':206 'legibl':639 'level':28,43 'librari':107 'light':644 'like':456,1043,1094 'limit':94,521 'line':79,174,470,484,520,530,535,1162,1229 'link':436 'llms':165,265,693 'look':1056,1093 'loop':264 'low':146 'low-mot':145 'luminos':1084 'maintain':252 'mainten':152 'major':445 'make':540 'mandatori':1140 'mani':752 'market':46 'marque':998 'massiv':172,428,572,630,950 'match':1070 'math':305,1205 'mathemat':228,408,722,1243 'max':503,507,1211 'max-w':1210 'max-w-5xl':502 'max-w-6xl':506 'md':450 'media':120 'mesh':1110 'messi':766 'meta':83,191,1036,1270 'meta-label':190,1035,1269 'middl':969 'minim':384 'minimalist':1022 'miss':741 'mix':772,1082 'mix-blend-luminos':1081 'mobil':128 'mock':1163 'mode':149 'modulo':304 'motion':53,63,136,147,225,784 'motion-rich':224 'must':74,218,280,354,370,392,454,475,478,492,524,636,703,721,793,806,857,1150 'mx':976 'narrow':76,179,482 'nav':386 'navig':377,1194 'negat':631 'never':327,525 'next':1020 'notori':694 'off-screen':1135 'offset':605 'one':767 'opac':884,889,1085 'option':275,559 'outfit':324 'output':73,197,217,251,358,1151,1165,1282 'overflow':824 'overflow-hidden':823 'overlap':614,909,1017 'overlay':1115 'pad':442 'page':12,45,47,369,391,1126,1192 'paradigm':339 'paragraph':892 'partner':1000 'perfect':222,409,570,638,735,1280 'perform':111 'phosphor':1008 'phosphor-icon':1007 'photo':1097 'physic':786,800 'pick':271 'picsum.photos':1065 'picsum.photos/seed/':1064 'pill':382,670,945 'pill-shap':944 'pill-tag':669 'pin':57,118,418,828,831,839 'place':677 'portrait':1018 'possess':166 'pre':1142 'pre-flight':1141 'prefer':568 'premium':376 'prevent':277,1130 'profession':254,1102 'project':100 'prompt':303,1183 'prove':1242 'py':448,451 'python':258,283,362,563,1156,1164 'python-driven':257 'question':193,1048,1272 'quot':1024 'radial':599,1107 'random':261,363,560,938 'random.choice':308 'raw':678 'react':807 'react/ui':1147 'real':795 'releas':131 'reli':235 'rem':549 'remov':1052 'repeat':203 'requir':122 'rest':388 'restrain':143 'restraint':747 'reveal':425,888,993 'rich':226 'right':92,620,627,850 'rigor':1288 'rng':1157 'round':965 'rounded-ful':964 'row':731,1004,1249 'row-span':730 'rule':438,472 'satoshi':321 'scale':812,853,860,870 'screen':1137 'script':284 'scroll':58,116,421,827,846,855,864,874,905,924,1003,1121 'scroll/media':417 'scrollbar':1132 'scrolltrigg':798,838 'scrub':59,886,898 'section':93,195,316,334,341,419,446,453,833,1044,1046 'seed':296 'select':311,930,1169 'sequenti':901 'sever':167 'shall':738 'shape':946,954 'shift':1113 'show':1166 'side':851 'simpl':151 'simul':281,307,361 'six':78 'six-lin':77 'size':543 'skill':96 'skill-gpt-taste' 'slice':986 'small':859,943 'smaller':544 'smooth':879,1001 'sophist':1077 'source-sickn33' 'space':223,367,437,632,690,982,1253 'spam':1235 'span':728,732,955 'split':385,623,830 'stack':61,320,907,911 'stamp':1232 'stamp/badge':661 'standard':164 'start':858,894 'state':1208 'static':787 'statist':168 'stock':1096 'strict':14,253,310,790,1032 'structur':16,366 'stun':590 'style':760,978,1062 'subtl':1027,1101 'support':102 'sweep':1263 'tag':671,1236 'tailwind':705 'tast':3 'test':124 'text':200,424,485,569,576,604,616,624,643,647,649,665,887,1277 'text-rev':423 'titl':834 'togeth':464 'top':913 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':816 'transit':815 'transition-transform':814 'true':260,840 'trust':999 'twice':352 'two':578 'typograph':413 'typographi':19,319,777,940,1013,1023 'ugli':182 'ui':291,351,1284 'ultra':495 'ultra-wid':494 'uniqu':330 'unprofession':1059 'upward':847 'url':980 'us':1051 'use':4,33,34,54,70,178,188,244,293,493,658,668,704,750,808,1063,1105 'user':37,139,302,904,923 'valu':733 'vari':237 'verif':1206,1241,1289 'verifi':723 'vertic':441,985 'via':562 'vibe':1075 'view':866,877 'viewport':129 'void':745 'w':504,508,511,960,1212 'w-full':510 'wall':486 'wash':600 'white':642 'wide':17,401,496 'wider':553 'width':489,573 'win':160 'word':515,893 'wrap':175,1123 'write':289,794,1145,1159 'zero':688,1251","prices":[{"id":"3115353e-28a4-4412-ad3c-48bdd4d80ee5","listingId":"f9b4fb15-0fee-49a6-a403-9b2efceee07c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:38:15.669Z"}],"sources":[{"listingId":"f9b4fb15-0fee-49a6-a403-9b2efceee07c","source":"github","sourceId":"sickn33/antigravity-awesome-skills/gpt-taste","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/gpt-taste","isPrimary":false,"firstSeenAt":"2026-04-18T21:38:15.669Z","lastSeenAt":"2026-04-23T18:51:25.245Z"}],"details":{"listingId":"f9b4fb15-0fee-49a6-a403-9b2efceee07c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"gpt-taste","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34768,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"57f41cd1026739d517ef0e7d9efd1d9e0bcc10a0","skill_md_path":"skills/gpt-taste/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/gpt-taste"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"gpt-taste","description":"Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/gpt-taste"},"updatedAt":"2026-04-23T18:51:25.245Z"}}