frontend-developer

Develop accessible React, Vue, or Angular components with TypeScript strict mode.

68|6|Updated Apr 16, 2020

Search Tags:#performance #accessibility #web development #frontend #react #angular #ui/ux #vue

Ready to run

npx skills add https://github.com/zenobi-us/dotfiles --skill frontend-developer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/zenobi-us/dotfiles/tree/main/devtools/files/opencode/skills/frontend-developer
Command: npx skills add https://github.com/zenobi-us/dotfiles --skill frontend-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building modern web UIs requires deep expertise in frameworks, performance, and accessibility, often leading to complex, hard-to-maintain code and suboptimal user experiences.

Core Features & Use Cases

Robust UI Development: Crafts high-quality React, Vue, or Angular components following Atomic Design principles.
Performance Optimization: Ensures Lighthouse scores >90 and Core Web Vitals compliance (LCP <2.5s, FID <100ms, CLS <0.1).
Accessibility Compliance: Guarantees WCAG 2.1 AA compliance with semantic HTML, ARIA attributes, and keyboard navigation.
Use Case: You need a new dashboard component for your React application. Use this Skill to generate a performant, accessible, and fully tested component that integrates seamlessly with your existing design system and state management.

Quick Start

Use the frontend-developer skill to create a new React component for a user profile page, ensuring it's responsive and accessible.

Frequently Asked Questions about frontend-developer

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

FAQPage Schema

How do I build accessible React components that meet WCAG 2.1 AA standards?▼

Build accessible React components by implementing semantic HTML, ARIA attributes, and keyboard navigation. This Skill applies WCAG 2.1 AA compliance patterns across React 18+, Vue 3+, and Angular 15, ensuring components are usable by all users including those with assistive technologies.

What's the best way to optimize frontend performance and achieve high Lighthouse scores?▼

Optimize frontend performance through lazy loading, code-splitting, and Core Web Vitals compliance (LCP <2.5s, FID <100ms, CLS <0.1). This Skill implements performance budgets and responsive, mobile-first layouts to consistently achieve Lighthouse scores above 90 across React, Vue, and Angular applications.

How do I create reusable UI components following design system principles?▼

Create reusable UI components using Atomic Design principles with TypeScript strict mode and design system integrations. This Skill generates scalable, testable components for React, Vue, or Angular that work seamlessly with existing state management and follow modern UI/UX best practices.

Can I ensure cross-browser compatibility while building responsive web interfaces?▼

Ensure cross-browser compatibility by implementing responsive, mobile-first layouts with comprehensive testing across unit, integration, and E2E test suites. This Skill handles semantic HTML and ARIA implementation to guarantee consistent experiences across all modern browsers.

Do I need to write separate code for React, Vue, and Angular applications?▼

No. This Skill applies consistent patterns for React 18+, Vue 3+, and Angular 15, using framework-specific best practices while maintaining shared principles for accessibility, performance, and component structure. The same core approach works across all three ecosystems.

What testing strategy ensures frontend components work correctly in production?▼

Use comprehensive testing across unit, integration, and E2E layers to validate component behavior. This Skill implements testing patterns that verify accessibility compliance, performance budgets, and functional correctness before deployment.