Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

performance-cwv

Étoiles1

Forks0

Mis à jour3 février 2026 à 15:44

Web performance and Core Web Vitals (LCP, INP, CLS) in TryRamadan. Covers critical path, lazy loading, images/fonts, and layout stability. Use when changing above-the-fold content, images, fonts, or heavy components on the main route.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

ummahbuild

ummahbuild/tryramadan

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	performance-cwv
description	Web performance and Core Web Vitals (LCP, INP, CLS) in TryRamadan. Covers critical path, lazy loading, images/fonts, and layout stability. Use when changing above-the-fold content, images, fonts, or heavy components on the main route.

Performance and Core Web Vitals (TryRamadan)

Use this skill when changing critical path, images, fonts, or layout so LCP, INP, and CLS stay within targets.

1. Goals

LCP (Largest Contentful Paint): < 2.5s — hero and main content visible quickly.
INP (Interaction to Next Paint): < 200ms — buttons and inputs feel responsive.
CLS (Cumulative Layout Shift): < 0.1 — no visible layout jumps.

Doc: docs/PERFORMANCE.md (critical path, checklist, measure).

2. Critical path and lazy loading

Entry: main.tsx → App.tsx → index.css. Dashboard sub-pages (Schedule, Meals, Progress, Culture, Quran, Macros) are lazy-loaded; home and Dashboard remain in main bundle.
Heavy components off critical path: FastingBottomBar, AdhanScheduler, ReminderScheduler not mounted until onboarding complete or on dashboard. Avoid mounting them on every page.
Timers: Countdown/timer intervals throttled (e.g. 2s) where appropriate to reduce main-thread work (INP).
Cache-first APIs: Prayer times and location use cache-first; defer initial fetch with requestIdleCallback when possible (see timezone-and-countdown and offline-and-degraded-network skills).

3. Images and fonts

LCP image: Hero image with explicit width/height, fetchpriority="high", decoding="async". Preload from HTML when URL is known.
Below-the-fold: loading="lazy" and explicit dimensions or aspect-ratio.
Fonts: No @import in CSS; use <link rel="preload"> or font-display strategy so font load does not block first paint.

4. Layout stability (CLS)

Reserve space for dynamic content (timer, cards) with min-height or explicit dimensions so layout doesn’t shift when data arrives.
Use skeletons/placeholders with fixed height for loading states.
Measure: reportWebVitals() in main.tsx; plug in RUM (e.g. Vercel Analytics) via callback for production.

5. Checklist for changes

New above-the-fold images: dimensions and priority/preload as in PERFORMANCE.md.
New routes or heavy components: keep them lazy-loaded if not on critical path.
New API or timer: avoid blocking first paint; throttle where appropriate.

Plus depuis ce dépôt

même dépôt

tryramadan-project

ummahbuild/tryramadan

TryRamadan app overview, performance optimizations, and resources. Use when making cross-cutting changes, adding dependencies, or optimizing build/runtime.

2026-02-061

culture-recipes-authenticity

ummahbuild/tryramadan

Fact-check and verify culture pages, traditions, and recipes; add and validate hyperlink sources; test authenticity of cultural and culinary claims. Use when adding or editing cultural-traditions.json, recipes.json, country pages, recipe pages, or any tradition/food/recipe content in TryRamadan.

2026-02-051

offline-and-degraded-network

ummahbuild/tryramadan

Offline and degraded network behavior in TryRamadan. Covers cache-first prayer times, API failure/timeout for Aladhan and location/timezone, and what works offline (fasting log, journal, meals). Use when adding features that call external APIs or read/write cached data.

2026-02-031

onboarding-and-re-onboarding

ummahbuild/tryramadan

Onboarding and re-onboarding flows in TryRamadan. Covers step order, persistence (draft vs final preferences), redirect to dashboard, and edge cases (abandonment, skip location, Muslim vs Non-Muslim path). Use when changing onboarding steps, routes, or completion logic.

2026-02-031

qa-bug-reports-and-regression-tests

ummahbuild/tryramadan

Writing clear bug reports and converting bugs into regression tests in TryRamadan. Covers precise title, environment, numbered steps, expected vs actual, missing information, and BUG-<AREA>-<ID> test naming. Use when writing or rewriting bug reports, or when adding regression tests from a fixed bug.

2026-02-031

ramadan-calendar-and-fasting-logic

ummahbuild/tryramadan

Ramadan calendar (start/end, day number, year boundary), fasting states (completed/skipped/broken), streak and todayOverride in TryRamadan. Use when editing src/lib/ramadan.ts, fasting state transitions, streak calculation, or Ramadan day labels.

2026-02-031

name	performance-cwv
description	Web performance and Core Web Vitals (LCP, INP, CLS) in TryRamadan. Covers critical path, lazy loading, images/fonts, and layout stability. Use when changing above-the-fold content, images, fonts, or heavy components on the main route.

Performance and Core Web Vitals (TryRamadan)

Use this skill when changing critical path, images, fonts, or layout so LCP, INP, and CLS stay within targets.

1. Goals

LCP (Largest Contentful Paint): < 2.5s — hero and main content visible quickly.
INP (Interaction to Next Paint): < 200ms — buttons and inputs feel responsive.
CLS (Cumulative Layout Shift): < 0.1 — no visible layout jumps.

Doc: docs/PERFORMANCE.md (critical path, checklist, measure).

2. Critical path and lazy loading

Entry: main.tsx → App.tsx → index.css. Dashboard sub-pages (Schedule, Meals, Progress, Culture, Quran, Macros) are lazy-loaded; home and Dashboard remain in main bundle.
Heavy components off critical path: FastingBottomBar, AdhanScheduler, ReminderScheduler not mounted until onboarding complete or on dashboard. Avoid mounting them on every page.
Timers: Countdown/timer intervals throttled (e.g. 2s) where appropriate to reduce main-thread work (INP).
Cache-first APIs: Prayer times and location use cache-first; defer initial fetch with requestIdleCallback when possible (see timezone-and-countdown and offline-and-degraded-network skills).

3. Images and fonts

LCP image: Hero image with explicit width/height, fetchpriority="high", decoding="async". Preload from HTML when URL is known.
Below-the-fold: loading="lazy" and explicit dimensions or aspect-ratio.
Fonts: No @import in CSS; use <link rel="preload"> or font-display strategy so font load does not block first paint.

4. Layout stability (CLS)

Reserve space for dynamic content (timer, cards) with min-height or explicit dimensions so layout doesn’t shift when data arrives.
Use skeletons/placeholders with fixed height for loading states.
Measure: reportWebVitals() in main.tsx; plug in RUM (e.g. Vercel Analytics) via callback for production.

5. Checklist for changes

New above-the-fold images: dimensions and priority/preload as in PERFORMANCE.md.
New routes or heavy components: keep them lazy-loaded if not on critical path.
New API or timer: avoid blocking first paint; throttle where appropriate.