mirror of
https://github.com/affaan-m/ECC.git
synced 2026-08-20 06:25:43 +02:00
sutazcaandGitHub
e05a201258
Every other language pack (typescript, react, python, golang, vue, ...) scopes its rules with a paths: YAML frontmatter block, so Claude Code only loads them when matching files are in context. The 7 files in rules/web/ ship without frontmatter, and per the official rules-loading docs (https://code.claude.com/docs/en/memory) rules without a paths field load unconditionally into every session - ~15.5KB of always-on context even in projects with no frontend code. Add the same frontmatter convention used by the react pack, scoped to web-facing file types (css/scss/sass/less/html/tsx/jsx/vue/svelte).
77 lines
2.0 KiB
Markdown
77 lines
2.0 KiB
Markdown
---
|
|
paths:
|
|
- "**/*.css"
|
|
- "**/*.scss"
|
|
- "**/*.sass"
|
|
- "**/*.less"
|
|
- "**/*.html"
|
|
- "**/*.tsx"
|
|
- "**/*.jsx"
|
|
- "**/*.vue"
|
|
- "**/*.svelte"
|
|
---
|
|
> This file extends [common/performance.md](../common/performance.md) with web-specific performance content.
|
|
|
|
# Web Performance Rules
|
|
|
|
## Core Web Vitals Targets
|
|
|
|
| Metric | Target |
|
|
|--------|--------|
|
|
| LCP | < 2.5s |
|
|
| INP | < 200ms |
|
|
| CLS | < 0.1 |
|
|
| FCP | < 1.5s |
|
|
| TBT | < 200ms |
|
|
|
|
## Bundle Budget
|
|
|
|
| Page Type | JS Budget (gzipped) | CSS Budget |
|
|
|-----------|---------------------|------------|
|
|
| Landing page | < 150kb | < 30kb |
|
|
| App page | < 300kb | < 50kb |
|
|
| Microsite | < 80kb | < 15kb |
|
|
|
|
## Loading Strategy
|
|
|
|
1. Inline critical above-the-fold CSS where justified
|
|
2. Preload the hero image and primary font only
|
|
3. Defer non-critical CSS or JS
|
|
4. Dynamically import heavy libraries
|
|
|
|
```js
|
|
const gsapModule = await import('gsap');
|
|
const { ScrollTrigger } = await import('gsap/ScrollTrigger');
|
|
```
|
|
|
|
## Image Optimization
|
|
|
|
- Explicit `width` and `height`
|
|
- `loading="eager"` plus `fetchpriority="high"` for hero media only
|
|
- `loading="lazy"` for below-the-fold assets
|
|
- Prefer AVIF or WebP with fallbacks
|
|
- Never ship source images far beyond rendered size
|
|
|
|
## Font Loading
|
|
|
|
- Max two font families unless there is a clear exception
|
|
- `font-display: swap`
|
|
- Subset where possible
|
|
- Preload only the truly critical weight/style
|
|
|
|
## Animation Performance
|
|
|
|
- Animate compositor-friendly properties only
|
|
- Use `will-change` narrowly and remove it when done
|
|
- Prefer CSS for simple transitions
|
|
- Use `requestAnimationFrame` or established animation libraries for JS motion
|
|
- Avoid scroll handler churn; use IntersectionObserver or well-behaved libraries
|
|
|
|
## Performance Checklist
|
|
|
|
- [ ] All images have explicit dimensions
|
|
- [ ] No accidental render-blocking resources
|
|
- [ ] No layout shifts from dynamic content
|
|
- [ ] Motion stays on compositor-friendly properties
|
|
- [ ] Third-party scripts load async/defer and only when needed
|