Run any Skill in Manus with one click

ralph-playwrightstorybook-test

Stars2

Forks0

UpdatedMarch 20, 2026 at 02:40

Run Storybook 9 component tests (interaction + a11y) using Vitest browser mode or legacy test-runner. Detects which runner is installed and adapts. Optionally uses Storybook MCP to validate component usage. Requires Storybook 9+ with @storybook/addon-vitest or @storybook/test-runner.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

cdubiel08

cdubiel08/ralph-hero

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software Quality Assurance Analysts and TestersComputer and Mathematical Occupations·SOC 15-1253

SKILL.md

readonly

name	ralph-playwright:storybook-test
description	Run Storybook 9 component tests (interaction + a11y) using Vitest browser mode or legacy test-runner. Detects which runner is installed and adapts. Optionally uses Storybook MCP to validate component usage. Requires Storybook 9+ with @storybook/addon-vitest or @storybook/test-runner.

Storybook Component Testing

Step 1: Detect Storybook setup

npx storybook --version          # needs 9.x
cat package.json | grep -E "addon-vitest|test-runner"

@storybook/addon-vitest found → Vitest mode (Storybook 9+, recommended)
@storybook/test-runner found → Legacy mode (Storybook 7/8, still works with 9)
Neither → show install instructions

Install instructions (if neither found)

npm install -D @storybook/addon-vitest

Then add @storybook/addon-vitest to your .storybook/main.js addons array.

Step 2: Run tests

Vitest mode:

npx vitest --project=storybook

Legacy mode:

npx test-storybook --url http://localhost:6006

Step 3: Storybook MCP enrichment (optional)

If Storybook MCP is registered (http://localhost:6006/mcp):

Call list-all-components to enumerate all components
Cross-reference with test results
Flag any components with no stories (coverage gap)

Step 4: Report

== Storybook Component Tests ==
Components: 24 | Stories: 87 | ✅ Pass: 85 | ❌ Fail: 2

FAILED:
  ❌ Button/Primary — Interaction: onClick not called after keyboard Enter
  ❌ Form/LoginForm — A11y: missing label on password field (WCAG 1.3.1)

A11y summary: 1 violation across 1 component
Coverage gaps: 0 components have no stories

More from this repository

same repository

record-demo

cdubiel08/ralph-hero

Capture an OBS-based screen demo for a GitHub issue — orchestrates obs-cli to record, optionally trim/thumbnail, then upload and post a `## Demo Recording` comment. Requires OBS Studio + obs-cli installed and OBS WebSocket server running. Use when the user wants to record a live screen demo (as opposed to generating a composited video from JSON — that is the `demo-video` skill in this plugin).

2026-05-252

ralph-playwright-design-system-audit

cdubiel08/ralph-hero

Assess and score a design system's maturity for AI-driven frontend development using a 5-ring, 6-tier maturity model. Produces a scored report with a prioritized action plan tailored to the user's framework, team size, and goals. Use this skill whenever someone asks about design system readiness, AI readiness for frontend, design-to-code maturity, Figma-to-code pipeline health, component library quality, or wants to know "how ready is my design system for AI." Also trigger when users mention design tokens, Code Connect, Figma MCP, component registries, want to accelerate frontend development with Claude Code, or are migrating between frameworks (e.g., React to Angular) and want to set up their design system right. Trigger proactively if a user describes building a design system, setting up tokens, or connecting Figma to code — even if they don't say "audit." Covers React, Angular, Vue, Svelte, and framework-agnostic setups.

2026-05-252

ralph-playwright-ux-audit

cdubiel08/ralph-hero

Evaluate a live website against current (2026) UX/UI design trends using playwright-cli. Scores the site across 8 trend categories with a detailed rubric, captures evidence screenshots, and produces a research note with actionable recommendations. Use this skill whenever someone asks about UX modernness, design trends compliance, whether a site feels "current" or "dated", wants a UX review or audit focused on visual and interaction trends, asks how their site compares to modern design standards, mentions bento grids, dopamine design, spatial UI, agentic UX, or multimodal interfaces in a review context, or wants to know what UX improvements would have the most impact. Also trigger when someone asks to "audit the UX" or "review the design" of a running site — even if they don't mention specific trends.

2026-05-252

using-html

cdubiel08/ralph-hero

Use when producing multi-option design comparisons, research synthesis docs, status/incident reports, implementation plans, PR reviews & writeups, module maps, design-system references, component-variant sheets, SVG figures & flowcharts, interaction/animation prototypes, or slide decks — anything that would otherwise be a long Markdown document. Reach for this skill whenever the user asks to "compare", "explore options", "research", "summarize findings", "write up", "synthesize", "explain how X works", "plan", "review this PR", "map this package", "show our design tokens", "draw/diagram", "flowchart", "prototype", "tune the easing", or "make a deck/slides" — and especially when the output will exceed ~100 lines, contain side-by-side options, be visual or interactive, or be shared with another person. HTML beats Markdown for these by a wide margin (visual hierarchy, tables, SVG diagrams, navigability, live interaction); default to invoking this skill even if the user doesn't explicitly ask for HTML.

2026-05-252

ralph-playwright-test-e2e

cdubiel08/ralph-hero

Run all user story YAML files in playwright-stories/ using the execute → reflect → act pipeline via playwright-cli. Aggregates pass/fail results with screenshots and signals. Optionally filter by type or tags.

2026-05-172

ralph-playwright-visual-diff

cdubiel08/ralph-hero

Storybook-component-level visual regression via Chromatic (default, free tier) or Applitools Eyes (AI-based). Pairs with the in-loop semantic visual diff (`reflect --baseline`) which catches journey-level changes. Use after visual changes to verify intentional vs unintentional component drift.

2026-05-032

name	ralph-playwright:storybook-test
description	Run Storybook 9 component tests (interaction + a11y) using Vitest browser mode or legacy test-runner. Detects which runner is installed and adapts. Optionally uses Storybook MCP to validate component usage. Requires Storybook 9+ with @storybook/addon-vitest or @storybook/test-runner.

Storybook Component Testing

Step 1: Detect Storybook setup

npx storybook --version          # needs 9.x
cat package.json | grep -E "addon-vitest|test-runner"

@storybook/addon-vitest found → Vitest mode (Storybook 9+, recommended)
@storybook/test-runner found → Legacy mode (Storybook 7/8, still works with 9)
Neither → show install instructions

Install instructions (if neither found)

npm install -D @storybook/addon-vitest

Then add @storybook/addon-vitest to your .storybook/main.js addons array.

Step 2: Run tests

Vitest mode:

npx vitest --project=storybook

Legacy mode:

npx test-storybook --url http://localhost:6006

Step 3: Storybook MCP enrichment (optional)

If Storybook MCP is registered (http://localhost:6006/mcp):

Call list-all-components to enumerate all components
Cross-reference with test results
Flag any components with no stories (coverage gap)

Step 4: Report

== Storybook Component Tests ==
Components: 24 | Stories: 87 | ✅ Pass: 85 | ❌ Fail: 2

FAILED:
  ❌ Button/Primary — Interaction: onClick not called after keyboard Enter
  ❌ Form/LoginForm — A11y: missing label on password field (WCAG 1.3.1)

A11y summary: 1 violation across 1 component
Coverage gaps: 0 components have no stories