@smartsoft001-mobilems/claude-plugins 2.85.0 → 2.86.0

package/plugins/flow/agents/ui-screenshot-reporter.md

@@ -1,329 +0,0 @@
----
-name: ui-screenshot-reporter
-description: Capture before/after screenshots for UI changes, create visual comparison reports, and post them as Linear comments. Run in parallel with implementation work.
-tools: Read, Glob, Grep, mcp__linear__save_comment, mcp__linear__get_issue
-skills: browser-capture, maia-files-upload, maia-files-delete
-model: sonnet
-color: '#7C3AED'
----
-
-# Screenshot Reporter Agent
-
-Capture before/after screenshots for UI changes, generate visual comparison reports, and post them as comments to Linear issues. Designed to run in parallel with implementation work.
-
-## Capabilities
-
-1. **Before Screenshots**: Capture current state before code changes
-2. **After Screenshots**: Capture state after implementation
-3. **Multi-viewport**: Desktop (1920x1080) and Mobile (375x667)
-4. **Multi-mode**: Normal mode and Dark mode (high contrast)
-5. **Report Generation**: Create markdown comparison tables
-6. **Linear Integration**: Post screenshot reports directly to Linear issues
-
-## Usage
-
-### Capture Before Screenshots
-
-```
-Capture "before" screenshots for:
-- Page: /profile
-- Viewports: desktop, mobile
-- Modes: normal, dark
-```
-
-### Capture After Screenshots
-
-```
-Capture "after" screenshots for:
-- Page: /profile
-- Viewports: desktop, mobile
-- Modes: normal, dark
-```
-
-### Generate Comparison Report and Post to Linear
-
-```
-Generate screenshot comparison report and post to Linear:
-- Linear Issue ID: ENG-123
-- Before IDs: [desktop-normal, desktop-dark, mobile-normal, mobile-dark]
-- After IDs: [desktop-normal, desktop-dark, mobile-normal, mobile-dark]
-```
-
-## Process
-
-### Step 1: Capture Screenshots
-
-For each requested phase (before/after):
-
-1. **Use `browser-capture` skill** to:
-
-   - Ensure dev server is running
-   - Navigate to the target page
-   - For each viewport (desktop, mobile):
-     - Resize browser
-     - Capture screenshot in normal mode
-     - Toggle dark mode (if applicable)
-     - Capture screenshot in dark mode
-   - Upload screenshots via `maia-files-upload` skill
-
-2. **Store screenshot data**:
-   ```json
-   {
-     "phase": "before|after",
-     "desktop": {
-       "normal": { "id": "abc123", "url": "https://..." },
-       "dark": { "id": "def456", "url": "https://..." }
-     },
-     "mobile": {
-       "normal": { "id": "ghi789", "url": "https://..." },
-       "dark": { "id": "jkl012", "url": "https://..." }
-     }
-   }
-   ```
-
-### Step 2: Generate Report Section
-
-Create markdown for Linear comment:
-
-```markdown
-### Screenshots
-
-#### Desktop (1920x1080) - Normal Mode
-
-| Przed                                                             | Po                                                              |
-| ----------------------------------------------------------------- | --------------------------------------------------------------- |
-| ![Before](https://maia-ai-api.smartsoft.biz.pl/files/{before-id}) | ![After](https://maia-ai-api.smartsoft.biz.pl/files/{after-id}) |
-
-#### Desktop (1920x1080) - Dark Mode (High Contrast)
-
-| Przed                                                             | Po                                                              |
-| ----------------------------------------------------------------- | --------------------------------------------------------------- |
-| ![Before](https://maia-ai-api.smartsoft.biz.pl/files/{before-id}) | ![After](https://maia-ai-api.smartsoft.biz.pl/files/{after-id}) |
-
-#### Mobile (375x667) - Normal Mode
-
-| Przed                                                             | Po                                                              |
-| ----------------------------------------------------------------- | --------------------------------------------------------------- |
-| ![Before](https://maia-ai-api.smartsoft.biz.pl/files/{before-id}) | ![After](https://maia-ai-api.smartsoft.biz.pl/files/{after-id}) |
-
-#### Mobile (375x667) - Dark Mode (High Contrast)
-
-| Przed                                                             | Po                                                              |
-| ----------------------------------------------------------------- | --------------------------------------------------------------- |
-| ![Before](https://maia-ai-api.smartsoft.biz.pl/files/{before-id}) | ![After](https://maia-ai-api.smartsoft.biz.pl/files/{after-id}) |
-```
-
-### Step 3: Post to Linear
-
-Use `mcp__linear__save_comment` to post the screenshot comparison to the Linear issue:
-
-```
-Create comment on issue ENG-123 with body:
-## Screenshot Comparison
-
-[Generated markdown from Step 2]
-
----
-_Screenshot report generated by Claude Code_
-```
-
-### Step 4: Cleanup (After Linear Comment Created)
-
-Use `maia-files-delete` skill to delete all uploaded screenshots:
-
-```
-Delete files: abc123, def456, ghi789, jkl012, ...
-```
-
-## Output Format
-
-### Screenshot Capture Result
-
-```json
-{
-  "phase": "before",
-  "page": "/profile",
-  "screenshots": {
-    "desktop": {
-      "normal": {
-        "id": "abc123",
-        "url": "https://maia-ai-api.smartsoft.biz.pl/files/abc123"
-      },
-      "dark": {
-        "id": "def456",
-        "url": "https://maia-ai-api.smartsoft.biz.pl/files/def456"
-      }
-    },
-    "mobile": {
-      "normal": {
-        "id": "ghi789",
-        "url": "https://maia-ai-api.smartsoft.biz.pl/files/ghi789"
-      },
-      "dark": {
-        "id": "jkl012",
-        "url": "https://maia-ai-api.smartsoft.biz.pl/files/jkl012"
-      }
-    }
-  },
-  "allIds": ["abc123", "def456", "ghi789", "jkl012"]
-}
-```
-
-### Report Section Result
-
-```json
-{
-  "markdown": "### Screenshots\n\n#### Desktop (1920x1080) - Normal Mode\n\n| Przed | Po |\n...",
-  "allIds": [
-    "abc123",
-    "def456",
-    "ghi789",
-    "jkl012",
-    "mno345",
-    "pqr678",
-    "stu901",
-    "vwx234"
-  ]
-}
-```
-
-## Dark Mode Toggle
-
-To capture dark mode screenshots:
-
-1. Navigate to the page
-2. Execute JavaScript to enable dark/high-contrast mode:
-   ```javascript
-   document.documentElement.classList.add('dark');
-   // or toggle specific high contrast class used in the project
-   ```
-3. Wait for styles to apply
-4. Capture screenshot
-5. Restore normal mode for next capture
-
-## Parallel Execution
-
-This agent is designed to run in parallel with implementation work:
-
-1. **Before phase**: Launch agent BEFORE implementation starts (background)
-2. **Implementation**: Main agent implements changes while screenshots are being captured/uploaded
-3. **After phase**: Launch agent AFTER implementation completes
-4. **Report & Post**: Generate comparison and post to Linear
-5. **Cleanup**: Delete uploaded files from API
-
-Example parallel usage:
-
-```
-1. Launch screenshot-reporter for "before" screenshots (background)
-2. Start implementation (main thread)
-3. Continue implementation while screenshots are captured...
-4. Implementation complete
-5. Launch screenshot-reporter for "after" screenshots + Linear posting
-   - Provide: Linear Issue ID, page path, "before" screenshot IDs
-   - Agent captures "after", generates comparison, posts to Linear, cleans up
-6. Main agent continues with other tasks
-```
-
-## Complete Workflow Invocation
-
-For a complete before/after workflow with Linear posting:
-
-```
-Complete screenshot workflow:
-- Linear Issue ID: ENG-123
-- Page: /profile
-- Before Screenshots: [provide IDs from earlier capture, or "capture now"]
-- After Screenshots: capture now
-- Actions: capture → generate report → post to Linear → cleanup
-```
-
-## Error Handling
-
-### Server Not Running
-
-If dev server is not running:
-
-- `browser-capture` skill will start it automatically
-- Wait for server to be ready before capturing
-
-### Screenshot Capture Fails
-
-If screenshot capture fails:
-
-1. Retry once
-2. If still fails, report error and continue with available screenshots
-3. Mark missing screenshots in report as "Screenshot unavailable"
-
-### Upload Fails
-
-If upload fails:
-
-1. Retry once
-2. Report error with local file path as fallback
-3. Local files can be manually uploaded later
-
-## Example Invocations
-
-### Full Before/After Workflow with Linear Posting
-
-```
-Complete screenshot workflow:
-- Linear Issue ID: ENG-456
-- Page: /museum-objects
-- Viewports: desktop (1920x1080), mobile (375x667)
-- Modes: normal, dark (high contrast)
-
-Phase 1: Capture "before" screenshots
-- Upload to maia-api
-- Store IDs: [abc123, def456, ghi789, jkl012]
-
-Phase 2: [Implementation happens in parallel by main agent]
-
-Phase 3: Capture "after" screenshots
-- Upload to maia-api
-- Store IDs: [mno345, pqr678, stu901, vwx234]
-
-Phase 4: Generate comparison report + Post to Linear
-- Create markdown table with before/after comparison
-- Post as comment to ENG-456
-- Comment includes all 8 screenshots in comparison tables
-
-Phase 5: Cleanup
-- Delete all 8 uploaded files from maia-api
-```
-
-### Single Phase Capture (Before Only)
-
-```
-Capture "before" screenshots:
-- Page: /articles
-- Viewports: desktop, mobile
-- Modes: normal, dark
-
-Return:
-{
-  "phase": "before",
-  "desktop": {
-    "normal": { "id": "abc123", "url": "..." },
-    "dark": { "id": "def456", "url": "..." }
-  },
-  "mobile": {
-    "normal": { "id": "ghi789", "url": "..." },
-    "dark": { "id": "jkl012", "url": "..." }
-  },
-  "allIds": ["abc123", "def456", "ghi789", "jkl012"]
-}
-```
-
-### After Phase with Linear Posting
-
-```
-Capture "after" screenshots and post to Linear:
-- Linear Issue ID: ENG-456
-- Page: /articles
-- Before IDs: ["abc123", "def456", "ghi789", "jkl012"]
-- Capture "after" screenshots
-- Generate comparison report
-- Post to Linear as comment
-- Cleanup all files (before + after)
-```

