frontend-engineer

Standardize frontend development across React, Vue, Angular, and Svelte frameworks.

Updated Jun 5, 2026
One-click install
npx skills add https://github.com/0xRayAI/xray --skill frontend-engineer-0xrayai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/0xRayAI/xray/tree/main/src/skills/frontend-engineer
Command: npx skills add https://github.com/0xRayAI/xray --skill frontend-engineer-0xrayai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the complexity of maintaining high-quality frontend standards, ensuring that web applications are not only functional but also accessible, performant, and maintainable.

Core Features & Use Cases

  • Component Architecture: Implements modern patterns like functional components, hooks, and composition to keep codebases clean and scalable.
  • Accessibility & Performance: Enforces WCAG 2.1 AA compliance and strict performance metrics (LCP, INP, CLS) to ensure a high-quality user experience.
  • Use Case: Use this Skill to refactor a legacy React component into a modern, accessible, and performant version that meets current industry standards.

Quick Start

Use the frontend-engineer skill to audit the current component for accessibility compliance and performance bottlenecks.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I make my React components meet WCAG 2.1 AA accessibility standards?

To make React components meet WCAG 2.1 AA accessibility standards, refactor them using functional component architecture and hooks that enforce strict compliance. This approach audits UI elements to ensure accessible user experiences for modern web applications.

What's the best way to refactor legacy React components for better web performance?

The best way to refactor legacy React components for better web performance is to apply modern composition patterns that enforce strict performance metrics like LCP, INP, and CLS. This standardizes frontend practices to eliminate bottlenecks and ensure high-quality user experiences.

Can I use this frontend development approach with Vue, Angular, and Svelte?

Yes, you can use this frontend development approach with Vue, Angular, and Svelte. It standardizes component-based architecture practices across these frameworks to facilitate creating responsive, accessible, and high-performance user interfaces.

What are modern web performance metrics and how do I enforce them in TypeScript?

Modern web performance metrics include LCP, INP, and CLS. You enforce them in TypeScript by standardizing frontend development practices around component-based architecture, ensuring web applications remain highly performant and maintainable while adhering to strict performance thresholds.

How do I audit an existing web UI for accessibility compliance and performance bottlenecks?

You audit an existing web UI for accessibility compliance and performance bottlenecks by applying standardized frontend practices that check for WCAG 2.1 AA adherence and monitor strict performance metrics. This identifies areas needing refactoring to meet industry standards.

When do I need to standardize component architecture in web development?

You need to standardize component architecture in web development when maintaining high-quality frontend standards across complex applications. This ensures codebases remain clean and scalable while enforcing accessibility and performance guidelines across multiple frameworks.