Agent Skills
› tabler/tabler
tabler/tabler
GitHub用于启动 Tabler Astro 开发服务器并自动验证页面变更。涵盖多包启动、HMR 调试及自动化交互测试，确保样式和组件更新正确显示。
安装全部 Skills
npx skills add tabler/tabler --all -g -y
集合内 Skills (22)
用于启动 Tabler Astro 开发服务器并自动验证页面变更。涵盖多包启动、HMR 调试及自动化交互测试，确保样式和组件更新正确显示。
需要预览 Astro 页面或组件变更
排查 CSS/JS 未生效或热更新异常
npx skills add tabler/tabler --skill astro-dev -g -y
用于为 Tabler 文档组件页面编写或更新 classnames front matter，生成类参考表。适用于组件新增/移除类、用户查询类名或添加新类后主动补充的场景，确保文档与代码同步。
需要为组件页面添加类列表
组件在 core/scss/** 中增加或减少了类
用户请求类参考、类表或 classname 块
向现有组件添加了新类
npx skills add tabler/tabler --skill class-reference -g -y
处理 Tabler 框架核心 JavaScript，包括入口文件构建、Bootstrap JS 移植维护及自定义模块开发。适用于修复组件行为、添加功能或优化前端 JS 代码。
修复 Bootstrap 组件 JS 问题
添加 Tabler 行为或插件
修改 core/js/src/ 下的代码
npx skills add tabler/tabler --skill core-js -g -y
指导 Tabler 框架核心 SCSS 样式的编写与变更，涵盖组件模式、自定义属性前缀处理、暗色/RTL 支持及构建流程。
需要为组件添加新类、修饰符或颜色变体
修改 Sass/CSS 自定义属性或变量文件
npx skills add tabler/tabler --skill core-scss -g -y
用于构建或更新 Tabler 组件的预览演示页面。涵盖页面骨架、头部配置、卡片网格布局及链接验证，适用于新增组件展示或清理预览页场景。
用户要求添加、扩展或清理预览/演示页面时
新增 shared/ui 组件且无对应展示页面时
npx skills add tabler/tabler --skill demo-pages -g -y
根据代码变更自动生成符合规范的 changeset 文件。通过分析 git diff 确定影响范围，映射对应包并选择版本 bump 级别，最终生成标准化的发布说明条目。
用户请求创建 changeset
提交或开启 PR 前需生成变更集
涉及 core/preview/docs 的代码变更
npx skills add tabler/tabler --skill generate-changeset -g -y
根据当前分支与基准分支的 Git 差异，自动生成符合规范的 Merge Request 或 Pull Request 标题及正文。支持智能选择基准分支、复用现有 PR 信息、识别 UI 变更并插入 Vercel 预览链接，确保描述基于实际代码变动。
用户请求生成 MR 或 PR 描述
需要 GitLab 合并请求文本
需要分支摘要供审查者参考
npx skills add tabler/tabler --skill mr-description -g -y
指导为Tabler预览页选择并配置合适的布局，涵盖DefaultLayout等9种布局的适用场景、内容属性及Chrome标志设置，规范页面结构。
需要为页面选择或配置布局
添加新布局文件
处理侧边栏、导航栏或页面头部
npx skills add tabler/tabler --skill page-layouts -g -y
用于生成Tabler组件或页面的截图，适用于发布说明、网站展示及社交宣传。支持选择布局、编写可复现页面、预设交互状态并通过脚本捕获PNG图片。
需要为新组件或页面制作展示图
设计变更后需重新拍摄现有组件截图
准备发布说明或社交媒体素材
npx skills add tabler/tabler --skill screenshots -g -y
指导构建和扩展 Astro 共享 UI 组件库，涵盖 Props 设计、SCSS 类名映射、插槽及文档同步。
创建新的共享 UI 组件
为现有组件添加新属性或变体
重构共享组件结构
npx skills add tabler/tabler --skill ui-component -g -y
提供基于 Bootstrap 5 的 Tabler UI 套件使用指南，涵盖安装、页面布局及组件开发规范。指导 Agent 通过文档生成管理后台和仪表盘界面代码，确保样式一致性。
需要构建管理后台或仪表盘界面
项目使用 Tabler 或 @tabler/core
询问如何安装或配置 Tabler
npx skills add tabler/tabler --skill tabler -g -y
提供基于Bootstrap 5的Tabler UI套件使用指南，涵盖安装、文档查阅及页面布局规范，用于构建管理后台和仪表盘界面。
需要构建管理后台或仪表盘
使用Tabler或@tabler/core进行UI开发
询问关于admin panel、settings page或data table的样式实现
npx skills add tabler/tabler --skill tabler -g -y
规范 Astro 组件中客户端脚本的编写，强制使用内联脚本避免打包，通过 CaptureScript 机制将脚本注册至页面底部，确保预览 HTML 自包含且可运行。
在 Astro 组件中添加或修复客户端 JavaScript
初始化第三方库或 Bootstrap 插件
处理脚本执行时机或 IIFE 陷阱问题
npx skills add tabler/tabler --skill astro-scripts -g -y
指导在 @tabler/core 库中保持向后兼容，确保补丁或次要版本不破坏用户项目。涵盖公共 API 识别、弃用处理及兼容性检查流程。
重命名或删除公共 API（类名、Sass 变量、JS 导出等）
修改公共 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 及 copy-assets 集成。解决资源缺失、重复、404 或目录竞争导致的构建异常，规范各目录写入权限与依赖顺序。
资源文件缺失、过时、重复或构建体积异常增长
页面访问静态资源返回 404
开发服务器重启后监听器输出丢失
需要编辑 .build/ 或 astro.config.mjs 配置前
npx skills add tabler/tabler --skill build-pipeline -g -y
通过对比开发服务器渲染的HTML与基线快照，验证重构或组件调整是否改变了输出。用于确保无视觉差异的代码变更安全，支持捕获基线、执行比对及解读差异结果。
验证重构是否改变渲染HTML
检查代码变更是否字节级相同
提取或重命名组件前的安全性确认
npx skills add tabler/tabler --skill html-diff -g -y
指导撰写或更新 GitHub 版本发布说明的引言部分。涵盖从变更集和文档收集事实、遵循固定布局规范（含图片规则）、确定语调及验证准确性，确保发布内容准确且格式统一。
用户请求编写或更新版本发布说明
询问新版本特性 ('what's new')
次要版本 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文档页面的技能，遵循特定MDX结构和简单英语风格。支持主动检测未文档化的UI组件并提示用户编写。
用户请求创建或编辑文档
新增功能或缺失文档的组件被识别
npx skills add tabler/tabler --skill write-docs -g -y
