Skills
.Work. You
Rest

canopy-hide-at

Official

Hide elements at breakpoints with Canopy.

Software Engineering#angular#best-practices#breakpoints#responsive-design#directive#canopy#hide-at
AuthorLegal-and-General
Version1.0.0
Installs0

System Documentation

What problem does it solve?

The Canopy Hide At directive is a best-practice guide that helps teams control element visibility across responsive breakpoints, ensuring consistent behavior and accessibility in Angular projects using Canopy.

Core Features & Use Cases

  • Guidance on applying the lgHideAt/LgHideAtDirective to show or hide elements at specific breakpoints.
  • Examples and patterns for common breakpoints (sm, md, lg, xl, xxl) and accessibility considerations.
  • Real-world scenarios including dashboards, toolbars, and content cards where breakpoint-based visibility improves UX.

Quick Start

Install or import the lgHideAt directive into your Angular project and apply it to elements to hide them at the desired breakpoint.

Dependency Matrix

Required Modules

None required

Components

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-hide-at
Download link: https://github.com/Legal-and-General/canopy/archive/main.zip#canopy-hide-at

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.