# Frontend Engineering

> Accessible, performant, responsive UI patterns. Component design, state management discipline, and Core Web Vitals compliance.

- **Type:** Skill
- **Install:** `agentstack add skill-developersglobal-ai-agent-skills-frontend-engineering`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DevelopersGlobal](https://agentstack.voostack.com/s/developersglobal)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DevelopersGlobal](https://github.com/DevelopersGlobal)
- **Source:** https://github.com/DevelopersGlobal/ai-agent-skills/tree/main/skills/frontend-engineering
- **Website:** https://developersglobal.github.io/ai-agent-skills/

## Install

```sh
agentstack add skill-developersglobal-ai-agent-skills-frontend-engineering
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

## Overview

Frontend code touches every user. Poor UI engineering causes accessibility barriers, performance degradation, and broken experiences on non-standard devices. This skill enforces the discipline of building UI that works for everyone.

## When to Use

- Building any user-facing UI component
- Reviewing frontend PRs
- Before any UI ships to production

## Process

### Step 1: Accessibility First

1. Every interactive element has a visible focus state.
2. All images have meaningful alt text (or `alt=""` for decorative).
3. Color contrast ratio ≥ 4.5:1 for normal text.
4. All functionality operable by keyboard alone.
5. Use semantic HTML: `` not ``, `` not ``.

**Verify:** Run axe DevTools or Lighthouse accessibility audit. Score ≥ 90.

### Step 2: Performance (Core Web Vitals)

6. LCP (Largest Contentful Paint) < 2.5s: Optimize images, preload critical resources.
7. FID/INP < 100ms: Avoid long tasks on the main thread.
8. CLS (Cumulative Layout Shift) < 0.1: Reserve space for dynamic content.
9. Lazy load below-the-fold images and non-critical JS.
10. Bundle size: measure before and after. No unneeded dependencies.

**Verify:** Lighthouse performance score ≥ 80. CWV within targets.

### Step 3: Responsive Design

11. Test at 320px, 768px, 1024px, 1440px viewports.
12. No horizontal scrolling at any standard viewport.
13. Touch targets ≥ 44px × 44px.

### Step 4: State Management Discipline

14. Server state vs. client state are separate concerns — don't mix.
15. No prop drilling more than 2 levels — use context or state management.
16. Loading, error, and empty states handled for every async operation.

**Verify:** Loading, error, and empty states all visible in Storybook/dev environment.

## Common Rationalizations (and Rebuttals)

| Excuse | Rebuttal |
|--------|----------|
| "Accessibility is for edge cases" | 1 in 4 adults has a disability. It's not an edge case. |
| "We'll optimize performance later" | Users leave after 3 seconds. "Later" is too late. |

## Verification

- [ ] Accessibility audit score ≥ 90
- [ ] Core Web Vitals within targets
- [ ] Responsive at 320px/768px/1024px/1440px
- [ ] Loading, error, empty states handled
- [ ] All interactive elements keyboard-operable

## References

- [references/accessibility-checklist.md](../../references/accessibility-checklist.md)
- [performance-optimization skill](../performance-optimization/SKILL.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DevelopersGlobal](https://github.com/DevelopersGlobal)
- **Source:** [DevelopersGlobal/ai-agent-skills](https://github.com/DevelopersGlobal/ai-agent-skills)
- **License:** MIT
- **Homepage:** https://developersglobal.github.io/ai-agent-skills/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-developersglobal-ai-agent-skills-frontend-engineering
- Seller: https://agentstack.voostack.com/s/developersglobal
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.