177 skills (repositories by MengTo) · sorted by popularity
Add reveal animations that start when page elements enter the visible area. The skill provides JavaScript using IntersectionObserver, a browser visibility detector, plus CSS keyframes and Tailwind-compatible classes, with adjustments for trigger position, motion, duration, and delay.
Design minimal agency websites around a precise column grid, oversized headlines, generous whitespace, and restrained imagery. Establish a consistent visual direction for service listings, labels, buttons, and subtle motion across architecture, design, or strategy agency pages.
Build a continuous 3D website where scrolling guides the camera, lighting, text, and interactions through planned chapters. The skill covers visual planning, responsive composition, progressive loading, accessibility, and performance checks for a live Three.js world.
Create SVG illustrations of active figures using one continuous black line and offset color patches that resemble misaligned printing. The skill guides poses, colors, composition, rendering, and visual checks for product pages and announcement cards.
Design a technical web interface with dark surfaces, bright green signals, precise borders, and a prominent WebGL visualization. Coordinate split layouts, typography, controls, status labels, and restrained animation into a consistent visual system.
Draw SVG illustrations of collaboration, commuting, and focused work using black lines and halftone dots, small dots that create shading. Produce monochrome artwork with hand-drawn contours for onboarding screens, empty states, blog headers, and marketing cards.
Draw vintage emblem SVG illustrations for teams, events, and releases. Combine one bold object, a sun disc, carved shadows, and custom lettering in seven flat colors to create badges, posters, or marketing cards.
Design reading interfaces that resemble archival books, pairing serif text and aged paper surfaces with a dark catalog frame. Organize chapters, notes, and metadata through index navigation, with adjustable texture, page depth, and visual density.
Create green isometric illustrations, using angled views without perspective, of developer and design workspaces as SVG files. A bundled drawing kit helps arrange equipment on one platform, with consistent shading, fine details, shadows, and validation checks.
Design and implement web animations that guide attention, explain hierarchy, and confirm actions. Define reusable timing and movement rules, plan coordinated sequences, and account for performance and accessibility settings that reduce motion.
Create SVG illustration cards of people working with laptops, screens, and design components. Follow a defined pastel palette, violet frame, thin navy outlines, and overlapping speech bubbles to produce matching artwork for product pages, onboarding, and team content.
Design, implement, tune, and test action combat for web games with clear attack and defense timing. Define reliable hit outcomes, give defensive moves distinct purposes, and verify that visual feedback matches combat results in repeatable scenarios.
Create coordinated website animations with GSAP, ScrollTrigger, and Lenis. Combine smooth scrolling, staged text and image reveals, pinned scenes, and pointer interactions, with guidance for performance, touch devices, and reduced-motion preferences.
Create hand-drawn SVG illustration cards featuring expressive creatures or living objects that represent coding and design ideas. A supplied brush library supports uneven ink outlines, loose watercolor fills, large eyes, and consistent details across a set.
Build a scanning entrance for Three.js models, revealing their wire structure before the solid surface appears. Coordinate both layers with one expanding wave, then remove the temporary wires when the animation finishes.
Create original SVG illustrations with expressive cartoon characters, bold ink outlines, and a prominent prop. Use the transparent artwork for onboarding, empty states, success screens, blog headers, or marketing cards, with checks for consistent styling and believable hands.
Build particle trails that respond to cursor or touch movement with consistent spacing at different speeds. Reuse a fixed pool of GPU-rendered particles, add keyboard-triggered bursts, and handle reduced motion, resizing, and cleanup.
Design airy pages with a luminous blue sky background, drifting cloud light, and white typography. It guides minimal navigation, subtle framing, buttons, logo rows, and gentle motion to create a calm, spacious composition.
Prepare and deploy Three.js or other web games from a tested commit, a specific saved code version. Check the live game's controls, assets, and display, then record release evidence and a rollback target.
Turn rough screen ideas into clear prompts for generating user interfaces. Specify layout, typography, colors, spacing, and exact copy, then refine the results by changing one variable at a time to keep the design consistent.
Review and refine websites and apps by finding generic decoration, inconsistent visual choices, and interface defects. Preserve the established art direction while improving hierarchy, layout, interaction states, and the connection between design choices and product needs.
Apply layered, neutral shadows to cards, form controls, panels, and larger containers using Tailwind classes with custom values. Three prescribed shadow strengths help match visual depth to the size and purpose of each component.
Prepare Vesperfall game assets as paired transparent PNG cards and live 3D previews. Track each model’s actual source, expose available animations, and validate catalog displays, ground contact, and review pages through tests and browser checks.
Create a WebGL background with a perspective grid, fading lines, and sparse floating particles. Add slow forward motion and gentle mouse-responsive camera movement, then tune density, color, and depth to support foreground content.