← all plugins

1. ▌
   mkt-cro · oimiragieo bundle

   When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't converting,' 'improve conversions,' 'why isn't this page working,' 'my landing page sucks,' 'form abandonment,' 'nobody's converting,' 'low conversion rate,' or 'this page needs work.' Use this even if the user just shares a URL and asks for feedback. For signup/registration flows, see signup. For post-signup activation, see onboarding. For popups/modals, see popups.
   0
   repo stars
2. ▌
   impeccable · oimiragieo bundle

   Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
   0
   repo stars
3. ▌
   mkt-popups · oimiragieo bundle

   When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions "exit intent," "popup conversions," "modal optimization," "lead capture popup," "email popup," "announcement banner," "overlay," "collect emails with a popup," "exit popup," "scroll trigger," "sticky bar," or "notification bar." Use this for any overlay or interrupt-style conversion element. For forms outside of popups, see cro. For general page conversion optimization, see cro.
   0
   repo stars
4. ▌
   mkt-signup · oimiragieo bundle

   When the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "registration friction," "signup form optimization," "free trial signup," "reduce signup dropoff," "account creation flow," "people aren't signing up," "signup abandonment," "trial conversion rate," "nobody completes registration," "too many steps to sign up," or "simplify our signup." Use this whenever the user has a signup or registration flow that isn't performing. For post-signup onboarding, see onboarding. For lead capture forms (not account creation), see cro.
   0
   repo stars
5. ▌
   uupm-brand · oimiragieo bundle

   Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
   0
   repo stars
6. ▌
   mengto-gsap · oimiragieo bundle

   Use when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.
   0
   repo stars
7. ▌
   stitch-loop · oimiragieo bundle

   Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
   0
   repo stars
8. ▌
   uupm-design · oimiragieo bundle

   Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
   0
   repo stars
9. ▌
   uupm-slides · oimiragieo bundle

   Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
   0
   repo stars
10. ▌
    ai-governors · oimiragieo bundle

    Use when designing or auditing AI product human-in-the-loop — write approval, proposal accept/reject, action confirm, spend caps, run detail, memory capture, or any AI action with irreversible blast radius. Trigger on confirmation UX, undo, cost-before-act, show-the-plan, citations, or keeping the owner in control.
    0
    repo stars
11. ▌
    mkt-paywalls · oimiragieo bundle

    When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," "in-app pricing," "free users won't upgrade," "trial to paid conversion," or "how do I get users to pay." Use this for any in-product moment where you're asking users to upgrade. Distinct from public pricing pages (see cro) — this focuses on in-product upgrade moments where the user has already experienced value. For pricing decisions, see pricing.
    0
    repo stars
12. ▌
    real-user-qa · oimiragieo bundle

    Use when asked to "QA this", "is this ready to ship?", "test it like a user", "bug hunt", "sign off this build/phase", or before declaring a web app / feature shippable — a real-user QA pass that files severity-ranked bug reports and returns a binary ship verdict. Not for visual/CRO polish (frontend-audit) or fixing an already-reported UI bug (ui-fix-observe-first).
    0
    repo stars
13. ▌
    ai-wayfinders · oimiragieo bundle

    Use when designing AI product first-run or blank-slate UX — chat empty state, example prompts, capability discovery, templates, nudges, or follow-ups. Trigger on "users don't know what to ask", onboarding, suggestion chips, or discoverability.
    0
    repo stars
14. ▌
    claude-design · oimiragieo

    Use when generating, prototyping, or iterating on UI designs (prototypes, wireframes, slide decks, landing/dashboard mockups) with Anthropic's Claude Design tool at claude.ai/design — particularly when you want a design system applied automatically and a clean handoff into Claude Code for implementation.
    0
    repo stars
15. ▌
    clone-website · oimiragieo

    Use when the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website — or says 'make a copy of this site', 'rebuild this page', 'pixel-perfect clone'. Reverse-engineers one or more sites in one shot: extracts assets, CSS, and content section-by-section, then proactively dispatches parallel builder agents in worktrees as it goes (foreman pattern, not inspect-then-build). Provide one or more target URLs as arguments; requires browser automation (Chrome MCP/Playwright/Browserbase/Puppeteer). Pixel-perfect fidelity default: visual layout, styling, components, responsive design, mock data — NOT real backend/auth/real-time/SEO/accessibility unless specified.
    0
    repo stars
16. ▌
    mengto-cobejs · oimiragieo bundle

    Use when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).
    0
    repo stars
