skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-layout-chrome

Create persistent page chrome with sticky headers, toolbars, and scroll-spy TOC navigation.

Updated May 8, 2026
Search Tags:#glassmorphism#table of contents#responsive typography#layout chrome#sticky header#scroll spy#section numbering
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-layout-chrome
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-layout-chrome
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-layout-chrome
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-layout-chrome

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns long, content-heavy pages into navigable reading experiences by providing reusable chrome for sticky headers, section-numbered headings, and scroll-spy tables of contents.

Core Features & Use Cases

  • Persistent page chrome: sticky header (opaque or optional glass), sticky in-page toolbar, and scroll-spy TOC highlighting.
  • Section readability structure: section-numbered headers (badge + meta chip) designed to integrate cleanly with the selection/comment model.
  • Authoring-safe implementation: enforces layout invariants like using tokens for spacing/colors, logical properties for RTL, and position: sticky (never fixed) so pages print and zoom cleanly.
  • Use cases: documentation pages, long reports, project review pages, and any UI where the user needs stable navigation and an “on this page” outline while scrolling.

Quick Start

Create a documentation-style page with a sticky header and an auto-built sticky-sidebar TOC by responding to the prompt sticky header, TOC, and scroll-spy.

Frequently Asked Questions about amvcp-layout-chrome

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a sticky header and scroll-spy table of contents to long-form documentation?▼

A scroll-spy table of contents tracks active sections using IntersectionObserver to highlight anchors, while sticky headers maintain persistent navigation using position: sticky for layout stability in long-form documentation.

Does sticky navigation work without JavaScript for TOC anchors?▼

Sticky navigation provides graceful JS-off behavior for TOC anchors by enforcing position: sticky, ensuring layout chrome remains functional and printable even when JavaScript is disabled in the browser.

How do I implement section numbering for report headings?▼

Implement section numbering for headings by applying chrome presets that generate numbered badge and meta chip headers, integrating cleanly with selection and comment models for structured document readability.

Can I use glassmorphism in a sticky header while supporting RTL layouts?▼

Glassmorphism sticky headers support RTL layouts by enforcing logical properties for directional spacing and design tokens for colors, ensuring consistent chrome rendering across both LTR and RTL document flows.

Why does my sticky header break page zoom and printing?▼

Sticky headers break page zoom and printing when using position: fixed instead of position: sticky, so enforcing sticky positioning ensures pages print and zoom cleanly without layout overlap.

Related Skills

Explore More Design & Creative Skills→
hubeiqiaohubeiqiao

framer-motion-sticky-scroll-layout

Fix Framer Motion sticky scroll layouts with a relative wrapper structure.

Community
Intermediate
UNO998UNO998

markdown-to-epub-converter

Convert Markdown documents into EPUB3 ebooks with TOC and metadata.

Community
Advanced
nanorepublicananorepublica
61

Global Commenting

Apply standardized file headers and module-level comments across codebases.

Community
Basic
inernoroinernoro
2

theme-transition

Implement circular clip-path theme transitions with the View Transition API.

Community
Advanced