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).

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.

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.

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.

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.

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.

Analyze a journey trace and its screenshots to produce a signal report. Use when you have a journey trace from a previous execute run and want to analyze it separately. Reads screenshots and accessibility snapshots to identify anomalies, regressions, a11y violations, and UX issues.

Daily inner-loop verification of Storybook stories. Dispatches explorer-agent against a story-id, glob, or git-diff-derived story set; produces a sub-minute report with screenshots, console errors, a11y snapshot, and drift vs. local cached baseline. Use after every component change as the fast feedback loop before pushing.

One-shot Day-Zero setup for the Angular + Storybook verification loop. Audits Storybook version + addons, confirms Chromatic access (project token, GitHub App, approval rights), delegates to the ralph-playwright setup skill, runs a smoke explorer-agent against one representative story, and emits a green/yellow/red status report. Idempotent — safe to re-run.

Explore a running website to discover user flows, analyze findings, and produce research notes with promoted screenshots. Uses the execute → reflect → act pipeline via playwright-cli. Works on localhost or any accessible URL.

Raw browser automation via playwright-cli with ralph-hero conventions. Use when you need direct access to playwright-cli commands — navigation, interaction, screenshots, snapshots, cookies, storage, network, devtools. All other ralph-playwright skills compose through this one. Requires global install of @playwright/cli.

Quick one-shot — screenshot a URL and optionally promote the screenshot to a research note in thoughts/. Runs execute (1-step) → reflect (minimal) → act (promote). Use for grabbing a screenshot of a specific page state.

Run a WCAG 2.2 AA accessibility audit against a URL using playwright-cli. Captures accessibility snapshots, analyzes for violations, and creates issues for findings. Uses the execute → reflect → act pipeline with an a11y-focused goal.

Generate user stories YAML from plain-text descriptions, feature requirements, or PRDs. Can optionally explore a live URL first to generate stories from observation. Automatically includes happy paths AND contextually relevant sad paths. Saves to playwright-stories/<feature-name>.yaml.

One-time setup for ralph-playwright — installs playwright-cli globally, validates browser installation, and creates playwright-stories/ directory. Use when setting up ralph-playwright for the first time or diagnosing a broken install.

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.

Generate sprint demo videos using Remotion. Use when the user wants to create a demo video, sprint recap video, presentation video, or any structured video from content like features, screenshots, and bullet points. Trigger on mentions of "demo video", "sprint video", "record a demo", "make a video", or "generate presentation".