canopy-utils

Document and apply Canopy CSS utility classes in Angular templates.

23|46|Updated Sep 7, 2020
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-utils
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canopy-utils
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/utils
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-utils

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a centralized reference for Canopy CSS utility classes used in Angular projects.

Core Features & Use Cases

  • Quick reference for commonly used utilities like lg-visually-hidden and lg-unstyled-link.
  • Clear usage examples to apply classes in templates and components.

Quick Start

Refer to the utilities list and apply relevant classes in your Angular templates to style accessible UI elements.

Frequently Asked Questions about canopy-utils

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

FAQPage Schema
How do I apply Canopy CSS utility classes in Angular templates?

To apply Canopy CSS utility classes in Angular templates, reference the utilities list and add classes like lg-visually-hidden or lg-unstyled-link directly to your component HTML elements to style accessible UI components.

What is the lg-visually-hidden utility used for in Angular UI development?

The lg-visually-hidden utility is a Canopy CSS class used in Angular templates to hide content visually while keeping it accessible to screen readers, ensuring accessible UI patterns across components.

What's the best way to find a centralized reference for Canopy CSS utilities?

A centralized reference for Canopy CSS utilities provides a concise guide with practical usage examples, allowing developers to quickly find and apply common classes like lg-unstyled-link across standard UI patterns in Angular projects.

Can I use Canopy utility classes to style unstyled links in Angular components?

Yes, you can use the lg-unstyled-link Canopy CSS utility class in your Angular components to remove default link styling, providing a clean baseline for custom UI element designs within your templates.

Do I need any dependencies to use Canopy CSS utilities in my Angular project?

No additional dependencies are required to reference and apply Canopy CSS utility classes, as the guide focuses on applying existing utility classes directly within your Angular templates and components for immediate UI styling.