17. ▌
    frontend-audit · oimiragieo bundle

    Use when the user asks to audit, review, critique, or "make sure it looks right" on a deployed web page, component, or Figma mockup — or when they mention visual issues, CRO, conversion rate, design consistency, accessibility, "feels off", "looks bad", "make it pop", "looks like AI slop". Triggers on keywords like "audit the page", "review the design", "what's wrong with this UI", "CRO audit", "a11y check", "visual hierarchy", "typography check", "does this look right". Activation also recommended after any significant frontend change on gotcontext.ai before calling the work done.
    0
    repo stars
18. ▌
    mengto-threejs · oimiragieo bundle

    Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.
    0
    repo stars
19. ▌
    mengto-vantajs · oimiragieo bundle

    Use when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).
    0
    repo stars
20. ▌
    mkt-onboarding · oimiragieo bundle

    When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," "new user experience," "users aren't activating," "nobody completes setup," "low activation rate," "users sign up but don't use the product," "time to value," or "first session experience." Use this whenever users are signing up but not sticking around. For signup/registration optimization, see signup. For ongoing email sequences, see emails.
    0
    repo stars
21. ▌
    mengto-globe-gl · oimiragieo bundle

    Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
    0
    repo stars
22. ▌
    mengto-matterjs · oimiragieo bundle

    Use when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.
    0
    repo stars
23. ▌
    mkt-copywriting · oimiragieo bundle

    When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see emails. For popup copy, see popups. For editing existing copy, see copy-editing. For the offer underneath the copy (bonuses, guarantees, value framing), see offers.
    0
    repo stars
24. ▌
    stitch-remotion · oimiragieo bundle

    Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
    0
    repo stars
25. ▌
    threejs-loaders · oimiragieo

    Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
    0
    repo stars
26. ▌
    threejs-shaders · oimiragieo

    Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
    0
    repo stars
27. ▌
    uupm-ui-styling · oimiragieo bundle

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
    0
    repo stars
28. ▌
    stitch-design-md · oimiragieo bundle

    Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
    0
    repo stars
29. ▌
    stitch-shadcn-ui · oimiragieo bundle

    Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
    0
    repo stars
30. ▌
    threejs-geometry · oimiragieo

    Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
    0
    repo stars
31. ▌
    threejs-lighting · oimiragieo

    Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.
    0
    repo stars
32. ▌
    threejs-textures · oimiragieo

    Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.
    0
    repo stars
33. ▌
    ai-trust-builders · oimiragieo bundle

    Use when designing AI product trust, privacy, or honesty UX — cloud disclosure, voice/mic consent, transcript retention, memory ownership, AI labeling, caveats, or audit footprints. Trigger on disclose cloud, recording consent, watermark, incognito, or data-ownership settings.
    0
    repo stars
34. ▌
    stitch-mcp-design · oimiragieo

    Router for Google Stitch design-to-code in this pack. Use when starting any Stitch workflow, choosing Stitch vs Aura vs Figma vs Claude Design, or before calling generate/edit MCP tools. Enforces ~400 Stitch credits/day. Points to phased pack skills: enhance-prompt → generate-design → extract → build → loop.
    0
    repo stars
35. ▌
    threejs-animation · oimiragieo

    Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
    0
    repo stars
36. ▌
    threejs-materials · oimiragieo

    Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
    0
    repo stars
37. ▌
    tui-observe-first · oimiragieo

    Use when building, fixing, polishing, or comparing any terminal UI — ratatui/crossterm REPLs, agent CLI chrome — or when a TUI shows a frozen spinner, dead keys, duplicated responses, stale cells, flicker, resume failures on dangling tool_use, or when you need side-by-side screenshots against reference CLIs.
    0
    repo stars
38. ▌
    mengto-tailwindcss · oimiragieo bundle

    Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.
    0
    repo stars
39. ▌
    mengto-webgl-laser · oimiragieo bundle

    Use when adding a fixed full-screen WebGL laser background with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog. Prefer this over mengto-corner-lasers when the beam is a full-viewport WebGL background, not corner ornaments; not for full page layout, copy, or unrelated particle systems.
    0
    repo stars
40. ▌
    uupm-banner-design · oimiragieo bundle

    Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses uupm-ui-ux-pro-max; host harness may supply image-gen equivalents (ai-artist / ai-multimodal / frontend-design are not in this pack).
    0
    repo stars
41. ▌
    uupm-design-system · oimiragieo bundle

    Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
    0
    repo stars
42. ▌
    uupm-ui-ux-pro-max · oimiragieo bundle

    UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.
    0
    repo stars
43. ▌
    mengto-landing-page · oimiragieo bundle

    Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
    0
    repo stars
44. ▌
    mengto-marquee-loop · oimiragieo bundle

    Use when applying seamless infinite marquee loops with duplicated items for logo strips, tickers, or continuous horizontal content.
    0
    repo stars
45. ▌
    mengto-pricing-page · oimiragieo bundle

    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.
    0
    repo stars
