بنقرة واحدة
frontend-performance-accessibility
Use when improving frontend performance, Lighthouse, web-vitals, or a11y.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Use when improving frontend performance, Lighthouse, web-vitals, or a11y.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use BEFORE building or changing any UI — components, layout, color, spacing, typography, interaction states, or visual styling — to verify the planned change matches the Figma design via the Figma MCP. Run this gate before writing or editing UI code.
Use when placing features, repositories, hooks, or fixing dependency-cruiser errors.
Use when validating frontend changes before commit, push, or PR.
Use when placing, moving, naming, or splitting frontend files.
Use when retrieving or addressing PR review comments.
Use when frontend files, components, hooks, or helpers exceed complexity gates.
| name | frontend-performance-accessibility |
| description | Use when improving frontend performance, Lighthouse, web-vitals, or a11y. |
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.
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.
Before applying this skill, confirm the active task against ../AI-AGENT-GUIDE.md and ../SKILL-DECISION-GUIDE.md so every relevant skill is consulted.
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.