Communitygithub.com

MengTo/Habilidades

Direcione e implemente sites de marketing, editoriais, portfólios e landing pages distintos e ricos em movimento, com imagens originais inspiradas em referências, heróis de destaque, coreografia GSAP, um mecanismo de rolagem suave, shaders Three.js opcionais, sourcing honesto de ícones e logos, avatares fotográficos, acessibilidade e salvaguardas de desempenho. Use quando um usuário solicitar um site de qualidade Awwwards, premium, cinematográfico, interativo, de alto conceito ou liderado por movimento, ou solicitar explicitamente este sistema visual e de movimento.

O que é Habilidades?

A habilidade **MengTo/Skills** permite que um agente de IA, como o Claude Code, atue como um diretor de arte e desenvolvedor front-end especializado em criar websites de alto nível visual e interativo. O foco está em sites de marketing, portfólios e landing pages que se destacam por animações fluídas e design cinematográfico, visando a qualidade de premiações como Awwwards. A habilidade se baseia em um conjunto de ferramentas e princípios: imagens originais inspiradas em referências visuais, heróis de página impactantes, coreografia de animações usando a biblioteca GSAP, um sistema de rolagem suave (smooth-scroll), e a opção de utilizar shaders com Three.js para efeitos gráficos avançados. Além disso, enfatiza práticas éticas como o uso de ícones e logos com fontes corretas e atribuição adequada, avatares fotográficos reais, e não se esquece de aspectos críticos como acessibilidade e desempenho. É a habilidade ideal quando um pedido envolve criar uma experiência de website premium, cinematográfica, interativa, de alto conceito ou com forte ênfase em movimento e animações.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add MengTo/Skills
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que Habilidades faz?

Direcione e implemente sites de marketing, editoriais, portfólios e landing pages distintos e ricos em movimento, com imagens originais inspiradas em referências, heróis de destaque, coreografia GSAP, um mecanismo de rolagem suave, shaders Three.js opcionais, sourcing honesto de ícones e logos, avatares fotográficos, acessibilidade e salvaguardas de desempenho. Use quando um usuário solicitar um site de qualidade Awwwards, premium, cinematográfico, interativo, de alto conceito ou liderado por movimento, ou solicitar explicitamente este sistema visual e de movimento.

Individual skills in this repo

This repo contains 10 individual skills — each has its own dedicated page.

MengTo/Skills

Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography, zoom-follow framing, ffprobe/thumbnail verification, and optional native recording compatibility checks. Use when the user asks to record or re-record browser actions, show cursor clicks and zooms, make Dribbble/UI inspiration or product demo recordings, or asks whether Codex, Playwright, or an MCP can produce a natural browser demo video.

MengTo/Skills

Generate ElevenLabs text-to-speech audio from scripts or inline text using local voice profiles. Use when the user asks for ElevenLabs, text-to-speech, TTS, narration, voiceover, speech audio, or voice generation; load voice names, voice ids, emails, owners, and account-specific defaults only from local config outside the skill.

MengTo/Skills

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" optimization on React/Vite/Next/frontend pages using Codex Browser.

MengTo/Skills

Turn a reference video into a super detailed recreation or inspiration prompt. Use when the user provides, mentions, uploads, links, or points to a video and asks to analyze the design, UI, animations, transitions, scroll interactions, typography, colors, assets, WebGL/Three.js, storytelling, section-by-section behavior, or to create a prompt/article that recreates the page, app, interaction, or motion system.

MengTo/Skills

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.

MengTo/Skills

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

MengTo/Skills

Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.

MengTo/Skills

Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.

MengTo/Skills

Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.

MengTo/Skills

Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community