skills.rest
grasberg
grasbergCOMMUNITY
Explore all skills by this author →
GitHub

frontend-specialist

Architect React, Next.js, and Vue frontend systems for performance and WCAG accessibility.

3|2|Updated Feb 27, 2026
Search Tags:#performance#accessibility#frontend#react#vue#nextjs#design-systems
One-click install
npx skills add https://github.com/grasberg/sofia --skill frontend-specialist-grasberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-specialist
Source: https://github.com/grasberg/sofia/tree/main/workspace/skills/frontend-specialist
Command: npx skills add https://github.com/grasberg/sofia --skill frontend-specialist-grasberg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architects frontend architectures and systems for React, Next.js, and Vue projects to optimize performance, accessibility, and maintainability.

Core Features & Use Cases

  • Performance-first design: governs rendering strategies (SSR/SSG/CSR) and component architecture to maximize Core Web Vitals.
  • Accessibility-by-default: integrates WCAG guidelines into component design, keyboard navigation, and semantic HTML.
  • Design-system integration: establishes scalable UI systems and consistent styling across apps.

Quick Start

Define a high-level frontend architecture plan for a new React app with SSR and WCAG-compliant components.

Frequently Asked Questions about frontend-specialist

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

FAQPage Schema
How do I architect a React frontend system for Core Web Vitals and WCAG compliance?▼

Architect a React frontend system by governing rendering strategies like SSR or SSG to maximize Core Web Vitals, while integrating WCAG guidelines into semantic HTML and keyboard navigation for accessibility.

What is the best way to choose between SSR, SSG, and CSR in Next.js applications?▼

Choosing between SSR, SSG, and CSR in Next.js involves evaluating server and client rendering tradeoffs to satisfy performance budgets, ensuring optimal rendering strategies for your specific component architecture.

Can I use this approach to establish a scalable Vue design system?▼

Yes, you can establish a scalable Vue design system by integrating consistent styling and co-located, testable component architecture standards across modern web applications for maintainable UI systems.

How do I integrate accessibility into frontend component design?▼

Integrate accessibility into component design by enforcing WCAG compliance through semantic HTML structures, keyboard navigation support, and accessible UI patterns directly within the frontend architecture.

When should I not use client-side rendering for my web application?▼

Avoid client-side rendering when strict performance budgets or Core Web Vitals requirements demand server-side rendering or static generation to optimize initial load and overall frontend performance.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
ariesanhthuariesanhthu

react-performance

Diagnose React rendering, bundle size, and Core Web Vitals issues.

Community
Advanced
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
ChrstprJohnChrstprJohn

frontend-security-coder

Prevent XSS in frontend applications by enforcing safe DOM manipulation and CSP configuration.

Community
Advanced