Agent Skills
› tabler/tabler
tabler/tabler
GitHub用于启动 Astro 开发服务器并自动验证页面变更。涵盖多包启动策略、全量与轻量模式选择、避免构建冲突，以及通过自动化步骤检查控制台、DOM 结构和视觉效果的完整验证流程。
Install All Skills
npx skills add tabler/tabler --all -g -y
Skills in Collection (21)
用于启动 Astro 开发服务器并自动验证页面变更。涵盖多包启动策略、全量与轻量模式选择、避免构建冲突，以及通过自动化步骤检查控制台、DOM 结构和视觉效果的完整验证流程。
需要预览前端组件或文档变更效果时
开发服务器出现样式未更新或热重载异常时
npx skills add tabler/tabler --skill astro-dev -g -y
用于编写或更新 Tabler 文档组件页面的 classnames front matter，生成类参考表。适用于组件新增/移除类、用户查询类参考或主动发现变更时。
需要为组件页面添加类列表
组件在 core/scss 中增减了类
用户请求类参考或类表
npx skills add tabler/tabler --skill class-reference -g -y
处理 Tabler 框架核心 JavaScript 代码，包括 tabler.js 和 tabler-theme.js 构建、Bootstrap 组件移植维护及浏览器测试。适用于修复 UI 行为、添加插件初始化逻辑或优化前端脚本性能。
修复 Tabler 前端交互行为或插件问题
修改 core/js/src/ 下的 TypeScript 源码
维护 vendored Bootstrap 组件的 JS 逻辑
npx skills add tabler/tabler --skill core-js -g -y
指导 Tabler 框架核心 SCSS 代码的编写规范，涵盖文件结构、组件模式、CSS 自定义属性管理及构建流程。
需要为组件添加新类或变体
修改 SCSS 变量或混合宏
涉及暗黑模式或 RTL 布局调整
优化 CSS 构建或主题化配置
npx skills add tabler/tabler --skill core-scss -g -y
用于创建或更新 Tabler 组件的预览演示页面，展示组件变体。涵盖页面骨架、头部配置、卡片网格布局及文档链接验证，确保 UI 组件可视化效果清晰直观。
用户要求添加或更新组件预览页
新增 shared/ui 组件后需补充对应展示页
npx skills add tabler/tabler --skill demo-pages -g -y
根据代码变更自动生成 Tabler 项目的 changeset 文件。通过 git diff 分析影响范围，映射对应包名并确定版本升级级别（patch/minor/major），最终生成符合规范的发布说明条目。
用户请求创建 changeset
需要版本升级或发布说明
core/、preview/ 或 docs/ 目录下的代码即将提交或创建 PR
npx skills add tabler/tabler --skill generate-changeset -g -y
根据 Git 分支差异自动生成 MR/PR 标题和描述。支持对比 origin/dev，提取提交、变更统计及 UI 预览链接，并复用现有 PR 的问题引用信息，便于代码审查。
请求生成 Merge Request 或 Pull Request 的描述
需要 Git 分支的摘要供 Reviewer 审阅
询问当前分支相对于 dev 的变更内容
npx skills add tabler/tabler --skill mr-description -g -y
指导在Tabler项目中选择并配置页面布局，涵盖DefaultLayout等9种布局的适用场景、内容属性及UI控制标志，规范页面结构组件的使用。
需要为页面选择不同的chrome（侧边栏、导航栏变体等）
页面自定义了页头或包装器标记
需要添加新的布局文件
npx skills add tabler/tabler --skill page-layouts -g -y
用于生成 Tabler 组件或页面截图的指南。涵盖布局选择、Astro 页面编写、状态展示及通过 Playwright 捕获高清 PNG，适用于发布说明和文档配图。
需要为组件或页面创建视觉素材
设计变更后需重新拍摄截图
准备发布说明或文档所需的图片
npx skills add tabler/tabler --skill screenshots -g -y
指导构建和扩展共享 Astro UI 组件，涵盖 Props 设计、类组合及文档同步。用于新增组件、修改属性或重构现有组件。
创建新的共享 UI 组件
为现有组件添加新属性、变体或尺寸
重构共享组件结构
npx skills add tabler/tabler --skill ui-component -g -y
提供基于 Bootstrap 5 的 Tabler UI 套件使用指南，涵盖安装、页面布局及组件规范。指导 Agent 查阅官方文档并复用标准标记，用于构建管理后台和仪表盘界面。
需要构建 admin dashboard 或 app UI
项目使用 @tabler/core 包
询问关于 settings page、data table 或 form 的样式实现
npx skills add tabler/tabler --skill tabler -g -y
指导在 Astro 组件中正确添加或修复客户端 JavaScript，确保脚本内联渲染且不被打包，处理初始化时机、DOM 获取及注册机制。
需要在 Astro 组件中添加客户端脚本
第三方库初始化失败
脚本未正确运行或需移动位置
npx skills add tabler/tabler --skill astro-scripts -g -y
确保 @tabler/core 变更向后兼容，防止补丁或次要版本破坏用户项目。定义公共 API 范围、别名策略及兼容性检查机制。
重命名或删除类名、变量、JS 导出等公共 API
修改数据属性或默认行为
清理代码导致潜在 API 失效
评估变更是否需要主版本发布
npx skills add tabler/tabler --skill backward-compat -g -y
指导在Bootstrap端口中编写符合规范的TypeScript组件类，涵盖文件结构、类型定义、配置合并、事件处理及Data API实现，确保代码符合严格类型检查和工程标准。
创建新的Bootstrap风格JavaScript组件
将现有组件升级至当前基线规范
npx skills add tabler/tabler --skill bootstrap-component -g -y
解析并修复 Tabler 前端资源构建流水线，涵盖 Astro 集成、Vite/Terser 构建及目录同步机制。用于解决资产缺失、冲突或生成异常等问题。
前端静态资源（CSS/JS）构建失败或输出异常
排查 public 目录内容不同步或重复问题
修改构建脚本或 Astro 配置以优化资源处理
npx skills add tabler/tabler --skill build-pipeline -g -y
通过对比开发服务器渲染的HTML快照与基线，验证重构是否改变输出。适用于组件提取、重命名或布局调整等需保持输出不变的修改场景，确保字节级一致性。
执行组件重构且要求不改变HTML输出
验证代码修改是否为纯格式调整或无视觉变化
检查重构后的页面是否与基线一致
npx skills add tabler/tabler --skill html-diff -g -y
用于撰写或更新 Tabler GitHub 版本发布说明的引言部分，指导如何收集变更事实、遵循固定排版规范及图片规则，确保发布内容准确且格式统一。
用户请求编写或更新版本发布说明
询问新版本的新增功能
小版本 PR 已打开但缺少引言文件时主动触发
npx skills add tabler/tabler --skill release-notes -g -y
用于生成或更新 Tabler 版本的升级指南，列出破坏性变更及迁移示例。在用户请求迁移、发布前检查 changeset 时触发。
用户请求迁移或升级指南
发布前检查 .changeset/ 中的移除或重命名条目
npx skills add tabler/tabler --skill upgrade-guide -g -y
用于编写、更新或建议Tabler文档页面，遵循当前文档架构。支持直接请求创建文档或在发现新增UI组件/插件缺少文档时主动提示并生成内容，确保文档与代码同步。
用户明确要求编写或编辑文档
检测到新添加的UI组件或插件缺乏对应文档
npx skills add tabler/tabler --skill write-docs -g -y
