plannotator/effective-html
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
エージェントスキルは、有用なHTMLアーティファクト、ワイヤーフレーム、インタラクティブプロトタイプ、設計図、図面の作成に向けられています。
概要
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0 _** 図はFable 5が作ったので、さらにFable 5のアーティファクトを作成し、小型モデル用のスキルフォルダに追加してデモ例distill._します 強い視覚バイアスを持つ自己完結型HTML成果物を生成するための集中したスキル: - HTML:あなたが説明している内容のHTMLファイルで、効果的なHTMLスタイルで - HTML図:アーキテクチャ、スタック、システムの理解を高品質なSVGでフルスクリーンのHTML図として表示 - html-plan:効果的なHTMLスタイルのHTMLページを計画 Plannotator(任意)でHTMLをレンダリングし注釈を付けてください(オプション):https://github.com/backnotprop/plannotator このリポジトリはプラグインマーケットプレイスでもあります。追加してインストールしてください: HTMLファイルの即時共有リンクを作成(任意):https://github.com/plannotator/tot 動画からのHTML: https://tot.
概要（AI 翻訳）
简体中文
低忠実度のワイヤーフレームから動作するインタラクティブプロトタイプまで、有用で自己完結型のHTMLアーティファクトを作成するためのエージェントスキルに集中しています。
脂肪の遺物 + 脂肪の文脈
現代のモデルは多くのことができます。有用な参考資料をたくさん与えて活用しましょう 意図を示すためのアーティファクト。HTMLはほとんど何でも、しばしばそれ以上のものを可視化できます 長文よりも明らかに。あなたのプロンプトは単にアーティファクトを指し示すだけでいい、 リポジトリやコンテキストを載せるフォルダなどです。
[!注] このリポジトリは何もインストールせずに使えます。参考として扱ってください まず>、次にインストール可能なスキルコレクションです。参照 効果的なHTMLガイド。
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
PlannotatorでローカルHTMLをレンダリングし注釈付けします。
スキルの言及
リポジトリには実用的な視覚的アーティファクトに関する7つのオプションスキルが含まれています。
| スキル | それを |
|---|---|
html |
広範なHTMLリクエスト、混合されたアーティファクト、レポート、解説、プレゼンテーション、ランディングページ、ツール、そして専門家へのルーティング |
big-pics-little-words |
現在のテーマをHTMLで大きなビジュアルと最小限のテキストで説明しつつ、重要な詳細は保持してください;broからのコピー |
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Effective HTML
Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.
Fat artifacts + fat context
Modern models can do a lot. Give them plenty of useful references and use artifacts to show what you mean. HTML can visualize almost anything, often more clearly than a wall of text. Your prompt can simply point to the artifacts, repositories, and folders that carry the context.
[!NOTE] You can use this repo without installing anything. Treat it as a reference first and an installable skill collection second. See the Effective HTML guide.
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Render and annotate local HTML with Plannotator.
Skill references
The repo includes eight optional skills for pragmatic visual artifacts.
| Skill | Use it for |
|---|---|
html |
Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist |
big-pics-little-words |
Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from bro |
one-pager |
Make a one-pager: one HTML page that shares an idea with teammates early, or recaps work for them, with big pictures and little words; copied from bro |
design-artifact |
Subject-specific creative direction for any HTML artifact without imposing a reusable house style |
html-wireframe |
Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure |
html-prototype |
Working prototypes with realistic states, interaction, keyboard support, and responsive behavior |
html-plan |
Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments |
html-diagram |
Architecture, sequence, process, state, hierarchy, timeline, and system diagrams |
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add plannotator/effective-html