@smartsoft001-mobilems/claude-plugins 2.58.0

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

@@ -0,0 +1,328 @@
+---
+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-server__create_comment, mcp__linear-server__get_issue
+skills: browser-capture, maia-files-upload, maia-files-delete
+model: opus
+---
+
+# 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-server__create_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

@@ -0,0 +1,213 @@
+---
+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: opus
+---
+
+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/commands/commit.md

@@ -0,0 +1,131 @@
+# Commit Command
+
+Create a conventional commit message based on Linear task and staged changes.
+
+## Usage
+
+```
+/commit [linearTaskId]
+```
+
+## Parameters
+
+- `linearTaskId` - Linear task ID (e.g., ENG-123)
+
+## Instructions
+
+You are tasked with creating a git commit based on a Linear task and staged changes.
+
+### Step 1: Fetch Linear Task Details
+
+Use the MCP Linear server to fetch task details for the provided `linearTaskId`. Extract:
+
+- Task title
+- Task description
+- Task labels/type (bug, feature, improve etc.)
+
+### Step 2: Analyze Staged Changes
+
+Run `git diff --cached` to see what files have been changed and understand the scope of changes.
+
+### Step 2.5: Verify Implementation Completeness
+
+Before proceeding with the commit, verify that all requirements from the Linear task have been implemented:
+
+1. **Compare task requirements with actual changes**:
+
+   - Review the Linear task description and acceptance criteria
+   - Analyze the staged changes from `git diff --cached`
+   - Identify any requirements from the task that are not reflected in the code changes
+
+2. **Ask user if implementation is incomplete**:
+
+   - If any task requirements appear to be missing from the staged changes, use `AskUserQuestion` to ask the user:
+     - Option 1: "Continue with commit" (Proceed with committing only the current changes)
+     - Option 2: "Complete implementation first" (Recommended) - Stop the commit process so user can implement missing requirements
+
+3. **Handle user decision**:
+   - If user chooses "Continue with commit": Proceed to Step 3
+   - If user chooses "Complete implementation first": Stop the commit process and inform the user about what's missing
+
+**Note**: This verification step helps ensure commits are complete and aligned with task requirements, reducing the need for follow-up commits.
+
+### Step 3: Read Commitlint Configuration
+
+Read the `commitlint.config.js` file to understand:
+
+- Available scopes (from the `scope-enum` rule)
+- Commit message format requirements
+
+### Step 4: Generate Commit Message
+
+Based on the Linear task details and code changes, generate a commit message following conventional commits format:
+
+```
+<type>(<scope>): <subject>
+
+<body>
+
+Refs: <linearTaskId>
+```
+
+Where:
+
+- **type**: Choose from: `feat`, `fix`, `refactor`, `test`, `docs`, `chore`, `build`, `ci`, `perf`, `style`
+  - Use task labels/type to determine (bug → fix, feature → feat, etc.)
+- **scope**: Select from available scopes in commitlint.config.js based on changed files
+  - If multiple scopes affected, choose the primary one or use a general scope
+  - The scope must be one of the valid scopes from commitlint config
+- **subject**: Brief description (use Linear task title as base, keep under 72 chars)
+- **body**: Optional detailed explanation if needed (from task description or complex changes)
+- **footer**: Always include `Refs: <linearTaskId>` to link to Linear task
+
+### Step 4.5: Pre-commit Preparation (Mandatory)
+
+Before creating the commit, **always** run the following commands:
+
+1. **Switch to Node.js 24**:
+
+   ```bash
+   source ~/.nvm/nvm.sh && nvm use 24
+   ```
+
+2. **Format the code**:
+
+   ```bash
+   npm run format
+   ```
+
+3. **Stage any formatting changes**:
+   - If `npm run format` modified any files, stage them with `git add`
+   - This ensures all committed code is properly formatted
+
+### Step 5: Create Commit
+
+Execute the commit with the generated message:
+
+```bash
+git commit -m "<type>(<scope>): <subject>" -m "<body>" -m "Refs: <linearTaskId>"
+```
+
+### Guidelines
+
+1. Keep the subject line concise and imperative mood
+2. Choose the most appropriate type based on task nature and code changes
+3. Select scope based on the primary area of code changes
+4. If task type is unclear, analyze the code changes to determine type
+5. Always include the Linear task reference in the footer
+6. If there are no staged changes, warn the user and don't create commit
+
+### Example
+
+For Linear task "ENG-123: Add dark mode toggle to settings":
+
+- Type: `feat` (new feature)
+- Scope: `shared-angular` (if changes are in libs/shared/angular)
+- Subject: "add dark mode toggle to settings"
+- Result: `feat(shared-angular): add dark mode toggle to settings`
+
+---
+
+**Important**: Before committing, show the generated commit message to the user for approval.