Communitygithub.com

MengTo/Skills

Art-Direction und Umsetzung von unverwechselbaren, bewegungsreichen Marketing-, Editorial-, Portfolio- und Landing-Websites mit originellen, referenzinspirierten Bildern, herausragenden Hero-Bereichen, GSAP-Choreografie, einer einheitlichen Smooth-Scroll-Engine, optionalen Three.js-Shadern, ehrlicher Icon- und Logo-Quellenangabe, Foto-Avataren, Barrierefreiheit und Leistungsschutzmaßnahmen.

Was ist Skills?

Diese Fähigkeit ermöglicht es einem KI-Agenten, professionelle, visuell beeindruckende Websites mit einem starken Fokus auf Bewegung und Interaktivität zu erstellen. Sie ist ideal für Projekte, die eine Auszeichnungswürdige Qualität (z.B. Awwwards) anstreben, sowie für Websites im Marketing-, Editorial-, Portfolio- und Landingpage-Bereich. Die Fähigkeit integriert verschiedene leistungsstarke Bibliotheken wie GSAP für Animationen, Three.js für 3D-Shader und eine dedizierte Smooth-Scroll-Engine, um ein nahtloses Benutzererlebnis zu gewährleisten. Dabei wird großer Wert auf Originalität und Authentizität gelegt, etwa durch referenzinspirierte Bilder, die Verwendung echter Foto-Avatare und die ehrliche Quellenangabe von Icons und Logos. Die Fähigkeit ist für die Plattformen Claude Code, Cursor und Codex optimiert und stellt sicher, dass Barrierefreiheitsstandards eingehalten werden, während gleichzeitig die Leistung durch Sicherheitsmaßnahmen geschützt wird.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add MengTo/Skills
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Skills?

Art-direktes und implementiertes, unverwechselbares, bewegungsreiches Marketing-, Redaktions-, Portfolio- und Landing-Website-Design mit originellen, referenzierten Bildern, herausragenden Helden, GSAP-Choreografie, einer einheitlichen Smooth-Scroll-Engine, optionalen Three.js-Shadern, ehrlicher Symbol- und Logo-Beschaffung, Foto-Avataren, Barrierefreiheit und Leistungssicherungen. Verwenden Sie dies, wenn ein Benutzer eine Awwwards-qualitätige, hochwertige, kinematografische, interaktive, high-concept oder bewegungsgesteuerte Website anfordert oder explizit nach diesem visuellen und Bewegungssystem fragt.

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.

Verwandte Skills

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