skills.rest
google
googleOFFICIAL
Explore all skills by this author →
Website𝕏@GoogleOSSGitHub

dev-testing-frontend

Automate frontend testing and visual verification for Astro 5 and Svelte 5.

68|10|Updated Sep 26, 2025
Search Tags:#vitest#testing#frontend#svelte#tailwind#astro#visual-verification
One-click install
npx skills add https://github.com/google/capsem --skill dev-testing-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-testing-frontend
Source: https://github.com/google/capsem/tree/main/skills/dev-testing-frontend
Command: npx skills add https://github.com/google/capsem --skill dev-testing-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates frontend testing and visual verification for Capsem's UI, reducing debugging time by providing a ready-to-run workflow for type checks, tests, and visual verification.

Core Features & Use Cases

  • Orchestrates frontend tests for Astro 5, Svelte 5, Tailwind v4, and Preline
  • Enables Vitest unit testing, svelte-check type checks, and astro check for integrity
  • Supports mock mode and Chrome DevTools MCP visual verification workflow

Quick Start

Run the frontend test workflow and then visually verify UI states using Chrome DevTools MCP

Frequently Asked Questions about dev-testing-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate frontend testing and visual verification for Astro 5 and Svelte 5?▼

Automate frontend testing by running a workflow that orchestrates Vitest unit tests, svelte-check type checks, and astro check for integrity. Visual verification is handled using Chrome DevTools MCP to validate UI states across the development workflow.

Can I use Vitest to run unit tests for a Svelte 5 and Tailwind v4 UI workspace?▼

Yes, you can use Vitest to run unit tests for Svelte 5 and Tailwind v4. The workflow orchestrates these frontend tests within a properly structured workspace to verify component logic and UI integrity.

What's the best way to perform visual checks on Astro components during development?▼

The best way to perform visual checks on Astro components is through the Chrome DevTools MCP visual verification workflow. It allows you to validate UI states visually after running automated type checks and unit tests.

Does frontend type checking require separate configuration for Astro and Svelte?▼

Frontend type checking runs svelte-check for Svelte components and astro check for Astro integrity within a single automated workflow. This consolidates validation without needing completely separate manual configurations.

Do I need a specific frontend directory structure to run type checks and mock mode?▼

Yes, you need a properly structured frontend workspace directory to run type checks and mock mode. The environment must contain the necessary Astro 5 and Svelte 5 project files for the workflow to execute successfully.

Why does my frontend testing workflow require mock mode?▼

Mock mode is required in frontend testing to isolate UI component tests from external dependencies. It supports the visual verification workflow by ensuring the Astro and Svelte components render correctly in a controlled state.

Related Skills

Explore More Software Engineering Skills→
googlegoogle
68

frontend-design

Document Capsem's frontend design system for Astro 5, Svelte 5, Tailwind v4, and Preline.

Official
Intermediate
SternrasslerSternrassler
1

Chrome DevTools MCP Skill

Automate browser interactions and testing via the Chrome DevTools MCP Server.

Official
Advanced
ReadyStateChangeReadyStateChange

javascript-testing-expert

Implement deterministic JavaScript unit and component tests with Vitest and fast-check.

Official
Advanced
vrcmsvrcms
1

browser-qa

Automate visual testing and UI interaction verification for web applications.

Community
Advanced