46. ▌
    stitch-react-native · oimiragieo bundle

    Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
    0
    repo stars
47. ▌
    stitch-taste-design · oimiragieo bundle

    Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
    0
    repo stars
48. ▌
    threejs-interaction · oimiragieo

    Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
    0
    repo stars
49. ▌
    cinematic-3d-website · oimiragieo bundle

    Use when building a scroll-driven cinematic 3D landing experience for any brand: AI-generated photoreal frames displaced into real 3D by depth maps, a scroll-scrubbed camera fly-through with weighted-leg pacing and per-leg camera moves, mouse parallax, explode-on-scroll shatter transitions, an ember particle field, warp streaks, a live in-scene terminal that runs a REAL product demo, a branded preloader, an exit handoff into the page below, a self-hosted display typeface, phone gyro parallax, and opt-in synthesized ambient sound. Covers 2K image generation via OpenRouter, depth maps, the WebGL engine, chrome (nav/consent) integration, the observe-first verify loop, and the flag-off ship posture.
    0
    repo stars
50. ▌
    mengto-company-logos · oimiragieo bundle

    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.
    0
    repo stars
51. ▌
    mengto-corner-lasers · oimiragieo bundle

    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.
    0
    repo stars
52. ▌
    mengto-glass-dark-ui · oimiragieo bundle

    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 multi-column workspace shells; prefer over mengto-glass-dark-mode-clock when there are no clock dials; prefer over mengto-blue-laser-clean-glass-layout when gradient borders matter more than blue laser atmosphere.
    0
    repo stars
53. ▌
    mengto-masked-reveal · oimiragieo bundle

    Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
    0
    repo stars
54. ▌
    mengto-thinking-orbs · oimiragieo bundle

    Add accessible animated AI loading and agent-status indicators with the React thinking-orbs library. Use when a chat, copilot, voice, search, generation, or tool-running interface needs a semantic working, searching, solving, listening, composing, or shaping state; when replacing a generic spinner with an AI activity orb; or when implementing the library's size, theme, speed, pause, reduced-motion, and canvas behavior.
    0
    repo stars
55. ▌
    threejs-fundamentals · oimiragieo

    Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
    0
    repo stars
56. ▌
    ui-fix-observe-first · oimiragieo bundle

    Use when fixing, auditing, improving, or building any web UI — before reading or editing component code. Fires on contrast/a11y/overflow/responsive/hover- focus/layout complaints, polish, audit, or any visual change. Never diagnose a UI defect from code alone: render at real viewports, measure (axe / contrast / a11y tree / console / keyboard / reflow), then cite the measurement.
    0
    repo stars
57. ▌
    aura-screenshot-clone · oimiragieo

    Use when the user wants to clone or adapt a UI pattern from any website into gotcontext.ai, or asks to "build something like X", "make our nav look like Y", or "clone that component". Prefer aura.build Pro when available; without a Pro subscription, skip Aura and go straight to Phase 2.5 direct rebuild. Aura's clone is now NATIVE — paste a URL or drag a screenshot into aura.build and it generates React/Tailwind directly; the Anima/Chrome-extension flow is only a fallback for login-gated pages Aura can't fetch server-side.
    0
    repo stars
58. ▌
    mengto-editorial-tech · oimiragieo bundle

    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 detailing and media bands matter as much as the editorial grid.
    0
    repo stars
59. ▌
    mengto-falling-leaves · oimiragieo bundle

    Use when building falling leaves that read as leaves (not confetti): each leaf tumbling on its own axis with sideways slip driven by that tumble. Covers 2D canvas and instanced 3D, recycling, density maths, depth layering, tone-mapped colour, reduced motion, and visibility pausing—for maple, sakura, blossom, ash, or snowfall shapes.
    0
    repo stars
60. ▌
    mengto-number-details · oimiragieo bundle

    Use when adding decorative 01, 02, 03 numeric detail markers for section indexing or editorial rhythm.
    0
    repo stars
61. ▌
    mengto-unicorn-studio · oimiragieo bundle

    Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).
    0
    repo stars
62. ▌
    stitch-code-to-design · oimiragieo bundle

    Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
    0
    repo stars
63. ▌
    stitch-enhance-prompt · oimiragieo bundle

    Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
    0
    repo stars
64. ▌
    mengto-container-lines · oimiragieo bundle

    Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.
    0
    repo stars
65. ▌
    mengto-globe-particles · oimiragieo bundle

    Create a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc. Use when a design needs a premium planetary, orbital, synthesized data-globe effect rendered with real WebGL/Three.js particles, not generic starfields or full page layout changes.
    0
    repo stars
66. ▌
    mengto-skeuomorphic-ui · oimiragieo bundle

    Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling.
    0
    repo stars
67. ▌
    mengto-webgl-3d-object · oimiragieo bundle

    Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.
    0
    repo stars
