When should this skill be used?

Use it when reviewing templates, rendered HTML, or shared components related to setting the responsive viewport meta tag.

Does it check source code or the final markup?

It validates the final browser-facing markup, not just the source framework abstraction.

Set the responsive viewport meta tag

SkillWeb & browsing

Viewport is a skill for AI agents that checks whether web pages set the correct responsive viewport meta tag. It is used when reviewing templates, rendered HTML, or shared components, and it validates the final browser-facing markup rather than just the source framework abstraction.

Use Set the responsive viewport meta tag in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Set the responsive viewport meta tag and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Set the responsive viewport meta tag skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have an AI agent that supports loading skills.

Set the responsive viewport meta tagStart free

What your AI can do with it

Check that pages set the correct responsive viewport meta tag
Review templates for viewport meta tag correctness
Inspect rendered HTML for the viewport meta tag
Review shared components for viewport meta tag issues
Validate final browser-facing markup instead of source framework abstractions

Getting started

Have an AI agent that supports loading skills.
Add the viewport skill to the agent's available skills.
Ask the agent to review a template, rendered HTML page, or shared component for the responsive viewport meta tag.

What this skill tells your AI

The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/viewport/SKILL.md and read by ahel’s review.

Without the viewport meta tag, mobile browsers render pages at desktop width (typically 980px) then shrink them, making text unreadable without zooming.

Quick Reference

Add <meta name="viewport" content="width=device-width, initial-scale=1.0">
Never use maximum-scale=1 or user-scalable=no (breaks accessibility)
Essential for mobile-responsive layouts

Check

Verify that this HTML document includes a proper viewport meta tag for responsive design that controls how the page is displayed on mobile devices.

Fix

Add the viewport meta tag: in the head section.

Explain

Explain how the viewport meta tag enables responsive design and why it's essential for mobile-first web development.

Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Set the responsive viewport meta tag. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/html/viewport

Signals

GitHub stars: 74k
Forks: 7k
Last commit: Oct 2026
Hacker News mentions: 3

Questions

When should this skill be used?: Use it when reviewing templates, rendered HTML, or shared components related to setting the responsive viewport meta tag.
Does it check source code or the final markup?: It validates the final browser-facing markup, not just the source framework abstraction.

Advanced

Item type: skill
Key: viewport
Source: github.com/thedaviddias/front-end-checklist

github.com/thedaviddias/front-end-checklist

More in Web & browsing

browser-use
Skill · browser-use
More in Web & browsing webapp-testing
Skill · anthropics
More in Web & browsing playwright-cli
Skill · microsoft
More in Web & browsing benchmark
Skill · affaan-m
More in Web & browsing open-source
Skill · browser-use
More in Web & browsing impeccable
Skill · pbakaus
More in Web & browsing