agentleFS
Sign inStart free
DevelopersGlobalDevelopersGlobal/ai-agent-skills/skills/frontend-engineering/SKILL.md

frontend-engineering

Skill216 starsChanged 6 months agoMITView on GitHub

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

We split this skill into the rules it gives an agent

9 rules. 0 are common, 7 are distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 7 edited versions we read keep these.

  • 7

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Before any UI ships to production

    line 17
  2. Distinctive:

    Every interactive element has a visible focus state.

    line 23
  3. Very specific:

    All images have meaningful alt text (or alt="" for decorative).

    line 24
  4. Distinctive:

    All functionality operable by keyboard alone.

    line 26
  5. Very specific:

    Use semantic HTML: <button> not <div onclick>, <nav> not <div class="nav">.

    line 27
  6. Distinctive:

    Verify: Run axe DevTools or Lighthouse accessibility audit.

    line 29
  7. Distinctive:

    Test at 320px, 768px, 1024px, 1440px viewports.

    line 43
  8. Distinctive:

    No horizontal scrolling at any standard viewport.

    line 44
  9. Distinctive:

    No prop drilling more than 2 levels — use context or state management.

    line 50

“Common” is measured: kept by at least 6 in 10 of the 7 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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: <button> not <div onclick>, <nav> not <div class="nav">.

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

Step 2: Performance (Core Web Vitals)

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

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

Step 3: Responsive Design

  1. Test at 320px, 768px, 1024px, 1440px viewports.
  2. No horizontal scrolling at any standard viewport.
  3. Touch targets ≥ 44px × 44px.

Step 4: State Management Discipline

  1. Server state vs. client state are separate concerns — don't mix.
  2. No prop drilling more than 2 levels — use context or state management.
  3. 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)

ExcuseRebuttal
"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
  • performance-optimization skill

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free