Frontend practices
Engineering PROWrite code that survives
Comments that earn their place, component and state design, lazy loading and code splitting, images, fonts, rendering and runtime performance, accessibility, frontend security, and what is actually worth testing — each rule with its reason and its exception.
- 513 lines
- 3,590 words
- 22 KB
- Updated 2026-07-22
The skill
Checking your access…
One moment.
What it covers
- What to comment and what not to
- Component, prop and state design
- Lazy loading, splitting, Core Web Vitals
- Images, fonts, CSS and layout shift
- Teardown, listeners and async correctness
- Accessibility and frontend security
- Testing what matters, bundle discipline
Best for: Any frontend work, and every code review.
Where the file goes
Same content everywhere — only the location changes. Restart the editor afterwards; instruction files are read at startup, not per message.
| Editor | Path | Applies to |
|---|---|---|
| Claude Code | ~/.claude/skills/frontend-practices/SKILL.md | Every project |
| Claude Code | <repo>/.claude/skills/frontend-practices/SKILL.md | This project only |
| Cursor | .cursor/rules/frontend-practices.mdc | This project only |
| VS Code (Copilot) | .github/copilot-instructions.md | This project only |
| Windsurf | .windsurfrules | This project only |
| Zed | .rules | This project only |