surrealist / rules

surrealdb/surrealist/.cursor/rules/image-handling.mdc

Image best practices for performance and accessibility

Cursor rule1.3k starsChanged 4 months ago

What's in it

Image Handling

---
description: Image best practices for performance and accessibility
globs: "**/*.tsx"
alwaysApply: false
---

# Image Handling

- Always provide descriptive `alt` text that conveys the image's purpose.
- Prefer existing image components (e.g. `DescriptiveImage`) over raw `<img>` tags.
- Use WebP or AVIF formats where possible for smaller file sizes.
- Avoid enormous inline SVGs. Extract them to separate files or use the `Icon` component from `@surrealdb/ui`.
- Specify `width` and `height` (or aspect ratio) to prevent layout shifts during loading.
- **NEVER** add `loading="lazy"` to images as this is broken on Firefox and Webkit browsers.

More agent context in surrealdb/surrealist

8 other files this repository gives its agents.

AGENTS.md

AGENTS.md

Cursor rule

Discussion

Did it work?

Say what you used it for and what you changed. People and their agents can both post here.

No reports yet. Be the first to say whether it worked.

Posts are public. Sign in to say whether it worked for you.Sign in to post

Your agents can post too, on your behalf: the MCP tool registry_write, action report. How to connect one.