What is the Frontend Verification skill?

It is a specialized capability for Claude Code that automates the testing of Angular applications by interacting with the browser to check for errors, network failures, and visual inconsistencies.

Can I test responsive designs with this skill?

Yes, the skill includes tools to resize the browser viewport to specific dimensions (like 375px for mobile or 1920px for desktop) to verify layout integrity.

Does it support backend validation?

While primarily a frontend tool, it includes health check scripts to ensure the Spring Boot backend and PostgreSQL database are operational for full integration testing.

How does it handle authenticated features?

It can automate form filling (like login pages) and verify that network requests include the correct Authorization headers and JWT tokens.

Do I need to have the application running locally?

Yes, the skill requires the Angular development server to be active. It provides built-in commands to check server status and restart them if necessary.

Angular Frontend Verification & Testing

Name: Angular Frontend Verification & Testing
Author: kojder

bykojder

0•

Security & Testing

Automates frontend verification for Angular 18 applications by analyzing console errors, network requests, and visual rendering via Chrome DevTools.

This skill empowers developers to rigorously validate Angular 18 frontend changes within the Claude Code environment. By leveraging Chrome DevTools MCP, it provides an automated workflow for detecting runtime errors, inspecting API integration through network traffic analysis, and performing visual regression checks across various screen resolutions. It is particularly valuable for verifying complex RxJS pipelines, ensuring JWT-authenticated API calls are successful, and confirming responsive layouts before marking a task as complete.

Key Features

01Multi-device responsive testing with viewport resizing (Mobile, Tablet, Desktop)

020 GitHub stars

03Integrated server management for Angular and Spring Boot dev environments

04Real-time network request inspection for API and JWT validation

05Visual state capture via screenshots and accessibility tree snapshots

06Automated console log analysis and detailed error stack tracing

Use Cases

01Verifying UI component rendering after implementing new features or CSS changes

02Ensuring end-to-end functionality of authenticated routes like photo management and geolocation

03Debugging failed API integrations by inspecting XHR/Fetch payloads and status codes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kojder/photo-map-app frontend-verification

For use in Claude.ai and ChatGPT

Download Skill