skills.rest
e-t-y-b
e-t-y-bOFFICIAL
Explore all skills by this author →
GitHub

frontend-architect

Analyze frontend architecture and produce rendering strategy and framework recommendations.

9|1|Updated Mar 21, 2026
Search Tags:#performance#accessibility#seo#design-systems#frontend-architecture#framework-selection#rendering-strategy
One-click install
npx skills add https://github.com/e-t-y-b/etyb-skills --skill frontend-architect-e-t-y-b
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-architect
Source: https://github.com/e-t-y-b/etyb-skills/tree/main/skills/frontend-architect
Command: npx skills add https://github.com/e-t-y-b/etyb-skills --skill frontend-architect-e-t-y-b

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web frontend architecture planning and evaluation for modern web apps to ensure scalable, performant, accessible, and maintainable codebases across frameworks and rendering strategies.

Core Features & Use Cases

  • Rendering-strategy decision framework (SSG/SSR/ISR/Islands/PPR) to optimize SEO and Core Web Vitals.
  • Framework option comparisons with tradeoffs (React, Angular, Vue, Svelte) plus meta-framework guidance (Next.js, Nuxt, SvelteKit, Astro).
  • Architecture patterns guidance (atomic design, headless components, container/presenter, design tokens, and design-system governance).
  • Performance budgeting, accessibility planning, and integration with design systems and token strategies.
  • Guidance tailored for teams of varying sizes and domains (marketing sites, dashboards, e-commerce, docs).

Quick Start

Provide a structured frontend architecture plan for a new project, including rendering strategy, framework options with tradeoffs, component patterns, performance budgets, and accessibility plan.

Frequently Asked Questions about frontend-architect

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

FAQPage Schema
How do I choose a frontend rendering strategy for SEO and Core Web Vitals?▼

A frontend rendering strategy for SEO and Core Web Vitals is chosen by evaluating SSG, SSR, ISR, Islands, or PPR based on content volatility and performance budgets to optimize search indexing and load times.

What is the best way to compare React, Vue, Svelte, and Angular for a new web app?▼

Comparing React, Vue, Svelte, and Angular requires analyzing framework tradeoffs alongside meta-frameworks like Next.js, Nuxt, and SvelteKit to match project rendering, performance, and team size requirements.

How do I plan a frontend component architecture using atomic design and design tokens?▼

Planning a frontend component architecture using atomic design and design tokens involves structuring headless components and container/presenter patterns to establish scalable, maintainable design-system governance.

Does this frontend architecture planning work for e-commerce and dashboard platforms?▼

Frontend architecture planning works for e-commerce and dashboard platforms by delivering tailored rendering strategies, framework recommendations, and accessibility plans suited to those specific interactive and content-heavy domains.

How do I set performance budgets and accessibility plans for a marketing site?▼

Setting performance budgets and accessibility plans for a marketing site requires defining strict Core Web Vitals thresholds and integrating accessibility testing early to ensure fast, compliant, and search-optimized user experiences.

Related Skills

Explore More Software Engineering Skills→
Likas07Likas07

crafting-effective-readmes

Generate structured README templates and guidance for project documentation.

Community
Intermediate
hnabyz-bothnabyz-bot

moai-domain-frontend

Plan and implement component-driven UIs across React 19, Next.js 16, and Vue 3.5.

Community
Advanced
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic
grasberggrasberg
3

frontend-specialist

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

Community
Advanced