본문으로 건너뛰기
cccskills
무료GitHub에 공개

live-preview-canvas

A prototyping skill that generates a local HTML mock with a built-in feedback layer, allowing users to drop visual comments (red dots) for UI fixes.

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

설치 방법 보기

포함된 파일(4)

  • SKILL.md1.4 KB
  • examples/preview_interactive_dashboard.html20.1 KB
  • resources/template.html14.3 KB
  • scripts/base_template.html5.3 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

live-preview-canvas

live-preview-canvas is an AOS (BDB Agent OS) skill designed to bridge the gap between design and implementation feedback. It combines rapid local prototyping with direct visual feedback.

Workflow

  1. Generate Prototype: The agent uses the base_template.html to generate a local HTML mock of a UI component or page.
  2. Review & Comment: The user opens the HTML file in their browser. They can click anywhere on the UI to leave a visual comment (represented by a red dot) and enter text detailing what needs to be fixed or changed.
  3. Export Feedback: The user clicks the "Export Feedback" button to generate a JSON payload of all comments, including coordinates and text.
  4. Agent Action: The agent reads the exported feedback (either pasted back by the user or saved to a file) and correlates the visual comments with the UI structure to apply precise fixes.

Usage

When a user requests a UI prototype or a visual iteration, copy the contents of scripts/base_template.html and inject your HTML/CSS/JS for the prototype into the designated areas. Instruct the user to open the file, click to leave feedback, and share the exported JSON back for the next iteration.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.

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

hybridlabor-api/aos62026년 10월 16일 업데이트

Use when a hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).

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

hybridlabor-api/aos62026년 10월 16일 업데이트

Reference for how BDB structures autonomous software engineering work — the seven-node dispatcher graph (Architect, TechLead, UI/UX, Engineering, Media/EventTech, Reviewer, Shipping) that /startcycle-graph actually runs. Use when you need the high-level lifecycle framing without inventing your own process.

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

hybridlabor-api/aos62026년 10월 16일 업데이트

Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling.

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

hybridlabor-api/aos62026년 10월 16일 업데이트

Harness patterns for coding agents — memory, permissions, context engineering, delegation, skills, hooks, bootstrap.

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

hybridlabor-api/aos62026년 10월 16일 업데이트

agenttrail: live map of a multi-agent build in the browser: which plan component is being worked on, by which agent or harness, what is done and what is stuck. Use when a multi-agent pipeline starts (/startcycle, /startcycle-graph, /teamwork-preview) or after a plan-canvas approve, when the user asks to see what the agents are doing ("live map", "build board", "who is running now"), or by yourself whenever a multi-agent run is under way — no user prompt needed.

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

hybridlabor-api/aos62026년 10월 16일 업데이트

hybridlabor-api의 스킬 모두 보기

이 스킬의 문제 신고