スキル vanilla-webpage
📦

vanilla-webpage

コンテンツリビジョン r1 安全 ⚡ スクリプトを含む⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス

静的なバニラWebページを構築する

シンプルなWebページには、ビルドシステムやフロントエンドフレームワークが不要なことがよくあります。このスキルは、Claude、Codex、Claude Codeが、モダンなHTML、CSS、JavaScriptを使ってアクセシブルな静的ページを作成するのに役立ちます。

対応: Claude Codex Code(CC)
📊 76 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
Review the Skillstore skill "vanilla-webpage" from https://skillstore.io/skills/yuzu-octopus-vanilla-webpage.md and its manifest at https://skillstore.io/api/skills/yuzu-octopus-vanilla-webpage/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/yuzu-octopus-vanilla-webpage.md 署名済み manifest GET /api/skills/yuzu-octopus-vanilla-webpage/manifest 署名済み lockfile GET /api/skills/yuzu-octopus-vanilla-webpage/lockfile

テストする

「vanilla-webpage」を使用しています。 地域のデザインスタジオ向けに、ビルド不要のホームページを作成してください。

期待される結果:

セマンティックなセクション、埋め込みスタイル、レスポンシブなタイポグラフィ、アクセシブルなボタン、明確な視覚的階層を備えた単一のHTMLページ。

「vanilla-webpage」を使用しています。 ブラウザーストレージを使った小さなメモインターフェースを構築してください。

期待される結果:

フォームコントロール、保存済みメモ、編集と削除の操作、キーボードサポート、安全なテキストレンダリングのガイダンスを備えた静的ページ。

「vanilla-webpage」を使用しています。 ナビゲーションと例を備えたドキュメントページを作成してください。

期待される結果:

サイドバー、記事セクション、コード例、レスポンシブ動作、アクセシブルなフォーカススタイルを備えた読みやすいドキュメントレイアウト。

セキュリティ監査

安全
v4 • 2026/7/8 バージョン別レポートを開く

Most static alerts are false positives caused by Markdown backticks, CSS terminology, tutorial URLs, and browser syntax. I confirmed unsafe copyable DOM-rendering examples that place local user data into innerHTML without escaping. No evidence found for prompt injection, secret exfiltration, or actual shell command execution.

81
スキャンされたファイル
6,611
解析済み行数
3
レビュー項目
0
誤検知を無視
機能レビュー項目 (3)

これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。

