skills.rest
tcvdog
tcvdogCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Developer

Builds responsive web applications with React, Vue, or Angular using performance and accessibility optimization.

2|Updated May 21, 2026
Search Tags:#typescript#accessibility#web development#React#frontend#responsive design#performance optimization
One-click install
npx skills add https://github.com/tcvdog/agency-agents-hermes --skill frontend-developer-tcvdog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Developer
Source: https://github.com/tcvdog/agency-agents-hermes/tree/main/engineering/frontend-developer
Command: npx skills add https://github.com/tcvdog/agency-agents-hermes --skill frontend-developer-tcvdog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides the implementation of modern web frontends that meet performance budgets, WCAG 2.1 AA accessibility standards, and cross-browser compatibility requirements without ad-hoc decision making. ## Core Features & Use Cases - Modern Framework Implementation: Builds component libraries and design systems in React, Vue, Angular, or Svelte with TypeScript and state management. - Performance Optimization: Applies Core Web Vitals targets, code splitting, lazy loading, and bundle optimization strategies. - Accessibility Compliance: Implements ARIA patterns, keyboard navigation, and screen reader support following WCAG 2.1 AA guidelines. - Use Case: Ask it to build a virtualized data table component in React with full keyboard navigation and sub-2.5s LCP, and receive tested, accessible TypeScript code. ## Quick Start Ask the agent to implement a responsive React component with accessibility support and Core Web Vitals optimization for your project.

Frequently Asked Questions about Frontend Developer

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

FAQPage Schema
How do I optimize Core Web Vitals in a React application?▼

Optimize Core Web Vitals by implementing code splitting with dynamic imports, lazy loading routes and images, and targeting LCP under 2.5s, FID under 100ms, and CLS under 0.1. Use virtualization for long lists and monitor with Lighthouse and Real User Monitoring.

How to make a React data table accessible for screen readers?▼

Make data tables accessible by using semantic table roles, proper ARIA labels, keyboard navigation with tabIndex, and focus management. Test with VoiceOver, NVDA, or JAWS to verify screen reader compatibility.

React vs Vue vs Angular for frontend projects?▼

React suits component-heavy apps with a large ecosystem, Vue offers gentle learning curves with strong templating, and Angular provides a full framework with built-in tooling. The skill supports all three plus Svelte depending on project requirements.

Does this approach support Progressive Web Apps and offline mode?▼

Yes, it covers Progressive Web App implementation including service workers for caching, offline functionality, and responsive mobile-first design. It also addresses cross-browser compatibility and graceful degradation.

Why is my frontend bundle size too large?▼

Large bundles usually result from missing code splitting, unoptimized dependencies, or uncompressed assets. Apply tree shaking, dynamic imports, route-based splitting, and modern image formats like WebP or AVIF to reduce initial load.

Related Skills

Explore More Software Engineering Skills→
hyagovianahyagoviana

aiox-ux-design-expert

Orchestrate UX research, wireframes, token extraction, and atomic component QA.

Community
Advanced
sathishssj3sathishssj3
2

performance-budget-setter

Defines and enforces performance budgets for bundle size, API latency, and web vitals.

Community
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
htlin222htlin222
77

mobile

Develop cross-platform mobile applications using React Native and Flutter.

Community
Intermediate