Agent skill

ui-image-rules

Mandatory image rendering rules: dimensions, object-fit, optimization, alt text. Always applies regardless of design-dna.

View SKILL.md on GitHub Repository
Stars 2
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/adilkalam/orca/tree/main/skills/ui-image-rules

SKILL.md

UI Image Rules

These rules apply to every image element regardless of project design-dna.

Dimensions

  • Every <Image> or <img> MUST have explicit width and height props, OR use the fill prop
  • Never render an image without dimension constraints -- this causes layout shift
  • Use Next.js <Image> component with fill for responsive containers, or explicit dimensions
  • Use the sizes prop to specify different image widths for different viewport widths

Object-Fit Rules

Image Type object-fit When to Use
Hero banners, card thumbnails, backgrounds cover Image should fill container, cropping is acceptable
Logos, icons, product images on white contain Full image must be visible, letterboxing acceptable
Avatars, profile photos cover Face-centered crop fills circular/square container
  • Never stretch images -- always use object-fit with object-position for aspect ratio mismatches
  • For cover images, set object-position to control which part of the image is visible (e.g., object-position: center top for portraits)

Optimization

  • Prefer WebP/AVIF via Next.js Image automatic optimization
  • Set priority on above-the-fold hero images (LCP optimization)
  • Use loading="lazy" (default in Next.js Image) for below-the-fold images

Alt Text

  • Every image MUST have descriptive alt text
  • Never use generic alt text like "image", "photo", "picture", or ""
  • Decorative-only images use alt="" with role="presentation" -- but this should be rare
  • Alt text should describe what the image shows, not what it is (e.g., "Team collaborating around a whiteboard" not "team photo")

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

adilkalam/orca

web-interface-guidelines

Web UI quality rules: interactions, forms, loading, animations, layout, content, performance, accessibility, design. Apply to all web UI work. Adapted from Vercel Design Guidelines.

2 0
Explore
adilkalam/orca

react-performance

React/Next.js performance patterns with wrong/right code examples. Apply when building or reviewing React components. Adapted from Vercel React Best Practices by @shuding.

2 0
Explore
adilkalam/orca

stripe-integration

Payment integration patterns for Stripe. Covers checkout sessions, subscriptions, webhooks, idempotency, and the sharp edges that cause real-money bugs. Backend-agnostic with examples for Next.js App Router and Django REST Framework.

2 0
Explore
adilkalam/orca

testing-strategy

Testing strategies and best practices for unit, integration, and end-to-end tests. Use when setting up test infrastructure, writing test cases, or deciding what to test. Covers test pyramid, mocking strategies, and coverage guidelines.

2 0
Explore
adilkalam/orca

frontend-aesthetics

Global frontend aesthetics skill that helps Claude avoid generic "AI slop" UI and make bold, intentional visual decisions while still honoring each project's design-dna, tokens, and architecture.

2 0
Explore
adilkalam/orca

pg-style-editor

Edit writing to adopt Paul Graham's exceptionally clear style for research and long-form content - concrete language, varied sentence rhythm, accessible formality, specific evidence. Use when user wants to rewrite content in PG's style or asks to "make this clearer" or "simplify research writing."

2 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results