skills.rest
hdtinh57
hdtinh57COMMUNITY
Explore all skills by this author →
GitHub

frontend

Implement React UI components with Next.js conventions and accessibility standards.

1|Updated Apr 23, 2026
Search Tags:#testing#ui#accessibility#frontend#react#component#nextjs
One-click install
npx skills add https://github.com/hdtinh57/codex-orchestrated-project-template --skill frontend-hdtinh57
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/hdtinh57/codex-orchestrated-project-template/tree/main/.codex/skills/frontend
Command: npx skills add https://github.com/hdtinh57/codex-orchestrated-project-template --skill frontend-hdtinh57

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Implementing or updating UI components and client-side features can be error-prone, repetitive, and inconsistent across a codebase.

Core Features & Use Cases

  • Component-first guidance: Establishes a standardized workflow for building and modifying React components, pages, and client-side state.
  • Best practices & conventions: Encodes API usage, styling, accessibility, and performance considerations to reduce rework.
  • Use Cases: Refactors, feature additions, or UI improvements in Next.js/React apps while preserving consistency.

Quick Start

Create or update a UI element following the protocol and adhere to the app router component guidelines.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I standardize React component implementation and state management across my codebase?▼

Standardize React component implementation by applying a structured protocol for building UI elements, managing client-side state, and enforcing coding conventions. This reduces repetitive, error-prone work and ensures consistency.

What's the best way to update Next.js UI components while maintaining accessibility and performance?▼

Update Next.js UI components effectively by following app router guidelines that encode WCAG accessibility standards and performance considerations. This workflow preserves UI consistency during refactors or feature additions.

Does the frontend workflow protocol support server and client component guidance for Next.js apps?▼

Yes, the frontend workflow protocol provides specific server and client component guidance for Next.js apps. This ensures correct state management and component choices aligned with your project's technical requirements.

How do I ensure my React UI refactors meet WCAG accessibility and testing standards?▼

Ensure React UI refactors meet WCAG accessibility and testing standards by applying a standardized implementation protocol. This workflow encodes best practices to reduce rework and validate technical requirements.

When should I use this component-first workflow for UI improvements?▼

Use this component-first workflow when implementing or updating UI components and client-side features in React-based projects. It is ideal for refactors, feature additions, or UI improvements to prevent inconsistencies.

Related Skills

Explore More Software Engineering Skills→
ProLeadApptProLeadAppt

bencium-code-conventions

Enforce TypeScript, ES modules, and app router conventions in React projects.

Community
Intermediate
smarmen86smarmen86

seo-unlighthouse

Run automated multi-page Lighthouse audits and generate aggregate JSON reports.

Community
Intermediate
fakhriaditiarahmanfakhriaditiarahman
1

frontend-developer

Develop and optimize React 19+ and Next.js 15+ frontend applications.

Community
Advanced
alex-voloshin-devalex-voloshin-dev
2

react-nextjs-patterns

Enforce canonical React and Next.js App Router patterns for rendering, data fetching, and component architecture.

Community
Advanced