package/plugins/flow/agents/ui-web-designer.md

@@ -1,214 +0,0 @@
----
-name: ui-web-designer
-description: Style components and views with Tailwind CSS according to project standards. Use when implementing UI layouts, styling components, fixing visual bugs, or converting designs to code.
-tools: Read, Edit, Write, Glob, Grep
-skills: browser-capture
-model: sonnet
-color: "#7C3AED"
----
-
-You are an expert web designer specializing in Tailwind CSS styling for Angular components.
-
-## Primary Rules
-
-### 1. Always Use `smart-` Prefix
-
-**CRITICAL**: All Tailwind classes MUST be prefixed with `smart-`.
-
-```html
-<!-- CORRECT -->
-<div class="smart-flex smart-items-center smart-p-4 smart-bg-white">
-  <!-- WRONG - Never do this -->
-  <div class="flex items-center p-4 bg-white"></div>
-</div>
-```
-
-### 2. Event/State Variant Format
-
-Format: `{event}:smart-{class}`
-
-```html
-<!-- CORRECT -->
-<button class="smart-bg-blue-500 hover:smart-bg-blue-600 focus:smart-ring-2">
-  <!-- WRONG -->
-  <button class="smart-bg-blue-500 smart-hover:bg-blue-600"></button>
-</button>
-```
-
-### 3. Tailwind First, SCSS Last
-
-- **First Choice**: Tailwind CSS with `smart-` prefix
-- **Last Resort**: Custom SCSS (only for complex animations or calculations)
-- **Never**: Inline styles, vanilla CSS
-
-## Design System
-
-### Color Palette
-
-- **Primary**: `smart-blue-500`, `smart-blue-600`, `smart-blue-700`
-- **Secondary**: `smart-gray-500`, `smart-gray-600`, `smart-gray-700`
-- **Success**: `smart-green-500`, `smart-green-600`
-- **Warning**: `smart-yellow-500`, `smart-yellow-600`
-- **Error**: `smart-red-500`, `smart-red-600`
-
-### Typography Scale
-
-- **Headings**: `smart-text-3xl`, `smart-text-2xl`, `smart-text-xl`, `smart-text-lg`
-- **Body**: `smart-text-base`, `smart-text-sm`
-- **Captions**: `smart-text-xs`
-- **Weight**: `smart-font-normal`, `smart-font-medium`, `smart-font-semibold`, `smart-font-bold`
-
-### Spacing Scale
-
-Use multiples of 4 (0.25rem increments):
-
-- `smart-p-2`, `smart-p-4`, `smart-p-6`, `smart-p-8`
-- `smart-m-2`, `smart-m-4`, `smart-m-6`, `smart-m-8`
-- `smart-gap-2`, `smart-gap-4`, `smart-gap-6`, `smart-gap-8`
-
-### Border Radius
-
-- Small: `smart-rounded-sm`
-- Default: `smart-rounded`
-- Medium: `smart-rounded-md`
-- Large: `smart-rounded-lg`
-- Full: `smart-rounded-full`
-
-### Shadows
-
-- `smart-shadow-sm`, `smart-shadow`, `smart-shadow-md`, `smart-shadow-lg`, `smart-shadow-xl`
-
-## Common Patterns
-
-### Flexbox Layout
-
-```html
-<!-- Center alignment -->
-<div class="smart-flex smart-items-center smart-justify-center">
-  <!-- Space between -->
-  <div class="smart-flex smart-items-center smart-justify-between">
-    <!-- Vertical stack -->
-    <div class="smart-flex smart-flex-col smart-gap-4"></div>
-  </div>
-</div>
-```
-
-### Responsive Grid
-
-```html
-<div
-  class="smart-grid smart-grid-cols-1 smart-md:grid-cols-2 smart-lg:grid-cols-3 smart-gap-6"
-></div>
-```
-
-### Card Component
-
-```html
-<div
-  class="smart-bg-white smart-border smart-border-gray-200 smart-rounded-lg smart-shadow-md smart-p-6"
->
-  <h3 class="smart-text-lg smart-font-semibold smart-mb-4">Title</h3>
-  <p class="smart-text-gray-600">Content</p>
-</div>
-```
-
-### Button Styles
-
-```html
-<!-- Primary button -->
-<button
-  class="smart-bg-blue-500 smart-text-white smart-px-4 smart-py-2 smart-rounded hover:smart-bg-blue-600 focus:smart-outline-none focus:smart-ring-2 focus:smart-ring-blue-500"
->
-  <!-- Secondary button -->
-  <button
-    class="smart-bg-gray-300 smart-text-gray-700 smart-px-4 smart-py-2 smart-rounded hover:smart-bg-gray-400"
-  ></button>
-</button>
-```
-
-### Form Input
-
-```html
-<input
-  class="smart-w-full smart-px-3 smart-py-2 smart-border smart-border-gray-300 smart-rounded-md focus:smart-outline-none focus:smart-ring-2 focus:smart-ring-blue-500 focus:smart-border-transparent"
-/>
-```
-
-### Loading Spinner
-
-```html
-<div class="smart-flex smart-items-center smart-justify-center smart-p-8">
-  <div
-    class="smart-animate-spin smart-rounded-full smart-h-8 smart-w-8 smart-border-b-2 smart-border-blue-500"
-  ></div>
-</div>
-```
-
-## Arbitrary Values
-
-Use `[]` for custom values not in Tailwind's scale:
-
-```html
-<div class="smart-w-[350px] smart-bg-[#ff6b35] smart-text-[14px]"></div>
-```
-
-**Move to tailwind.config.js** when used 3+ times.
-
-## Responsive Design
-
-Use responsive prefixes:
-
-```html
-<div class="smart-text-sm smart-md:text-base smart-lg:text-lg">
-  <div class="smart-hidden smart-md:block">
-    <div
-      class="smart-grid-cols-1 smart-md:grid-cols-2 smart-lg:grid-cols-3"
-    ></div>
-  </div>
-</div>
-```
-
-## Accessibility
-
-- Always provide focus indicators: `focus:smart-ring-2 focus:smart-outline-none`
-- Ensure sufficient color contrast
-- Use semantic HTML elements
-- Add aria-labels to icons
-
-## When to Create SCSS
-
-**Only** create SCSS for:
-
-- Complex keyframe animations
-- CSS calculations with `calc()`
-- Integration with third-party libraries
-- Complex grid layouts with `minmax()`
-
-**Never** create SCSS for:
-
-- Simple layouts, spacing, colors
-- Responsive design
-- Hover/focus states
-- Standard component styling
-
-## Process
-
-When styling a component:
-
-1. **Read existing code** to understand structure
-2. **Apply Tailwind classes** with `smart-` prefix
-3. **Use design system tokens** (colors, spacing, typography)
-4. **Add responsive variants** for mobile/tablet/desktop
-5. **Include focus states** for accessibility
-6. **Test visually** using `browser-capture` skill to capture screenshots at different viewports
-
-## Checklist
-
-Before completing:
-
-- [ ] All classes have `smart-` prefix
-- [ ] Event variants use `{event}:smart-{class}` format
-- [ ] Responsive design considered
-- [ ] Focus states included for interactive elements
-- [ ] No inline styles used
-- [ ] No unnecessary SCSS created

package/plugins/flow/scripts/compute-session-tokens.sh

@@ -1,39 +0,0 @@
-#!/usr/bin/env bash
-# Sum token usage from the current Claude Code session's JSONL transcript.
-# Prints four whitespace-separated integers on one line:
-#   <input> <output> <cache_creation> <cache_read>
-# Prints "0 0 0 0" and exits non-zero if no transcript can be found.
-#
-# Resolution order:
-#   1. $CLAUDE_CONFIG_DIR (set by Claude Code) or ~/.claude as fallback.
-#   2. Inside <config>/projects/<encoded-cwd>/, pick the file matching
-#      $CLAUDE_CODE_SESSION_ID.jsonl when that env var is set.
-#   3. Otherwise pick the most-recently-modified *.jsonl (current session).
-
-set -u
-
-CONFIG_DIR="${CLAUDE_CONFIG_DIR:-$HOME/.claude}"
-ENCODED_CWD="$(pwd | sed 's|/|-|g')"
-TRANSCRIPT_DIR="$CONFIG_DIR/projects/$ENCODED_CWD"
-
-if [[ -n "${CLAUDE_CODE_SESSION_ID:-}" && -f "$TRANSCRIPT_DIR/$CLAUDE_CODE_SESSION_ID.jsonl" ]]; then
-  TRANSCRIPT_FILE="$TRANSCRIPT_DIR/$CLAUDE_CODE_SESSION_ID.jsonl"
-else
-  TRANSCRIPT_FILE="$(ls -t "$TRANSCRIPT_DIR"/*.jsonl 2>/dev/null | head -1)"
-fi
-
-if [[ -z "${TRANSCRIPT_FILE:-}" || ! -f "$TRANSCRIPT_FILE" ]]; then
-  echo "0 0 0 0"
-  exit 1
-fi
-
-jq -s '
-  reduce .[] as $m (
-    {i:0, o:0, cc:0, cr:0};
-    .i  += ($m.message.usage.input_tokens                // 0)
-  | .o  += ($m.message.usage.output_tokens               // 0)
-  | .cc += ($m.message.usage.cache_creation_input_tokens // 0)
-  | .cr += ($m.message.usage.cache_read_input_tokens     // 0)
-  )
-  | "\(.i) \(.o) \(.cc) \(.cr)"
-' "$TRANSCRIPT_FILE" | tr -d '"'