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.