skills.rest
JoeGaebel
JoeGaebelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/JoeGaebel/outside-in-tdd-starter --skill frontend-implementation-joegaebel
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
BabakBarBabakBar

Mobile Testing

Assess React Native testing requirements and configure Jest with React Native Testing Library.

Community
Intermediate
saddam-eng-techsaddam-eng-tech

react-test-writer

Generate Vitest and React Testing Library test suites for React TypeScript components.

Community
Intermediate
allenlin90allenlin90
1

frontend-code-quality

Enforces frontend code quality standards for React applications via ESLint and naming conventions.

Community
Intermediate
nekorush14nekorush14
4

storybook-development

Generate Storybook CSF3 stories with interaction and visual regression testing.

Community
Advanced