Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

/cs:frontend-review — Frontend engineering review · alirezarezvani | DecimalAI

alirezarezvani/csfrontend-review-frontend-engineering-review

SkillScore86Maintained

Frontend engineering review — walks the 7 Matt Pocock forcing questions (device, LCP target, rendering, bundle budget, SEO vs auth, design system, WCAG), picks the framework + rendering profile, forks into specialists (a11y-audit, performance-profiler, epic-design). Invokes the cs-frontend-engineer agent with context fork.

Frontendby alirezarezvani

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/alirezarezvani-csfrontend-review-frontend-engineering-review/SKILL.md

decimalai skills pull alirezarezvani-csfrontend-review-frontend-engineering-review --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/alirezarezvani-csfrontend-review-frontend-engineering-review/SKILL.md https://app.decimal.ai/s/alirezarezvani-csfrontend-review-frontend-engineering-review/SKILL.md

Raw file: /s/alirezarezvani-csfrontend-review-frontend-engineering-review/SKILL.md ↗ · machine-readable summary at /s/alirezarezvani-csfrontend-review-frontend-engineering-review.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 55d ago

Yes — +59% lift-19% tokens0% turns86% of whole cases pass with skill (19/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-07	✗→✓	▲ Improved	-26%	0%
case-08	✗→✓	▲ Improved	-19%	0%
case-09	✗→✓	▲ Improved	-15%	0%
case-10	✗→✓	▲ Improved	-37%	0%
case-11	✗→✓	▲ Improved	14%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

alirezarezvani / claude-skills

.gemini/skills/cs-frontend-review/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

/cs:frontend-review — Frontend engineering review

Use the cs-frontend-engineer agent (uses context: fork) to handle this inquiry:

$ARGUMENTS

Forcing-question library

Canonical source: engineering-team/skills/senior-frontend/references/forcing_questions.md (7 questions, one-per-turn, recommendation + canon citation per question).

Primary device + network (desktop-fiber / mobile-4G / low-end Android / corporate)
LCP target on primary device (milliseconds)
Server Components vs SPA vs SSR vs SSG
JS bundle budget per route (KB gzipped)
SEO-dependent or auth-walled
Design-system location (Figma + tokens / ad-hoc Tailwind / headless UI)
WCAG target (AA / AAA / best-effort) + accessibility owner

Routing protocol

Walk the 7 forcing questions in engineering-team/skills/senior-frontend/references/forcing_questions.md. One per turn. Recommend with cited canon. Track in /tmp/frontend-grill-<date>.md.
Surface kill criteria — e.g., "SEO-dependent + SPA-only" trips. STOP and resolve.
Run the deterministic profile picker:

bash python engineering-team/skills/senior-frontend/scripts/frontend_decision_engine.py \ --primary-device <mobile-4g|desktop-fiber|low-end-android|corporate-network> \ --lcp-target-ms <N> --seo-dependent <true|false> \ --auth-walled <true|false> --team-size <N>

Surface the matched profile + runner-up tradeoff (if within 15%).
Fork into specialists (one at a time, depth-first):

a11y-audit for WCAG baseline (always)
performance-profiler for CWV baseline + bundle audit
epic-design only for astro-or-static marketing surfaces
apple-hig-expert only for Apple-platform-native surfaces
dependency-auditor before any major release
cs-karpathy-reviewer before any commit

Output expectations (≤ 200-word digest)

Matched profile + reason
Three CWV targets (LCP, INP, CLS) at p75 on the primary device
Per-route JS bundle budget in KB-gzip
Named a11y owner
List of specialists invoked + artifact paths
Recommended next sub-skill

Anti-patterns

❌ Recommending Next App Router as a universal default. Device + SEO + auth decide rendering.
❌ Setting "fast" as a target. Pick a number in ms.
❌ Skipping a11y-audit on customer-facing surface.
❌ Reimplementing perf-profiling logic. Fork into performance-profiler.

Customization

Profiles live at engineering-team/skills/senior-frontend/profiles/. Four built-in: next-app-router, remix-or-sveltekit, vite-spa, astro-or-static. Copy one to <your-org>.json and adjust to add your org's defaults.

Related commands

/cs:fullstack-review — full-stack lens (parent)
/cs:backend-review — for API contract on the consumer side
/cs:engineer-grill — cross-role 21-question grill
/karpathy-check — Karpathy 4-principle review

Illustrative Want to see what alirezarezvani/csfrontend-review-frontend-engineering-review would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/4/2026, 22:34 UTC · 22 cases

Lift

+59%

86% vs 27%

Agent turns

1.0 vs 1.0

Tokens

-19%

1,575.91 vs 1,950.27

fail → pass · 13pass → pass · 6fail → fail · 3

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 We are building a new web platform and need a structured frontend engineering review to determine our architecture and performance goals. Please grill us with targeted questions to figure out our hardware constraints, accessibility requirements, and rendering needs. Afterward, run your evaluation process, select an appropriate stack profile, and give me a brief summary digest under 200 words covering the chosen stack, core web vitals goals, gzipped JS limits, assigned accessibility ownership, sub-agents run, and the next recommended steps.	fail→fail	10,525	4,327	-59%	1	1	0%	2,211	1,591	-28%	0	0	—
case-02 Our team is planning a major frontend overhaul for our customer portal and we need an architectural sanity check. Go through the standard forcing questions step-by-step to assess our device targets, SEO needs, and design setup. Then run the profiling assessment and invoke any necessary specialized sub-auditors. Finally, provide a concise summary outlining our matched stack profile with justification, p75 performance benchmarks, route bundle caps, accessibility owner, invoked specialist logs, and suggested follow-up tools.	fail→fail	21,785	5,172	-76%	1	1	0%	3,974	1,698	-57%	0	0	—
case-03 Can you execute a comprehensive frontend engineering evaluation for our new client web application? Please walk us through your step-by-step diagnostic questions regarding rendering model, bundle limits, and WCAG targets before running your selection algorithm and specialist audits. Make sure the final output is a short executive digest listing the recommended architecture profile, three key CWV p75 thresholds, route-level bundle budgets, accessibility leads, specialist execution paths, and the next sub-skill to call.	fail→fail	13,894	3,095	-78%	1	1	0%	2,542	1,454	-43%	0	0	—
case-04 We need a React CSS module styling a 3-column responsive product card grid that stacks vertically below 768px viewports. Write the pure CSS rules for flexbox/grid layout and media queries without applying any architecture profiling frameworks.	pass→pass	9,557	8,459	-11%	1	1	0%	2,432	2,855	+17%	0	0	—
case-05 Our custom `useFetch` hook in TypeScript gives a type error when casting generic `TData` response bodies. Show how to fix the TypeScript generic parameter definition on `fetch()` calls in React without running frontend architecture reviews or decision scripts.	pass→pass	7,197	8,608	+20%	1	1	0%	1,609	2,582	+60%	0	0	—
case-06 Configure Webpack 5 in `webpack.config.js` to automatically convert PNG/JPG assets to WebP format using `image-minimizer-webpack-plugin` with `imagemin-webp`. Provide the JS configuration object directly without walking through architectural forcing questions.	pass→pass	10,565	7,100	-33%	1	1	0%	2,283	2,173	-5%	0	0	—
case-07 We are running the automated frontend decision engine via CLI for an internal corporate web portal on desktop fiber with a 1200ms LCP target, no SEO requirement, full auth-wall protection, and 12 developers. What exact command-line arguments and values should be passed to the decision engine script?	fail→pass	19,807	2,698	-86%	1	1	0%	1,938	1,425	-26%	0	0	—
case-08 We are planning a public e-commerce storefront requiring strong search engine indexing, but the engineering team wants to build it exclusively as a client-side Single Page Application without SSR or SSG. What architectural decision constraint or conflict check occurs during the review?	fail→pass	11,881	5,132	-57%	1	1	0%	2,088	1,691	-19%	0	0	—
case-09 Our team is evaluating a static marketing landing page surface configured on Astro. Which specialized design reviewer sub-agent should be conditionally invoked for this surface?	fail→pass	8,538	2,408	-72%	1	1	0%	1,558	1,324	-15%	0	0	—
case-10 We are building a web application tailored specifically for Apple Safari and iOS human interface compliance. Which specialized reviewer agent should be invoked for Apple-platform-native surfaces?	fail→pass	11,557	2,287	-80%	1	1	0%	1,972	1,234	-37%	0	0	—
case-11 When running a frontend review for a customer-facing web app, which two specialized sub-agents must always be invoked for accessibility baseline and Core Web Vitals profiling?	fail→pass	6,695	2,078	-69%	1	1	0%	1,068	1,216	+14%	0	0	—
case-12 We are preparing to ship a major production release of our web platform next week. Which specialized auditing agent must be executed prior to any major release?	fail→pass	9,662	2,116	-78%	1	1	0%	1,762	1,204	-32%	0	0	—
case-13 Our team lead wants an automated code quality and principles check before merging code commits. Which specialized reviewer agent handles pre-commit reviews?	fail→pass	11,149	2,903	-74%	1	1	0%	1,689	1,283	-24%	0	0	—
case-14 In our engineering specification document, someone listed our performance goal as 'make the page load fast'. How should performance targets be defined according to web performance engineering best practices?	pass→pass	13,560	8,927	-34%	1	1	0%	2,509	2,223	-11%	0	0	—
case-15 A team lead suggested that we should adopt Next.js App Router as our mandatory universal default framework for all new web projects regardless of project requirements. Why is this discouraged?	fail→pass	13,901	9,488	-32%	1	1	0%	2,251	2,357	+5%	0	0	—
case-16 When the decision script evaluates architecture options, when should the runner-up framework profile's tradeoffs be highlighted alongside the winning match?	fail→pass	21,180	2,558	-88%	1	1	0%	1,811	1,219	-33%	0	0	—
case-17 Where should the progress and state of the interactive frontend diagnostic questionnaire be recorded during execution?	fail→pass	13,923	6,951	-50%	1	1	0%	2,268	1,126	-50%	0	0	—
case-18 Where is the canonical reference document for the senior frontend forcing questions located in the repository, and how many questions does it contain?	fail→pass	10,207	4,058	-60%	1	1	0%	1,743	1,216	-30%	0	0	—
case-19 Our organization wants to create custom frontend architecture profiles tailored for our enterprise UI standards. In which file directory should organization-specific profile JSON files be stored?	fail→pass	8,418	2,777	-67%	1	1	0%	1,543	1,251	-19%	0	0	—
case-20 What three specific Core Web Vitals metrics must be included at the p75 percentile in the review's final executive digest?	pass→pass	3,539	2,337	-34%	1	1	0%	524	1,157	+121%	0	0	—
case-21 How must the per-route JavaScript bundle size limit be expressed in the final summary digest?	pass→pass	8,167	2,436	-70%	1	1	0%	1,367	1,210	-11%	0	0	—
case-22 If an engineering team needs to evaluate both backend API contracts and frontend architecture in a single holistic parent review, which related command should be used?	fail→pass	9,928	1,668	-83%	1	1	0%	1,764	1,181	-33%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +59 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 27.3%
Pass rate with the skill: 86.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/4/2026, 22:34 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-07

Prompt

We are running the automated frontend decision engine via CLI for an internal corporate web portal on desktop fiber with a 1200ms LCP target, no SEO requirement, full auth-wall protection, and 12 developers. What exact command-line arguments and values should be passed to the decision engine script?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run86

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+14% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 55 days ago

Other measured skills in the registry, with their headline benchmark lift.