菜单
SkillsMP 已收集 oimiragieo/gotcontext-frontend-developer 中的 458 个 Skill。打开任一 Skill 可查看来源和详情。
已展示 40 / 458 个已收集 Skill。
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,…
原文语言：英语
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
原文语言：英语
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
原文语言：英语
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
原文语言：英语
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,…
原文语言：英语
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…
原文语言：英语
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…
原文语言：英语
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,…
原文语言：英语
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 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…
原文语言：英语
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…
原文语言：英语
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 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.
原文语言：英语
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.
原文语言：英语
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…
原文语言：英语
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.
原文语言：英语
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.
原文语言：英语
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 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…
原文语言：英语
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…
原文语言：英语
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 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.
原文语言：英语
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 applying seamless infinite marquee loops with duplicated items for logo strips, tickers, or continuous horizontal content.
原文语言：英语
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.
原文语言：英语
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…
原文语言：英语
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.
原文语言：英语
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…
原文语言：英语
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 designing a monochrome technical wireframe system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.
原文语言：英语
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…
原文语言：英语
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
原文语言：英语
Use when a single section needs a restrained particle atmosphere (petals, leaves, snow, sparks, confetti, dots, paper, icons, or brand fragments) with configurable density, gravity, wind, sway, recycling, pointer disturbance, and reduced-motion…
原文语言：英语
Use when building, tuning, or QA-testing a Three.js game for mobile web: touch movement and actions, target selection, touch inventory, safe areas, portrait/landscape HUD, battery/performance budgets, and real-device browser verification.
原文语言：英语
Use when building or refactoring reusable, data-driven enemy archetype and moveset systems for Three.js action games—content schemas, model/rig conventions, combat timing and contact contracts, runtime state boundaries, placeholders, fixtures, or playthrough…
原文语言：英语
Use when building scroll-controlled real-time Three.js experiences as one persistent 3D world whose camera, lighting, atmosphere, materials, objects, DOM story, and interactions evolve across authored chapters (scrollytelling, portfolios, product stories,…
原文语言：英语