# Build Vanilla Web Pages Without Frameworks

Many small web projects do not need a JavaScript framework or build pipeline. This skill helps Claude, Codex, and Claude Code create static pages with modern platform features.

## Install

```bash
npx skillstore add yuzu-octopus/vanilla-webpage
```

## Metadata

- Status: approved
- Slug: yuzu-octopus-vanilla-webpage
- Skillstore revision: r1
- Version status: missing
- Tree hash: cfb7c85fae2fae448c0f2d92e1eb645f3fb1ae114b0c8f03232aca4731a43230
- Author: yuzu-octopus
- GitHub username: yuzu-octopus
- License: MIT
- Repository: https://github.com/yuzu-octopus/simple-webpage/tree/main/skills/simple-webpage
- Ref: 64ca8af0f54a325752f08bd54e52151061ea659a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, network, filesystem
- Quality score: 76
- Public page: https://skillstore.pages.dev/skills/yuzu-octopus-vanilla-webpage
- Manifest: https://skillstore.pages.dev/api/skills/yuzu-octopus-vanilla-webpage/manifest

## Capabilities

- Guides creation of single-file or small multi-file static web pages.
- Provides modern CSS patterns for layout, tokens, themes, and responsive type.
- Includes vanilla JavaScript patterns for dialogs, tabs, forms, local storage, and fetch calls.
- Documents accessibility requirements for semantic HTML, focus states, labels, and reduced motion.
- Offers cookbook examples for layouts, navigation, cards, forms, effects, and interactive widgets.
- Helps decide when a lightweight classless CSS framework is appropriate.

## Use Cases

- Create a Simple Project Page: Build a responsive static page with semantic HTML, custom CSS, and minimal JavaScript.
- Prototype an Internal Tool: Use native form, dialog, table, and layout patterns before adopting a framework.
- Improve a Static Site: Review spacing, color tokens, focus states, and responsive behavior against documented platform patterns.

## Prompt Templates

### Start a Static Page

```
Use the vanilla-webpage skill to build a single-file landing page with semantic HTML, embedded CSS, and no framework.
```

### Add Responsive Layout

```
Use the vanilla-webpage skill to improve this page with responsive grid layout, fluid type, accessible focus states, and reduced motion support.
```

### Add Native Interactivity

```
Use the vanilla-webpage skill to add a modal dialog, tabs, and form validation with vanilla JavaScript and accessible HTML patterns.
```

### Audit a Small Webpage

```
Use the vanilla-webpage skill to review this static page for accessibility, responsive layout, unsafe DOM writes, excessive dependencies, and maintainable CSS.
```

## Limitations

- It does not provide a backend, database, authentication service, or deployment pipeline.
- Some demo code must be hardened before use with untrusted user input.
- External framework examples may require network access to third-party CDNs.
- It is optimized for static pages and small interfaces, not large application architecture.

## Best Practices

- Start with semantic HTML, then add CSS and JavaScript only where the platform does not already solve the problem.
- Use textContent, createElement, templates, or sanitization when rendering untrusted content into the DOM.
- Verify accessibility basics, responsive behavior, reduced motion, and keyboard interaction before considering the page complete.

## Anti Patterns

- Do not add a build tool or package manager for a simple static page without a clear need.
- Do not copy demo innerHTML patterns into pages that handle untrusted user input.
- Do not rely on third-party CDN scripts for production without supply-chain review and integrity controls.

## Security Audit

- Audited at: 2026-07-08T11:28:28.646\+00:00
- Summary: 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.

## Stats

- Views: 2
- Downloads: 15
- Favorites: 0
- Popularity score: 0