用途
astro-components 是一个面向 Astro 落地页与线索获取（lead generation）站点的 UI 组件库技能，用来提供可复用的界面组件。按照其自身说明，它不负责页面区块（sections）、布局（layouts）或业务逻辑。
主要能力
该技能覆盖的组件包括按钮、表单、卡片、徽章（Badge）、提示（Alert）和图标（Icon）。组件以固定变体形式提供，例如 Button 支持 primary、secondary、outline、ghost；Card 支持 default、elevated、outlined；Badge 支持 default、success、warning、error、info；Alert 支持 info、success、warning、error。文档明确说明不能自行发明新变体，如需新变体应先更新该技能再使用。所有组件使用统一的 Props 模式，例如 variant 采用显式联合类型而非普通 string，size 仅限 sm、md、lg，并允许通过 class 扩展。
使用方式与核心规则
所有样式必须通过 design-tokens 实现，禁止硬编码颜色与间距；令牌缺失即视为构建错误，不能回退到任意值。采用移动优先策略，移动端为基础样式，md: 用于更大屏幕。所有交互元素最小触达区域为 44px。组件零外部依赖，仅使用纯 Astro 与 Tailwind。语义化 HTML 方面，执行操作使用 button、跳转使用 a、表单数据使用 input，避免在 div 或 span 上绑定 onclick。JavaScript 仅允许使用 client:visible 岛屿、Astro actions 与独立 .ts 文件，禁止内联 onclick、组件内 script 以及任何 DOM 操作。图标若名称不存在，则渲染为空并输出 console.warn，不做静默失败。表单要求 label 始终可见并通过 for 关联，placeholder 仅作提示不替代 label，错误提示置于输入框下方并使用 role="alert"，必填项需有视觉标记与 required 属性。组件边界上，组件不得获取数据、格式化或转换数据、访问全局状态、导入其他组件（Icon 除外）或包含业务逻辑，只负责接收 props 并渲染 UI。文件结构约定位于 src/components/ui/ 下，包含 Button.astro、Input.astro、Card.astro、Badge.astro、Alert.astro、Icon.astro 与 index.ts。
适用场景
根据文档，适用于营销站点、线索获取页面与服务类网站，同时列出了不适用场景：Web 应用、仪表盘与电商购物车不属于其范围。
限制
禁止使用外部 UI 库、硬编码颜色与间距、小于 44px 的触达区域、缺失焦点状态、内联 JavaScript、发明新变体以及静默失败。完成标准包括：仅使用 design-tokens、所有交互元素具备焦点状态与 44px 触达、提供 TypeScript Props 接口、无内联 JavaScript，并在 375px 移动端测试通过。