the-controller-feedback-widget

Enable an in-app feedback widget for Next.js apps with screenshots and GitHub issues.

13|2|Updated Mar 1, 2026

Search Tags:#feedback #next.js #github issues #screenshot #bug reporting #annotation

Ready to run

npx skills add https://github.com/kwannoel/the-controller --skill the-controller-feedback-widget

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: the-controller-feedback-widget
Source: https://github.com/kwannoel/the-controller/tree/main/skills/the-controller-feedback-widget
Command: npx skills add https://github.com/kwannoel/the-controller --skill the-controller-feedback-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires html2canvas-pro, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of collecting user feedback and bug reports directly within a web application, making it easier to identify and fix issues.

Core Features & Use Cases

In-App Feedback Widget: A floating button allows users to initiate feedback without leaving the application.
Screenshot Capture & Annotation: Users can capture the current view, annotate it with freehand drawing, arrows, rectangles, or crop it.
GitHub Issue Creation: Annotated screenshots and feedback descriptions are automatically submitted as GitHub issues.
Use Case: A user encounters a UI bug. They click the feedback button, capture a screenshot, draw an arrow pointing to the problematic element, add a brief description, and submit. This creates a GitHub issue with all the necessary context for the development team.

Quick Start

Add the feedback widget to your Next.js application by following the setup steps in the documentation.

Frequently Asked Questions about the-controller-feedback-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add an in-app feedback widget to a Next.js application?▼

You can capture and annotate screenshots in Next.js by using the html2canvas-pro dependency to grab the current view, then applying freehand drawing, arrows, rectangles, or cropping tools directly onto the captured image before submission.

Can I automatically create GitHub issues from user bug reports?▼

Yes, you can automatically create GitHub issues from user bug reports by configuring a feedback widget to send the annotated screenshots and text descriptions directly to your repository using the GitHub API integration.

Does the in-app screenshot feedback widget work with shadcn/ui?▼

The in-app screenshot feedback widget is designed to integrate seamlessly with shadcn/ui and lucide-react, allowing you to match your existing UI design system while capturing user feedback and bug reports.

Do I need html2canvas-pro to capture screenshots for bug reporting?▼

Yes, you need html2canvas-pro installed as a dependency to enable the screenshot capturing functionality within the feedback widget, which allows users to grab and annotate the current application view.