skills.rest
johangm90
johangm90COMMUNITY
Explore all skills by this author →
GitHub

spex-frontend

Develop accessible, typed, tested web frontends for browser and PWA targets.

Updated Mar 5, 2026
Search Tags:#testing#accessibility#frontend#react#vue#ui development#nuxt
One-click install
npx skills add https://github.com/johangm90/spex --skill spex-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spex-frontend
Source: https://github.com/johangm90/spex/tree/main/skills/spex-frontend
Command: npx skills add https://github.com/johangm90/spex --skill spex-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation and maintenance of web user interfaces, ensuring they are accessible, well-typed, and thoroughly tested.

Core Features & Use Cases

  • Stack Identification: Automatically detects and configures the project's frontend stack (React/Next.js, Vue/Nuxt, SvelteKit).
  • State Management: Implements robust state management using recommended libraries like Zustand or Pinia.
  • Form Handling: Integrates form handling with schema validation using React Hook Form + Zod or VeeValidate + Zod.
  • Accessibility & Testing: Enforces accessibility best practices and writes unit and E2E tests.
  • Offline Support: Implements offline-first patterns for resilient user experiences.
  • Use Case: Implement the entire user interface for a new e-commerce product listing page, including product details, image gallery, add-to-cart functionality, and user reviews, ensuring it's responsive and accessible.

Quick Start

Implement the frontend for the user authentication flow using React and Next.js.

Frequently Asked Questions about spex-frontend

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

FAQPage Schema
How do I build an accessible and typed React frontend?▼

To build an accessible and typed React frontend, this Skill identifies your Next.js stack and implements UI components with schema validation, state management via Zustand, and enforced accessibility best practices.

How do I add form validation with Zod to a Vue or Nuxt project?▼

To add form validation with Zod to a Vue or Nuxt project, this Skill integrates VeeValidate with Zod to handle schema validation, ensuring your UI forms are well-typed and robust against invalid user input.

What is the best way to manage state in a Nuxt web application?▼

The best way to manage state in a Nuxt web application is using Pinia. This Skill automatically configures Vue and Nuxt projects to implement robust state management using this recommended library.

Can I implement offline-first patterns for a SvelteKit PWA?▼

Yes, you can implement offline-first patterns for a SvelteKit PWA. This Skill develops web frontends for browser and PWA targets, integrating offline support to ensure resilient user experiences.

How do I ensure my web UI components pass accessibility and E2E tests?▼

To ensure web UI components pass accessibility and E2E tests, this Skill enforces accessibility best practices during development and automatically writes unit and end-to-end tests for your frontend.

Does this frontend development approach work with React Hook Form and Zod?▼

Yes, this frontend development approach works with React Hook Form and Zod. It automatically integrates form handling with schema validation using RHF and Zod for React and Next.js stacks.

Related Skills

Explore More Software Engineering Skills→
chaitinchaitin
5

frontend-project-creator

Scaffold React frontend projects with Vite, TypeScript, and chosen UI libraries.

Official
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-deployment

Automate Flutter deployment guidance across Android, iOS, Web, and Desktop.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

performance-optimisation

Identify and fix performance bottlenecks across frontend, backend, and database layers.

Community
Basic
vuralserhat86vuralserhat86
43

web_artifacts_builder

Generate React web interfaces with Tailwind CSS and shadcn/ui components.

Community
Intermediate