Menu
Skills in this repository
SkillsMP has collected 458 skills from oimiragieo/gotcontext-frontend-developer. Open a skill to review its source and details.
oimiragieo/gotcontext-frontend-developerShowing 40 of 458 collected skills.
Use when building a cursor trail whose spacing stays constant at any hand speed by emitting motes per distance travelled (not on a timer)—sub-segment placement, ring-buffer ordering, idle breath, 3D screen anchoring, coasting, touch and reduced-motion…
Use when creating or redesigning SaaS or AI product landing pages where a real workflow, interface, or deterministic demo is the central proof—pale atmospheric shells, product UI in the hero, prompt-to-output stories, audience tabs, compact feature modules,…
Use when building cursor-following spotlight reveals that expose a second aligned image through a soft radial mask—hover-to-color, before-and-after, x-ray, material, texture, product-detail, or illustrated heroes where a desaturated or embossed base stays…
Use when turning an ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion—onboarding, checkout, roadmaps, recipes, case studies,…
Use when building reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers—hero transformations, product assembly, UI walkthroughs, object rotation,…
Use when revealing marked-up text word by word as scroll progress advances while preserving semantic inline links, emphasis, responsive wrapping, and reduced-motion readability—headlines, quotes, manifestos, product statements, onboarding, or editorial…
Use when creating subtle editorial word-by-word text reveals where each word fades and rises into place on viewport entry—premium portfolio headlines, hero copy, section intros, and short marketing text needing a cinematic staggered reveal with…
Use when a Claude-Design export already exists and you must adapt it into a production page before render-verify — real data, honest empty states, existing tokens/components (never ship mock numbers). Prefer this over claude-design when generation is done and…
Use when building a minimal agency site with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail. Prefer this over mengto-nested-container-clean-agency when the grid and…
Use when you need a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom — background atmosphere only, not a full layout system.
Use when adding a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax. Prefer this over mengto-atmosphere-background when the grid/mesh motion is the hero, not soft light folds.
Use when designing a clean modern light UI with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography. Prefer this over mengto-clean-minimal-beige-light-mode when sky/cloud blue is the mood, not warm…
Use when building a clean dark glass dashboard with a thin blue laser atmosphere, frosted premium shells, and polished multi-panel structure. Prefer this over mengto-dark-glass-clean-layout when the blue laser beam/atmosphere is the signature; prefer over…
Use when designing an archival book-reader experience with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.
Use when building a bright-green technical UI with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone. Prefer this over mengto-tech-green-dark-mode-modern when a large WebGL viz panel is central,…
Use when designing a clean minimal beige light-mode system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure. Prefer this over mengto-orange-clean-paper-saas when beige quiet process grids lead, not…
Use when replacing text brand marks with Iconify Simple Icons logos at 64x64. Prefer this over mengto-solar-duotone-bold when you need recognizable company/brand logos, not Solar Duotone UI icons.
Use when composing corner-anchored laser accents with thin beams, a bright emitter node, bloom, and atmospheric glow or fog. Prefer this over mengto-webgl-laser when lasers are layout corner ornaments, not a fixed full-screen WebGL beam.
Use when designing a dark-blue clean system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow. Prefer this over mengto-mesh-gradient-dark-blue-clean when hard cobalt feature blocks and frames lead, not…
Use when building a dark glass multi-column workspace with frosted premium shells, floating data cards, and restrained atmospheric depth. Prefer this over mengto-glass-dark-mode-clock when workspace shells and columns matter, not circular clock dials; prefer…
Use when designing a near-black premium UI with subtle ordered-dither texture and a thin accent-colored laser atmosphere. Prefer this over mengto-dither-background when dither pairs with laser accents; prefer over mengto-blue-laser-clean-glass-layout when…
Use when creating or redesigning creative agency, production studio, architecture, culture, or portfolio sites with billboard typography, hard black-and-white chapters, exposed grids, documentary imagery, irregular collages, restrained parallax, brutalist…
Use when blending editorial magazine composition with precision product-tech detailing — asymmetrical grids, cinematic media bands, mono utility labels, and restrained accent color. Prefer this over mengto-agency-grid-layout-minimal when tech/product…
Use when building a framed dark technical system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere. Prefer this over mengto-dark-glass-clean-layout when gradient borders and tech frames lead,…
Use when designing a dark container-led technical UI with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects. Prefer this over mengto-nested-container-frames when fuchsia-purple tech playfulness leads, not…
Use when building a dark glass sci-fi instrument UI with frosted shells, soft beam grids, and circular clock-like calibration dials. Prefer this over mengto-dark-glass-clean-layout when clock dials and instrument framing are the signature, not multi-column…
Use when asked for dark-mode glassmorphism cards, frosted dark hero sections, blur panels, or glass UI with gradient/glow borders via a pseudo-element mask. Prefer this over mengto-dark-glass-clean-layout when isolated glass cards/borders matter, not…
Use when creating a gooey blob system with SVG filters where overlapping shapes merge into one fluid mass (Gaussian blur + color matrix), with soft organic boundaries and continuous motion. Prefer this over particle or WebGL blob looks when filter-driven SVG…
Use when building cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, and immersive section transitions. Prefer this over mengto-cinematic-scroll-storytelling when GSAP ScrollTrigger sticky chapters…
Use when designing a high-contrast clean skeuomorphic system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents. Prefer this over mengto-skeuomorphic-ui when high-contrast molded dark panels lead, not…
Use when building an image-led grid with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays. Prefer this over mengto-agency-grid-layout-minimal when photography is the primary plane, not typography-led…
Use when designing a light-mode technical system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals. Prefer this over mengto-orange-clean-paper-saas when bracketed technical framing…
Use when applying seamless infinite marquee loops with duplicated items for logo strips, tickers, or continuous horizontal content.
Use when building a clean agency system from nested containers — outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color. Prefer this over mengto-nested-container-frames when agency editorial polish leads; prefer…
Use when implementing a container-in-container layout with an outer centered frame (vertical boundary lines, corner markers) and inset inner containers with their own backgrounds and rounded frames. Prefer this over mengto-nested-container-clean-agency when…
Use when adding decorative 01, 02, 03 numeric detail markers for section indexing or editorial rhythm.
Use when designing a clean paper-toned SaaS system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces. Prefer this over mengto-clean-minimal-beige-light-mode when orange SaaS accents and product…
Use when applying Iconify Solar Duotone Bold icons for UI chrome. Prefer this over mengto-company-logos when you need interface icons, not brand/company Simple Icons logos.
Use when designing a technical split-screen system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces. Prefer this over mengto-bright-green-tech-system-webgl when dual-panel split framing leads without a…
Use when building a modern dark technical UI with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow. Prefer this over mengto-bright-green-tech-system-webgl when emerald accents on matte dashboards…