skills.rest
zenobi-us
zenobi-usOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/zenobi-us/dotfiles --skill frontend-developer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
tuyenhttuyenht

State Management

Implement frontend state management across JavaScript frameworks like Redux, Zustand, Pinia.

Community
Intermediate
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
alo-expalo-exp
6

design-system

Audit design-system components, tokens, and patterns for consistency.

Official
Advanced
magnus919magnus919
40

hugo-theme

Build, customize, and debug Hugo CMS themes with template architecture and asset pipelines.

Community
Advanced