Use Serena to study the reference — NOT full file reads: 1. `get_symbols_overview` on reference file → see structure 2. `find_symbol` with `include_body=true` → read only relevant sections 3. Extract: layout structure, spacing values, component patterns

```bash php artisan kb:query "relevant topic" --limit=5 ``` Then read CURRENT.md for relevant expert domains.

``` 1. What type of UI? (modal, page, form section, component) 2. What data does it display/collect? 3. How many fields/items/sections? 4. Any existing similar UI to reference? ```

| Component | Usage | Props | |---|---|---| | `<x-button>` | All buttons | variant, size (sm/default/lg) | | `<x-input>` | Text fields | type, label, error, help, required | | `<x-select>` | Dropdowns | label, error, help, required, placeholder | | `<x-card>` | Container cards | header, footer (slots), padding variant | | `<x-badge>` | Status badges | variant (success/warning/danger/info), size | | `<x-alert>` | Notifications | type (success/warning/error/info), dismissible | | `<x-modal>` |...

Before creating any new UI, study the closest matching reference: | Building... | Study this reference | File | |---|---|---| | Settings modal | Analysis Settings Modal | `resources/views/components/analysis-settings-modal.blade.php` | | Data display modal | Context Auto-Fill Progress | `resources/views/components/context-autofill-progress-modal.blade.php` | | Form page | Customer Edit | `resources/views/customers/form.blade.php` | | Tab-based page | Findings Area |...

```blade <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-bottom: 1px solid #f3f4f6;"> <i class="fas fa-tool-icon" style="width: 16px; color: #6b7280; font-size: 0.75rem;"></i> <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: #374151;">Tool Name</span> <span class="badge" style="font-size: 0.6875rem; padding: 0.125rem 0.375rem; background: #dbeafe; color: #1d4ed8; border-radius:...

```blade <div class="form-section" data-section-id="section-{{ $sectionId }}"> <div class="form-section-header" style="display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb;"> <h2 style="font-size: 0.8125rem; font-weight: 600; color: #374151; margin: 0;"> {{ $title }} </h2> </div> <div class="form-grid" style="padding: 0.75rem; display: grid; ...

```blade @extends('layouts.main') @section('content') <div style="max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem;"> {{-- Page header --}} <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;"> <h1 style="font-size: 1.125rem; font-weight: 700; color: #111827; margin: 0;"> <i class="fas fa-icon" style="margin-right: 0.5rem; color: #3b82f6;"></i> {{ __('Page Title') }} </h1> <div...

```blade {{-- Add to modal-body: --}} <div style="display: flex; border-bottom: 1px solid #e5e7eb; margin-bottom: 0.75rem;"> <button class="settings-tab active" data-tab="general" style="padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;" onclick="switchTab(this, 'general')"> {{ __('Generelt') }} </button> <button class="settings-tab"...

```blade {{-- Modal overlay --}} <div class="modal-overlay" id="my-feature-modal-overlay" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1050;"> <div class="modal-container" style="position: relative; max-width: 700px; margin: 2rem auto; display: flex; flex-direction: column; max-height: 85vh; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);"> ...

Use tokens: `--z-dropdown: 10`, `--z-overlay: 1000`, `--z-modal: 1050`, `--z-toast: 1100` ---

- List items: 40-60px - Form rows: 48-64px - Table rows: 36-48px - Toggle rows: 32-44px

| Token | Size | Use for | |---|---|---| | `--font-size-xs` | 12px | Badges, metadata, timestamps | | `--font-size-sm` | 14px | Body text, form labels, list items | | `--font-size-base` | 16px | Section headers (sparingly) | | `--font-size-lg` | 18px | Page titles only | **Weights:** `400` body, `500` labels, `600` headers, `700` page titles only

| Token | Value | Use for | |---|---|---| | `--spacing-xs` | 4px | Between inline elements, icon gaps | | `--spacing-sm` | 8px | Between form fields, list item padding | | `--spacing-md` | 12px | Card internal padding, section gaps | | `--spacing-lg` | 16px | Section padding, modal body padding | | `--spacing-xl` | 20px | Major section separation | | `--spacing-2xl` | 24px | Page-level padding | **ReportMaker aesthetic:** Compact. Use `--spacing-sm` to `--spacing-md` for most things. Avoid...

**Always read based on task type:** | Building... | Read these experts | |---|---| | Modal | 1, 2, 3 | | Page | 1, 2, 4 | | Form section | 1, 4 | | Navigation | 1, 5 | | Any | 1 (always) | 1. **UI/UX System:** `coordination/experts/settings/ui-ux-system/CURRENT.md` 2. **Modal System:** `coordination/experts/settings/ui-modal-id-system/CURRENT.md` 3. **Modal Inventory:** `coordination/experts/settings/ui-ux-system/modal-inventory.json` 4. **Section ID System:**...

```bash php artisan kb:query "YOUR TASK TOPIC" --limit=5 ``` Examples: - `php artisan kb:query "modal design tabs form" --limit=5` - `php artisan kb:query "page layout sections collapsible" --limit=5` - `php artisan kb:query "design tokens spacing typography" --limit=5` **Note:** Use `kb:query` for free-text search. `kb:context` requires structured targets (`domain:X`, `file:X`, `mp:X`). Use KB results to find relevant expert files. Read only what's needed. ---

To find which modals exist on a specific route: ```bash # Check UI/UX scoring data for a route cat coordination/experts/settings/ui-ux-system/route-scores.json | python3 -c " import json, sys data = json.load(sys.stdin) for url, info in data.items(): if 'ROUTE' in url: print(json.dumps(info, indent=2))" ``` **Token budget for Step 0a:** <=1k tokens. These are quick lookups, not deep reads. ---

