frontend-engineer

Provides standardized cross-framework frontend UI patterns emphasizing accessibility and performance for React, Vue, Angular, Svelte with TypeScript.

1|Updated Mar 5, 2026
One-click install
npx skills add https://github.com/Postalocity/template-microsite --skill frontend-engineer-postalocity
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/Postalocity/template-microsite/tree/main/.opencode/skills/frontend-engineer
Command: npx skills add https://github.com/Postalocity/template-microsite --skill frontend-engineer-postalocity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides standardized frontend engineering practices to streamline building UI components across frameworks (React/Vue/Angular/Svelte) with a focus on accessibility and performance.

Core Features & Use Cases

  • Framework-agnostic component patterns and architecture guidelines, including functional components, hooks/composition API, and TypeScript usage.
  • Accessibility and performance benchmarks, with clear criteria for keyboard navigation, semantic markup, color contrast, and optimized delivery.
  • Use Case: Establish a scalable design system and reusable components that work across multiple brands and frameworks.

Quick Start

Use this skill to begin implementing accessible, high-performance UI components across React, Vue, Angular, and Svelte.

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 UI components that work across React, Vue, Angular, and Svelte?

To build accessible cross-framework UIs, apply framework-agnostic component patterns and architecture guidelines that enforce keyboard navigation, semantic markup, and color contrast benchmarks across React, Vue, Angular, and Svelte.

What's the best way to standardize TypeScript usage and component architecture across multiple frontend frameworks?

Standardize TypeScript usage by adopting framework-agnostic component patterns that enforce functional components and hooks or composition API guidelines, ensuring consistent component architecture across React, Vue, Angular, and Svelte.

How do I enforce accessibility and performance benchmarks for responsive frontend layouts?

Enforce accessibility and performance benchmarks by applying explicit criteria for keyboard navigation, semantic markup, color contrast, and optimized delivery across your responsive frontend layouts.

Do I need a specific framework to establish a scalable design system with reusable cross-framework components?

You do not need a specific framework to establish a scalable design system because these reusable component patterns are framework-agnostic and apply standardized practices across React, Vue, Angular, and Svelte.

How does using framework-agnostic patterns affect high-performance frontend delivery?

Framework-agnostic patterns improve high-performance frontend delivery by standardizing component architecture and enforcing explicit optimized delivery criteria across React, Vue, Angular, and Svelte.

Can I use functional components and composition API patterns interchangeably across different frameworks?

You can use functional components and composition API patterns across different frameworks by following the standardized, framework-agnostic architecture guidelines that establish consistent TypeScript usage and component composition.