frontend-worker

Name: frontend-worker
Availability: InStock
Author: otography

Automate frontend UI feature development with TDD and browser verification.

1|Updated Mar 16, 2026

Search Tags:#vitest #tdd #ui #frontend #react #testing-library #agent-browser

Ready to run

npx skills add https://github.com/otography/otography-app --skill frontend-worker

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-worker
Source: https://github.com/otography/otography-app/tree/main/.agents/skills/frontend-worker
Command: npx skills add https://github.com/otography/otography-app --skill frontend-worker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables rapid, reliable delivery of Web UI features by enforcing test-driven development and automated browser verification.

Core Features & Use Cases

TDD workflow with Vitest and Testing Library for React components and pages
Compound component pattern with Next.js App Router integration
Agent-browser verification to confirm UI behavior in real browsers
Clear handoffs and test-first delivery for UI changes

Quick Start

Create a new UI feature under apps/web/src/features, write tests with Vitest and Testing Library, and verify visuals with agent-browser.

Frequently Asked Questions about frontend-worker

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

FAQPage Schema

How do I automate frontend UI feature development with TDD and browser verification?▼

Automating frontend UI feature development with TDD and browser verification requires a workflow that coordinates Vitest tests, React implementation, and agent-browser checks to deliver verified UI changes. This skill orchestrates that entire test-first cycle.

What is the best way to test React compound components using Vitest and Testing Library?▼

Testing React compound components with Vitest and Testing Library involves writing tests first for components and pages, then implementing the UI features to pass those tests. This approach ensures reliable delivery within Next.js App Router integrations.

Can I use agent-browser to verify client-side authentication in a Next.js app?▼

Agent-browser verifies client-side authentication behavior in real browsers by confirming UI interactions during end-to-end development. This skill applies it alongside Vitest to validate authentication flows within React and Next.js applications.

Does this TDD workflow support Next.js App Router and compound component patterns?▼

This TDD workflow supports Next.js App Router and compound component patterns by applying test-driven development to React components and pages. It integrates Vitest and Testing Library to ensure UI features are verified before delivery.

What testing libraries do I need to set up before starting automated frontend UI delivery?▼

Automated frontend UI delivery requires Vitest, Testing Library, agent-browser, and a worker-base workflow to coordinate tests and implementation. These dependencies must be configured in your React or Next.js application before starting.

When should I avoid using an automated agent for React UI feature development?▼

Automated agent-based React UI feature development is suited for feature areas like components, pages, and routes requiring compound patterns. You should avoid it if your project lacks Vitest, Testing Library, or agent-browser dependencies.