html-output
HTML Output
Produce a single self-contained HTML slide deck in .agents/output/. Default to one HTML file with no build step or extra assets unless the user explicitly asks for them.
Requirements
- Return a full
<!doctype html>document - Use this exact Pico CSS stylesheet in the
<head>:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> - Default to dark mode with
data-theme="dark"on<html> - Treat the document as a slide deck, not a generic long page
- Use semantic slide sections and a sidebar
#page-indexwith one link per slide - Keep the current slide highlighted in the sidebar
- Support keyboard navigation: Up/Right goes to the next slide, Down/Left goes to the previous slide
- Keep inline CSS and JavaScript minimal and limited to layout, navigation, or print behavior
Workflow
- Shape the content into focused slides: start with a title slide, keep one idea per slide, split dense material across slides, and add a closing slide when it helps.
- Start from TEMPLATE.html and replace the placeholder content instead of rebuilding the shell from scratch.
- Save the final deck in
docs/agents/output/with a descriptive filename such asfeature-slide-deck.html.
More from grehnen/copilot-tooling
improve-codebase-architecture
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
9grill-me
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
9tdd
Test-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
9frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
9write-a-skill
Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.
8gitmoji
Write a commit message using gitmoji. Use when writing a git commit, suggesting a commit message, or when asked to gitmoji a message.
8