Vanilla Web

What it does

This skill, Vanilla Web, enables AI agents to generate simple web pages using only HTML, CSS, and JavaScript – without relying on any frameworks like React, Vue, or Angular. It focuses on creating small UI components such as modals, tabs, dropdowns, and form validation directly within the Document Object Model (DOM). The goal is to produce complete, runnable files with clear instructions for local execution and verification.

When to use it

• When you need a basic user interface element built without any JavaScript frameworks.
• To refactor existing codebases to remove framework dependencies or simplify complex JavaScript.
• For creating static pages or small UI components where minimal overhead is desired.
• When explicitly requesting "vanilla JS" or "plain HTML/CSS/JS."

Key capabilities

• Generates complete, runnable HTML, CSS, and JavaScript files.
• Adheres to a strict set of guidelines for code structure (ESM modules, Single Responsibility Principle).
• Prioritizes semantic HTML markup and accessibility best practices (keyboard navigation, focus states).
• Employs CSS variables for theming and responsive layout techniques.

Example prompts

• "Create a simple modal dialog using vanilla JavaScript."
• "Generate a dropdown menu with plain HTML and CSS."
• "Refactor this existing component to remove the framework dependency."

Tips & gotchas

• The skill will ask clarifying questions if requirements are ambiguous. Be prepared to provide specific details about your desired outcome.
• Output is limited to small, testable changes – complex applications may require a more robust solution.
• Always review the provided "runbook" for instructions on how to run and verify the generated code locally.