用途：帮助把页面理解为区块序列，为每个区块赋予单一职责，并按规格搭建；用于选择与实现 Hero、功能网格、内容段、CTA、定价表、评价与社证、导航与页脚、数据看板等页面区块。
主要能力：收录 500 多种区块模式与变体，如 Hero 的居中、分栏、全出血、视频、渐变；功能网格的 3 列、4 列、交替、图标主导；CTA 与定价表的简单、邮件捕获、分栏、对比矩阵、切换；评价的卡片网格、轮播、单条引用、视频，以及 logo 墙、评分、评价展示；导航与页脚的极简、站点地图、订阅、巨型菜单、透明悬浮于 Hero 之上；看板的 KPI 卡片行与数据组件。每个参考文件包含区块职责、通用解剖、断点规格、变体选择条件、HTML/CSS 或 TSX 实现，以及该变体易犯的反模式。
使用方式：按路由查阅对应参考文件，如 Hero 阅读 references/hero-section-patterns.md，内容段阅读 references/content-section-patterns.md，转化块阅读 references/cta-pricing-patterns.md，社证阅读 references/social-proof-patterns.md，导航页脚阅读 references/navigation-footer-patterns.md，看板阅读 references/dashboard-data-patterns.md。页面级组合由 page-composition-engine 负责，本技能只涉及区块本身。
适用场景：Web 页面区块设计与实现、响应式断点适配、移动端形态转换、可访问性与状态处理、转化区块选型。
限制：资料未提供收费、价格、平台支持范围或实际效果数据；未说明安装命令或依赖要求，需结合具体项目环境判断。给出的代码示例基于 React/TSX 与 Tailwind，其他技术栈需自行改写。断点与质量清单为通用建议，实际落地需按项目规范调整。