Html Scrolline Ja logo

Html Scrolline Ja

Organization
studio-yebisu
html-scrolline-ja

gongnyang/awesome-html-scrolline-deckの方式で日本語スライドを制作・再現する。原典固有の生成器・テンプレート・実装と個別条件を保ち、実制作例を参考に日本語の資料を作るときに使う。

Overview

Publisherstudio-yebisu
Repositoryyaoyorozu-ai-toolbox-slides
Skill namehtml-scrolline-ja
Stars
10
Forks
2
Bundled files
489
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 489 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by studio-yebisu on GitHub. Read the source before you install it.

Installation

Install the Html Scrolline Ja AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/studio-yebisu/yaoyorozu-ai-toolbox-slides/tree/main/examples/repositories/html-scrolline
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/studio-yebisu/yaoyorozu-ai-toolbox-slides.git /tmp/yaoyorozu-ai-toolbox-slides
mkdir -p .claude/skills
cp -r /tmp/yaoyorozu-ai-toolbox-slides/examples/repositories/html-scrolline .claude/skills/html-scrolline-ja
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Html Scrolline Ja in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Html Scrolline Ja on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Html Scrolline Ja is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

html-scrolline-ja

Studio Yebisuの日本語派生版。原作者の公式翻訳ではありません。

原典を読む

  • upstream/SKILL.md

同梱README.mdで、実作例・入力・環境・コマンドと確認範囲を読む。

スキルの選択肢

原典はrail/data/launch/zoom/canvas/kineticの6conceptを持ち、MP4はnpm run exportで出力する。今回の例はrailだけを使い、他conceptとMP4は未実施。

固有の制作方式

原典deck.yaml・plan・Vite build・Scrolline engineとrail-advance/era-shiftで6停止点を連続的につなぐ。engine/moves/conceptsは原典と一致。内部localeはen、HTMLの表示は日本語。Windows Chrome探索だけを明示adapterで補正する。原典全体CIのWindowsパス3件不合格を保持し、HTTP上のcore・smoke・操作確認と分ける。GSAP独自条件と各MITの原文通知を分けて保持。

連続する日本語の資料を作る

原典CONTRACTSとrailの例を読み、deck.yamlで停止点、時間、項目、handoffを設計する。原典plan、Vite build、smokeを使い、engine・moves・conceptsを改変せず、deck側のCSSと本文で日本語へ合わせる。内部schemaのlocaleはen、HTMLのlangはja。日本語locale機能を実装したとは呼ばない。

原典全体CIのWindowsパス3件不合格は保持する。中核424テスト・HTTP smoke・キー・ホイール・補間の確認と区別し、原典の全ゲート通過を主張しない。捕捉用Chrome探索のadapterは原文と差分を残す。直接file://の禁止を別経路で回避しない。

原典コードのMIT、LenisのMIT、GSAP独自の無償標準ライセンスを分けて読む。Viteが削除する通知は配布bundleと単一HTMLへ復元する。GSAPへMITやカタログのCC0を付け直さない。フォントは端末の日本語書体を使う当作例の条件を記し、新しい字形と全停止点を実際に確認する。

日本語で完成させる

  • 先に読み手、目的、結論、必要なページ、出力形式を決める。
  • 入力の出典と数値を確認し、万円・件・%・ポイントを区別する。架空条件と評価目標を実績に見せない。
  • 日本語の見出しは意味の区切りで改行し、数字と単位が不自然に分かれないようにする。
  • この作例は端末の游明朝・游ゴシック等を使い、Webフォントを埋め込んでいない。書体を替えたら全停止点を描画し直す。PPTXは対象外。
  • 原典の方式で実ファイルを生成し、全ページの本文、グラフ、図、ノート、移動を確認する。

再現と利用条件

完成例と再現キットはカタログの当該リポに掲載。環境と制約はREADME.mdに記載する。上流コードと書体の条件はupstream内の原文を保持し、カタログのCC0を上流へ適用しない。

現在の作例の実施範囲(Round4)

railだけを使い、5月企画→6月会場→7月案内→8月当日を連続して示す。月の間隔を広げて項目名を添え、停止画と自然な移動途中の両方で変化を確かめた。

  • 原典はrail/data/launch/zoom/canvas/kineticの6conceptとMP4 exportを持つ。今回制作したのはrailだけで、残り5conceptとMP4は未実施。
  • 内部localeはenのまま、日本語本文と端末字体を利用。日本語locale機能を実装した作例ではない。
  • 原典全体CIのWindowsパス3件不合格は旧実行記録を保持。今回のbuild/smokeと操作検査を、全CI合格へ読み替えない。印刷・縦長mobile・60fpsの定量確認も未実施。

全6頁の実描画と個別の動作証拠は制作側の確認。独立Kimi K3/Opus5.5の新しい版の評価は別に行う。過去の採点を新しい画像へ引き継がない。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

and 140 more files.

Frequently asked questions

What does the Html Scrolline Ja AI skill do?

gongnyang/awesome-html-scrolline-deckの方式で日本語スライドを制作・再現する。原典固有の生成器・テンプレート・実装と個別条件を保ち、実制作例を参考に日本語の資料を作るときに使う。

Why use Html Scrolline Ja on TypingMind?

Because you install it once and use it with any model. Html Scrolline Ja is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Html Scrolline Ja in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/studio-yebisu/yaoyorozu-ai-toolbox-slides/tree/main/examples/repositories/html-scrolline. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Html Scrolline Ja?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Html Scrolline Ja?

As many as you like. As long as a model supports skills, you can use Html Scrolline Ja with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Html Scrolline Ja AI skill free?

It is published on GitHub by studio-yebisu. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