frontend-developer

Review React and framework-agnostic web frontends for accessibility, performance, and architecture.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/brunolimaff-jpg/NOVO-APP --skill frontend-developer-brunolimaff-jpg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/brunolimaff-jpg/NOVO-APP/tree/main/.agents/skills/archive/2026-04-curation/frontend-developer
Command: npx skills add https://github.com/brunolimaff-jpg/NOVO-APP --skill frontend-developer-brunolimaff-jpg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you write, review, and optimize frontend code so your web UI becomes faster, more accessible, and easier to maintain.

Core Features & Use Cases

  • Frontend code guidance: Produces senior-level recommendations for semantic HTML, modern CSS, component architecture, and UI behavior.
  • Performance optimization: Targets Core Web Vitals with practical checks for render-blocking assets, bundle size, and asset loading priority.
  • Accessibility audits: Reviews WCAG-aligned semantics, keyboard navigation, screen reader behavior, and ARIA correctness.
  • Testing strategy: Recommends integration-focused testing using role-based queries and behavior assertions.

Quick Start

Use the frontend-developer skill to review your React/TypeScript UI code for accessibility, performance bottlenecks, and component architecture; for example: "Review this component for WCAG issues, Core Web Vitals risks, and suggest concrete refactors."

Frequently Asked Questions about frontend-developer

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

FAQPage Schema
How do I review React component code for WCAG and accessibility issues?

Improve Core Web Vitals by analyzing render-blocking assets, bundle size, and asset loading priority. This optimization targets measurable performance metrics like LCP, INP, and CLS to eliminate frontend bottlenecks and enhance web performance.

What is the best way to test frontend component architecture?

The best way to test component architecture is using integration-focused testing with role-based queries and behavior assertions. This strategy applies behavior-driven testing heuristics to validate UI interactions without relying on brittle implementation details.

How does modern CSS affect web performance and maintainability?

Modern CSS affects web performance by enabling efficient styling logic that reduces render-blocking and supports component architecture. Proper implementation provides senior-level guidance to avoid unsafe approaches, ensuring the UI remains maintainable and fast.

Can I use this for framework-agnostic web apps or only React?

You can use this for both React and framework-agnostic web apps. It reviews semantic HTML, modern CSS, and UI behavior across different environments, ensuring accessible interaction patterns and performance optimization apply broadly.

Why should I avoid unsafe implementation approaches in frontend features?

Avoid unsafe implementation approaches to prevent brittle component architecture and degraded UI behavior. Enforcing safe coding patterns during frontend feature design ensures long-term maintainability, reliable accessibility, and stable web performance.