中
cookbook/interactivity/todo-app/index.html:60
innerHTML assignment (XSS risk)
list.innerHTML = todos.map((t, i) => `
The todo demo renders locally entered todo text from localStorage into innerHTML without escaping. If copied for untrusted input, this is a stored DOM XSS pattern.
中
docs/tutorials/04-full-project.md:96
innerHTML assignment (XSS risk)
document.getElementById('notes-grid').innerHTML = notes.map(n => `
The notes tutorial maps saved user note text into innerHTML without escaping. The example is documentation, but it teaches a copyable stored DOM XSS pattern.
中
SKILL.md:1204
innerHTML assignment (XSS risk)
container.innerHTML = items.map(renderItem).join('');
The skill shows template-literal rendering into innerHTML using item fields. The snippet lacks an explicit trusted-data boundary, so it can encourage unsafe DOM rendering.

リスク要因

⚡ スクリプトを含む (8)
cookbook/forms/login-signup/index.html:71 cookbook/forms/login-signup/index.html:75 cookbook/interactivity/todo-app/index.html:60 docs/tutorials/04-full-project.md:96 SKILL.md:1517 SKILL.md:1204 SKILL.md:1228 SKILL.md:1232
⚙️ 外部コマンド (300)
cookbook/interactivity/toast-notifications/index.html:63 cookbook/interactivity/todo-app/index.html:60-66 docs/tutorials/04-full-project.md:104-144 SKILL.md:41 SKILL.md:42 SKILL.md:43 SKILL.md:44 SKILL.md:48-51 SKILL.md:51-57 SKILL.md:57-60 SKILL.md:60-67 SKILL.md:67-70 SKILL.md:70-88 SKILL.md:88 SKILL.md:97-103 SKILL.md:103-109 SKILL.md:109 SKILL.md:110 SKILL.md:112 SKILL.md:113 SKILL.md:114-118 SKILL.md:118-132 SKILL.md:132-140 SKILL.md:140-147 SKILL.md:147-153 SKILL.md:153 SKILL.md:154-155 SKILL.md:155-159 SKILL.md:159-171 SKILL.md:171-175 SKILL.md:175-180 SKILL.md:180-184 SKILL.md:184-192 SKILL.md:192-194 SKILL.md:194 SKILL.md:198-212 SKILL.md:212-214 SKILL.md:214-218 SKILL.md:218-231 SKILL.md:231-233 SKILL.md:233-241 SKILL.md:241-245 SKILL.md:245-248 SKILL.md:248-252 SKILL.md:252-263 SKILL.md:263-265 SKILL.md:265 SKILL.md:266 SKILL.md:267 SKILL.md:272-275 SKILL.md:275-276 SKILL.md:276-278 SKILL.md:278-286 SKILL.md:286-303 SKILL.md:303-307 SKILL.md:307-318 SKILL.md:318-322 SKILL.md:322-333 SKILL.md:333-337 SKILL.md:337-347 SKILL.md:347-351 SKILL.md:351-369 SKILL.md:369-373 SKILL.md:373-382 SKILL.md:382-386 SKILL.md:386-398 SKILL.md:398-404 SKILL.md:404-407 SKILL.md:407-411 SKILL.md:411-415 SKILL.md:415-419 SKILL.md:419-425 SKILL.md:425-429 SKILL.md:429-432 SKILL.md:432-436 SKILL.md:436-439 SKILL.md:439-443 SKILL.md:443-452 SKILL.md:452-456 SKILL.md:456-465 SKILL.md:465-469 SKILL.md:469-476 SKILL.md:476-480 SKILL.md:480-494 SKILL.md:494-498 SKILL.md:498-513 SKILL.md:513-519 SKILL.md:519-524 SKILL.md:524-528 SKILL.md:528-535 SKILL.md:535-539 SKILL.md:539-548 SKILL.md:548-552 SKILL.md:552-566 SKILL.md:566-570 SKILL.md:570-585 SKILL.md:585-589 SKILL.md:589-624 SKILL.md:624-630 SKILL.md:630-641 SKILL.md:641-645 SKILL.md:645-669 SKILL.md:669-673 SKILL.md:673-693 SKILL.md:693-697 SKILL.md:697-701 SKILL.md:701-705 SKILL.md:705-710 SKILL.md:710-714 SKILL.md:714-720 SKILL.md:720-724 SKILL.md:724-752 SKILL.md:752-756 SKILL.md:756-767 SKILL.md:767-771 SKILL.md:771-777 SKILL.md:777-781 SKILL.md:781-789 SKILL.md:789-793 SKILL.md:793-802 SKILL.md:802-806 SKILL.md:806-820 SKILL.md:820-822 SKILL.md:822 SKILL.md:826-831 SKILL.md:831-835 SKILL.md:835-842 SKILL.md:842-846 SKILL.md:846-862 SKILL.md:862-864 SKILL.md:864-865 SKILL.md:865 SKILL.md:866-872 SKILL.md:872-889 SKILL.md:889-893 SKILL.md:893-898 SKILL.md:898-911 SKILL.md:911-913 SKILL.md:913-918 SKILL.md:918-921 SKILL.md:921-928 SKILL.md:928-943 SKILL.md:943-945 SKILL.md:945-946 SKILL.md:946-951 SKILL.md:951-963 SKILL.md:963-966 SKILL.md:966 SKILL.md:972-993 SKILL.md:993-1002 SKILL.md:1002-1016 SKILL.md:1016-1018 SKILL.md:1018-1028 SKILL.md:1028-1036 SKILL.md:1036-1059 SKILL.md:1059-1061 SKILL.md:1061-1062 SKILL.md:1062-1067 SKILL.md:1067-1072 SKILL.md:1072-1076 SKILL.md:1076-1082 SKILL.md:1082-1085 SKILL.md:1085-1090 SKILL.md:1090-1097 SKILL.md:1097-1099 SKILL.md:1099-1104 SKILL.md:1104-1108 SKILL.md:1108 SKILL.md:1116-1128 SKILL.md:1128-1132 SKILL.md:1132-1142 SKILL.md:1142-1146 SKILL.md:1146-1157 SKILL.md:1157-1161 SKILL.md:1161-1177 SKILL.md:1177-1181 SKILL.md:1181-1190 SKILL.md:1190-1194 SKILL.md:1194-1195 SKILL.md:1202-1205 SKILL.md:1205-1209 SKILL.md:1209-1211 SKILL.md:1211-1212 SKILL.md:1212-1215 SKILL.md:1215-1219 SKILL.md:1219-1237 SKILL.md:1237-1241 SKILL.md:1241-1246 SKILL.md:1246-1256 SKILL.md:1256-1260 SKILL.md:1260-1276 SKILL.md:1276-1280 SKILL.md:1280-1292 SKILL.md:1292-1296 SKILL.md:1296-1307 SKILL.md:1307-1311 SKILL.md:1311-1319 SKILL.md:1319-1323 SKILL.md:1323-1330 SKILL.md:1330-1334 SKILL.md:1334-1358 SKILL.md:1358-1362 SKILL.md:1362-1372 SKILL.md:1372-1375 SKILL.md:1375-1379 SKILL.md:1379-1388 SKILL.md:1388-1392 SKILL.md:1392-1398 SKILL.md:1398-1405 SKILL.md:1405-1466 SKILL.md:1466-1481 SKILL.md:1481-1488 SKILL.md:1488 SKILL.md:1489-1490 SKILL.md:1490-1494 SKILL.md:1494-1497 SKILL.md:1497-1505 SKILL.md:1505 SKILL.md:1513 SKILL.md:1515 SKILL.md:1516 SKILL.md:1517-1518 SKILL.md:1518 SKILL.md:1519 SKILL.md:1520 SKILL.md:1521-1542 SKILL.md:1542-1543 SKILL.md:1543-1545 SKILL.md:1545 SKILL.md:1547-1550 SKILL.md:1550-1558 SKILL.md:1558-1566 SKILL.md:1566-1573 SKILL.md:1573-1577 SKILL.md:1577-1602 SKILL.md:1602-1609 SKILL.md:1609-1614 SKILL.md:1614-1621 SKILL.md:1621-1629 SKILL.md:1629-1633 SKILL.md:1633-1638 SKILL.md:1638-1644 SKILL.md:1644-1649 SKILL.md:1649-1656 SKILL.md:1656-1659 SKILL.md:1659-1661 SKILL.md:1661-1673 SKILL.md:1673-1677 SKILL.md:1677-1681 SKILL.md:1681-1685 SKILL.md:1685-1699 SKILL.md:1699-1703 SKILL.md:1703-1709 SKILL.md:1709-1713 SKILL.md:1713-1721 SKILL.md:1721-1725 SKILL.md:1725-1734 SKILL.md:1734-1740 SKILL.md:1740-1743 SKILL.md:1743-1744 SKILL.md:1744-1745 SKILL.md:1745-1746 SKILL.md:1746-1747 SKILL.md:1747-1748 SKILL.md:1748-1751 SKILL.md:1751-1752 SKILL.md:1752-1753 SKILL.md:1753-1754 SKILL.md:1754-1755 SKILL.md:1755-1758 SKILL.md:1758-1759 SKILL.md:1759-1760 SKILL.md:1760-1761 SKILL.md:1761-1762 SKILL.md:1762-1765 SKILL.md:1765-1766 SKILL.md:1766-1767 SKILL.md:1767-1768 SKILL.md:1768-1771 SKILL.md:1771-1772 SKILL.md:1772-1773 SKILL.md:1773-1774 SKILL.md:1774-1775 SKILL.md:1775-1776 SKILL.md:1776-1777 SKILL.md:1777-1778 SKILL.md:1778-1779 SKILL.md:1779-1782 SKILL.md:1782-1783 SKILL.md:1783-1784 SKILL.md:1784 SKILL.md:1785 SKILL.md:1786-1787 SKILL.md:1787-1788 SKILL.md:1788-1789 SKILL.md:1789-1790 SKILL.md:1790-1793 SKILL.md:1793-1794 SKILL.md:1794-1795 SKILL.md:1795-1796
🌐 ネットワークアクセス (12)
docs/guides/framework-usage.md:14 docs/guides/framework-usage.md:50 docs/guides/getting-started.md:67 docs/guides/getting-started.md:82 docs/tutorials/01-first-page.md:109 SKILL.md:1245 SKILL.md:1272 SKILL.md:1273 SKILL.md:1299 SKILL.md:59 SKILL.md:1255 templates/with-framework.html:7
📁 ファイルシステムへのアクセス (1)
templates/starter.html:8
監査者: codex 監査履歴を表示 →
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/yuzu-octopus-vanilla-webpage/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/yuzu-octopus-vanilla-webpage/security.svg)](https://skillstore.io/skills/yuzu-octopus-vanilla-webpage?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/yuzu-octopus-vanilla-webpage?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/yuzu-octopus-vanilla-webpage/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/yuzu-octopus-vanilla-webpage.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学術引用 (APA · BibTeX · CFF)

APA形式の引用

yuzu-octopus. (2026). vanilla-webpage security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/yuzu-octopus-vanilla-webpage/audits/4

BibTeX形式の引用

@techreport{yuzu-octopus-yuzu-octopus-vanilla-webpage-2026, author = {yuzu-octopus}, title = {vanilla-webpage security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/yuzu-octopus-vanilla-webpage/audits/4}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vanilla-webpage security audit report (audit version 4)" version: "unspecified" type: report authors: - name: "yuzu-octopus" date-released: "2026-07-08" url: "https://skillstore.io/skills/yuzu-octopus-vanilla-webpage/audits/4" identifiers: - type: other value: "skillstore:yuzu-octopus-vanilla-webpage:audit:4" description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由 証拠の信頼度: 中
55
アーキテクチャ
85
保守性
87
コンテンツ
67
コミュニティ
70
仕様準拠

作成できるもの

製品ページのプロトタイプを作成する

セマンティックなセクション、洗練されたCSS、ビルドツールなしで、レスポンシブなマーケティングページまたは製品ページを作成します。

ドキュメントページを構築する

ナビゲーション、タイポグラフィ、コードブロック、アクセシブルな構造を備えた読みやすいドキュメントレイアウトを生成します。

小規模なブラウザーツールを作成する

フォームコントロール、ローカルなインタラクション、明確なレスポンシブ動作を備えた単一ページのユーティリティを構築します。

これらのプロンプトを試す

初心者向けランディングページ 
小規模ビジネス向けの単一ファイルの静的Webページを構築してください。セマンティックHTML、レスポンシブCSS、アクセシブルな色、ビルドステップなしを使用してください。
レスポンシブレイアウト 
固定ヘッダー、機能セクション、カード、フッターを備えたレスポンシブなWebページレイアウトを作成してください。バニラCSSを使用し、レイアウト上の判断を簡潔に説明してください。
インタラクティブフォーム 
バリデーション状態、キーボードに優しいコントロール、バニラJavaScriptによる安全なDOM更新を備えたアクセシブルな問い合わせフォームを構築してください。
洗練された複数セクションページ 
バニラWebページスキルを使って、洗練された複数セクションのダッシュボードページを作成してください。適切な箇所でクックブックパターンを再利用し、レスポンシブ動作を検証してください。

ベストプラクティス

  • セマンティックHTMLから始め、ページの動作に必要な場合にのみCSSやJavaScriptを追加します。
  • 新しい余白、色、コンポーネントスタイルを考案する前に、提供されたトークンとクックブックパターンを使用します。
  • ユーザー提供のテキストは、生のinnerHTMLではなく、textContentまたはサニタイズ済み出力でレンダリングします。

回避

  • シンプルな静的ページに、パッケージマネージャー、ビルドツール、大規模フレームワークを追加すること。
  • 入力処理とアクセシビリティを確認せずに、クックブックのJavaScriptを本番環境へコピーすること。
  • 可読性、コントラスト、キーボードアクセス、動きの快適さを低下させる視覚効果を使用すること。

よくある質問

このスキルにはNodeやnpmが必要ですか？
いいえ。このスキルは、シンプルなローカルサーバーから直接配信される静的HTML、CSS、JavaScript向けに設計されています。
CSSフレームワークを使用できますか？
はい。ただし、判断フレームワークによってページに有用であると示された場合に限り、許可された小規模フレームワークのみを使用します。
複雑なWebアプリケーションに適していますか？
いいえ。静的ページ、プロトタイプ、ドキュメントページ、小規模なブラウザーツールに最適です。
アクセシビリティのガイダンスは含まれていますか？
はい。セマンティックなマークアップ、ラベル、キーボードフォーカス、コントラスト、動きの軽減、レスポンシブ動作を扱います。
Claude CodeやCodexはこれを使用できますか？
はい。このスキルはClaude、Codex、Claude Codeのワークフローをサポートすると宣言しています。
例は本番環境でそのまま使えますか？
これらは有用な出発点です。ユーザー入力をレンダリングするJavaScript例は、本番利用前にレビューして堅牢化する必要があります。

開発者情報

作成者

yuzu-octopus

ライセンス

MIT

Skillstore リビジョン

r1

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/yuzu-octopus/simple-webpage/tree/main/skills/simple-webpage

参照

64ca8af0f54a325752f08bd54e52151061ea659a

メンテナンスの新しさ

2026/7/21

利用状況

4 ダウンロード · 1 閲覧

ファイル構成

📁 cookbook/

📁 cards/

📁 article-card/

📄 index.html

📁 pricing-card/

📄 index.html

📁 product-card/

📄 index.html

📁 profile-card/

📄 index.html

📁 effects/

📁 animated-tooltips/

📄 index.html

📁 border-animations/

📄 index.html

📁 glassmorphism/

📄 index.html

📁 gradient-text/

📄 index.html

📁 hover-effects/

📄 index.html

📁 neumorphism/

📄 index.html

📁 scroll-driven-animations/

📄 index.html

📁 scroll-snap/

📄 index.html

📁 triangles/

📄 index.html

📁 forms/

📁 contact-form/

📄 index.html

📁 form-validation/

📄 index.html

📁 login-signup/

📄 index.html

📁 multi-step/

📄 index.html

📁 search-bar/

📄 index.html

📁 interactivity/

📁 accordion/

📄 index.html

📁 carousel/

📄 index.html

📁 css-only-dropdown/

📄 index.html

📁 dark-mode/

📄 index.html

📁 modal-dialog/

📄 index.html

📁 popover-api/

📄 index.html

📁 tabs/

📄 index.html

📁 toast-notifications/

📄 index.html

📁 todo-app/

📄 index.html

📁 layouts/

📁 dashboard/

📄 index.html

📄 README.md

📁 hero-section/

📄 index.html

📁 holy-grail/

📄 index.html

📁 masonry/

📄 index.html

📁 responsive-grid/

📄 index.html

📄 README.md

📁 sidebar-layout/

📄 index.html

📁 navigation/

📁 breadcrumbs/

📄 index.html

📁 mobile-hamburger/

📄 index.html

📁 navbar/

📄 index.html

📁 sidebar-menu/

📄 index.html

📁 sticky-header/

📄 index.html

📁 typography/

📁 decorative-headings/

📄 index.html

📁 fluid-type/

📄 index.html

📁 text-balance/

📄 index.html

📁 vertical-rhythm/

📄 index.html

📄 README.md

📁 docs/

📁 guides/

📄 accessibility.md

📄 animations.md

📄 colors-deep-dive.md

📄 dark-mode.md

📄 file-structure.md

📄 framework-usage.md

📄 getting-started.md

📄 modern-css.md

📄 responsive.md

📁 principles/

📄 decision-framework.md

📄 design-philosophy.md

📄 why-no-frameworks.md

📁 specs/

📄 buttons.md

📄 cards.md

📄 colors.md

📄 effects.md

📄 forms.md

📄 interactivity.md

📄 layout-system.md

📄 modals.md

📄 navigation.md

📄 spacing.md

📄 typography.md

📁 tutorials/

📄 01-first-page.md

📄 02-layout-masterclass.md

📄 03-interactivity.md

📄 04-full-project.md

📁 templates/

📄 blank.html

📄 starter.html

📄 with-framework.html

📁 tokens/

📄 base.css

📄 components.css

📄 index.css

📄 semantic.css

📄 typography.css

📄 SKILL.md