Creates accurate frontend implementations from visual references while maintaining design consistency. Use when user provides Figma URLs, screenshots, design images, requests visual implementation from reference, or asks to build UI matching a design. Automatically checks existing design intent patterns before implementation.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Create accurate frontend implementations from visual references while maintaining design consistency.
Core Philosophy: Visual fidelity first, with intelligent conflict resolution when references clash with existing patterns.
Before any implementation:
/design-intent/patterns/ directoryWhen visual references conflict with existing design intent:
For complex designs, break down into:
Each section analyzed for: layout, spacing, typography, responsiveness, visual treatment.
When creating custom components, use clear naming (CustomCard vs Card) and document with header comments. See WORKFLOW.md - Custom Component Documentation for the documentation template.
Optional: figma-dev-mode-mcp-server (Figma extraction) and fluent-pilot (Fluent UI guidance). Works without MCPs using screenshots.
Triggered by:
/design-intent workflow (automatic invocation)When invoked from /design-intent Phase 5, architecture decisions and exploration are complete. Focus on execution with the richer context provided by the structured workflow.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Create, review, and manage Architecture Decision Records (ADRs) with auto-numbering, template detection, quality review, and index maintenance. Use when user mentions "ADR", "architecture decision", "document this decision", "create ADR", "review ADR", editing ADR files (docs/adr/, doc/adr/, .adr/), or discussing architectural choices and tradeoffs.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Analyze system architecture, module structure, API contracts, data models, and code patterns. Use when designing systems, reviewing module boundaries, evaluating API designs, analyzing data models, checking pattern conformance, tracing decisions, or reviewing frontend architecture. Triggers: "architecture", "module design", "API design", "data model", "boundaries", "patterns", "decisions", "frontend architecture".
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. Use when user says "create a Stitch prompt", "optimize this for Stitch", "convert this spec to a Stitch prompt", "write a UI prompt", or mentions Google Stitch prompt authoring. Follows Stitch best practices with short, directive prompts focused on screens, structure, and visual hierarchy.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Zero-dependency live-preview server providing an agent↔browser bidirectional companion. Watches a content directory, wraps HTML fragments in a frame template, broadcasts live-reload over WebSocket, and captures browser-side click events to a JSONL file. Use when an agent needs to show HTML to the user in a browser and react to clicks — mockups, design exploration, gallery browsing, multi-select choices, prototype iteration. Triggered by "live preview", "browser companion", "preview server", "browser mockup", "show in browser", "arkhe-preview", or any skill that wants to write HTML fragments and have the user see them reload in real time.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Deletes merged git branches (local and remote) and flags stale unmerged branches for manual review. Use when user mentions "cleanup branches", "delete merged branches", "prune old branches", "remove stale branches", "branch cleanup", or runs /cleanup-branches command.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Interactive Claude Code environment setup wizard. Detects existing configuration, guides through best-practice setup for Global CLAUDE.md, project scaffolding, MCP servers, hooks, custom agents, keybindings, and settings. Use when user runs /devtools:code-env-setup, mentions "setup claude code", "configure claude", "claude code setup", "environment setup", or "initialize claude code".
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.