skills.rest
kwannoel
kwannoelCOMMUNITY
Explore all skills by this author →
Website𝕏@kwannoelGitHub

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
One-click install
npx skills add https://github.com/kwannoel/the-controller --skill the-controller-feedback-widget
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
causify-aicausify-ai
144

github.triage_bug

Analyzes GitHub issues to determine status, root cause, difficulty and suggested actions.

Official
Basic
wukangcheng2944wukangcheng2944

icon-finder

Search six Iconify libraries and deliver icons as SVG or components.

Community
Intermediate
richardadonnellrichardadonnell
45

sentry-setup-logging

Configure Sentry structured logging for JavaScript, Python, and Ruby projects.

Community
Intermediate