canopy-heading
OfficialRender dynamic headings safely and accessibly.
AuthorLegal-and-General
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Dynamically setting the semantic heading level in Angular components can break accessibility and document structure if not handled correctly.
Core Features & Use Cases
- Provides guidance for using the LgHeadingComponent inside wrappers to allow dynamic heading levels while preserving a logical document outline.
- Illustrates best practices to avoid static headings and to maintain accessibility across interactive components like accordions and cards.
- Includes real-world usage examples and pitfalls to avoid when rendering programmatic headings.
Quick Start
Explain how to render a dynamic heading level inside a custom component using Canopy.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: canopy-heading Download link: https://github.com/Legal-and-General/canopy/archive/main.zip#canopy-heading Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.