Frontend engineering

Skill vignesh2027/AI-AGENT-SKILLS/skills/frontend-engineering

Turn your ai agent into senior engineer..The result is fast code that fails slowly. AI Agent Skills solves this by giving agents the same disciplined workflows senior engineers use

Install

npx -y skills add vignesh2027/AI-AGENT-SKILLS --skill frontend-engineering

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Build UIs that are fast, accessible, maintainable, and tested

SKILL.md

2.2 KB, as published. Nobody here has run it

Overview

Frontend engineering is full-stack engineering from the network edge to the pixel. Performance, accessibility, maintainability, and security are all first-class concerns — not features to add later.

When to Use

Before implementing a new UI feature
Before a frontend component is marked complete
As part of the /review workflow for frontend PRs

Process

Step 1: Define the UI states

Every component has states: loading, empty, error, populated, and edge cases. Define and implement all of them before calling it done.

Step 2: Accessibility first

See accessibility-engineering skill. Apply before visual polish.

Step 3: Performance budget

Define before building:

Largest Contentful Paint (LCP) target: < 2.5s
Cumulative Layout Shift (CLS) target: < 0.1
First Input Delay (FID) / INP target: < 200ms
Bundle size budget for new routes

Measure with Lighthouse on a representative device.

Step 4: Component design

Components are pure functions of their props/state
No side effects in render
Extract business logic from UI components
Co-locate styles with components

Step 5: State management

Prefer: local state → lifted state → context → global store (in that order). Only reach for global state when local state genuinely doesn't work.

Step 6: Error boundaries

Wrap sections of the UI in error boundaries. A crash in one section should not take down the whole page.

Step 7: Testing

Unit test business logic extracted from components
Component tests for component behavior (not implementation)
E2E tests for critical user journeys

Step 8: Security

Sanitize all user-generated HTML rendered to the DOM
No dangerouslySetInnerHTML or equivalent without sanitization
Content Security Policy headers configured

Verification Requirements

All UI states implemented (loading, empty, error, populated)
Accessibility requirements met (see accessibility-engineering)
Lighthouse performance score ≥ 90
Error boundaries in place
Critical journeys covered by E2E tests
No XSS vulnerabilities in dynamic HTML rendering