[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C2XBGVJVPPGKXDHRZJ0JS1":3,"skill-same:01M6C2XBGVJVPPGKXDHRZJ0JS1":76},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":52,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M6C2XBGVJVPPGKXDHRZJ0JS1","regression-visual",null,"Detect visual and UI regressions through screenshot comparison and pixel-diff analysis across browsers and viewports","jmagly\u002Faiwg","jmagly","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1159087?v=4","01M6C10AK8N2WCSQN11FYGTJWN","Joseph Magly","01M6C10AQ8A2RMED1Y1BSVY7NF",229,"MIT","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Fagentic\u002Fcode\u002Fplugins\u002Fcodex-sdlc\u002Fskills\u002Fregression-visual\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[27,28,29,30,31,32,33,34,35,36,37,38],"regression","regression visual","visual","screenshot","ui","analysis","diff","pixel","across","detect","comparison","diff analysis","2026-11-10 10:12:30",false,"---\nnamespace: aiwg\nname: regression-visual\nplatforms: [all]\ndescription: Detect visual and UI regressions through screenshot comparison and pixel-diff analysis across browsers and viewports\n\n---\n\n# regression-visual\n\nDetect visual and UI regressions through screenshot comparison and pixel-diff analysis.\n\n## Triggers\n\n\nAlternate expressions and non-obvious activations (primary phrases are matched automatically from the skill description):\n\n- \"visual diff\" → screenshot\u002FUI comparison\n- \"UI diff\" → visual regression shorthand\n- \"Playwright screenshots\" \u002F \"Storybook snapshots\" → tool-specific visual regression\n\n## Purpose\n\nThis skill manages visual regression detection by:\n- Capturing screenshots across browsers and viewports\n- Comparing current UI to baseline screenshots\n- Detecting pixel-level differences with configurable thresholds\n- Identifying layout shifts, color changes, and missing elements\n- Running component-level visual tests\n- Checking accessibility visual indicators\n- Generating visual diff reports with side-by-side comparisons\n\n## Behavior\n\nWhen triggered, this skill:\n\n1. **Identifies visual test scope**:\n   - Determine which components\u002Fpages to test\n   - Select browsers and devices (cross-browser testing)\n   - Identify viewports for responsive testing\n   - Check for existing visual baselines\n   - Locate test configuration\n\n2. **Captures screenshots**:\n   - Run browser automation (Playwright, Puppeteer)\n   - Take screenshots at each viewport size\n   - Capture component states (hover, focus, error, disabled)\n   - Handle dynamic content (hide timestamps, animations)\n   - Store screenshots with metadata\n\n3. **Compares to baseline**:\n   - Load baseline screenshots\n   - Perform pixel-by-pixel comparison\n   - Calculate difference percentage\n   - Apply threshold tolerance (e.g., 0.1%)\n   - Generate diff images highlighting changes\n\n4. **Categorizes differences**:\n   - Layout shift (position\u002Fsize changes)\n   - Color changes (background, text, borders)\n   - Typography changes (font, size, weight)\n   - Spacing\u002Falignment issues\n   - Missing or extra elements\n   - Visual accessibility issues\n\n5. **Generates visual diff report**:\n   - Side-by-side baseline vs current\n   - Diff overlay highlighting changes\n   - List of detected regressions by category\n   - Severity assessment per change\n   - Links to affected components\n\n6. **Integrates with CI\u002FCD**:\n   - Run visual tests in pipeline\n   - Block PRs if threshold exceeded\n   - Upload screenshots to cloud storage\n   - Comment on PRs with visual diff links\n\n## Visual Regression Categories\n\n### Layout Shift\n\n```yaml\nlayout_shift:\n  description: Position or dimension changes\n  detection:\n    - element_moved\n    - element_resized\n    - overflow_introduced\n    - spacing_changed\n    - alignment_broken\n\n  example:\n    component: \"NavigationBar\"\n    issue: \"Menu shifted 10px right\"\n    severity: medium\n    cause: \"CSS margin change\"\n    diff_percentage: 2.3\n```\n\n### Color Changes\n\n```yaml\ncolor_changes:\n  description: Color, gradient, or opacity changes\n  detection:\n    - background_color_changed\n    - text_color_changed\n    - border_color_changed\n    - gradient_modified\n    - opacity_changed\n\n  example:\n    component: \"PrimaryButton\"\n    issue: \"Background color #007bff → #0056b3\"\n    severity: high\n    cause: \"Design system update not applied\"\n    diff_percentage: 0.8\n```\n\n### Typography Changes\n\n```yaml\ntypography_changes:\n  description: Font, size, weight, line-height changes\n  detection:\n    - font_family_changed\n    - font_size_changed\n    - font_weight_changed\n    - line_height_changed\n    - letter_spacing_changed\n\n  example:\n    component: \"Heading\"\n    issue: \"Font size 24px → 22px\"\n    severity: low\n    cause: \"CSS reset applied incorrectly\"\n    diff_percentage: 0.5\n```\n\n### Spacing\u002FAlignment Issues\n\n```yaml\nspacing_alignment:\n  description: Padding, margin, alignment issues\n  detection:\n    - padding_changed\n    - margin_changed\n    - text_alignment_changed\n    - element_misalignment\n    - grid_layout_broken\n\n  example:\n    component: \"CardGrid\"\n    issue: \"Cards no longer aligned in grid\"\n    severity: high\n    cause: \"Flexbox to Grid migration incomplete\"\n    diff_percentage: 4.2\n```\n\n### Missing\u002FExtra Elements\n\n```yaml\nelement_changes:\n  description: Elements added, removed, or hidden\n  detection:\n    - element_missing\n    - element_added\n    - visibility_changed\n    - display_none_applied\n    - z_index_overlap\n\n  example:\n    component: \"Footer\"\n    issue: \"Privacy link missing\"\n    severity: critical\n    cause: \"Conditional rendering bug\"\n    diff_percentage: 1.2\n```\n\n### Accessibility Visual Indicators\n\n```yaml\naccessibility_visual:\n  description: Focus indicators, contrast, icon visibility\n  detection:\n    - focus_outline_missing\n    - color_contrast_reduced\n    - screen_reader_text_visible\n    - icon_missing_or_broken\n    - keyboard_navigation_indicator_absent\n\n  example:\n    component: \"FormInput\"\n    issue: \"Focus outline removed\"\n    severity: critical\n    cause: \"CSS reset removed :focus styles\"\n    diff_percentage: 0.3\n    accessibility_impact: \"Keyboard users cannot see focus\"\n```\n\n## Tool Integration\n\n### Percy\n\n```yaml\npercy_integration:\n  description: Visual testing platform with cloud diffing\n  workflow:\n    - capture: \"percy snapshot \u003Cname>\"\n    - compare: \"percy finalize\"\n    - review: \"Percy dashboard for diffs\"\n\n  configuration:\n    project_token: \"PERCY_TOKEN\"\n    widths: [375, 768, 1280, 1920]\n    min_height: 1024\n    enable_javascript: true\n\n  example_command:\n    - \"npx percy exec -- npm run test:visual\"\n```\n\n### Chromatic\n\n```yaml\nchromatic_integration:\n  description: Storybook visual testing platform\n  workflow:\n    - build_storybook: \"npm run build-storybook\"\n    - publish: \"npx chromatic --project-token=\u003Ctoken>\"\n    - review: \"Chromatic dashboard\"\n\n  configuration:\n    project_token: \"CHROMATIC_TOKEN\"\n    exit_zero_on_changes: false\n    auto_accept_changes: false\n\n  example_command:\n    - \"npx chromatic --project-token=$CHROMATIC_TOKEN\"\n```\n\n### BackstopJS\n\n```yaml\nbackstopjs_integration:\n  description: Open-source screenshot comparison tool\n  workflow:\n    - setup: \"backstop init\"\n    - reference: \"backstop reference\"\n    - test: \"backstop test\"\n    - approve: \"backstop approve\"\n\n  configuration_file: \"backstop.json\"\n  configuration:\n    viewports:\n      - label: mobile\n        width: 375\n        height: 667\n      - label: tablet\n        width: 768\n        height: 1024\n      - label: desktop\n        width: 1920\n        height: 1080\n    scenarios:\n      - label: \"Homepage\"\n        url: \"http:\u002F\u002Flocalhost:3000\"\n        selectors: [\"document\"]\n        delay: 500\n        misMatchThreshold: 0.1\n\n  example_command:\n    - \"backstop test --config=backstop.json\"\n```\n\n### Playwright Screenshots\n\n```yaml\nplaywright_integration:\n  description: Cross-browser screenshot capture with Playwright\n  workflow:\n    - setup: \"playwright install\"\n    - capture: \"playwright test --project=visual\"\n    - compare: \"Custom comparison or integrate with Percy\u002FChromatic\"\n\n  test_example: |\n    test('visual regression - homepage', async ({ page }) => {\n      await page.goto('http:\u002F\u002Flocalhost:3000');\n\n      \u002F\u002F Hide dynamic content\n      await page.evaluate(() => {\n        document.querySelectorAll('.timestamp').forEach(el => el.style.visibility = 'hidden');\n      });\n\n      \u002F\u002F Take screenshot\n      await expect(page).toHaveScreenshot('homepage.png', {\n        maxDiffPixels: 100,  \u002F\u002F Allow 100 pixels difference\n      });\n    });\n\n  browsers: [chromium, firefox, webkit]\n  viewports:\n    - width: 375, height: 667   # Mobile\n    - width: 768, height: 1024  # Tablet\n    - width: 1920, height: 1080 # Desktop\n```\n\n## Diff Threshold Configuration\n\n```yaml\ndiff_thresholds:\n  critical_components:\n    threshold: 0.01  # 0.01% difference allowed\n    components:\n      - authentication_flow\n      - checkout_process\n      - payment_forms\n    action_on_exceed: fail\n\n  standard_components:\n    threshold: 0.1   # 0.1% difference allowed\n    components:\n      - navigation\n      - footer\n      - product_cards\n    action_on_exceed: warn\n\n  low_priority_components:\n    threshold: 1.0   # 1% difference allowed\n    components:\n      - blog_posts\n      - marketing_banners\n      - testimonials\n    action_on_exceed: info\n\n  ignore_areas:\n    - \".timestamp\"\n    - \".live-chat-widget\"\n    - \".advertisement\"\n    - \"#dynamic-content\"\n```\n\n## Responsive Design Testing\n\n```yaml\nresponsive_viewports:\n  mobile:\n    - name: \"iPhone SE\"\n      width: 375\n      height: 667\n      user_agent: \"Mobile Safari\"\n    - name: \"iPhone 14 Pro\"\n      width: 393\n      height: 852\n      user_agent: \"Mobile Safari\"\n    - name: \"Android (Pixel 7)\"\n      width: 412\n      height: 915\n      user_agent: \"Chrome Mobile\"\n\n  tablet:\n    - name: \"iPad Mini\"\n      width: 768\n      height: 1024\n      user_agent: \"Mobile Safari\"\n    - name: \"iPad Pro 11\"\n      width: 834\n      height: 1194\n      user_agent: \"Mobile Safari\"\n\n  desktop:\n    - name: \"Laptop (1366x768)\"\n      width: 1366\n      height: 768\n    - name: \"Desktop (1920x1080)\"\n      width: 1920\n      height: 1080\n    - name: \"Wide (2560x1440)\"\n      width: 2560\n      height: 1440\n\n  breakpoints:\n    - 375   # Mobile\n    - 768   # Tablet\n    - 1024  # Small desktop\n    - 1280  # Medium desktop\n    - 1920  # Large desktop\n```\n\n## Visual Diff Report\n\n```markdown\n# Visual Regression Report\n\n**Date**: 2026-01-28T15:30:00Z\n**Baseline**: visual-baseline-v2.1.0\n**Current**: HEAD (commit abc123)\n**Total Comparisons**: 47\n**Status**: ⚠️ Regressions Detected\n\n## Executive Summary\n\n| Metric | Count | Status |\n|--------|-------|--------|\n| Total Screens | 47 | - |\n| Matches | 42 | ✅ |\n| Differences | 5 | ⚠️ |\n| Critical | 1 | ❌ |\n| High Severity | 2 | ⚠️ |\n| Medium Severity | 1 | ⚠️ |\n| Low Severity | 1 | ℹ️ |\n\n## Critical Regressions\n\n### 1. Login Form - Focus Indicator Missing\n\n**Component**: `LoginForm`\n**Severity**: Critical\n**Category**: Accessibility Visual\n**Diff**: 0.3%\n\n**Baseline**:\n![Baseline](baselines\u002Flogin-form-focused.png)\n\n**Current**:\n![Current](current\u002Flogin-form-focused.png)\n\n**Diff**:\n![Diff](diffs\u002Flogin-form-focused-diff.png)\n\n**Issue**: Focus outline no longer visible on input fields\n\n**Impact**:\n- Accessibility: Keyboard users cannot see which field is focused\n- WCAG 2.1 Level AA failure: 2.4.7 Focus Visible\n\n**Root Cause**: CSS reset removed `:focus` styles\n\n**Recommendation**: Restore focus outline or implement custom focus indicator\n\n**Introduced By**: commit def456 - \"Update CSS reset to modern-normalize\"\n\n## High Severity Regressions\n\n### 2. Product Card Grid - Layout Broken\n\n**Component**: `ProductGrid`\n**Severity**: High\n**Category**: Layout Shift\n**Diff**: 4.2%\n\n**Baseline**:\n![Baseline](baselines\u002Fproduct-grid-desktop.png)\n\n**Current**:\n![Current](current\u002Fproduct-grid-desktop.png)\n\n**Diff**:\n![Diff](diffs\u002Fproduct-grid-desktop-diff.png)\n\n**Issue**: Cards no longer aligned in grid, third card wraps to new row\n\n**Impact**:\n- User Experience: Inconsistent card spacing\n- Layout: Grid breaks at 1366px viewport\n\n**Root Cause**: Flexbox to CSS Grid migration incomplete\n\n**Recommendation**: Complete Grid migration or revert to Flexbox\n\n**Affected Viewports**: Desktop (1366x768, 1920x1080)\n\n### 3. Primary Button - Color Change\n\n**Component**: `PrimaryButton`\n**Severity**: High\n**Category**: Color Change\n**Diff**: 0.8%\n\n**Baseline**:\n![Baseline](baselines\u002Fprimary-button.png)\n\n**Current**:\n![Current](current\u002Fprimary-button.png)\n\n**Diff**:\n![Diff](diffs\u002Fprimary-button-diff.png)\n\n**Issue**: Background color changed from #007bff to #0056b3\n\n**Impact**:\n- Brand Consistency: Not using design system primary color\n- Contrast: New color has slightly lower contrast (4.8:1 vs 5.2:1)\n\n**Root Cause**: Design token not applied, hardcoded color used\n\n**Recommendation**: Replace hardcoded #0056b3 with CSS var(--color-primary)\n\n## Medium Severity Regressions\n\n### 4. Navigation Bar - Spacing Change\n\n**Component**: `NavigationBar`\n**Severity**: Medium\n**Category**: Spacing\u002FAlignment\n**Diff**: 2.3%\n\n**Issue**: Menu items shifted 10px right, logo padding increased\n\n**Impact**: Minor visual inconsistency, still functional\n\n**Recommendation**: Review spacing changes in commit ghi789\n\n## Low Severity Regressions\n\n### 5. Footer - Typography Size\n\n**Component**: `Footer`\n**Severity**: Low\n**Category**: Typography Change\n**Diff**: 0.5%\n\n**Issue**: Copyright text font size reduced from 14px to 12px\n\n**Impact**: Minor readability change, within acceptable range\n\n**Recommendation**: Verify intentional change or revert\n\n## Passing Comparisons (42)\n\nAll other components match baseline within threshold:\n- Homepage hero section ✅\n- Contact form ✅\n- Dashboard widgets (x12) ✅\n- Profile settings ✅\n- Search results ✅\n... (37 more)\n\n## Recommendations\n\n### Immediate Actions\n\n- [ ] Fix critical accessibility issue: Restore focus indicators\n- [ ] Fix product grid layout on desktop viewports\n- [ ] Review and correct primary button color\n\n### Process Improvements\n\n- [ ] Add visual regression tests to CI pipeline\n- [ ] Require visual approval before merging UI changes\n- [ ] Update design token usage guidelines\n- [ ] Add pre-commit hook for CSS changes\n\n### Baseline Updates\n\nIf changes are intentional:\n- [ ] Review diffs with design team\n- [ ] Update visual baseline to v2.2.0\n- [ ] Document breaking changes in changelog\n- [ ] Notify stakeholders of visual changes\n\n## Approval\n\nTo update baseline with approved changes:\n\n```bash\n# Review changes\naiwg baseline compare visual-baseline-v2.1.0\n\n# Approve specific changes\naiwg baseline update visual-baseline-v2.1.0 \\\n  --approve footer-typography \\\n  --approve navigation-spacing \\\n  --justification \"Design system v2.2 updates\"\n\n# Or create new baseline\naiwg baseline create visual-baseline-v2.2.0 \\\n  --based-on v2.1.0 \\\n  --changes \"Design system v2.2 applied\"\n```\n\n## Test Execution Details\n\n**Tool**: Playwright + Percy\n**Browsers**: Chromium, Firefox, WebKit\n**Viewports**: Mobile (375px), Tablet (768px), Desktop (1920px)\n**Total Screenshots**: 141 (47 components × 3 viewports)\n**Duration**: 4m 32s\n**Parallel Execution**: 4 workers\n\n## Links\n\n- [Full Percy Report](https:\u002F\u002Fpercy.io\u002Fproject\u002Fbuild\u002F123)\n- [CI Pipeline Run](https:\u002F\u002Fci.example.com\u002Frun\u002F456)\n- [GitHub PR #789](https:\u002F\u002Fgithub.com\u002Forg\u002Frepo\u002Fpull\u002F789)\n```\n\n## Usage Examples\n\n### Detect Visual Regressions\n\n```\nUser: \"Run visual regression tests\"\n\nSkill executes:\n1. Identify test configuration (Playwright, Percy, BackstopJS)\n2. Determine viewports and browsers\n3. Capture screenshots\n4. Compare to baseline\n5. Generate diff report\n\nOutput:\n\"Visual Regression Test Complete\n\nStatus: ⚠️ Regressions Detected\n\nSummary:\n- Total: 47 screens tested\n- Matches: 42 (89%)\n- Differences: 5 (11%)\n\nCritical Issues:\n1. Login form focus indicator missing (accessibility)\n2. Product grid layout broken on desktop\n3. Primary button color changed\n\nSee full report: .aiwg\u002Ftesting\u002Fvisual-regression-report.md\n\nReview diffs: https:\u002F\u002Fpercy.io\u002Fproject\u002Fbuild\u002F123\"\n```\n\n### Create Visual Baseline\n\n```\nUser: \"Create visual baseline for v2.1.0\"\n\nSkill checks:\n\"Creating visual baseline for v2.1.0\n\nCapturing screenshots:\n- Components: 47\n- Viewports: 3 (mobile, tablet, desktop)\n- Browsers: 3 (Chromium, Firefox, WebKit)\n\nTotal screenshots: 141\n\nEstimated time: 5 minutes\"\n\nSkill creates:\n\"Visual Baseline Created: visual-baseline-v2.1.0\n\nScope: All UI components\nFormat: PNG screenshots\nLocation: .aiwg\u002Ftesting\u002Fbaselines\u002Fvisual\u002Fv2.1.0\u002F\n\nFiles:\n- 141 baseline screenshots\n- metadata.json with viewport\u002Fbrowser info\n- manifest.yaml with component inventory\n\nStatus: Active\nGit Commit: abc123\nRelease: v2.1.0\n\nNext: Baseline will be used for regression detection\"\n```\n\n### Compare Specific Component\n\n```\nUser: \"Check for visual changes in LoginForm\"\n\nSkill analyzes:\n\"Visual Comparison: LoginForm\n\nViewports Tested:\n- Mobile (375px): ✅ Match\n- Tablet (768px): ✅ Match\n- Desktop (1920px): ❌ Regression\n\nRegression Details:\nComponent: LoginForm\nViewport: Desktop (1920px)\nCategory: Accessibility Visual\nSeverity: Critical\nDiff: 0.3%\n\nIssue: Focus outline missing on input fields\n\nBaseline:\n[Shows image with visible focus outline]\n\nCurrent:\n[Shows image without focus outline]\n\nDiff:\n[Highlights missing outline area]\n\nRecommendation: Restore focus styles for accessibility\"\n```\n\n## Integration\n\nThis skill uses:\n- `regression-baseline`: Manage visual baselines\n- `regression-bisect`: Find commits that introduced visual changes\n- `regression-report`: Generate comprehensive regression reports\n- `test-coverage`: Ensure visual tests cover critical UI paths\n- `project-awareness`: Detect test framework and configuration\n\n## Agent Orchestration\n\n```yaml\nagents:\n  setup:\n    agent: test-engineer\n    focus: Configure visual testing tools and capture baselines\n\n  analysis:\n    agent: test-architect\n    focus: Analyze visual regressions and categorize issues\n\n  remediation:\n    agent: frontend-developer\n    focus: Fix visual regressions based on analysis\n\n  validation:\n    agent: design-lead\n    focus: Approve intentional visual changes\n```\n\n## Configuration\n\n### Visual Testing Setup\n\n```yaml\nvisual_testing:\n  tool: playwright  # percy | chromatic | backstopjs | playwright\n\n  browsers:\n    - chromium\n    - firefox\n    - webkit\n\n  viewports:\n    - { width: 375, height: 667, name: \"mobile\" }\n    - { width: 768, height: 1024, name: \"tablet\" }\n    - { width: 1920, height: 1080, name: \"desktop\" }\n\n  diff_threshold:\n    default: 0.1  # 0.1% pixel difference\n    critical: 0.01  # 0.01% for critical components\n\n  baseline_path: \".aiwg\u002Ftesting\u002Fbaselines\u002Fvisual\u002F\"\n  screenshot_path: \".aiwg\u002Ftesting\u002Fscreenshots\u002F\"\n  diff_path: \".aiwg\u002Ftesting\u002Fdiffs\u002F\"\n\n  ignore_selectors:\n    - \".timestamp\"\n    - \".live-chat\"\n    - \"#advertisement\"\n```\n\n### CI\u002FCD Integration\n\n```yaml\nci_integration:\n  on: [pull_request]\n\n  steps:\n    - name: Run visual regression tests\n      run: npm run test:visual\n\n    - name: Upload screenshots\n      uses: actions\u002Fupload-artifact@v3\n      with:\n        name: visual-diffs\n        path: .aiwg\u002Ftesting\u002Fdiffs\u002F\n\n    - name: Comment on PR\n      uses: percy\u002Fpercy-comment@v1\n      with:\n        build-url: ${{ steps.percy.outputs.build-url }}\n\n  fail_on:\n    critical_regressions: true\n    high_severity_regressions: true\n    threshold_exceeded: true\n```\n\n## Output Locations\n\n- Baselines: `.aiwg\u002Ftesting\u002Fbaselines\u002Fvisual\u002F`\n- Screenshots: `.aiwg\u002Ftesting\u002Fscreenshots\u002F`\n- Diffs: `.aiwg\u002Ftesting\u002Fdiffs\u002F`\n- Reports: `.aiwg\u002Ftesting\u002Fvisual-regression-report.md`\n- Metadata: `.aiwg\u002Ftesting\u002Fvisual-metadata.json`\n\n## References\n\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fschemas\u002Ftesting\u002Fregression.yaml\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fskills\u002Fregression-baseline\u002FSKILL.md\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fskills\u002Fregression-report\u002FSKILL.md\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fagents\u002Ftest-engineer.md\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Frules\u002Fexecutable-feedback.md\n","# regression-visual\n\nDetect visual and UI regressions through screenshot comparison and pixel-diff analysis.\n\n## Triggers\n\n\nAlternate expressions and non-obvious activations (primary phrases are matched automatically from the skill description):\n\n- \"visual diff\" → screenshot\u002FUI comparison\n- \"UI diff\" → visual regression shorthand\n- \"Playwright screenshots\" \u002F \"Storybook snapshots\" → tool-specific visual regression\n\n## Purpose\n\nThis skill manages visual regression detection by:\n- Capturing screenshots across browsers and viewports\n- Comparing current UI to baseline screenshots\n- Detecting pixel-level differences with configurable thresholds\n- Identifying layout shifts, color changes, and missing elements\n- Running component-level visual tests\n- Checking accessibility visual indicators\n- Generating visual diff reports with side-by-side comparisons\n\n## Behavior\n\nWhen triggered, this skill:\n\n1. **Identifies visual test scope**:\n   - Determine which components\u002Fpages to test\n   - Select browsers and devices (cross-browser testing)\n   - Identify viewports for responsive testing\n   - Check for existing visual baselines\n   - Locate test configuration\n\n2. **Captures screenshots**:\n   - Run browser automation (Playwright, Puppeteer)\n   - Take screenshots at each viewport size\n   - Capture component states (hover, focus, error, disabled)\n   - Handle dynamic content (hide timestamps, animations)\n   - Store screenshots with metadata\n\n3. **Compares to baseline**:\n   - Load baseline screenshots\n   - Perform pixel-by-pixel comparison\n   - Calculate difference percentage\n   - Apply threshold tolerance (e.g., 0.1%)\n   - Generate diff images highlighting changes\n\n4. **Categorizes differences**:\n   - Layout shift (position\u002Fsize changes)\n   - Color changes (background, text, borders)\n   - Typography changes (font, size, weight)\n   - Spacing\u002Falignment issues\n   - Missing or extra elements\n   - Visual accessibility issues\n\n5. **Generates visual diff report**:\n   - Side-by-side baseline vs current\n   - Diff overlay highlighting changes\n   - List of detected regressions by category\n   - Severity assessment per change\n   - Links to affected components\n\n6. **Integrates with CI\u002FCD**:\n   - Run visual tests in pipeline\n   - Block PRs if threshold exceeded\n   - Upload screenshots to cloud storage\n   - Comment on PRs with visual diff links\n\n## Visual Regression Categories\n\n### Layout Shift\n\n```yaml\nlayout_shift:\n  description: Position or dimension changes\n  detection:\n    - element_moved\n    - element_resized\n    - overflow_introduced\n    - spacing_changed\n    - alignment_broken\n\n  example:\n    component: \"NavigationBar\"\n    issue: \"Menu shifted 10px right\"\n    severity: medium\n    cause: \"CSS margin change\"\n    diff_percentage: 2.3\n```\n\n### Color Changes\n\n```yaml\ncolor_changes:\n  description: Color, gradient, or opacity changes\n  detection:\n    - background_color_changed\n    - text_color_changed\n    - border_color_changed\n    - gradient_modified\n    - opacity_changed\n\n  example:\n    component: \"PrimaryButton\"\n    issue: \"Background color #007bff → #0056b3\"\n    severity: high\n    cause: \"Design system update not applied\"\n    diff_percentage: 0.8\n```\n\n### Typography Changes\n\n```yaml\ntypography_changes:\n  description: Font, size, weight, line-height changes\n  detection:\n    - font_family_changed\n    - font_size_changed\n    - font_weight_changed\n    - line_height_changed\n    - letter_spacing_changed\n\n  example:\n    component: \"Heading\"\n    issue: \"Font size 24px → 22px\"\n    severity: low\n    cause: \"CSS reset applied incorrectly\"\n    diff_percentage: 0.5\n```\n\n### Spacing\u002FAlignment Issues\n\n```yaml\nspacing_alignment:\n  description: Padding, margin, alignment issues\n  detection:\n    - padding_changed\n    - margin_changed\n    - text_alignment_changed\n    - element_misalignment\n    - grid_layout_broken\n\n  example:\n    component: \"CardGrid\"\n    issue: \"Cards no longer aligned in grid\"\n    severity: high\n    cause: \"Flexbox to Grid migration incomplete\"\n    diff_percentage: 4.2\n```\n\n### Missing\u002FExtra Elements\n\n```yaml\nelement_changes:\n  description: Elements added, removed, or hidden\n  detection:\n    - element_missing\n    - element_added\n    - visibility_changed\n    - display_none_applied\n    - z_index_overlap\n\n  example:\n    component: \"Footer\"\n    issue: \"Privacy link missing\"\n    severity: critical\n    cause: \"Conditional rendering bug\"\n    diff_percentage: 1.2\n```\n\n### Accessibility Visual Indicators\n\n```yaml\naccessibility_visual:\n  description: Focus indicators, contrast, icon visibility\n  detection:\n    - focus_outline_missing\n    - color_contrast_reduced\n    - screen_reader_text_visible\n    - icon_missing_or_broken\n    - keyboard_navigation_indicator_absent\n\n  example:\n    component: \"FormInput\"\n    issue: \"Focus outline removed\"\n    severity: critical\n    cause: \"CSS reset removed :focus styles\"\n    diff_percentage: 0.3\n    accessibility_impact: \"Keyboard users cannot see focus\"\n```\n\n## Tool Integration\n\n### Percy\n\n```yaml\npercy_integration:\n  description: Visual testing platform with cloud diffing\n  workflow:\n    - capture: \"percy snapshot \u003Cname>\"\n    - compare: \"percy finalize\"\n    - review: \"Percy dashboard for diffs\"\n\n  configuration:\n    project_token: \"PERCY_TOKEN\"\n    widths: [375, 768, 1280, 1920]\n    min_height: 1024\n    enable_javascript: true\n\n  example_command:\n    - \"npx percy exec -- npm run test:visual\"\n```\n\n### Chromatic\n\n```yaml\nchromatic_integration:\n  description: Storybook visual testing platform\n  workflow:\n    - build_storybook: \"npm run build-storybook\"\n    - publish: \"npx chromatic --project-token=\u003Ctoken>\"\n    - review: \"Chromatic dashboard\"\n\n  configuration:\n    project_token: \"CHROMATIC_TOKEN\"\n    exit_zero_on_changes: false\n    auto_accept_changes: false\n\n  example_command:\n    - \"npx chromatic --project-token=$CHROMATIC_TOKEN\"\n```\n\n### BackstopJS\n\n```yaml\nbackstopjs_integration:\n  description: Open-source screenshot comparison tool\n  workflow:\n    - setup: \"backstop init\"\n    - reference: \"backstop reference\"\n    - test: \"backstop test\"\n    - approve: \"backstop approve\"\n\n  configuration_file: \"backstop.json\"\n  configuration:\n    viewports:\n      - label: mobile\n        width: 375\n        height: 667\n      - label: tablet\n        width: 768\n        height: 1024\n      - label: desktop\n        width: 1920\n        height: 1080\n    scenarios:\n      - label: \"Homepage\"\n        url: \"http:\u002F\u002Flocalhost:3000\"\n        selectors: [\"document\"]\n        delay: 500\n        misMatchThreshold: 0.1\n\n  example_command:\n    - \"backstop test --config=backstop.json\"\n```\n\n### Playwright Screenshots\n\n```yaml\nplaywright_integration:\n  description: Cross-browser screenshot capture with Playwright\n  workflow:\n    - setup: \"playwright install\"\n    - capture: \"playwright test --project=visual\"\n    - compare: \"Custom comparison or integrate with Percy\u002FChromatic\"\n\n  test_example: |\n    test('visual regression - homepage', async ({ page }) => {\n      await page.goto('http:\u002F\u002Flocalhost:3000');\n\n      \u002F\u002F Hide dynamic content\n      await page.evaluate(() => {\n        document.querySelectorAll('.timestamp').forEach(el => el.style.visibility = 'hidden');\n      });\n\n      \u002F\u002F Take screenshot\n      await expect(page).toHaveScreenshot('homepage.png', {\n        maxDiffPixels: 100,  \u002F\u002F Allow 100 pixels difference\n      });\n    });\n\n  browsers: [chromium, firefox, webkit]\n  viewports:\n    - width: 375, height: 667   # Mobile\n    - width: 768, height: 1024  # Tablet\n    - width: 1920, height: 1080 # Desktop\n```\n\n## Diff Threshold Configuration\n\n```yaml\ndiff_thresholds:\n  critical_components:\n    threshold: 0.01  # 0.01% difference allowed\n    components:\n      - authentication_flow\n      - checkout_process\n      - payment_forms\n    action_on_exceed: fail\n\n  standard_components:\n    threshold: 0.1   # 0.1% difference allowed\n    components:\n      - navigation\n      - footer\n      - product_cards\n    action_on_exceed: warn\n\n  low_priority_components:\n    threshold: 1.0   # 1% difference allowed\n    components:\n      - blog_posts\n      - marketing_banners\n      - testimonials\n    action_on_exceed: info\n\n  ignore_areas:\n    - \".timestamp\"\n    - \".live-chat-widget\"\n    - \".advertisement\"\n    - \"#dynamic-content\"\n```\n\n## Responsive Design Testing\n\n```yaml\nresponsive_viewports:\n  mobile:\n    - name: \"iPhone SE\"\n      width: 375\n      height: 667\n      user_agent: \"Mobile Safari\"\n    - name: \"iPhone 14 Pro\"\n      width: 393\n      height: 852\n      user_agent: \"Mobile Safari\"\n    - name: \"Android (Pixel 7)\"\n      width: 412\n      height: 915\n      user_agent: \"Chrome Mobile\"\n\n  tablet:\n    - name: \"iPad Mini\"\n      width: 768\n      height: 1024\n      user_agent: \"Mobile Safari\"\n    - name: \"iPad Pro 11\"\n      width: 834\n      height: 1194\n      user_agent: \"Mobile Safari\"\n\n  desktop:\n    - name: \"Laptop (1366x768)\"\n      width: 1366\n      height: 768\n    - name: \"Desktop (1920x1080)\"\n      width: 1920\n      height: 1080\n    - name: \"Wide (2560x1440)\"\n      width: 2560\n      height: 1440\n\n  breakpoints:\n    - 375   # Mobile\n    - 768   # Tablet\n    - 1024  # Small desktop\n    - 1280  # Medium desktop\n    - 1920  # Large desktop\n```\n\n## Visual Diff Report\n\n```markdown\n# Visual Regression Report\n\n**Date**: 2026-01-28T15:30:00Z\n**Baseline**: visual-baseline-v2.1.0\n**Current**: HEAD (commit abc123)\n**Total Comparisons**: 47\n**Status**: ⚠️ Regressions Detected\n\n## Executive Summary\n\n| Metric | Count | Status |\n|--------|-------|--------|\n| Total Screens | 47 | - |\n| Matches | 42 | ✅ |\n| Differences | 5 | ⚠️ |\n| Critical | 1 | ❌ |\n| High Severity | 2 | ⚠️ |\n| Medium Severity | 1 | ⚠️ |\n| Low Severity | 1 | ℹ️ |\n\n## Critical Regressions\n\n### 1. Login Form - Focus Indicator Missing\n\n**Component**: `LoginForm`\n**Severity**: Critical\n**Category**: Accessibility Visual\n**Diff**: 0.3%\n\n**Baseline**:\n![Baseline](baselines\u002Flogin-form-focused.png)\n\n**Current**:\n![Current](current\u002Flogin-form-focused.png)\n\n**Diff**:\n![Diff](diffs\u002Flogin-form-focused-diff.png)\n\n**Issue**: Focus outline no longer visible on input fields\n\n**Impact**:\n- Accessibility: Keyboard users cannot see which field is focused\n- WCAG 2.1 Level AA failure: 2.4.7 Focus Visible\n\n**Root Cause**: CSS reset removed `:focus` styles\n\n**Recommendation**: Restore focus outline or implement custom focus indicator\n\n**Introduced By**: commit def456 - \"Update CSS reset to modern-normalize\"\n\n## High Severity Regressions\n\n### 2. Product Card Grid - Layout Broken\n\n**Component**: `ProductGrid`\n**Severity**: High\n**Category**: Layout Shift\n**Diff**: 4.2%\n\n**Baseline**:\n![Baseline](baselines\u002Fproduct-grid-desktop.png)\n\n**Current**:\n![Current](current\u002Fproduct-grid-desktop.png)\n\n**Diff**:\n![Diff](diffs\u002Fproduct-grid-desktop-diff.png)\n\n**Issue**: Cards no longer aligned in grid, third card wraps to new row\n\n**Impact**:\n- User Experience: Inconsistent card spacing\n- Layout: Grid breaks at 1366px viewport\n\n**Root Cause**: Flexbox to CSS Grid migration incomplete\n\n**Recommendation**: Complete Grid migration or revert to Flexbox\n\n**Affected Viewports**: Desktop (1366x768, 1920x1080)\n\n### 3. Primary Button - Color Change\n\n**Component**: `PrimaryButton`\n**Severity**: High\n**Category**: Color Change\n**Diff**: 0.8%\n\n**Baseline**:\n![Baseline](baselines\u002Fprimary-button.png)\n\n**Current**:\n![Current](current\u002Fprimary-button.png)\n\n**Diff**:\n![Diff](diffs\u002Fprimary-button-diff.png)\n\n**Issue**: Background color changed from #007bff to #0056b3\n\n**Impact**:\n- Brand Consistency: Not using design system primary color\n- Contrast: New color has slightly lower contrast (4.8:1 vs 5.2:1)\n\n**Root Cause**: Design token not applied, hardcoded color used\n\n**Recommendation**: Replace hardcoded #0056b3 with CSS var(--color-primary)\n\n## Medium Severity Regressions\n\n### 4. Navigation Bar - Spacing Change\n\n**Component**: `NavigationBar`\n**Severity**: Medium\n**Category**: Spacing\u002FAlignment\n**Diff**: 2.3%\n\n**Issue**: Menu items shifted 10px right, logo padding increased\n\n**Impact**: Minor visual inconsistency, still functional\n\n**Recommendation**: Review spacing changes in commit ghi789\n\n## Low Severity Regressions\n\n### 5. Footer - Typography Size\n\n**Component**: `Footer`\n**Severity**: Low\n**Category**: Typography Change\n**Diff**: 0.5%\n\n**Issue**: Copyright text font size reduced from 14px to 12px\n\n**Impact**: Minor readability change, within acceptable range\n\n**Recommendation**: Verify intentional change or revert\n\n## Passing Comparisons (42)\n\nAll other components match baseline within threshold:\n- Homepage hero section ✅\n- Contact form ✅\n- Dashboard widgets (x12) ✅\n- Profile settings ✅\n- Search results ✅\n... (37 more)\n\n## Recommendations\n\n### Immediate Actions\n\n- [ ] Fix critical accessibility issue: Restore focus indicators\n- [ ] Fix product grid layout on desktop viewports\n- [ ] Review and correct primary button color\n\n### Process Improvements\n\n- [ ] Add visual regression tests to CI pipeline\n- [ ] Require visual approval before merging UI changes\n- [ ] Update design token usage guidelines\n- [ ] Add pre-commit hook for CSS changes\n\n### Baseline Updates\n\nIf changes are intentional:\n- [ ] Review diffs with design team\n- [ ] Update visual baseline to v2.2.0\n- [ ] Document breaking changes in changelog\n- [ ] Notify stakeholders of visual changes\n\n## Approval\n\nTo update baseline with approved changes:\n\n```bash\n# Review changes\naiwg baseline compare visual-baseline-v2.1.0\n\n# Approve specific changes\naiwg baseline update visual-baseline-v2.1.0 \\\n  --approve footer-typography \\\n  --approve navigation-spacing \\\n  --justification \"Design system v2.2 updates\"\n\n# Or create new baseline\naiwg baseline create visual-baseline-v2.2.0 \\\n  --based-on v2.1.0 \\\n  --changes \"Design system v2.2 applied\"\n```\n\n## Test Execution Details\n\n**Tool**: Playwright + Percy\n**Browsers**: Chromium, Firefox, WebKit\n**Viewports**: Mobile (375px), Tablet (768px), Desktop (1920px)\n**Total Screenshots**: 141 (47 components × 3 viewports)\n**Duration**: 4m 32s\n**Parallel Execution**: 4 workers\n\n## Links\n\n- [Full Percy Report](https:\u002F\u002Fpercy.io\u002Fproject\u002Fbuild\u002F123)\n- [CI Pipeline Run](https:\u002F\u002Fci.example.com\u002Frun\u002F456)\n- [GitHub PR #789](https:\u002F\u002Fgithub.com\u002Forg\u002Frepo\u002Fpull\u002F789)\n```\n\n## Usage Examples\n\n### Detect Visual Regressions\n\n```\nUser: \"Run visual regression tests\"\n\nSkill executes:\n1. Identify test configuration (Playwright, Percy, BackstopJS)\n2. Determine viewports and browsers\n3. Capture screenshots\n4. Compare to baseline\n5. Generate diff report\n\nOutput:\n\"Visual Regression Test Complete\n\nStatus: ⚠️ Regressions Detected\n\nSummary:\n- Total: 47 screens tested\n- Matches: 42 (89%)\n- Differences: 5 (11%)\n\nCritical Issues:\n1. Login form focus indicator missing (accessibility)\n2. Product grid layout broken on desktop\n3. Primary button color changed\n\nSee full report: .aiwg\u002Ftesting\u002Fvisual-regression-report.md\n\nReview diffs: https:\u002F\u002Fpercy.io\u002Fproject\u002Fbuild\u002F123\"\n```\n\n### Create Visual Baseline\n\n```\nUser: \"Create visual baseline for v2.1.0\"\n\nSkill checks:\n\"Creating visual baseline for v2.1.0\n\nCapturing screenshots:\n- Components: 47\n- Viewports: 3 (mobile, tablet, desktop)\n- Browsers: 3 (Chromium, Firefox, WebKit)\n\nTotal screenshots: 141\n\nEstimated time: 5 minutes\"\n\nSkill creates:\n\"Visual Baseline Created: visual-baseline-v2.1.0\n\nScope: All UI components\nFormat: PNG screenshots\nLocation: .aiwg\u002Ftesting\u002Fbaselines\u002Fvisual\u002Fv2.1.0\u002F\n\nFiles:\n- 141 baseline screenshots\n- metadata.json with viewport\u002Fbrowser info\n- manifest.yaml with component inventory\n\nStatus: Active\nGit Commit: abc123\nRelease: v2.1.0\n\nNext: Baseline will be used for regression detection\"\n```\n\n### Compare Specific Component\n\n```\nUser: \"Check for visual changes in LoginForm\"\n\nSkill analyzes:\n\"Visual Comparison: LoginForm\n\nViewports Tested:\n- Mobile (375px): ✅ Match\n- Tablet (768px): ✅ Match\n- Desktop (1920px): ❌ Regression\n\nRegression Details:\nComponent: LoginForm\nViewport: Desktop (1920px)\nCategory: Accessibility Visual\nSeverity: Critical\nDiff: 0.3%\n\nIssue: Focus outline missing on input fields\n\nBaseline:\n[Shows image with visible focus outline]\n\nCurrent:\n[Shows image without focus outline]\n\nDiff:\n[Highlights missing outline area]\n\nRecommendation: Restore focus styles for accessibility\"\n```\n\n## Integration\n\nThis skill uses:\n- `regression-baseline`: Manage visual baselines\n- `regression-bisect`: Find commits that introduced visual changes\n- `regression-report`: Generate comprehensive regression reports\n- `test-coverage`: Ensure visual tests cover critical UI paths\n- `project-awareness`: Detect test framework and configuration\n\n## Agent Orchestration\n\n```yaml\nagents:\n  setup:\n    agent: test-engineer\n    focus: Configure visual testing tools and capture baselines\n\n  analysis:\n    agent: test-architect\n    focus: Analyze visual regressions and categorize issues\n\n  remediation:\n    agent: frontend-developer\n    focus: Fix visual regressions based on analysis\n\n  validation:\n    agent: design-lead\n    focus: Approve intentional visual changes\n```\n\n## Configuration\n\n### Visual Testing Setup\n\n```yaml\nvisual_testing:\n  tool: playwright  # percy | chromatic | backstopjs | playwright\n\n  browsers:\n    - chromium\n    - firefox\n    - webkit\n\n  viewports:\n    - { width: 375, height: 667, name: \"mobile\" }\n    - { width: 768, height: 1024, name: \"tablet\" }\n    - { width: 1920, height: 1080, name: \"desktop\" }\n\n  diff_threshold:\n    default: 0.1  # 0.1% pixel difference\n    critical: 0.01  # 0.01% for critical components\n\n  baseline_path: \".aiwg\u002Ftesting\u002Fbaselines\u002Fvisual\u002F\"\n  screenshot_path: \".aiwg\u002Ftesting\u002Fscreenshots\u002F\"\n  diff_path: \".aiwg\u002Ftesting\u002Fdiffs\u002F\"\n\n  ignore_selectors:\n    - \".timestamp\"\n    - \".live-chat\"\n    - \"#advertisement\"\n```\n\n### CI\u002FCD Integration\n\n```yaml\nci_integration:\n  on: [pull_request]\n\n  steps:\n    - name: Run visual regression tests\n      run: npm run test:visual\n\n    - name: Upload screenshots\n      uses: actions\u002Fupload-artifact@v3\n      with:\n        name: visual-diffs\n        path: .aiwg\u002Ftesting\u002Fdiffs\u002F\n\n    - name: Comment on PR\n      uses: percy\u002Fpercy-comment@v1\n      with:\n        build-url: ${{ steps.percy.outputs.build-url }}\n\n  fail_on:\n    critical_regressions: true\n    high_severity_regressions: true\n    threshold_exceeded: true\n```\n\n## Output Locations\n\n- Baselines: `.aiwg\u002Ftesting\u002Fbaselines\u002Fvisual\u002F`\n- Screenshots: `.aiwg\u002Ftesting\u002Fscreenshots\u002F`\n- Diffs: `.aiwg\u002Ftesting\u002Fdiffs\u002F`\n- Reports: `.aiwg\u002Ftesting\u002Fvisual-regression-report.md`\n- Metadata: `.aiwg\u002Ftesting\u002Fvisual-metadata.json`\n\n## References\n\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fschemas\u002Ftesting\u002Fregression.yaml\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fskills\u002Fregression-baseline\u002FSKILL.md\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fskills\u002Fregression-report\u002FSKILL.md\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Fagents\u002Ftest-engineer.md\n- @$AIWG_ROOT\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsdlc-complete\u002Frules\u002Fexecutable-feedback.md\n",{"name":5,"namespace":44,"platforms":45,"description":7},"aiwg",[46],"all","main","6754967c344ccb087a8de06972f55a41067b291b","agentic\u002Fcode\u002Fplugins\u002Fcodex-sdlc\u002Fskills\u002Fregression-visual",36,"https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg","https:\u002F\u002Faiwg.io","https:\u002F\u002Fgithub.com\u002Fjmagly","https:\u002F\u002Fintegrolabs.io","ml\u002Fai, industrial automation, safety\u002Fsecurity, ssi\r\n\r\nmagly.net\r\nintegrolabs.io\r\naiwg.io\r\nfortemi.com\r\npagenary.com\r\nbytecask.com","2026-11-14 10:46:34",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add jmagly\u002Faiwg --skill regression-visual",{"tool":63,"command":64},"bunx","bunx skills add jmagly\u002Faiwg --skill regression-visual",{"tool":66,"command":67},"pnpm","pnpm dlx skills add jmagly\u002Faiwg --skill regression-visual","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Fagentic\u002Fcode\u002Fplugins\u002Fcodex-sdlc\u002Fskills\u002Fregression-visual\u002FSKILL.md",true,[71],{"path":72,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"LICENSE","许可证",1068,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-keepmacawake\u002FLICENSE",[77,105,128,134,141,155],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":84,"publishedAt":39},"01M70QA0BSYJ49EES9V4RE8QH1","host-hardening","Read-only system hardening baseline and plan-first host hardening recommendations for SSH, Docker bind addresses, firewall persistence, datastores, exporters and audit retention.","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Fagentic\u002Fcode\u002Fplugins\u002Fsecurity-engineering\u002Fskills\u002Fhost-hardening\u002FSKILL.md",[83],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104],"host","host hardening","hardening","read","re","recommendations","remediation","plan","port","verification","Bash","access","only","retention","audit","never","firewall","bind","secrets","request",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":115,"publishedAt":39},"01M70PNT2Z4HMZPRBTAF6073NN","exposure-analysis","Read-only firewall analysis and effective host exposure reconstruction for Docker published ports, UFW bypass, stale rules, CDN scope, IPv6 asymmetry and external probe allowlists.","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Fagentic\u002Fcode\u002Fplugins\u002Fforensics\u002Fskills\u002Fexposure-analysis\u002FSKILL.md",[111,114],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[116,32,117,88,118,93,119,120,95,121,85,122,97,123,124,100,101,125,126,127],"exposure analysis","unknown","credentials","collection","ufw","ports","internet","local","scope","reconstruction","operator","write",{"skillNo":129,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":133,"publishedAt":39},"01M70P8QATMPKA78E4FT5D2TNA","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Fagentic\u002Fcode\u002Fframeworks\u002Fsecurity-engineering\u002Fskills\u002Fhost-hardening\u002FSKILL.md",[132],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[87,85,86,96,88,104,91,90,99,92,93,94,95,103,97,98,89,100,101,102],{"skillNo":135,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":140,"publishedAt":39},"01M70NMPVJ5H0JH131P60FW4R8","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Fagentic\u002Fcode\u002Fframeworks\u002Fforensics-complete\u002Fskills\u002Fexposure-analysis\u002FSKILL.md",[138,139],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[32,116,100,118,93,119,95,117,85,122,97,123,124,88,101,121,120,125,126,127],{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":148,"publishedAt":39},"01M6CB4DDR0B4NNCFK7ZK7449H","fixture-skill","Exercise rule delivery.","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002Frule-delivery\u002Fskills\u002Ffixture-skill\u002FSKILL.md",[147],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[149,150,151,152,153,154],"fixture skill","fixture","rule","delivery","true","exercise",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":162,"publishedAt":39},"01M6CB4AVK1W76MFMPP0JP32CJ","pi-local","Pi-local duplicate-precedence fixture.","https:\u002F\u002Fgithub.com\u002Fjmagly\u002Faiwg\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002Fproviders\u002Fpi\u002Fproject\u002F.pi\u002Fskills\u002Fpi-local\u002FSKILL.md",[161],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[163,164,123,165,150],"pi","pi local","duplicate"]