skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-mixins

Documents Canopy SCSS mixins for consistent Angular component styling.

23|46|Updated Sep 7, 2020
Search Tags:#angular#styling#reference#design-system#scss#mixins#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-mixins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-mixins
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/mixins
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-mixins

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a reference for Canopy SCSS mixins, helping developers quickly discover and correctly apply mixins to implement consistent styling across Angular projects.

Core Features & Use Cases

  • Mixin catalog: Lists all available Canopy SCSS mixins with usage notes and examples.
  • Consistent styling: Helps maintain consistent design tokens (breakpoints, fonts, focus outlines) across components.
  • Use Case: When starting a new component, copy the appropriate @include line with proper arguments to apply Canopy styles.

Quick Start

Use canopy-mixins to reference and apply the lg-breakpoint and lg-font-size mixins in your SCSS.

Frequently Asked Questions about canopy-mixins

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

FAQPage Schema
How do I apply consistent styling using Canopy SCSS mixins in my Angular components?▼

To apply consistent styling using Canopy SCSS mixins in Angular components, reference the centralized catalog to find the correct mixin, such as lg-breakpoint or lg-font-size, and copy its @include statement with the appropriate arguments into your stylesheet.

What Canopy SCSS mixins are available for design tokens like breakpoints and focus outlines?▼

Available Canopy SCSS mixins for design tokens include lg-breakpoint for responsive layouts, lg-font-size for typography scaling, and related helpers for focus outlines, all documented with usage notes and examples to standardize component styling.

Do I need any specific dependencies to use Canopy SCSS mixins in my project?▼

No specific external dependencies are required to use Canopy SCSS mixins in your project, as the reference operates independently to provide documentation and usage examples for applying standard design tokens across Angular projects.

What is the best way to standardize component styling across multiple Angular projects?▼

The best way to standardize component styling across multiple Angular projects is to use a centralized SCSS mixin reference, ensuring design tokens like breakpoints and fonts are applied consistently by copying exact @include lines into component stylesheets.

How do I use the lg-breakpoint mixin to apply responsive styles in SCSS?▼

To use the lg-breakpoint mixin to apply responsive styles in SCSS, locate the mixin in the catalog, then copy the provided @include lg-breakpoint directive and pass the required arguments to adapt your component layout to standard Canopy breakpoints.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-v21-migration

Migrate Canopy v20 to v21 in Angular projects by applying breaking changes.

Official
Advanced
baloisebaloise
111

ds-create-token

Analyze SCSS files to create design tokens in Base.tokens.json.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-alert

Implement accessible inline alerts with Canopy's lg-alert component in Angular projects.

Official
Basic
oslokommuneoslokommune

punkt-css-dev

Develop SCSS styles for the Punkt design system within /packages/css/src/scss/.

Official
Intermediate