skills.rest
lichong-a
lichong-aCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ric-gpt-taste

Generate high-end marketing page designs with GSAP motion and Tailwind CSS.

Updated Jun 4, 2026
Search Tags:#Tailwind CSS#frontend design#marketing page#GSAP motion#Python randomization#RIC workflow
One-click install
npx skills add https://github.com/lichong-a/ric-skills --skill ric-gpt-taste
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ric-gpt-taste
Source: https://github.com/lichong-a/ric-skills/tree/main/skills/ric-gpt-taste
Command: npx skills add https://github.com/lichong-a/ric-skills --skill ric-gpt-taste

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python, tailwindcss, gsap, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the limitations of standard LLMs in frontend design, providing advanced motion, layout variance, and implementation discipline tailored for RIC workflows.

Core Features & Use Cases

  • Stricter GPT/Codex-Oriented Execution: Enhances premium frontend builds with advanced motion and layout variance.
  • RIC Workflows: Adheres to RIC local workflow constraints and utilizes Python-driven true randomization.
  • AIDA Structure & Spacing: Implements a highly creative, premium navigation bar and follows the AIDA framework for effective content presentation.
  • Hero Architecture: Ensures the hero section breathes with ultra-wide containers and adheres to the 2-line iron rule for optimal text flow.
  • Gapless Bento Grid: Prevents empty spaces in grids and employs Tailwind's grid-flow-dense for perfect interlocking of grid values.
  • Advanced GSAP Motion: Incorporates real GSAP for hover physics, scroll pinning, and image scale/fade scroll effects.
  • Component Arsenal: Offers diverse components like inline typography images, horizontal accordions, and feedback/testimonial carousels.
  • Content & Asset Guidelines: Provides instructions for creative backgrounds, image context, and professional formatting.

Quick Start

Generate a premium marketing page design using the ric-gpt-taste skill by executing the following command:

ric-gpt-taste design --prompt "create a high-end landing page for a new tech product"

Frequently Asked Questions about ric-gpt-taste

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate high-end marketing page designs with advanced GSAP motion?▼

Generate high-end marketing page designs by utilizing GSAP for dynamic UI effects like hover physics and scroll pinning, combined with Tailwind CSS for styling and Python randomization for layout variance. This approach ensures premium frontend engineering tailored for marketing pages.

Why use Python randomization in frontend design for marketing pages?▼

Python randomization in frontend design provides true layout variance for marketing pages, overcoming standard LLM limitations. It ensures unique design element distribution within RIC workflows, preventing repetitive layouts and enabling genuinely creative component arrangements.

Can I use Tailwind CSS to create a gapless bento grid for a marketing page?▼

Yes, you can use Tailwind CSS to create a gapless bento grid by employing the `grid-flow-dense` utility. This ensures perfect interlocking of grid values and prevents empty spaces, resulting in a dense, visually appealing marketing page layout.

Do I need Python and GSAP dependencies to build marketing pages with this workflow?▼

Yes, you need Python, Tailwind CSS, and GSAP dependencies to execute this RIC workflow. Python enables true design element randomization, while GSAP handles advanced motion effects like scroll pinning and image scale/fade required for the frontend build.

What is the best way to structure a hero section for a premium marketing page?▼

The best way to structure a premium hero section is using ultra-wide containers to ensure the area breathes, adhering to a 2-line iron rule for optimal text flow. This architecture creates a high-end presentation tailored for marketing pages.

Related Skills

Explore More Design & Creative Skills→
lichong-alichong-a

ric-design-taste-frontend-v1

Generate frontend design patterns for RIC applications using Tailwind CSS and React.

Community
Advanced
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
marktantongcomarktantongco
2

image-edit

Edit images and generate variations using the z-ai-web-sdk.

Community
Advanced
AytsuuAytsuu

imagegen-frontend-web

Generate one horizontal image per website section for landing pages.

Community
Advanced