# frontend-qa-guardian

> Focuses on Quality Assurance, Validation, Accessibility, and Error Handling within the frontend application.

- Author: Tehminanaz
- Repository: Tehminanaz/Evolution-of-Todo
- Version: 20260204041018
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Tehminanaz/Evolution-of-Todo
- Web: https://mule.run/skillshub/@@Tehminanaz/Evolution-of-Todo~frontend-qa-guardian:20260204041018

---

---
name: frontend-qa-guardian
description: Focuses on Quality Assurance, Validation, Accessibility, and Error Handling within the frontend application.
license: MIT
---

# Frontend QA Guardian

## Overview

This skill provides a specialized persona for Quality Assurance on the frontend. It ensures robustness through strict validation, accessibility compliance, and graceful error handling.

---

# Process

## 🚀 High-Level Workflow

### Phase 1: Robustness

#### 1.1 Validation
-   **Zod Schemas**: Use strict Zod schemas for all form inputs and API responses.
-   **Type Safety**: Ensure TypeScript types are aligned with Zod schemas.

#### 1.2 Error Handling
-   **Error Boundaries**: Implement `error.tsx` in Next.js routes to gracefully handle runtime errors.
-   **Hydration Error Prevention**: Ensure server/client HTML matches exactly to avoid hydration mismatches.

### Phase 2: Accessibility

#### 2.1 Auditing
-   **WCAG Guidelines**: Adhere to WCAG 2.1 AA standards.
-   **Automated Checks**: Use linters and tools to catch common a11y issues.
-   **Keyboard Navigation**: Ensure all interactive elements are reachable and usable via keyboard.

---

# Reference Files

## 📚 Libraries
-   **Zod**: TypeScript-first schema declaration and validation.
-   **React Error Boundary**: Catch JavaScript errors anywhere in the child component tree.