Fähigkeiten vanilla-webpage
📦

vanilla-webpage

Inhaltsrevision r1 Sicher ⚡ Enthält Skripte⚙️ Externe Befehle🌐 Netzwerkzugriff📁 Dateisystemzugriff

Statische Vanilla-Webseiten erstellen

Einfache Webseiten benötigen oft kein Build-System und kein Frontend-Framework. Diese Skill hilft Claude, Codex und Claude Code dabei, barrierefreie statische Seiten mit modernem HTML, CSS und JavaScript zu erstellen.

Unterstützt: Claude Codex Code(CC)
📊 76 Angemessen

Mit meinem Agent installieren

Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.

Agent-Anfrage
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.

Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/yuzu-octopus-vanilla-webpage.md Signiertes manifest GET /api/skills/yuzu-octopus-vanilla-webpage/manifest Signiertes lockfile GET /api/skills/yuzu-octopus-vanilla-webpage/lockfile

Testen

„vanilla-webpage“ wird verwendet. Erstelle eine Homepage ohne Build-System für ein lokales Designstudio.

Erwartetes Ergebnis:

Eine einzelne HTML-Seite mit semantischen Abschnitten, eingebetteten Styles, responsiver Typografie, barrierefreien Buttons und klarer visueller Hierarchie.

„vanilla-webpage“ wird verwendet. Erstelle eine kleine Notizenoberfläche mit Browser Storage.

Erwartetes Ergebnis:

Eine statische Seite mit Formularsteuerelementen, gespeicherten Notizen, Bearbeiten- und Löschen-Aktionen, Tastaturunterstützung und Hinweisen zum sicheren Rendern von Text.

„vanilla-webpage“ wird verwendet. Erstelle eine Dokumentationsseite mit Navigation und Beispielen.

Erwartetes Ergebnis:

Ein gut lesbares Dokumentationslayout mit Sidebar, Artikelabschnitten, Codebeispielen, responsivem Verhalten und barrierefreien Fokusstilen.

Sicherheitsaudit

Sicher
v4 • 8.7.2026 Versionsbericht öffnen

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
Gescannte Dateien
6,611
Analysierte Zeilen
3
Prüfelemente
0
Falschmeldungen ignoriert
Elemente der Fähigkeitsprüfung (3)

Dies sind echte lokale Fähigkeiten, die für diese Fähigkeit erwartet werden können; daher müssen sie überprüft werden, werden jedoch nicht als bestätigtes bösartiges Verhalten gezählt.

Mittel
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.
Mittel
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.
Mittel
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.

Risikofaktoren

⚡ Enthält Skripte (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
⚙️ Externe Befehle (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
🌐 Netzwerkzugriff (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
📁 Dateisystemzugriff (1)
templates/starter.html:8
Geprüft von: codex Audit-Verlauf anzeigen →
Diesen Bericht teilen & zitieren

Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.

Versionsbericht öffnen
Sicherheitsbewertung

Berichtslink kopieren

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

Markdown-Badge

[![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-Badge

<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>

Einbettungskarte

<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>
Wissenschaftliche Zitate (APA · BibTeX · CFF)

APA-Zitat

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-Zitat

@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-Score

Warum dieser Score Evidenzvertrauen: Mittel
55
Architektur
85
Wartbarkeit
87
Inhalt
67
Gemeinschaft
70
Spezifikationskonformität

Was Sie erstellen können

Eine Produktseite prototypisieren

Erstelle eine responsive Marketing- oder Produktseite mit semantischen Abschnitten, ausgereiftem CSS und ohne Build-Tooling.

Eine Dokumentationsseite erstellen

Generiere gut lesbare Dokumentationslayouts mit Navigation, Typografie, Codeblöcken und barrierefreier Struktur.

Ein kleines Browser-Tool erstellen

Erstelle ein einseitiges Hilfswerkzeug mit Formularsteuerelementen, lokaler Interaktivität und klarem responsivem Verhalten.

Diese Prompts ausprobieren

Landingpage für Einsteiger 
Erstelle eine einseitige statische Webseite für ein kleines Unternehmen. Verwende semantisches HTML, responsives CSS, barrierefreie Farben und keinen Build-Schritt.
Responsives Layout 
Erstelle ein responsives Webseitenlayout mit einem sticky Header, Feature-Abschnitten, Karten und einem Footer. Verwende vanilla CSS und erkläre alle Layout-Entscheidungen kurz.
Interaktives Formular 
Erstelle ein barrierefreies Kontaktformular mit Validierungszuständen, tastaturfreundlichen Steuerelementen und sicheren DOM-Aktualisierungen mit vanilla JavaScript.
Ausgereifte Seite mit mehreren Abschnitten 
Verwende die Vanilla-Webseiten-Skill, um eine ausgereifte Dashboard-Seite mit mehreren Abschnitten zu erstellen. Nutze Cookbook-Muster wieder, wo es sinnvoll ist, und überprüfe das responsive Verhalten.

Bewährte Praktiken

  • Beginne mit semantischem HTML und füge CSS oder JavaScript nur hinzu, wenn das Seitenverhalten es erfordert.
  • Verwende die bereitgestellten Tokens und Cookbook-Muster, bevor du neue Abstände, Farben oder Komponentenstile erfindest.
  • Rendere von Benutzern bereitgestellten Text mit textContent oder bereinigter Ausgabe statt mit rohem innerHTML.

Vermeiden

  • Einen Paketmanager, ein Build-Tool oder ein großes Framework für eine einfache statische Seite hinzufügen.
  • Cookbook-JavaScript ohne Prüfung von Eingabeverarbeitung und Barrierefreiheit in die Produktion kopieren.
  • Visuelle Effekte verwenden, die Lesbarkeit, Kontrast, Tastaturzugriff oder Bewegungskomfort verringern.

Häufig gestellte Fragen

Benötigt diese Skill Node oder npm?
Nein. Die Skill ist für statisches HTML, CSS und JavaScript konzipiert, das direkt von einem einfachen lokalen Server bereitgestellt wird.
Kann sie CSS-Frameworks verwenden?
Ja, aber nur kleine erlaubte Frameworks, wenn das Entscheidungsframework zeigt, dass sie für die Seite nützlich sind.
Ist sie für komplexe Webanwendungen geeignet?
Nein. Sie eignet sich am besten für statische Seiten, Prototypen, Dokumentationsseiten und kleine Browser-Tools.
Enthält sie Hinweise zur Barrierefreiheit?
Ja. Sie behandelt semantisches Markup, Beschriftungen, Tastaturfokus, Kontrast, reduzierte Bewegung und responsives Verhalten.
Können Claude Code oder Codex sie verwenden?
Ja. Die Skill erklärt Unterstützung für Workflows mit Claude, Codex und Claude Code.
Sind die Beispiele produktionsreif?
Sie sind nützliche Ausgangspunkte. JavaScript-Beispiele, die Benutzereingaben rendern, sollten vor dem Produktionseinsatz überprüft und gehärtet werden.

Entwicklerdetails

Lizenz

MIT

Skillstore-Revision

r1

Versionshinweis

Der Autor hat keine Version angegeben.

Repository

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

Ref.

64ca8af0f54a325752f08bd54e52151061ea659a

Aktualität der Wartung

21.7.2026

Nutzung

4 Downloads · 1 Aufrufe

Dateistruktur

📁 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