AJBcoding
AJBcoding/claude-skill-eval
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-lang-html-css命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | moai-lang-html-css |
| version | 4.0.0 |
| status | stable |
| description | Enterprise Skill for advanced development |
| allowed-tools | Read, Bash, WebSearch, WebFetch |
HTML5 Semantic Markup & CSS Best Practices with Accessibility Focus
Primary Agent: ui-ux-expert Secondary Agent: frontend-expert Version: 1.0.0 Keywords: html, semantic html, html5, css, styling, accessibility, a11y, wcag, responsive, semantics
HTML Semantic Elements form the foundation of accessible, SEO-friendly web pages:
| Element | Purpose | Use Case |
|---|---|---|
<header> | Page/section header | Logo, navigation, branding |
<nav> | Navigation container | Menu, breadcrumbs, site links |
<main> | Primary content | Main page content (only one per page) |
<section> | Thematic content group | Articles, chapters, topics |
<article> | Self-contained content | Blog posts, news articles, comments |
<aside> | Tangentially related content | Sidebars, ads, related links |
<footer> | Footer section | Copyright, links, metadata |
CSS Best Practices:
!important)WCAG 2.1 AA Accessibility Checklist:
<div> for buttons)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Page Header -->
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<a href="/" class="logo">Brand</a>
<ul>
<li><a href="/about">About</a></li>
Services
Contact
Skip to main content
Article Title
Article introduction...
Section Heading
Section content...
Related Articles
Related article 1
Related article 2
2025 Company Name. All rights reserved.
<!-- WCAG 2.1 AA Compliant Form -->
<form method="POST" action="/submit">
<fieldset>
<legend>Contact Information</legend>
<!-- Email Input with Label -->
<div class="form-group">
<label for="email">Email Address *</label>
<input
id="email"
type="email"
name="email"
required
aria-required="true"
aria-describedby="email-help"
>
<small id="email-help">We'll never share your email</small>
</div>
<!-- Text Area -->
<div class="form-group">
<label for="message">Message *</label>
<textarea
id=
=
=
=
>
Send Message
/* Design Tokens as CSS Custom Properties */
:root {
/* Colors */
--color-primary: #0ea5e9;
--color-primary-dark: #0284c7;
--color-secondary: #8b5cf6;
--color-neutral-900: #111827;
--color-neutral-500: #6b7280;
--color-neutral-100: #f3f4f6;
/* Typography */
--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* Spacing (8px base unit) */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
: ;
: ;
: ;
: ;
: (, , , );
: (, , , );
: (, , , );
}
{
: smooth;
}
{
: (--font-family-sans);
: (--font-size-base);
: (--color-neutral-);
: ;
-webkit-: antialiased;
}
, , , , , {
: (--font-weight-bold);
: ;
}
{
: (--font-size-xl);
: (--spacing-lg);
}
{
: (--font-size-xl);
: (--spacing-md);
}
{
: (--spacing-md);
}
{
: inline-flex;
: center;
: center;
: (--spacing-sm) (--spacing-md);
: (--font-weight-medium);
: none;
: ;
: pointer;
: all ease;
: none;
}
{
: solid (--color-primary);
: ;
}
{
: ;
: not-allowed;
}
{
: (--color-primary);
: white;
}
{
: (--color-primary-dark);
}
{
: (--spacing-lg);
}
{
: block;
: (--font-weight-medium);
: (--spacing-sm);
}
, , {
: ;
: (--spacing-sm) (--spacing-md);
: solid (--color-neutral-);
: ;
: inherit;
: inherit;
}
, , {
: none;
: (--color-primary);
: (, , , );
}
{
: ;
}
{
: grid;
: (--spacing-md);
}
(: var(--breakpoint-md)) {
{
: (, fr);
}
}
(: var(--breakpoint-lg)) {
{
: (, fr);
}
}
{
: absolute;
: ;
: ;
: ;
: -;
: hidden;
: (, , , );
: nowrap;
: ;
}
{
: solid (--color-primary);
: ;
}
<div role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
aria-describedby="modal-description">
<div class="modal-overlay" onclick="closeModal()"></div>
<div class="modal-content">
<button
class="modal-close"
aria-label="Close dialog"
onclick="closeModal()">
✕
</button>
<h2 id="modal-title">Dialog Title</h2>
<p id="modal-description">Dialog description...</p>
<button class="btn btn-primary">Action</button>
</div>
</div>
<style>
[role="dialog"] {
position: fixed;
: ;
: ;
: ;
: ;
: flex;
: center;
: center;
: ;
}
{
: absolute;
: ;
: (, , , );
}
{
: relative;
: white;
: ;
: ;
: ;
: (, , , );
}
{
: solid (--color-primary);
}
<!-- Place at very beginning of <body> -->
<a href="#main" class="sr-only skip-link">Skip to main content</a>
<style>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-primary);
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>)<h1> → <h2> → <h3>, never skip levels)<label for="id"> and input id="id"<img alt="description">role="banner", role="main", role="contentinfo":focus-visible, 2px outline)rem or em for sizing (not px) for better font scalingaria-label, aria-describedby, role="alert"Skill("moai-lang-tailwind-css") – Utility-first CSS frameworkSkill("moai-lib-shadcn-ui") – React components with Tailwind + RadixSkill("moai-domain-frontend") – Full frontend architecture