mcpbeat

Smartui Skill

lambdatest/smartui-skill

> Generates SmartUI visual regression test configurations for screenshot comparison on TestMu AI cloud. Framework-agnostic — works with Playwright, Selenium, Cypress, Puppeteer. Use when user mentions "SmartUI", "visual "SmartUI", "visual regression", "screenshot comparison", "pixel diff", "visual testing LambdaTest".

6k tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
343
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/LambdaTest/agent-skills --skill smartui-skill

The instruction itself

12 sections, as written by the author

SmartUI Visual Regression Skill

Core Patterns

Playwright + SmartUI SDK

const { chromium } = require('playwright');
const { smartuiSnapshot } = require('@lambdatest/smartui-cli');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await smartuiSnapshot(page, 'Homepage');

  await page.goto('https://example.com/login');
  await smartuiSnapshot(page, 'Login Page');

  await browser.close();
})();

Selenium + SmartUI

// Take SmartUI screenshot
((JavascriptExecutor) driver).executeScript(
    "smartui.takeScreenshot=Login Page"
);

CLI Execution

# Install
npm install @lambdatest/smartui-cli --save-dev

# Configure
npx smartui config:create smartui.config.json

# Execute
npx smartui exec -- node test.js
# or with Playwright
npx smartui exec -- npx playwright test

smartui.config.json

{
  "web": {
    "browsers": ["chrome", "firefox", "safari"],
    "viewports": [[1920, 1080], [1366, 768], [375, 812]]
  },
  "waitForPageRender": 5000,
  "waitForTimeout": 1000
}

SmartUI with Storybook

npx smartui storybook http://localhost:6006 --config smartui.config.json

Approval Workflow

  • First run creates baseline screenshots
  • Subsequent runs compare against baseline
  • Differences highlighted in dashboard
  • Approve/reject changes in LambdaTest SmartUI dashboard
  • Approved screenshots become new baseline

Anti-Patterns

| Bad | Good | Why |

|-----|------|-----|

| No viewport config | Multiple viewports | Responsive issues |

| No wait for render | waitForPageRender | Incomplete screenshots |

| Screenshot everything | Key pages/components | Noise reduction |

| No approval process | Review diffs in dashboard | Catch regressions |

Cloud Authentication

Set environment variables:

export PROJECT_TOKEN="your-smartui-project-token"   # From SmartUI dashboard
export LT_USERNAME="your-username"                   # For Selenium/Playwright cloud
export LT_ACCESS_KEY="your-access-key"               # For Selenium/Playwright cloud

CLI approach (uses PROJECT_TOKEN):

npx smartui exec -- npx playwright test

Selenium Cloud approach (uses LT_USERNAME/LT_ACCESS_KEY):

// Capabilities include SmartUI options
HashMap<String, Object> ltOptions = new HashMap<>();
ltOptions.put("user", System.getenv("LT_USERNAME"));
ltOptions.put("accessKey", System.getenv("LT_ACCESS_KEY"));
ltOptions.put("build", "SmartUI Build");
ltOptions.put("smartUI.project", "My SmartUI Project");
ChromeOptions options = new ChromeOptions();
options.setCapability("LT:Options", ltOptions);
WebDriver driver = new RemoteWebDriver(
    new URL("https://hub.lambdatest.com/wd/hub"), options);

Quick Reference

| Task | Command |

|------|---------|

| Install | npm install @lambdatest/smartui-cli |

| Init config | npx smartui config:create smartui.config.json |

| Run | npx smartui exec -- <test command> |

| Storybook | npx smartui storybook <url> |

| Dashboard | https://smartui.lambdatest.com |

Deep Patterns

For advanced patterns, debugging guides, CI/CD integration, and best practices,

see reference/playbook.md.

How to use it

Copy the folder

Take lambdatest/smartui-skill from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm, npx. Without those the skill loads but fails at the first command.