Frontend Engineering

Plugin frontend-engineering from marketplace agent-ready-repo in eugenelim/agent-ready-repo. Commands read from the repo's manifest — today.

Skills (9)

• a11y-engineering

  Deep accessibility engineering beyond automated tooling — focus management architecture, ARIA role correctness under dynamic mutation, live-region discipline, keyboard contract specification, and manual checks for WCAG 2.2 Target Size (Minimum) (AA) and Focus Appearance (AAA enhancement), plus a sta

• component-contract

  Design a UI component's public interface — props/slots/events, controlled vs. uncontrolled ownership, composition patterns, lifecycle contract, and usage documentation — before writing any implementation. Triggers on "design the public contract for a shared date picker", "define the props, events, a

• css-architecture

  Organize CSS at scale using cascade layers, scoping strategies, and specificity budgets — preventing specificity wars, enabling safe deletion, and making CSS that other engineers can reason about. Triggers on "design the CSS architecture for this new codebase", "fix the specificity wars in our style

• fe-performance

  Measure, diagnose, and remediate Core Web Vitals and asset budget violations using structured profiling, causality analysis, and repeatable remediation patterns. Triggers on "diagnose why this route fails LCP", "find the cause of our INP regression", "bring this page back under its asset budget".

• fe-status

  Orient skill — read the current surface's evidence manifest, known exceptions, and gate history to return a surface-state summary against the frontend engineering quality floor. Triggers on "what is the frontend quality status of this surface", "show me the latest gate history and known exceptions",

• frontend-engineering

  Load when a task's primary output is HTML, CSS, or JS. Provides design pre-flight, codified craft rules, GATES verification commands, and an evidence manifest for that surface. Four modes — create (new surface), retrofit (improving existing), audit (review only), verify (run gates and manifest). Tri

• rendering-strategy

  Select and implement the correct rendering model (CSR/SSR/SSG/ISR/RSC) for each route based on data-access patterns, performance targets, and personalization requirements. Triggers on "choose the rendering model for each route in this product", "should this personalized route use SSR or CSR", "audit

• responsive-layout

  Design and implement adaptive layouts using CSS Grid, Flexbox, container queries, and fluid typography/spacing — the craft layer for layouts that work correctly across all viewport sizes without JavaScript. Triggers on "build this page layout so it works at every viewport", "fix the card grid that b

• token-architecture

  Design and govern a three-tier CSS custom property token system (primitive → semantic → component), including semantic alias layers, light/dark theming, and DTCG-compatible source generation. Triggers on "design a three-tier token system for our web app", "audit our CSS tokens for hardcoded value dr

Subagents (1)

• frontend-reviewer

  Diff-level reviewer for HTML/CSS/JS diffs — forked context, read-only. Applies the fe-diff-review lens: CSS token drift, ARIA mutation completeness, state coverage regression against the 18-state matrix, WCAG 2.2 Target Size (Minimum) (AA) and Focus Appearance (AAA enhancement) — the pack's two name

Hooks (1)

• SessionStart

  python3 "${CLAUDE_PLUGIN_ROOT}/.claude-plugin/scripts/install-marker.py" --install-route claude-plugins

Similar plugins