Manusで任意のスキルを実行
ワンクリックで
ワンクリックで
ワンクリックでManusで任意のスキルを実行
始める$pwd:
$ git log --oneline --stat
stars:247
forks:59
updated:2026年3月14日 17:49
SKILL.md
| name | dev-themes |
| description | 修改 /themes 下的代码时使用 |
packages/vite-plugin-tona/public 放置了博客页面默认模板,包含预定义的 html、默认样式等,vite-plugin-tona/public 下的任何文件不可修改!
运行 dev server 时,vite 会通过 tona-vite 插件自动注入 vite index.html 以及共享资源,所有皮肤都基于博客页面默认模板实现。tona-vite 插件集成了动态脚本扩展和共享资源服务功能。
themes/* 为皮肤所在位置,如 themes/shadcn 放置 shadcn 皮肤实现代码。启动 dev server 后,默认打开的是一个导航页面,你如果需要查看相关页面,应该进入:
使用 lucide 包,通过 createElement 创建图标元素:
import { Moon } from 'lucide'
const MoonIcon = createElement(Moon)
使用 lucide-preact 包,直接作为组件使用:
import { ChevronUp } from 'lucide-preact'
stroke-width={1} 设置线条粗细size-4、size-5 等 Tailwind 类名any 类型interface 定义对象类型,type 定义联合类型const assertions 和 as const@ts-ignore 和 @ts-expect-error,除非绝对必要对于简单的 DOM 操作功能,可以通过编写插件实现。
plugin-name/
├── utils.ts # 工具函数
├── index.css # 样式文件
├── types.ts # TypeScript 类型定义
└── index.tsx # 插件入口
@apply 指令编写// plugin-name/index.tsx
export default function () {
const el = document.querySelector('#element-id')
if (el) {
el.classList.add('btn')
}
}
/* plugin-name/index.css */
.btn {
@apply text-2xl font-bold text-red-500;
}
utils 目录types.ts 文件中useQueryDOM hooks 获取 DOM 数据themes/shadcn 是 shadcn ui 风格的博客皮肤,采用现代化的设计语言。
class-variance-authority (cva) 进行组织cn() 工具函数合并类名,避免样式冲突dark: 前缀实现tw-animate-css 提供的预设动画对于 themes/shadcn 皮肤,优先考虑使用 Preact 组件方式实现功能与 UI,插件仅作为补充方案。
component-name/
├── hooks.ts # React hooks 逻辑
├── dom-hooks.ts # useQueryDOM hooks
├── utils.ts # 工具函数
├── types.ts # TypeScript 类型定义
└── index.tsx # 主组件实现
cva 管理样式变体,避免硬编码类名forwardRef 支持 ref 传递