An AI skill is a structured system prompt or set of custom instructions that gives AI assistants like ChatGPT, Claude, and Gemini specialized capabilities. It includes a clear role definition, specific knowledge areas, step-by-step processes, and quality criteria that help AI perform specific professional tasks.

How does Skill This work?

Simply describe your professional expertise in plain text. Our free AI skill generator analyzes your input and transforms it into a structured system prompt. The skill is then graded on clarity, specificity, and usefulness. You can share your skill via a unique URL or copy it to use as custom instructions with any AI assistant like ChatGPT, Claude, or Gemini.

Is Skill This free to use?

Yes, Skill This is completely free. No account or payment is required. You can create unlimited skills and share them with anyone.

How is my skill graded?

Skills are graded on a scale from A+ to F (0-100 points). The grade reflects how clear, specific, and actionable your skill is. Higher grades indicate skills that AI assistants can use more effectively.

How do I use my skill with an AI assistant?

Copy your generated skill and paste it into the system prompt or custom instructions of any AI assistant. For ChatGPT, use Personalization > Custom Instructions. For Claude, add it to a Project's instructions. For Cursor or other IDEs, save it as a .cursorrules or CLAUDE.md file. The AI will then adopt that skill and perform tasks according to your expertise.

AI Skill Report Card

Applying Alibaba HTML Spec

A-88·Sep 20, 2026·Source: Extension-page

YAML
---
name: applying-alibaba-html-spec
description: Reviews and writes HTML markup according to the Alibaba front-end coding specification, covering document structure, encoding rules, tag/attribute formatting, semantics, accessibility, and template language conventions. Use when writing new HTML files, reviewing HTML/template code for compliance, or setting up front-end project boilerplate that needs to follow Alibaba's style guide.
---

Quick Start14 / 15

Standard compliant HTML boilerplate:

HTML
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <title>My Site - There are a lot of fun!</title>
    <meta name="description" content="web front-end coding and engineering specification" />
    <meta name="keyword" content="code,html,css,javascript,typescript,react,node" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

Recommendation▾

Add a third example showing template language escaping in context to reinforce that specific rule

Workflow14 / 15

When writing or reviewing HTML, check items in this order:

Progress:
- [ ] Document structure: doctype, single <html>/<head>/<body>, lang attribute
- [ ] Meta tags: charset, viewport (inside <head> only)
- [ ] Resource loading: CSS in <head>, JS before </body>, protocol-relative URLs
- [ ] Title: exactly one <title>
- [ ] Indentation: 2 spaces, no tabs
- [ ] Comments: no sensitive info, correct spacing format
- [ ] Tags: lowercase, self-closing tags keep " />"
- [ ] Attributes: double quotes, no Boolean value assignment, data- prefix for custom attrs
- [ ] Semantics: correct elements for content meaning (ul/li vs div, etc.)
- [ ] Accessibility: alt text on images, meaningful roles
- [ ] Template language: spacing around variables/filters, escaping user input

Recommendation▾

Include a bad/before-and-after example specifically for accessibility rules (alt text, roles) since it's only covered abstractly

Rules Reference

Document Structure (Enforced)

Must start with <!doctype html> (lowercase, HTML5 form only — no XHTML/HTML4 doctypes).
Exactly one top-level <html> element.
<html> must have a lang attribute in language-REGION format (e.g. en-US, zh-CN), never zh_CN or zh-cn.
If part of the content is in a different language, add lang to that sub-element (e.g. <footer lang="en-US">).
<html> contains exactly one <head> and one <body> — nothing outside them (no stray <script> after </body>).
<meta> elements must live inside <head>.
Must use <meta charset="utf-8" />.
Exactly one <title> element.

Viewport (Recommended)

HTML
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Disable pinch-zoom only if the UI has its own zoom gestures:

HTML
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Resource Loading (Recommended)

Omit type for <link rel="stylesheet">, <style>, <script> — text/css/text/javascript are defaults.
Put CSS <link>/<style> in <head>; put <script> right before </body> (except scripts that must run before DOM load, e.g. polyfills/base libs).
External resource URLs should be protocol-relative: //g.alicdn.com/lib/style/index-min.css.
Use <link rel="preload" as="..."> for critical resources.
Use dns-prefetch/preconnect for early DNS resolution of cross-origin hosts.

Formatting

Indentation: 2 spaces, never 4 spaces or tabs.
Tag names lowercase: <h1> not <H1>.
Keep the self-closing slash with a preceding space: <img src="foo.png" alt="foo" />.
Attribute values use double quotes only.
Boolean attributes take no value: disabled, checked, selected (not disabled="disabled").
Custom attributes prefixed with data-: data-modal="toggle".

Comments (Enforced)

No sensitive info in HTML comments: business rules, PII (email/phone/ID numbers), access keys, certificates/passwords, internal IPs/URLs, or other internal-only company info.
Single-line: one space between .
Multi-line: opening/closing markers on their own line, content indented 2 spaces.

Semantics & Accessibility (Recommended/Reference)

Prefer semantic elements over generic div/span when meaning exists: use <ul><li> for lists, <p> for paragraphs, <a> for links/anchors.
Always set meaningful alt on <img>; use alt="" or role="presentation" for purely decorative images.

Template Languages (e.g. Nunjucks) (Enforced)

Space around variables, filters, keywords: {{ username }}, {{ tags | join(',') }} — not {{username}}.
All unescaped/untrusted user input must be HTML-escaped before output, including inside <script> blocks: {{ description | escaped }}, window.user = {{ user | dump | escaped }}.

Examples17 / 20

Example 1: Input:

HTML
<HTML>
<head><meta charset=utf-8>
<title>Page</title>
<script type="text/javascript" src='app.js'></script>
</head>
<body>
<div class="list"><div>1</div><div>2</div></div>
<img src="logo.png">
</body>
</HTML>

Output:

HTML
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Page</title>
  </head>
  <body>
    <ul class="list">
      <li>1</li>
      <li>2</li>
    </ul>
    <img src="logo.png" alt="" />
    <script src="app.js"></script>
  </body>
</html>

Example 2: Input: <input type="checkbox" checked="checked" data-toggle='foo'> Output: <input type="checkbox" checked data-toggle="foo" />

Recommendation▾

Consider a brief note on how to handle conflicting enforced vs recommended rules during review for edge-case prioritization

Best Practices

Default to protocol-relative URLs (//...) for CDN resources.
When in doubt about tag choice, pick the most semantically accurate HTML5 element.
Treat "Enforced" (强制) rules as hard errors during review; "Recommended"/"Reference" as strong suggestions to flag but not necessarily block on.

Common Pitfalls

Forgetting lang on <html> or using underscore instead of hyphen (zh_CN vs zh-CN).
Placing <meta> or <script> (base libs aside) in <body> unnecessarily, causing reflow/render-blocking.
Using single quotes for attribute values.
Adding explicit values to Boolean attributes.
Leaving alt off images entirely instead of using alt="" for decorative ones.
Outputting unescaped user input into HTML or inline <script> blocks — always escape.