원클릭으로 Manus에서 모든 스킬 실행

add-ui-feedback

스타0

포크0

업데이트2026년 2월 23일 02:31

Detect when a complete HTML page has been written and offer to add a visual feedback/annotation overlay. The overlay lets users click UI elements to annotate them, then copy structured feedback for Claude with element location and selector info.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

techops-services

techops-services/claude-plugins

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

웹 개발자컴퓨터 및 수학직·SOC 15-1254

SKILL.md

readonly

name	add-ui-feedback
description	Detect when a complete HTML page has been written and offer to add a visual feedback/annotation overlay. The overlay lets users click UI elements to annotate them, then copy structured feedback for Claude with element location and selector info.

After Claude writes a complete HTML page, offer to inject the UI feedback system. When the user accepts, read the injectable bundle from the plugin assets and inject it into the HTML file.

<trigger_conditions> Activate when ANY of these are true:

Claude just wrote an .html file that contains <!DOCTYPE or <html tag
User says "add feedback", "add annotations", "let me annotate this", "I want to give feedback on this page"
User says "watch for feedback", "wait for annotations" </trigger_conditions>

<do_not_trigger> Do NOT activate when:

The HTML file already contains ui-feedback-system (already injected)
The file is a template, partial, or component (no doctype/html tag)
The file is inside node_modules/, .git/, __tests__/, or test/ directories
The user already declined to add feedback for this file in the current session
The file was read but not written by Claude in this session </do_not_trigger>

1. **Detect HTML file creation**: After writing an .html file, check if it looks like a complete page and does NOT already contain the feedback system.

Offer to add feedback:

I created an HTML page. Want me to add a feedback overlay so you can annotate
UI elements and copy structured feedback?

If user accepts: Run /add-feedback <path> to inject the feedback system.
If user declines: Acknowledge and do not offer again for this file.
Listen for feedback (if MCP bridge available):
- Call the feedback_watch MCP tool to wait for annotations from the browser
- When feedback arrives, process the annotations:
  - Read the source file mentioned in the feedback
  - Apply the requested changes based on annotation text and element selectors
  - Call feedback_respond MCP tool with a summary of changes made
- After responding, call feedback_watch again to continue listening for more feedback
- If the user says they're done, stop the watch loop

<success_criteria>

Only offer for complete HTML pages, not fragments
Never offer if already injected
Offer exactly once per file per session
If accepted, feedback system works immediately on page load </success_criteria>

이 저장소의 다른 Skills

같은 저장소

feedback-watch

techops-services/claude-plugins

Watch for UI feedback annotations from the browser via the MCP bridge. Processes incoming annotations, makes code changes, and responds back to the browser. Runs in a loop until the user stops.

2026-02-230

execution-monitor

techops-services/claude-plugins

Monitor and debug KeeperHub workflow executions. Activate when users ask about execution status, want to see logs, or need help debugging failed workflows.

2026-02-180

plugin-explorer

techops-services/claude-plugins

Explore available KeeperHub plugins and integrations. Help users discover what actions are available, how to configure them, and what integrations are set up.

2026-02-180

template-browser

techops-services/claude-plugins

Browse and deploy pre-built KeeperHub workflow templates. Activate when users want to find existing automations or deploy ready-made templates rather than building from scratch.

2026-02-180

workflow-builder

techops-services/claude-plugins

Help users create KeeperHub workflows from natural language descriptions. Activate when users want to build automations, monitor contracts, set up alerts, or create workflow pipelines.

2026-02-180

techops-services/claude-plugins

Detect when an HTML file has been created during the conversation and offer to share it as a live page using the share CLI. Activate when the user asks to publish, host, or share HTML content, or when a complete HTML page has just been written to disk.

2026-02-180

name	add-ui-feedback
description	Detect when a complete HTML page has been written and offer to add a visual feedback/annotation overlay. The overlay lets users click UI elements to annotate them, then copy structured feedback for Claude with element location and selector info.

After Claude writes a complete HTML page, offer to inject the UI feedback system. When the user accepts, read the injectable bundle from the plugin assets and inject it into the HTML file.

<trigger_conditions> Activate when ANY of these are true:

Claude just wrote an .html file that contains <!DOCTYPE or <html tag
User says "add feedback", "add annotations", "let me annotate this", "I want to give feedback on this page"
User says "watch for feedback", "wait for annotations" </trigger_conditions>

<do_not_trigger> Do NOT activate when:

The HTML file already contains ui-feedback-system (already injected)
The file is a template, partial, or component (no doctype/html tag)
The file is inside node_modules/, .git/, __tests__/, or test/ directories
The user already declined to add feedback for this file in the current session
The file was read but not written by Claude in this session </do_not_trigger>

1. **Detect HTML file creation**: After writing an .html file, check if it looks like a complete page and does NOT already contain the feedback system.

Offer to add feedback:

I created an HTML page. Want me to add a feedback overlay so you can annotate
UI elements and copy structured feedback?

If user accepts: Run /add-feedback <path> to inject the feedback system.
If user declines: Acknowledge and do not offer again for this file.
Listen for feedback (if MCP bridge available):
- Call the feedback_watch MCP tool to wait for annotations from the browser
- When feedback arrives, process the annotations:
  - Read the source file mentioned in the feedback
  - Apply the requested changes based on annotation text and element selectors
  - Call feedback_respond MCP tool with a summary of changes made
- After responding, call feedback_watch again to continue listening for more feedback
- If the user says they're done, stop the watch loop

<success_criteria>

Only offer for complete HTML pages, not fragments
Never offer if already injected
Offer exactly once per file per session
If accepted, feedback system works immediately on page load </success_criteria>