스킬 찾기

Show an app working on a web page by drawing it live in HTML instead of recording it. A Mac-style window plays the app step by step, and every frame is a pure function of one clock, View(t), drawn on a fixed 1200 × 750 stage that one CSS scale fits to any width. The pointer is scripted, labels and pictures come from the real app, a steps bar sits under the window, it plays only while on screen, and reduced motion gets designed end frames. Use when someone wants a product demo, an animated app window or hero, a feature walkthrough, "the UI animated and simulated in HTML", "like a screen recording but HTML", an interactive product tour on a landing or download page, or wants to replace screen recordings, GIFs or MP4s of their UI with crisp live HTML. Also use to build many such windows at once with helper agents, or to scrub, freeze and screenshot them.

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

Reveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability. Use for headlines, quotes, manifestos, product statements, onboarding messages, or editorial passages where scrolling should pace comprehension rather than simulate typing.

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

Turn any 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 behavior. Use for onboarding, checkout, roadmaps, recipes, case studies, service processes, histories, or narratives where progress through the sequence should become visible while scrolling.

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

Create a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems.

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

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.

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

Use Iconify Solar Duotone Bold icon style.

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

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.

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

Ship every change the way the user requires, with the guardrails. Take screenshots of the start, the key moment and the result; give the change its own changelog version with pictures; verify with tests; commit only your own files; merge with the latest main and push as a fast-forward; publish that exact main live; confirm each step; and report measured sizes, asking before any upload over 50 MB. Use at the end of every change (feature, fix, tweak, art, balance, polish) and whenever the user says "ship it", "commit", "push", "merge", "publish", "deploy", "go live" or "update the changelog". Project specifics (hosting, the changelog pipeline, merge conflicts) go in an optional local references/<project>.md next to this skill.

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

Build a live Three.js landscape that stays quiet behind a subject — a noise heightfield on a polar grid so resolution follows the lens, ground coloured by slope and moisture rather than by texture, instanced GPU grass whose wind costs nothing on the CPU, scattered stones, a gradient sky dome, a star field you can actually see, and a time-of-day system that cross-fades instead of cutting. Use for hero backdrops, product stages, scroll worlds, or any scene where a building, object, or figure has to sit in a place rather than float on a gradient.

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

Generate architecture procedurally in Three.js and film it assembling — a small geometry vocabulary that builds pagodas, castles, domes and spires from parameters instead of mesh files, hip roofs with flying eaves driven by a single profile function, and a clipping-plane build animation where everything below a rising line is finished work and scaffolding stands above it. Use for construction studies, architectural title sequences, procedural landmarks, or any hero object that should build itself rather than fade in.

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

Oversee the other Claude threads (sessions) working on the same project. Check what each is doing, confirm finished work is merged to main, has its changelog entry with screenshots, and is live, archive threads that are truly done, and restart or flag threads that were cut off. Use when the user says "check threads", "check new changes", "are the threads merged and pushed", "archive the done threads", or asks what the other sessions are up to. Project specifics (changelog format, live site, capture folders) go in an optional local references/<project>.md next to this skill.

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

Create a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.

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

Put weather into a Three.js scene that reads as weather — rain anchored inside the frustum, a storm that is the rain leaned on rather than a second system, lightning on its own light with thunder scheduled by distance, snow that blows up into blizzards and keeps settling until the ground goes white, wet ground with puddles and splashes, and looping ambience that has no seam. Use for scene atmosphere, seasonal states, hero backdrops, or any world where clear/rain/storm/snow needs to be a control the viewer can turn.

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

Use when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.

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

Create a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.

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

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and backward with native scrolling.

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

Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography. Use when the user asks for a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or story-led alternative to ordinary stacked sections.

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

Show the user real screenshots of the work as it progresses, without being asked. Capture the start, the key moment and the result of every visual change, send them as files with captions as soon as each is ready, and look at every image before sending it. Use on any task with a visible result (UI, pages, games, 3D, charts, motion), when the user says "show me", "screenshots", "keep giving me screenshots" or "where are the screenshots?", and before any report that claims a visual change works.

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

Add cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components. Use when a hero, gallery, or media panel needs a water-ripple mouse effect; when replacing a drifting CSS spotlight or flashlight reveal; or when a prompt says to borrow only the shader interaction from a Shaders.com reference while preserving the current brand, image, copy, and layout.

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

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.

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

Score work out of 10 against a clear rubric, then improve it round by round until every item reaches the target score the user named (for example "get it to 8 out of 10", "bring everything under 6 up to 6+"). Covers anchored rubrics, measurable criteria, independent or blind judging, before/after scorecards, and honest reporting of anything still short. Use whenever the user asks to score, rate, grade or judge something out of 10, names a target score, or asks "what would make this a 9?".

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

Use when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).

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

Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.

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

Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.

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