Canopy Show At — Best Practices
SkillDev toolsBest practices for the Canopy Show At directive. Trigger when using lgShowAt or LgShowAtDirective to show elements at specific breakpoints in an Angular project using Canopy.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Canopy Show At — Best Practices skill
What this skill tells your AI
The instructions your AI receives, as published by legal-and-general/canopy in skills/best-practice/show-at/SKILL.md and read by ahel’s review.
This skill provides usage guidance for the Canopy lgShowAt directive from @legal-and-general/canopy.
Apply this skill when you need to show an element only at certain breakpoints.
See also: the
hide-atskill for hiding elements at breakpoints.
Import
import { LgShowAtDirective } from '@legal-and-general/canopy';
Basic Usage
<!-- Show only at the md breakpoint and above -->
<p lgShowAt="md">Visible on medium screens and above</p>
Inputs
Available breakpoints: sm, md, lg, xl, xxl.
| Input | Type | Default | Required | Description |
|---|---|---|---|---|
lgShowAt | Breakpoints | null | No | The breakpoint at which the element becomes visible. Uses mobile-first (min-width) media queries. |
Signals
- GitHub stars
- 23
- Forks
- 46
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
canopy-show-at- Source
- github.com/legal-and-general/canopy