google-html-css-style

Applies Google's HTML and CSS style rules when writing or reviewing markup and stylesheets.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/chughtapan/google-guide-skills --skill google-html-css-style-chughtapan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: google-html-css-style
Source: https://github.com/chughtapan/google-guide-skills/tree/main/skills/google-html-css-style
Command: npx skills add https://github.com/chughtapan/google-guide-skills --skill google-html-css-style-chughtapan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Front-end code written by different contributors often drifts into inconsistent formatting, invalid markup, and inaccessible patterns. This Skill gives an agent a single authoritative checklist of Google's HTML/CSS conventions so code is written and reviewed against one consistent standard. ## Core Features & Use Cases - HTML authoring rules: Enforces valid HTML5, <!doctype html>, semantic elements, UTF-8 encoding, HTTPS resource URLs, multimedia fallback text, and separation of structure from presentation and behavior. - CSS authoring rules: Covers class naming conventions, selector discipline (no ID selectors, no type-qualified classes), shorthand properties, declaration formatting, and avoiding !important and CSS hacks. - Review guidance: Use it during code review to flag trailing whitespace, missing alt attributes, entity references, unnecessary type attributes, and formatting violations. - Use Case: While reviewing a pull request that adds a new landing page, the agent checks the markup against the guide and flags an id-based CSS selector, a missing alt attribute on an image, and a type="text/css" attribute that should be omitted. ## Quick Start Review the HTML and CSS in this change against the Google HTML/CSS style guide and list any violations.

Frequently Asked Questions about google-html-css-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Google's HTML/CSS style guide to my code?▼

Load this Skill when writing or reviewing HTML and CSS. It instructs the agent to enforce rules like 2-space indentation, lowercase code, valid HTML5, semantic elements, hyphenated class names, and shorthand CSS properties.

What CSS naming conventions does the Google style guide recommend?▼

Use meaningful or generic class names that are as short as possible but as long as necessary, with words separated by hyphens. Avoid ID selectors and type-qualified class selectors, and optionally prefix classes with an application-specific namespace.

Does the Google HTML style guide require alt text on images?▼

Yes, images must have meaningful alternative text via the alt attribute for accessibility. Purely decorative images should use an empty alt="" so screen readers skip them.

Should I use type attributes on script and link tags in HTML5?▼

No. The guide says to omit type attributes for stylesheets and scripts because HTML5 defaults to text/css and text/javascript, making them unnecessary even for older browsers.

When should I not use this HTML/CSS style skill?▼

Do not use it for visual design-system decisions such as color palettes, typography choices, or component look and feel. It covers code conventions only, and project-specific requirements take precedence over it.