디자인 스킬

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

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

Record browser or Web UI interaction demos as optimized GIFs using the available built-in browser, state-based frame capture, and deterministic encoding, then publish to a dedicated assets branch when the task includes attaching the GIF to a pull request. Use when asked to make, record, or generate a GIF that demonstrates a browser workflow, and for every pull request that changes product-user-visible GUI behavior, which MUST include a GIF recorded from the pull request's real server and model flow.

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

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

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

A relentless interview to sharpen a plan or design.

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

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

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

Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM message receive, reactions, chat member changes, etc.). Use for Lark bots, real-time message processing, long-running subscribers, streaming webhook/push handlers. Supports `--max-events` / `--timeout` bounded runs and a stderr ready-marker contract — designed for AI agents running as subprocesses.

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

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

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

Phase 5 part of disease-market-sizing-orchestration. Injects consulting palette (navy/gold/blue) + base CSS + floating TOC + section dividers into raw report HTML. Validates token coverage ≥60% (warn) and floating TOC li ≥5 (block). Use AFTER content-verification passes, BEFORE report-bundle-builder build_all_deliverables.

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

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

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

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Use when building iOS 26 Liquid Glass UI in SwiftUI, UIKit, or WidgetKit.

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

Design and review client UI changes — visual token discipline, reuse-before-adding, feedback surfaces (toast vs in-place notice vs empty state), overlay and menu safety, platform window adaptation, loading states, and error copy placement. Use when adding or changing product-user-visible GUI behavior, or when reviewing such a PR.

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

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows, icons, icon stroke weight, icon states, motion restraint.

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

Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

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

网页需要产品清晰度、信息层级、响应式或视觉系统美化、重设计或设计审计时使用。

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

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

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

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

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

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

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

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.

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

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

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

Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes.

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

Generate sitemap and wireframe specifications from project-config.json and produce UX planning artifacts.

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

Start a project on the Visual Stack — a multi-step setup form captures what's being built, recommends a stack, and either instantiates the vstack-template-base template, sets up a specs-and-design-only workspace, or records an existing codebase without touching it. Use when the user wants to start a new project, scaffold a repo, set up a codebase from the Cavalry template, pick a stack or add-ons, run Day-1 setup, or bring an existing app onto the visual stack.

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

Compatibility entry for Visual Stack's former /vstack:go command. Runs the wireframe and UI review tool, now called review. Use only when the user invokes /vstack:go.

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

Alias for Visual Stack's review tool, which used to be called wireframe. Builds a UI wireframe and opens it in an interactive review workspace, or reviews an app that is already running. Use only when the user invokes /vstack:wireframe or $vstack:wireframe.

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