MengToCommunity·132 Agent Skills Included

Skills

Reusable AI skills for building premium animated websites and interfaces

Generates award-quality landing pages, scroll-driven animations, WebGL scenes, and complete design systems through ready-to-use AI agent skills. Covers GSAP motion, Three.js worlds, dark-mode glass layouts, pricing pages, and anti-slop design audits without writing effects from scratch. Each skill ships with copy-paste code, tuning defaults, and accessibility fallbacks so agents produce polished, responsive results on the first pass.

5,692|685

↗

npx skills add MengTo/Skills --all -g -y

Available:

Tells the AI agent how this repository's skill folders are structured, how to pick the most specific skill for a task, and what style and safety rules to follow when working with these design skills.

All Skills in This Repository (132)

Pure Emerald Level Indicators

📦 In Repo

MengTo

mengto-ui-prompting

Generate design-system-style UI prompts with layout, typography, and color constraints.

dither-background

Generate near-black procedural backgrounds with Bayer-style dithering on HTML canvas.

skeuomorphic-ui

Create skeuomorphic web UI surfaces with layered gradients and stacked shadows.

animation-on-scroll

Trigger keyframed Tailwind animations when elements enter the viewport using IntersectionObserver.

pricing-page

Generate SaaS pricing page outlines with plan tables, FAQs, and SEO elements.

masked-reveal

Animate word-by-word masked text reveals on scroll with GSAP ScrollTrigger.

corner-diagonals

Apply diagonal-cut corners and chamfered edges to UI components with clip-path polygons.

vantajs

Inject and configure animated WebGL backgrounds with Vanta.js in a container element.

cinematic-gsap-lenis-motion-system

Create a cinematic GSAP, ScrollTrigger, and Lenis motion system with data-attribute markup.

webgl-3d-object

Create a Three.js WebGL 3D object with PBR lighting and perspective depth.

unicorn-studio

Embed Unicorn Studio WebGL scenes with configurable performance attributes.

globe-gl

Implement Globe.GL 3D globe visualizations with layered WebGL rendering.

Community

Intermediate

Frequently Asked Questions

FAQPage Schema

How to install MengTo Skills?▼

Run `npx skills add MengTo/Skills --all -g -y` in your terminal to install the full skill collection globally.

What can I build with these design skills?▼

You can generate complete landing pages, pricing pages, scroll-driven stories, Three.js 3D scenes, particle effects, and full design systems like dark glass or editorial layouts.

Do these skills work with Claude Code and Cursor?▼

Yes. Every skill is a plain Markdown SKILL.md file that works with Claude Code, Codex, Cursor, and any agent that reads skill folders.

Can I use these skills without coding experience?▼

Yes. You describe the design you want in plain English, and your AI agent follows the skill's step-by-step recipe, code snippets, and quality checklists.

How do these skills avoid generic AI-looking designs?▼

The suite includes dedicated anti-slop audit skills that flag clichéd gradients, fake proof, and decorative clutter, plus strict taste rules baked into every design system skill.