スキル一覧に戻る
leobrival

check-images

by leobrival

Serum plugin for Claude Code

0🍴 0📅 2026年1月20日
GitHubで見るManusで実行

SKILL.md


name: check-images description: Analyze and validate images on web pages. Use when users ask to check image alt tags, verify image accessibility, find missing alt attributes, audit image SEO, or check image optimization. Detects missing alt, empty alt, decorative images without proper markup, oversized images, and missing dimensions.

Check Images

Analyze and validate images on web pages for accessibility and SEO compliance.

Quick Start

cd /path/to/html-checker/scripts
bun src/check-images.ts <URL>

CLI Options

OptionShortDefaultDescription
--verbose-vfalseShow all images including valid ones
--json-jfalseOutput results as JSON

Checks Performed

CheckSeverityDescription
Missing altErrorImage has no alt attribute
Empty altWarningImage has alt="" (verify if decorative)
Generic altWarningAlt text like "image", "photo", "picture"
Long altInfoAlt text exceeds 125 characters
Missing dimensionsWarningNo width/height attributes (CLS risk)
No lazy loadingInfoLarge images without loading="lazy"

Usage Examples

# Basic check
bun src/check-images.ts https://example.com

# Verbose output
bun src/check-images.ts https://example.com --verbose

# JSON output
bun src/check-images.ts https://example.com --json

Output Example

Image Analysis for https://example.com

Summary:
  Total Images: 25
  With alt: 20
  Missing alt: 3
  Empty alt: 2

Issues Found: 5
  [ERROR  ] Missing alt at position 5
    <img src="/hero.jpg">
  [WARNING] Empty alt at position 12
    <img src="/divider.png" alt="">
  [WARNING] Generic alt at position 18
    <img src="/team.jpg" alt="image">

Recommendations:
  - Add descriptive alt text to all informative images
  - Use alt="" only for decorative images
  - Add width/height to prevent layout shifts

Accessibility Guidelines

  • Informative images: Describe the content/function
  • Decorative images: Use empty alt (alt="")
  • Functional images: Describe the action (e.g., "Search", "Submit")
  • Complex images: Use longdesc or aria-describedby

SEO Impact

  • Alt text helps search engines understand images
  • Improves image search rankings
  • Required for Google Images indexing
  • Command: plugins/html-checker/commands/check-images.md
  • Scripts: plugins/html-checker/scripts/src/check-images.ts
  • Check Links: plugins/html-checker/skills/check-links/
  • Check A11y: plugins/html-checker/skills/check-a11y/

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です