---
name: workshop-feedback-analyzer
description: Transform raw workshop/presentation feedback form exports into a stunning interactive HTML dashboard. Use when a user (speaker, trainer, facilitator) pastes or uploads feedback CSV/text data from forms like Tally, Typeform, Google Forms, etc. Generates an interactive single-file HTML page with score overview, audience sentiment, feedback buckets, aha moments, company/org breakdown, and actionable insights.
---

# Workshop Feedback Analyzer Skill

This skill converts raw feedback form data into a beautiful, interactive single-file HTML analytics dashboard.

## When to Use
- User pastes raw feedback data (from Tally, Typeform, Google Forms, etc.)
- User uploads a CSV or text export of survey responses
- User asks for "feedback summary", "workshop results overview", or similar

## What to Build

Always produce a **single self-contained HTML file** (no external dependencies except Google Fonts CDN) saved to `/mnt/user-data/outputs/`. The file must work when opened offline.

## Design Direction

Default palette (replace with your own brand colours). Clean, white-based, professional:

### Brand Colours
```
--yellow:     #f3af00   /* Primary accent — CTAs, highlights, scores */
--blue:       #207796   /* Secondary — bars, links, badges */
--light-blue: #dff3fa   /* Card backgrounds, subtle fills */
--charcoal:   #201600   /* Primary text, headings */
--white:      #ffffff   /* Base background */
```

### Typography
- Font: **'Muli'** (import from Google Fonts) — use for all text
- Headings: Muli 700–800, charcoal
- Body: Muli 400, charcoal
- Labels: Muli 600, uppercase, letter-spacing

### Aesthetic
- **Light mode** — white base (#ffffff), not dark
- Cards: white background with subtle `#dff3fa` tint or light border
- Score/hero numbers: `#f3af00` yellow
- Positive bars/accents: `#207796` blue
- Neutral/warning: `#f3af00` yellow
- Negative: a soft red (#e05555) for critical feedback only
- No dark backgrounds — keep everything clean and airy
- Thin `1px` borders in `rgba(32,119,150,0.15)` (blue-tinted)
- Subtle box-shadows: `0 2px 12px rgba(32,23,0,0.06)`

## Data Parsing

Parse the raw input to extract these fields per respondent:
1. **Rating** (numeric, usually out of 5 — convert to /10 by doubling)
2. **Comments/Feedback** (free text)
3. **Organization/Company** (for audience breakdown)
4. **Name** (for personalization if needed)
5. **Timestamp** (if available)

Handle messy data gracefully: ignore blank/NA/N/A comments, normalize rating formats.

## Dashboard Sections to Build

### 1. Hero Stats Row (top of page)
- **Average Score** — large display, out of 10 (double the /5 rating)
- **Total Responses** — count
- **5-Star Responses** — count + percentage
- **Organizations Represented** — unique company count

### 2. Score Distribution Bar Chart
- Pure CSS/JS bar chart showing count at each rating (1-5 stars shown as bars)
- Color-coded: red for 1-2, amber for 3, green for 4-5
- Animated on load

### 3. Feedback Buckets (Thematic Analysis)
Analyze all free-text comments and group into themes. Common buckets for workshop feedback:
- ✅ **Pacing / Too Fast** — complaints about speed
- 🔥 **Content Quality** — praise for depth, knowledge, relevance  
- ⏱️ **Time / Wanted More** — wished for longer session or more practice
- 💡 **Practical Application** — comments about real-world use
- 🌟 **Speaker Quality** — direct praise/critique of presenter
- 📚 **Overwhelm** — too much info at once

For each bucket, show: count, example quotes (anonymized), sentiment badge.

### 4. Aha Moments Wall
Extract the most insightful, specific, and enthusiastic comments. Filter out generic "NA" / "Good" responses. Display as a visual quote wall with respondent first name + company.

Criteria for aha moments:
- Comment is >15 words
- Contains specific praise, insight, or constructive suggestion
- Reveals something about audience mindset or transformation

### 5. Organization Breakdown
Horizontal bar chart or bubble chart of which companies sent the most attendees.
Sort by count descending. Show top 10.

### 6. Actionable Insights Panel
Based on the data, generate 3-5 bullet insights the speaker can act on:
- "X% of attendees wanted more hands-on time"
- "Pacing was flagged by Y people — consider adding more pauses"
- "The [specific topic] resonated most — lean into this in future sessions"
- Highlight any standout companies for potential follow-up

### 7. Raw Response Feed (collapsible)
Show all responses in a scrollable list with rating badge, name, company, comment.
Filter buttons: All / 5★ / 4★ / 3★ / Below 3★

## Implementation Requirements

```html
<!-- Structure -->
<!DOCTYPE html>
<html>
<head>
  <!-- Google Fonts: Muli (400, 600, 700, 800) -->
  <!-- All CSS inline in <style> tag -->
</head>
<body>
  <!-- All JS inline in <script> tag -->
  <!-- No external JS libraries, use vanilla JS only -->
  <!-- Data hardcoded as a JS const array at top of script -->
</body>
</html>
```

- Animations: CSS keyframes for cards fading in on load, bars growing
- Responsive: Works on desktop and tablet
- Interactive: Clickable filters, expandable sections
- Print-friendly: Include `@media print` styles

## Output

Save to: `/mnt/user-data/outputs/workshop-feedback-[event-name-or-date].html`

Then use `present_files` to share it.

## Quality Checklist

Before delivering, verify:
- [ ] Average score is correct (check math)
- [ ] All organizations are listed
- [ ] No raw "NA" comments shown in aha moments
- [ ] All bars/charts render without errors
- [ ] File opens correctly as standalone HTML
- [ ] Looks polished and executive-grade