68. ▌
    stitch-generate-design · oimiragieo bundle

    Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities.
    0
    repo stars
69. ▌
    threejs-postprocessing · oimiragieo

    Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
    0
    repo stars
70. ▌
    mengto-beam-glow-states · oimiragieo bundle

    Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.
    0
    repo stars
71. ▌
    mengto-book-serif-index · oimiragieo bundle

    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.
    0
    repo stars
72. ▌
    mengto-corner-diagonals · oimiragieo bundle

    Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.
    0
    repo stars
73. ▌
    mengto-progressive-blur · oimiragieo bundle

    Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.
    0
    repo stars
74. ▌
    stitch-react-components · oimiragieo bundle

    Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
    0
    repo stars
75. ▌
    stitch-upload-to-stitch · oimiragieo bundle

    Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to Stitch, particularly when direct MCP tool calls fail or truncate due to base64 token limits.
    0
    repo stars
76. ▌
    claude-design-adaptation · oimiragieo

    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 adaptation starts.
    0
    repo stars
77. ▌
    mengto-animation-systems · oimiragieo bundle

    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.
    0
    repo stars
78. ▌
    mengto-aura-asset-images · oimiragieo bundle

    Use when you need high-quality stock-style images from Aura Assets (aura.build/assets) similar to Unsplash for design mockups and marketing: backgrounds, abstract wallpapers, architecture, portraits, and headshots. Includes a workflow for searching by tag on aura.build/assets and returns 5 real image URLs per category plus practical guidance for using different resolutions and aspect ratios.
    0
    repo stars
79. ▌
    mengto-beautiful-shadows · oimiragieo bundle

    Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.
    0
    repo stars
80. ▌
    mengto-css-alpha-masking · oimiragieo bundle

    Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.
    0
    repo stars
81. ▌
    mengto-dither-background · oimiragieo bundle

    Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overlays.
    0
    repo stars
82. ▌
    mengto-gooey-blob-system · oimiragieo bundle

    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 merging is required.
    0
    repo stars
83. ▌
    stitch-extract-design-md · oimiragieo bundle

    Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."
    0
    repo stars
84. ▌
    mengto-framed-grid-layout · oimiragieo bundle

    Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial, technical, or guide-border web layouts.
    0
    repo stars
85. ▌
    mengto-product-proof-saas · oimiragieo bundle

    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, honest pricing, and FAQ handoffs.
    0
    repo stars
86. ▌
    mengto-solar-duotone-bold · oimiragieo bundle

    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.
    0
    repo stars
87. ▌
    mengto-animation-on-scroll · oimiragieo bundle

    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.
    0
    repo stars
88. ▌
    mengto-css-border-gradient · oimiragieo bundle

    Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
    0
    repo stars
89. ▌
    mengto-liquid-metal-border · oimiragieo bundle

    Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.
    0
    repo stars
90. ▌
    mengto-reveal-hover-effect · oimiragieo bundle

    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 visible while another treatment follows an eased pointer.
    0
    repo stars
91. ▌
    stitch-extract-static-html · oimiragieo bundle

    Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.
    0
    repo stars
92. ▌
    stitch-manage-design-system · oimiragieo bundle

    Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
    0
    repo stars
93. ▌
    stitch-react-vite-dashboard · oimiragieo bundle

    Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
    0
    repo stars
94. ▌
    mengto-atmosphere-background · oimiragieo bundle

    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.
    0
    repo stars
95. ▌
    mengto-background-grid-webgl · oimiragieo bundle

    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.
    0
    repo stars
96. ▌
    mengto-glass-dark-mode-clock · oimiragieo bundle

    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 workspace shells; prefer over mengto-blue-laser-clean-glass-layout when dials matter more than a blue laser atmosphere; prefer over mengto-glass-dark-ui when calibration dials matter more than gradient-border glass cards.
    0
    repo stars
97. ▌
    mengto-pointer-trail-emitter · oimiragieo bundle

    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 fallbacks—for wisps, sparks, embers, comet tails, plankton, or dust.
    0
    repo stars
98. ▌
    mengto-staggered-word-reveal · oimiragieo bundle

    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 IntersectionObserver or in-view detection.
    0
    repo stars
99. ▌
    mengto-dither-laser-dark-mode · oimiragieo bundle

    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 ordered dither texture is the surface cue, not frosted glass dashboards.
    0
    repo stars
100. ▌
     mengto-optimize-threejs-games · oimiragieo bundle

     Use when profiling, diagnosing, or improving Three.js or WebGL game performance without regressing gameplay—frame-time drops, CPU/GPU pressure, draw calls, texture/geometry budgets, animation loops, adaptive quality, mobile performance, and browser performance verification.
     0
     repo stars