frontend-performance-accessibility

Use when improving frontend performance, Lighthouse, web-vitals, or a11y.

Repository: VilnaCRM-Org/crm
Last source activity: July 21, 2026 at 22:32
Detected SKILL.md language: English
Stars: 1
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/VilnaCRM-Org/crm --skill frontend-performance-accessibility

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

4 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

architecture

Use when placing features, repositories, hooks, or fixing dependency-cruiser errors.

2026-07-25

make-target-maintenance

Keep the Bats make-target contract in sync when adding or renaming a Makefile target so the bats CI check stays green

2026-07-21

observability-instrumentation

Use when adding frontend telemetry, logs, Sentry, or web-vitals signals.

2026-07-21

View all from this repository

Frontend Performance Accessibility

Performance Checks

Use Lighthouse for page-level performance and best-practice validation:

make lighthouse-desktop make lighthouse-mobile

Use web-vitals for runtime signals when adding instrumentation.

Accessibility Checks

Figma design is the source of truth. Before modifying UI, verify the design spec first. Accessibility guidance applies on top of the design, not instead of it. Do not invent UI from a11y requirements alone.

Prefer semantic MUI components and native controls.

Use accessible names for buttons, links, fields, dialogs, and icons.

Keep form errors connected to their fields.

Use Playwright role and label locators to preserve accessibility coverage.

Check keyboard interaction for menus, dialogs, forms, and route changes.

Rendering Rules

Avoid layout shifts from dynamic labels, counters, and loading states.

Keep heavy computation out of render paths.

Memoize only when measurement or code shape shows repeated cost.

Preserve readable contrast and focus states.

Verification

make test-unit-client make test-e2e make test-visual make lighthouse-desktop make lighthouse-mobile

Run the subset that matches the change, then finish with make format followed by make lint.

Related Guides

Before applying this skill, confirm the active task against ../AI-AGENT-GUIDE.md and ../SKILL-DECISION-GUIDE.md so every relevant skill is consulted.

Line Length Disclosure

Before presenting changes, check changed text files for lines longer than 100 characters. If any exist, tell the user each path:line and measured character count. Treat this as disclosure, not failure, unless a project gate fails.

Supporting Files

name	frontend-performance-accessibility
description	Use when improving frontend performance, Lighthouse, web-vitals, or a11y.