스킬 찾기

Build particle trails that keep consistent spacing as the pointer speeds up or slows down. Covers distance-based emission, drifting motion, placement in 3D scenes, performance checks, and alternatives for touch, keyboard use, and reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating sparks or wisps that follow the cursor
• Fixing gaps in trails during fast pointer movement
• Keeping trails aligned with the pointer in 3D scenes

Build continuous scrolling rows for logos, testimonials, screenshots, or short tags. The skill explains how to duplicate content, stabilize item widths, soften edges, and accommodate people who prefer reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a continuously scrolling logo row
• Loop screenshots or testimonials
• Add a moving row of tags or feature chips

Design a light interface using warm paper tones within dark outer framing. Coordinate typography, panels, navigation, and motion with fine borders, corner brackets, subtle diagonal textures, and a restrained accent color for active states.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a warm, light interface for a technical product
• Framing a paper-toned screen against a dark background
• Coordinating app mockups and transcript panels

Design SaaS interfaces with warm paper tones, orange accents, rounded forms, and layered product illustrations. Apply a consistent visual direction across onboarding, cards, buttons, and motion, with adjustable warmth, softness, and visual detail.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Design a warm, paper-toned signup screen
• Unify forms, cards, and button styling
• Pair onboarding forms with product illustrations

Build interactive 3D globe visualizations with globe.gl, displaying locations, connections, regions, and labels. The skill guides setup in HTML or React, explains data fields for each layer, and addresses sizing and mobile performance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Plot locations on a 3D globe
• Show connections between locations
• Overlay regional data and labels

Create Three.js game effects that clearly communicate attacks, hits, damage, and status changes. Define each effect’s purpose and lifetime, limit resource use, and test overlapping effects, repeated triggers, low-quality settings, and reduced-motion alternatives.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Distinguish attack warnings from hit effects
• Create damage and status feedback
• Limit particle counts during repeated attacks

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating particle trails for cursor and touch movement
• Making pollen or dust rise from a surface
• Adding particle bursts triggered by a keyboard-accessible button

Build reusable enemy types and attack sets for Three.js action games. Separate enemy definitions from live state, standardize models and hit detection, and validate combat timing, placeholder assets, and desktop and mobile encounters.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding enemies through reusable data definitions
• Separating enemy data from live combat state
• Standardizing models and temporary replacements

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Tuning attack, guard, and dodge timing
• Checking hit detection and combat feedback
• Designing boss phases and defensive choices

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Releasing a tested web game
• Checking controls and assets in production
• Recording release evidence and a rollback target

Create SVG illustrations centered on one physical object, with white faces, teal sides, dark outlines, and hard shadows. Use this consistent, people-free style for onboarding steps, empty states, feature cards, and product imagery.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Object illustrations for empty states
• Artwork for onboarding steps
• Cards explaining product features

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Turn a rough screen idea into a detailed generation prompt
• Keep landing page and onboarding designs visually consistent
• Compare variations in accent color or card arrangement

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Removing unnecessary decoration from an existing page
• Keeping new components consistent with the design system
• Checking content hierarchy and primary actions

Add a white, twinkling dotted trail that follows the mouse behind website content. The skill guides WebGPU rendering, which uses the graphics processor, with static backgrounds for unsupported devices and accessibility preferences.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a mouse-following trail to a hero section
• Create an interactive contact section background
• Keep a static background on touch devices

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a tech-style background with depth
• Add gentle mouse-responsive camera movement
• Tune fading grid lines and sparse particles

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding subtle depth to form controls and compact cards
• Styling shadows for panels and popovers
• Giving hero media and modal-like containers stronger elevation

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a sky-blue opening section
• Creating a spacious product introduction page
• Coordinating white type and subtle framing

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Design a book-like reader for literary content
• Create an archive or manuscript viewing interface
• Organize research material with indexes and annotations

Design and build marketing sites, portfolios, and landing pages with original imagery, coordinated typography, and GSAP animations. The workflow also covers accessible interactions, media sourcing, performance limits, and static alternatives when motion or graphics are unavailable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a landing page with coordinated imagery and motion
• Create a portfolio with a distinctive visual direction
• Design accessible scroll animations

Create SVG illustrations, a scalable vector image format, with thick navy outlines, vivid colors, and chunky depth. Combine a cartoon character with overlapping props for product screens and marketing cards, then render, review, and refine the artwork.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrating 404 and error pages
• Creating onboarding illustrations
• Designing blog header artwork

Build and test Three.js games for mobile browsers, covering touch controls, screen orientation, readable game information, and device-appropriate graphics. Refine movement, actions, inventory interactions, and performance through checks of real mobile browser behavior.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing touch movement and action controls
• Adapting game screens to portrait and landscape
• Tuning graphics quality for mobile devices

Create SVG illustrations, a scalable vector image format, of people working in airy rooms or terraces. Use thin indigo outlines, mostly white shapes, and restrained color accents, with reusable drawing parts and checks for consistent scenes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrating remote work scenes
• Depicting team discussions at a whiteboard
• Creating onboarding illustrations

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrations for empty states and 404 pages
• Playful figures for onboarding screens
• Artwork for blog headers and launch announcements

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.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding characters or equipment to the Vesperfall catalog
• Pairing transparent PNG cards with live 3D previews
• Reviewing animations and ground contact on an isolated page