skills.rest
d-padmanabhan
d-padmanabhanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-engineering

Guide frontend architecture decisions across rendering models, performance budgets, and CI gates.

15|2|Updated Dec 13, 2025
Search Tags:#accessibility#state management#frontend architecture#core web vitals#performance CI gates#bundle budget#rendering model
One-click install
npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill frontend-engineering-d-padmanabhan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineering
Source: https://github.com/d-padmanabhan/agent-engineering-handbook/tree/main/skills/frontend-engineering
Command: npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill frontend-engineering-d-padmanabhan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams make deliberate frontend architecture choices and enforce performance, accessibility, and supply-chain standards so releases don’t regress in the real world.

Core Features & Use Cases

  • Rendering-model decisions (SSG/SSR/SPA/ISR): Guides when each rendering approach fits and how to avoid expensive “wrong choice” lock-in.
  • Performance discipline with budgets and CI gates: Establishes bundle budgets plus Lighthouse CI thresholds to prevent unnoticed bloat and quality drops.
  • Core Web Vitals + INP debugging with RUM-first measurement: Sets up real-user metric tracking and provides targeted remediation paths for INP regressions.
  • State-management strategy: Encourages a clear separation of local UI state vs server state vs global client state to avoid cache-invalidation anti-patterns.
  • Accessibility as a release gate: Defines continuous axe-core checking and practical review expectations to prevent WCAG debt.
  • Supply-chain security for frontend dependencies: Covers CI-oriented dependency scanning and hardening patterns that reduce risk from third-party scripts.

Quick Start

Use this skill to design a new frontend project by choosing a rendering model, setting Core Web Vitals SLOs, wiring CI gates (type checks, lint, tests, axe-core, Lighthouse, and bundle budgets), and documenting the decisions in an ADR and README.

Frequently Asked Questions about frontend-engineering

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

FAQPage Schema
How do I choose between SSG, SSR, SPA, and ISR for a new frontend architecture?▼

Setting up Core Web Vitals SLOs requires RUM-based metric tracking to establish real-user performance thresholds. This approach sets real-user monitoring baselines and provides targeted remediation paths for INP regressions.

How do I enforce bundle budgets and prevent performance regressions in CI?▼

Enforcing bundle budgets in CI requires wiring automated Lighthouse CI thresholds and size checks into your release pipeline. This prevents unnoticed bloat by blocking deployments that exceed established bundle limits.

How do I structure state management to avoid cache-invalidation anti-patterns?▼

Structuring state management requires establishing a clear data-bucket strategy separating local UI state, server state, and global client state. This separation prevents cache-invalidation anti-patterns and ensures predictable data flows.

Can I use axe-core CI gates to prevent WCAG accessibility debt?▼

Yes, you can use axe-core CI gates to prevent WCAG accessibility debt by running continuous automated checks during builds. This defines practical review expectations and blocks releases failing accessibility thresholds.

What is the best way to debug Core Web Vitals INP regressions?▼

Debugging Core Web Vitals INP regressions is best done using RUM-first measurement to capture real user interactions. This establishes real-user metric tracking and provides targeted remediation paths for interaction delays.

Related Skills

Explore More Software Engineering Skills→
farming-labsfarming-labs
35

web-app-architectures

Compare SPA, MPA, hybrid web architectures across SEO, performance, and deployment factors.

Official
Basic
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
EliasOulkadiEliasOulkadi
110

performance-profiler

Measure Core Web Vitals and Lighthouse signals to identify and resolve web performance bottlenecks.

Community
Advanced
achmfachmf

react-best-practices

Optimizes React and Next.js apps by fixing data fetching, bundle size, and rendering issues.

Community
Advanced