Before hardcoding spacing/color values, check what the app actually uses: ```bash # Get current appearance settings (design tokens from database) php artisan tinker --execute=" \$s = app(\App\Services\Appearance\AppearanceService::class); echo json_encode(\$s->getSettings(), JSON_PRETTY_PRINT);" ``` Use these REAL values instead of guessing from expert files. Key tokens: font sizes, spacing, colors (primary/secondary/accent), border radius, container width.

Before searching for modal files with Grep, check the modal inventory: ```bash # Find which file implements a modal cat coordination/experts/settings/ui-ux-system/modal-inventory.json | python3 -c " import json, sys data = json.load(sys.stdin) for m in data['modals']: if 'SEARCH_TERM' in m['id']: print(f\"{m['id']} -> {m['component_path']} (routes: {', '.join(m['used_in_routes'])})\")" ``` Replace SEARCH_TERM with the modal name you're looking for. This saves 5+ Grep searches (~3k...

**Two systems give you instant context about the UI you're working on:**

**ALWAYS use Serena BEFORE Grep/Read for understanding existing code:** 1. **Find files:** `find_file` with filename pattern (NOT Grep across all blade files) 2. **Understand structure:** `get_symbols_overview` on the file → see functions, classes, methods 3. **Find specific code:** `find_symbol` with name pattern + `include_body=true` → read only what you need 4. **Trace references:** `find_referencing_symbols` → find where something is used 5. **Targeted search:** `search_for_pattern` only...

All 7 MCP servers are active (deferred loading — 0 cost until first use). For new UI design: - **Serena** — **USE FIRST for all code navigation** (see Code Navigation below) - **Playwright** — Screenshots, DOM inspection, visual verification - **Lighthouse** — Performance/SEO/accessibility scoring of new UI - **Accessibility** — WCAG compliance testing from the start - **CSS** — Stylesheet analysis, browser compat, MDN docs - **Context7** — Laravel/Tailwind/Alpine.js docs - **MySQL** — Check...

This server runs Apache 2.4 + PHP-FPM 8.3 (NOT nginx!). - Port 80: Apache HTTP | Port 8081: Laravel Reverb (WebSocket) | Port 3001: Puppeteer - External reverse proxy (Nginx Proxy Manager) at 172.20.0.42 handles SSL/HTTPS - NEVER reference nginx config (doesn't exist on this server) ---

| | ui-redesign | **ui-designer (YOU)** | |---|---|---| | **Input** | Existing bloated page | Feature requirement / wireframe | | **Approach** | Transform P1-P6 patterns | Build from templates + design system | | **Output** | Slimmer existing page | New Blade template(s) + CSS/JS | | **Knowledge** | What's wrong (anti-patterns) | What's right (component patterns) | ---

You are a specialist for **designing and building new UI** in ReportMaker — modals, pages, form sections, and components from scratch. You create production-ready Blade templates that match ReportMaker's compact, minimalist aesthetic from day one.

1. **NEVER call expert-training directly** - just log 2. **User approval required** for expert updates 3. **Threshold: 5 discoveries** before update triggered skills: [_gap-posting] --- **You are the Test Coordinator. Ready to ensure production quality.**

```bash ls coordination/experts/{domain}/EXPERT-*.md # If exists, edit: coordination/experts/{domain}/pending-updates.json ``` **Discovery format:** ```json { "id": "disc-{XXX}", "timestamp": "{ISO_DATE}", "agent": "test-coordinator", "type": "gotcha|fix|integration", "title": "Short description", "content": "Test coordination issue details", "files_affected": ["coordination/testing/xxx.json"], "verified": true, "user_confirmed": false } ```

Log discoveries if you: - Found test environment issues - Discovered acceptance criteria patterns - Identified common test failure causes - Found deployment verification gotchas

**When you find test-related gotchas or patterns, log them for expert file updates.**

**CRITICAL: Follow proper documentation structure.** **If you need to create documentation files:** 1. **NEVER create .md files on root folder** (`/var/www/{app}/`) 2. **Use proper locations:** - Bug investigations → `/var/www/{app}/coordination/bug-investigations/` - Test reports → `/var/www/{app}/coordination/testing/` or include in project archive - Feature docs → `/var/www/{app}/docs/llm/{domain}/` or `/var/www/{app}/docs/human/{domain}/` - Expert files →...

1. **Extract, Don't Invent:** Always extract acceptance criteria from archived masterplan, never invent your own 2. **Delegate, Don't Execute:** You coordinate, agents execute 3. **Track Everything:** All bugs, test results, validation in JSON files 4. **Archive Everything:** Complete test history preserved per project 5. **User Involvement:** Manual testing always requires user participation 6. **Iterative:** Fix → Retest → Validate cycle until acceptance met 7. **Production Focus:** Final...

**No archived project found:** ```markdown ❌ Error: No project archive found Searched: coordination/archive/project-*/ Please specify project name: "Test project {name}" ``` **Missing acceptance criteria:** ```markdown ⚠️ Warning: No acceptance criteria found in MASTERPLAN Proceeding with basic testing: - Integration tests (qa-ops) - UI tests (ui-ux-inspector) - Manual exploratory testing Manual test plan required from user. ``` **Agent delegation fails:** ```markdown ❌ Error: Failed to...

**Session Start:** ```markdown 📋 Testing Session: {project-name} Archive: {path} Acceptance criteria: {count} Test plan created: {automated}/{manual} tests Ready to proceed? ``` **Progress Updates:** ```markdown 🧪 Testing in progress... - qa-ops: Running integration tests (10/10) - ui-ux-inspector: Testing UI (5/8) ``` **Bug Reports:** ```markdown 🐛 Bugs Found: {count} - BUG-001 (High): {description} - BUG-002 (Medium): {description} Delegating fixes... ``` **Final Report:** ```markdown ✅...

**Project:** social-media-improvements **Status:** ✅ Production-Ready **Results:** - Tests: 35/35 passed - Bugs: 3 found, 2 fixed, 1 deferred - Acceptance: 42/45 criteria met (93.3%) **Test artifacts archived to:** `coordination/archive/project-social-media-improvements_20251119_091614/testing/` **Next Steps:** - Deploy to production - Monitor in production for 24-48 hours - Address deferred issues in next iteration Your testing session is complete. coordination/testing/ has been cleared...

**Final step:** 1. Create testing archive directory: ```bash mkdir -p coordination/archive/project-{name}_{timestamp}/testing ``` 2. Move all test artifacts: ```bash mv coordination/testing/test_plan.json → archive/.../testing/ mv coordination/testing/bugs_found.json → archive/.../testing/ mv coordination/testing/test_results.json → archive/.../testing/ mv coordination/testing/acceptance_checklist.json → archive/.../testing/ mv...

**Tested By:** test-coordinator + qa-ops + ui-ux-inspector + user **Validated By:** [User name] **Date:** 2025-11-19 **Status:** ✅ Production-Ready skills: [_gap-posting] --- **Test artifacts archived to:** `coordination/archive/project-social-media-improvements_20251119_091614/testing/` ```

1. Make alert threshold configurable (ACC-035) 2. Add admin dashboard for scraping health metrics (ACC-038) 3. Submit Pinterest API application (ACC-041) 4. Fix BUG-003 layout misalignment skills: [_gap-posting] ---

✅ **APPROVED** - Project is production-ready **Reasons:** - All critical and high-priority issues resolved - Core functionality working as expected - No regressions in existing features - 93.3% acceptance criteria met - Failed criteria are non-critical enhancements

- Test execution time: 2 hours - Bugs found: 3 - Bugs fixed: 2 (66%) - Test coverage: 100% of acceptance criteria tested skills: [_gap-posting] ---

**Met:** 42/45 criteria (93.3%) **Failed Criteria (Non-Critical):** 1. **ACC-035:** Alert threshold not configurable (hardcoded to 30%) - Impact: Low - threshold works, just not configurable - Recommendation: Add configuration in next iteration 2. **ACC-038:** Admin dashboard missing scraping health metrics - Impact: Low - metrics logged, just not displayed in UI - Recommendation: Add dashboard widget in follow-up 3. **ACC-041:** Pinterest API application not submitted -...

| Bug ID | Severity | Title | Status | Fixed By | |--------|----------|-------|--------|----------| | BUG-001 | High | YouTube subscriber count shows 'undefined' | ✅ Verified | ui-ux-fixer | | BUG-002 | Medium | Twitter fallback fails with 429 error | ✅ Verified | analysis-system | | BUG-003 | Low | Pinterest board layout misaligned | 📋 Deferred | - | **Deferred Issues:** - BUG-003: Cosmetic issue, does not affect functionality skills: [_gap-posting] ---

All existing platforms (Facebook, Instagram, TikTok, LinkedIn) verified working. No regressions detected. skills: [_gap-posting] ---

All 12 manual tests completed by user. See test_results.json for details.

**Integration Tests (qa-ops):** | Test ID | Description | Status | Notes | |---------|-------------|--------|-------| | AUTO-001 | PHPUnit test suite | ✅ Passed | 245 tests, 0 failures | | AUTO-002 | Console errors check | ✅ Passed | No errors in logs | | AUTO-003 | Database migrations | ✅ Passed | All migrations applied | | AUTO-004 | API fallback logic | ✅ Passed | YouTube, Reddit, Twitter tested | | AUTO-005 | Caching layer | ✅ Passed | Redis + database caching working | | ... | ... | ... |...

✅ **Project Status:** Production-Ready (with 3 minor known issues) **Test Coverage:** - Automated tests: 18/18 passed (after bug fixes) - Manual tests: 12/12 passed - Regression tests: 5/5 passed - Acceptance criteria: 42/45 met (93.3%) **Bugs Found & Fixed:** - Critical: 0 - High: 1 (fixed & verified) - Medium: 2 (1 fixed & verified, 1 documented as known limitation) - Low: 1 (deferred to next iteration) skills: [_gap-posting] ---

**After all testing complete:** Generate comprehensive test report: **coordination/testing/final_test_report.md:** ```markdown # Test Report: Social Media Improvements **Project:** social-media-improvements **Archive:** coordination/archive/project-social-media-improvements_20251119_091614 **Testing Period:** 2025-11-19 10:00 - 12:00 **Coordinator:** test-coordinator skills: [_gap-posting] ---

**Total Criteria:** 45 (from 9 tasks) **Results:** ✅ Passed: 42/45 (93.3%) ❌ Failed: 3/45 (6.7%) **Failed Criteria:** 1. ACC-035: Alert threshold not configurable (SM-009) 2. ACC-038: Admin dashboard missing scraping health metrics (SM-009) 3. ACC-041: Pinterest API application not submitted (SM-004) **Recommendation:** - Failed criteria are non-critical (P3 priority) - Can be addressed in follow-up iteration - Project is production-ready with known limitations **Proceed with deployment?**...

**After all tests complete:** Validate acceptance criteria from archived task_queue.json: 1. Read `coordination/archive/project-{name}_{timestamp}/task_queue.json` 2. Extract all acceptance_criteria from all tasks 3. Cross-reference with test results 4. Generate acceptance_checklist.json **acceptance_checklist.json structure:** ```json { "project": "social-media-improvements", "validation_date": "2025-11-19T12:00:00Z", "criteria": [ { "criteria_id": "ACC-001", ...

**Source:** coordination/archive/project-social-media-improvements_20251119_091614/task_queue.json (SM-001) **Acceptance Criteria:** - [ ] PlatformDataFetcher provides unified interface - [ ] YouTube API client implemented - [ ] Reddit API client implemented - [ ] Twitter API client skeleton created - [ ] Rate limiting logic works - [ ] Automatic fallback on scraping failure - [ ] Config supports API credentials - [ ] Unit tests pass **Status:** [ ] Pending [ ] Passed [ ] Failed skills:...

**Description:** Verify YouTube Data API v3 works, and scraping fallback activates on failure **Steps:** 1. Create test customer in ReportMaker 2. Add YouTube channel URL to customer 3. Run Social Media Audit 4. Verify YouTube data extracted: - Subscriber count - Video count - Recent videos (5+) - Engagement metrics (views, likes) 5. Simulate API failure (invalidate API key in .env) 6. Re-run audit 7. Verify scraping fallback activates 8. Verify same data extracted via...