Навыки vanilla-webpage
📦

vanilla-webpage

Ревизия содержимого r1 Безопасно ⚡ Содержит скрипты⚙️ Внешние команды🌐 Доступ к сети📁 Доступ к файловой системе

Создание статических веб-страниц на Vanilla

Простым веб-страницам часто не нужна система сборки или фронтенд-фреймворк. Этот навык помогает 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-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

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». Создайте homepage без сборки для локальной дизайн-студии.

Ожидаемый результат:

Одна HTML-страница с семантическими разделами, встроенными стилями, адаптивной типографикой, доступными кнопками и четкой визуальной иерархией.

Использование «vanilla-webpage». Создайте небольшой интерфейс заметок с использованием browser storage.

Ожидаемый результат:

Статическая страница с элементами формы, сохраненными заметками, действиями редактирования и удаления, поддержкой клавиатуры и рекомендациями по безопасному рендерингу текста.

Использование «vanilla-webpage». Сделайте страницу документации с навигацией и примерами.

Ожидаемый результат:

Читаемый макет документации с sidebar, разделами статьи, примерами кода, адаптивным поведением и доступными стилями фокуса.

Аудит безопасности

Безопасно
v4 • 08.07.2026 Открыть версионный отчет

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 и без инструментов сборки.

Создание страницы документации

Сгенерируйте читаемые макеты документации с навигацией, типографикой, блоками кода и доступной структурой.

Создание небольшого браузерного инструмента

Создайте одностраничную утилиту с элементами формы, локальной интерактивностью и понятным адаптивным поведением.

Попробуйте эти промпты

Лендинг для начинающих 
Создайте статическую веб-страницу в одном файле для малого бизнеса. Используйте семантический HTML, адаптивный CSS, доступные цвета и без этапа сборки.
Адаптивный макет 
Создайте адаптивный макет веб-страницы с sticky header, разделами функций, карточками и footer. Используйте vanilla CSS и кратко объясните любые решения по макету.
Интерактивная форма 
Создайте доступную контактную форму с состояниями валидации, элементами управления, удобными для клавиатуры, и безопасными обновлениями DOM с использованием vanilla JavaScript.
Отточенная многораздельная страница 
Используйте навык vanilla webpage, чтобы создать отточенную многораздельную страницу dashboard. Повторно используйте паттерны cookbook, где это уместно, и проверьте адаптивное поведение.

Лучшие практики

  • Начинайте с семантического HTML и добавляйте CSS или JavaScript только тогда, когда этого требует поведение страницы.
  • Используйте предоставленные токены и паттерны cookbook, прежде чем придумывать новые стили отступов, цветов или компонентов.
  • Рендерите предоставленный пользователем текст через textContent или очищенный вывод вместо необработанного innerHTML.

Избегать

  • Добавление package manager, инструмента сборки или крупного фреймворка для простой статической страницы.
  • Копирование JavaScript из cookbook в production без проверки обработки ввода и доступности.
  • Использование визуальных эффектов, которые ухудшают читаемость, контрастность, доступ с клавиатуры или комфорт при движении.

Часто задаваемые вопросы

Требует ли этот навык Node или npm?
Нет. Навык предназначен для статических HTML, CSS и JavaScript, которые напрямую обслуживаются простым локальным сервером.
Может ли он использовать CSS-фреймворки?
Да, но только небольшие разрешенные фреймворки, когда decision framework показывает, что они полезны для страницы.
Подходит ли он для сложных веб-приложений?
Нет. Он лучше всего подходит для статических страниц, прототипов, страниц документации и небольших браузерных инструментов.
Включает ли он рекомендации по доступности?
Да. Он охватывает семантическую разметку, метки, фокус клавиатуры, контрастность, уменьшенное движение и адаптивное поведение.
Могут ли Claude Code или Codex использовать его?
Да. Навык заявляет поддержку рабочих процессов Claude, Codex и Claude Code.
Готовы ли примеры к production?
Это полезные отправные точки. Примеры JavaScript, которые рендерят пользовательский ввод, следует проверять и усиливать перед использованием в production.

Сведения для разработчиков

Автор

yuzu-octopus

Лицензия

MIT

Ревизия Skillstore

r1

Примечание о версии

Автор не указал версию.

Репозиторий

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

Ссылка

64ca8af0f54a325752f08bd54e52151061ea659a

Актуальность поддержки

21.07.2026

Использование

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