Skills
.Work. You
Rest

canopy-spacing-margin

Official

Enforce Canopy spacing with consistent margins.

Software Engineering#angular#best-practices#ui-design#spacing#margin#directive#canopy
AuthorLegal-and-General
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Align Canopy teams around a single spacing model by guiding developers to apply the Canopy spacing scale using the lgMargin directive instead of ad-hoc CSS margins.

Core Features & Use Cases

  • Provides guidance on using the lgMargin directive to maintain uniform margins across Canopy components.
  • Documents common margin patterns (top, bottom, horizontal, vertical) and responsive variants.
  • Use Case: when updating UI layouts to align with Canopy design system, apply the margin directive rather than writing custom CSS.

Quick Start

Apply Canopy spacing by using lgMargin directives to set the desired margins according to the spacing scale.

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

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.