skills.rest
augustoheiss
augustoheissCOMMUNITY
Explore all skills by this author →
GitHub

agency-frontend-developer

Implement accessible React, Vue, Angular, or Svelte frontend applications with TypeScript and WCAG 2.1 AA compliance.

Updated Feb 11, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#pwa#component-library
One-click install
npx skills add https://github.com/augustoheiss/LogicDefense --skill agency-frontend-developer-augustoheiss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-frontend-developer
Source: https://github.com/augustoheiss/LogicDefense/tree/main/.gemini/skills/agency-frontend-developer
Command: npx skills add https://github.com/augustoheiss/LogicDefense --skill agency-frontend-developer-augustoheiss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides an expert frontend developer persona to design, implement, and optimize modern web user interfaces so teams can ship accessible, performant, and maintainable frontends without repeated architectural mistakes or regressions.

Core Features & Use Cases

  • Editor Integration & Tooling: guidance for building editor extensions, navigation commands, WebSocket/RPC bridges, and protocol URI handling for seamless developer workflows.
  • Modern Web Application Implementation: component libraries, design systems, pixel-perfect React/Vue/Angular/Svelte implementations, mobile-first responsive design, and state management strategy.
  • Performance & UX Optimization: Core Web Vitals improvement, code splitting, lazy loading, image optimization, PWAs, and micro-interactions for better engagement.
  • Quality, Testing & Delivery: TypeScript typing, unit/integration testing, accessibility testing (WCAG 2.1 AA), error handling, and CI/CD-ready build and performance budgets.
  • Use Case: Convert Figma screens into a production-ready React component library that meets WCAG 2.1 AA, attains high Lighthouse scores, and includes CI pipelines and automated tests.

Quick Start

Ask the frontend developer to implement a responsive React component library from the provided design with TypeScript, WCAG 2.1 AA accessibility, code-splitting, and Lighthouse performance targets.

Frequently Asked Questions about agency-frontend-developer

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

FAQPage Schema
How do I convert Figma designs into a production-ready React component library?▼

To convert Figma designs into a production-ready React component library, implement pixel-perfect React components using TypeScript, WCAG 2.1 AA accessibility, code splitting, and Lighthouse performance targets configured for CI pipelines and automated tests.

What is the best way to optimize Core Web Vitals in a single-page application?▼

Optimizing Core Web Vitals in a single-page application requires implementing code splitting, lazy loading, image optimization, and progressive web app techniques to improve loading performance and user engagement metrics.

How do I ensure my frontend application meets WCAG 2.1 AA accessibility standards?▼

Ensuring frontend applications meet WCAG 2.1 AA accessibility standards involves implementing accessible UI components, mobile-first responsive design, comprehensive accessibility testing, and error handling during the component development process.

Can I use this approach to build progressive web apps with Vue or Angular?▼

Yes, you can build progressive web apps with Vue, Angular, React, or Svelte by applying cross-browser responsive interfaces, state management strategies, and performance budgets to achieve high Lighthouse scores and offline capabilities.

Do I need TypeScript to implement a high-performance accessible frontend?▼

Yes, TypeScript typing is required to implement high-performance accessible frontends, providing type safety for component libraries, editor integrations, WebSocket RPC bridges, and CI/CD-ready builds with comprehensive unit and integration tests.

Why should I use a component library instead of building individual UI components?▼

Using a component library provides maintainable design systems, consistent UI implementation across applications, built-in WCAG 2.1 AA accessibility, and CI/CD-ready performance budgets that prevent architectural mistakes and regressions.

Related Skills

Explore More Software Engineering Skills→
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
DexploarerDexploarer
6

lighthouse-ci-integrator

Automate Lighthouse CI audits and enforce performance budgets in CI/CD pipelines.

Community
Intermediate
TitoPrauseeTitoPrausee

websocket-tcp-bridge-dashboard

Bridge browser WebSocket clients to a TCP protocol server via aiohttp.

Community
Advanced
januarfontijanuarfonti
10

rsc-data-optimizer

Convert client-side data fetching in Next.js to React Server Components.

Community
Intermediate