skills.rest
htafolla
htafollaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Build accessible, responsive frontend UI for React, Vue, Angular, or Svelte applications.

Updated Sep 9, 2025
Search Tags:#performance#accessibility#frontend#react#responsive design#core web vitals
One-click install
npx skills add https://github.com/htafolla/chrono-warp-drive --skill frontend-engineer-htafolla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/htafolla/chrono-warp-drive/tree/main/.opencode/skills/frontend-engineer
Command: npx skills add https://github.com/htafolla/chrono-warp-drive --skill frontend-engineer-htafolla

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create modern frontend interfaces that are accessible, responsive, and performant so users can navigate and interact smoothly across devices and network conditions.

Core Features & Use Cases

  • Accessibility (WCAG 2.1 AA) by default: Uses semantic HTML, proper labels, keyboard navigation, contrast-aware design, and accessible imagery to reduce usability barriers.
  • Performance-first UI engineering: Targets LCP, INP, and CLS with code-splitting, lazy loading, optimized images, and font preloading to improve real-world responsiveness.
  • Maintainable state and UI architecture: Promotes functional components, hooks/composition patterns, TypeScript-first development, and sensible local vs global state decisions for scalable React/Vue/Angular/Svelte projects.

Quick Start

Ask the AI to review your React/Vue/Angular/Svelte UI requirements and produce an accessible, performance-oriented component plan that meets WCAG 2.1 AA and modern Core Web Vitals targets.

Frequently Asked Questions about frontend-engineer

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?▼

Accessible React components meeting WCAG 2.1 AA standards require semantic HTML structure, proper form labels, keyboard navigation support, and contrast-aware design to reduce usability barriers for all users.

What's the best way to optimize Core Web Vitals like LCP and CLS in frontend applications?▼

Optimizing Core Web Vitals involves implementing code-splitting, lazy loading, optimized images, and font preloading to target measurable LCP, INP, and CLS targets for improved real-world responsiveness.

Does this frontend UI approach work with Vue, Angular, and Svelte, or only React?▼

This frontend UI approach works with Vue, Angular, and Svelte in addition to React, promoting functional components, hooks or composition patterns, and TypeScript-first development across all supported frameworks.

How do I manage local vs global state for scalable TypeScript component architecture?▼

Scalable TypeScript component architecture requires sensible local vs global state decisions, utilizing functional components and composition patterns to maintain maintainable UI architecture across complex applications.

Why does my responsive web UI need performance budgets across typical user flows?▼

Performance budgets across typical user flows ensure interfaces remain responsive across devices and network conditions, preventing layout shifts and maintaining measurable Core Web Vitals targets during user interactions.

When do I need semantic HTML structure for form accessibility and keyboard support?▼

Semantic HTML structure for form accessibility and keyboard support is needed by default for all frontend interfaces, reducing usability barriers and ensuring WCAG 2.1 AA compliance for keyboard navigation and screen readers.

Related Skills

Explore More Software Engineering Skills→
jc180105jc180105

Frontend Developer

Develop responsive frontend UIs with React, Vue, Angular, or Svelte.

Community
Advanced
zzoohubzzoohub

web-vitals-checklist

Measure LCP, INP, CLS, FCP, and TTFB to diagnose web performance gaps.

Community
Intermediate
secondskysecondsky
204

web-performance-optimization

Apply code splitting, lazy loading, caching, and Core Web Vitals monitoring to web apps.

Community
Advanced
Pixel-Process-UGPixel-Process-UG
1

frontend-ui-design

Guide frontend UI design with component architecture, responsive layouts, and WCAG 2.1 AA accessibility.

Official
Advanced