skills.rest
tswr
tswrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend

Provide framework-agnostic frontend best practices for React and Vue.

1|Updated Mar 22, 2026
Search Tags:#performance#accessibility#state management#frontend#react#vue#component architecture
One-click install
npx skills add https://github.com/tswr/engineering-mastery-plugin --skill frontend-tswr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/tswr/engineering-mastery-plugin/tree/main/skills/frontend
Command: npx skills add https://github.com/tswr/engineering-mastery-plugin --skill frontend-tswr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building modern web frontends often leads to inconsistent user experiences, poor performance, accessibility violations, and unmaintainable code due to fragmented best practices and framework-specific guesswork. This skill eliminates those issues by providing framework-agnostic, production-grade guidance for every stage of frontend development.

Core Features & Use Cases

  • Cross-framework component architecture: Patterns for single-responsibility components, prop design, composition, and common structural patterns like Container/Presentational and Compound Components that work across React, Vue, and other modern frameworks.
  • State management best practices: Guidance on colocating state, avoiding duplicate state, distinguishing server vs client state, and choosing the right tool for the job to reduce bugs and unnecessary re-renders.
  • Performance and accessibility guardrails: Actionable rules for meeting Core Web Vitals targets, WCAG 2.1/2.2 compliance, and inclusive design that are built in from the start, not added as afterthoughts.
  • Use case: Use this skill when building a new SaaS dashboard, e-commerce product page, or internal tool to ensure your frontend is scalable, fast, and usable for all audiences, regardless of the framework you use.

Quick Start

Use the frontend skill to refactor your existing product card component to follow single-responsibility principles, add proper ARIA labels for screen readers, and implement lazy loading for below-the-fold images to improve Core Web Vitals scores.

Frequently Asked Questions about frontend

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

FAQPage Schema
What's the best way to manage state and avoid unnecessary re-renders in component-based frontend frameworks?▼

To optimize state management and avoid unnecessary re-renders, colocate state where possible, eliminate duplicate state, and strictly distinguish between server and client state to ensure robust data fetching and caching.

How do I structure component architecture for scalable web frontends?▼

Structure scalable web frontends using single-responsibility components, deliberate prop design, and composition patterns like Container/Presentational or Compound Components that apply universally across React and Vue.

How do I meet Core Web Vitals targets and WCAG 2.1 compliance when building a new web interface?▼

Meet Core Web Vitals and WCAG 2.1 compliance by applying built-in performance and accessibility guardrails from the start, such as lazy loading below-the-fold images and adding proper ARIA labels for screen readers.

Can I use these frontend best practices to refactor legacy code, or are they only for new features?▼

Yes, you can use these framework-agnostic best practices for legacy code refactoring, performance optimization, and accessibility remediation, as well as for implementing new features in existing projects.

Does this frontend guidance work for both React and Vue environments?▼

Yes, this guidance is framework-agnostic and explicitly applies to React, Vue, and other modern component-based frameworks, covering cross-framework patterns for rendering, data fetching, and form validation.

Related Skills

Explore More Software Engineering Skills→
michaelsvanbeekmichaelsvanbeek
1

anomaly-detection

Detect unusual patterns in time-series, logs, and metric data.

Community
Advanced
TheGreatLTheGreatL

performance-engineer

Analyzes application performance and implements observability with OpenTelemetry and distributed tracing.

Community
Advanced
DanielPodolskyDanielPodolsky
274

accessibility-fundamentals

Identify and fix accessibility issues in JSX UI components using WCAG, ARIA, and keyboard navigation.

Community
Basic
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate