该技能聚焦可复用页面模式与内容块，将语义化 HTML 与自定义元素结合，形成一致、可访问的结构。其理念是页面由可复用块组成，通过自定义元素传达意图（如 faq-question 比 dt class 更清晰）、便于 CSS 样式、支持校验工具，并使标记自文档化。
主要能力：提供 FAQ 模式（faq-list、faq-question、faq-answer，用于问答页与帮助区）和产品卡片模式（product-card，用于产品列表与目录）。还列举了整页类型及其关键区块，包括首页、关于、产品列表、产品详情、联系、FAQ、新闻稿、法律页，示例见 .claude/patterns/pages/ 目录。
使用方式：FAQ 中 faq-list 可含可选 category 属性，faq-question 支持 id 以便锚点链接，faq-answer 承载流内容。整页 FAQ 结构包含导航目录、按 section 分组的问答和行动号召。产品卡片支持 sku 与可选 price 属性，产品列表用 ul 包裹多个 product-card。创建新模式需在 elements.json 定义元素、在技能中记录模式、在 examples 目录添加示例，必要时加入项目词典。元素命名用小写连字符、具描述性并成组。
可访问性要点：section 用 aria-labelledby 指向标题，问题设 id 便于直接链接，目录用带描述性 aria-label 的 nav，答案内链接使用 mailto: 和 tel: 协议。
限制：资料未提供收费、价格、平台、效果或版本信息；相关技能包括 xhtml-author、css-author、progressive-enhancement、forms。