Skills
.Work. You
Rest

hspa

Community

Build plugin UIs with iframe-based HTML pages.

Software Engineering#sdk#iframe#plugin-ui#siyuan#hspa#html-page
Authorfrostime
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill enables developers to build plugin UIs quickly by authoring standalone HTML pages that load inside SiYuan as iframes, reducing bundle size and avoiding heavy UI frameworks.

Core Features & Use Cases

  • Iframe-based pages are authored in the src/ directory and built into standalone pages that render inside SiYuan, enabling modular interfaces without committing to a full SPA bundle.
  • Open UIs with openIframeTab or openIframeDialog, with injected window.pluginSdk (preset or customSdk) and optional theming via data-theme-mode.
  • Works with Vanilla JS, Alpine.js, or Vue 3, and can leverage optional styling via hspa-mini.css for rapid UI prototyping.

Quick Start

Create an HTML page under src/ for your feature, wait for pluginSdkReady, then render it with openIframeTab or openIframeDialog.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: hspa
Download link: https://github.com/frostime/sy-f-misc/archive/main.zip#hspa

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.