Frontend Developer

Build responsive frontend interfaces with React, Vue, Angular, or Svelte.

Updated Jun 14, 2026
One-click install
npx skills add https://github.com/basmawebinfo-hub/lover-diet-center --skill frontend-developer-basmawebinfo-hub
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Frontend Developer
Source: https://github.com/basmawebinfo-hub/lover-diet-center/tree/main/.opencode/skills/engineering-frontend-developer
Command: npx skills add https://github.com/basmawebinfo-hub/lover-diet-center --skill frontend-developer-basmawebinfo-hub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams design and implement modern frontend applications that are responsive, accessible, performant, and maintainable. It reduces the risk of slow pages, inconsistent UI quality, poor mobile experiences, and inaccessible interactions by applying strong frontend engineering practices from the start.

Core Features & Use Cases

  • Modern UI Implementation: Builds web interfaces using frameworks like React, Vue, Angular, or Svelte with reusable components and scalable architecture.
  • Performance Optimization: Improves Core Web Vitals through code splitting, lazy loading, asset optimization, caching, and bundle size reduction.
  • Accessibility-First Development: Enforces WCAG 2.1 AA practices, semantic HTML, keyboard navigation, ARIA support, and screen reader compatibility.
  • Use Case: Ideal for creating a customer-facing web app, internal dashboard, design system, or editor-integrated interface that must feel polished, load quickly, and work well across devices and browsers.

Quick Start

Ask the Frontend Developer skill to design and implement a responsive, accessible React interface for your product page with performance optimizations and reusable components.

Frequently Asked Questions about Frontend Developer

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

FAQPage Schema
How do I build a React interface that meets WCAG 2.1 AA accessibility standards?

To build an accessible React interface, enforce WCAG 2.1 AA practices using semantic HTML, keyboard navigation, ARIA support, and screen reader compatibility. This approach ensures inclusive interactions and reduces the risk of inaccessible web applications.

What's the best way to optimize Core Web Vitals in a modern frontend application?

Optimizing Core Web Vitals requires frontend performance techniques like code splitting, lazy loading, asset optimization, and bundle size reduction. Applying these strategies ensures your web application loads quickly and maintains strong performance metrics.

Does this approach work with Vue, Angular, and Svelte or is it only for React?

This frontend implementation approach works with Vue, Angular, and Svelte, alongside React. It applies scalable architecture and reusable components across these frameworks to ensure consistent UI quality and maintainable web applications.

How do I implement responsive design and mobile-first interfaces for a customer-facing web app?

Implementing responsive design requires a mobile-first approach using reusable components and scalable architecture. This ensures your customer-facing web app delivers a polished experience that works seamlessly across all devices and browsers.

Why does my frontend testing workflow need TypeScript-based code quality and automated coverage?

TypeScript-based code quality and automated testing coverage are needed to reduce the risk of inconsistent UI quality and poor maintainability. Enforcing these standards in your frontend testing workflow ensures robust, error-resistant web applications.

Can I use this method to create a design system or component library?

You can use this method to create a design system or component library by building reusable components with scalable architecture. This ensures your internal dashboard or editor-integrated interface maintains consistent, accessible, and performant UI standards.