frontend-implementation

Implement React components with data fetching and accessibility conventions.

25|3|Updated Mar 10, 2026

Search Tags:#testing #accessibility #frontend #react #hooks #conventions

Ready to run

npx skills add https://github.com/JoeGaebel/outside-in-tdd-starter --skill frontend-implementation-joegaebel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-implementation
Source: https://github.com/JoeGaebel/outside-in-tdd-starter/tree/main/.claude/skills/frontend-implementation
Command: npx skills add https://github.com/JoeGaebel/outside-in-tdd-starter --skill frontend-implementation-joegaebel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the need for consistent and maintainable frontend code by providing clear conventions for React component, hook, and page development.

Core Features & Use Cases

Data Fetching Patterns: Standardizes data fetching using useEffect and custom hooks for reusability.
Testability Conventions: Enforces the use of aria-label, roles, and data-testid for robust E2E testability.
Use Case: Ensures that all new React components are built with accessibility and automated testing in mind, leading to a more stable and user-friendly application.

Quick Start

Implement a new React component following the data fetching and selector priority guidelines.

Frequently Asked Questions about frontend-implementation

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

FAQPage Schema

What are the best conventions for standardizing React hooks and data fetching?▼

Standardizing React hooks involves using useEffect and custom hooks for reusable data fetching patterns. This approach ensures consistent component development and maintainable frontend code across your application.

How do I make React components accessible for E2E testing?▼

Making React components accessible for E2E testing requires using semantic HTML and ARIA attributes. Enforcing aria-label, roles, and data-testid selectors ensures robust testability and adherence to accessibility standards.

How do I structure data fetching in custom React hooks?▼

Structuring data fetching in custom React hooks involves standardizing useEffect implementations for reusability. This pattern separates data logic from presentation, facilitating robust testing and maintainable component architecture.

Do I need ARIA attributes and data-testid for every React component?▼

You need ARIA attributes and data-testid for React components when robust E2E testability is required. Using semantic HTML and selector priority guidelines ensures accessibility standards are met without unnecessary overhead.

What is the selector priority for testing React components?▼

The selector priority for testing React components emphasizes accessibility attributes like aria-label and roles over data-testid. This approach ensures tests validate semantic HTML structure while maintaining robust E2E testing capabilities.