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

canopy-flag-icon

Apply Canopy flag icon usage patterns in Angular projects.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides guidance on the correct usage and conventions for the Canopy Flag Icon component to ensure consistent implementation and accessibility in Angular projects.

Core Features & Use Cases

  • Import guidance: recommended import path for LgFlagIconComponent from the canopy library.
  • Usage patterns: how to render the flag icon in templates with a name attribute and proper Angular integration.
  • Accessibility & consistency: considerations to maintain contrast, descriptive text, and alignment with the design system.

Quick Start

Import LgFlagIconComponent from '@legal-and-general/canopy' and render the flag icon in your template using a name attribute, following the recommended pattern.

Frequently Asked Questions about canopy-flag-icon

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

FAQPage Schema
How do I use the Canopy flag icon component in an Angular project?▼

To use the Canopy flag icon in Angular, import LgFlagIconComponent from '@legal-and-general/canopy' and render it in your template using a name attribute to display the desired flag.

What are the accessibility best practices for Canopy UI components?▼

Accessibility best practices for Canopy UI components involve maintaining proper contrast, providing descriptive text for screen readers, and ensuring document alignment to guarantee safe and consistent design system usage.

Does the Canopy design system require specific import naming conventions for Angular?▼

Yes, the Canopy design system enforces specific import naming conventions and path standards for Angular components to ensure consistent implementation and alignment across the UI design system.

What is the recommended import path for the Canopy flag icon?▼

The recommended import path for the Canopy flag icon is '@legal-and-general/canopy', which provides the LgFlagIconComponent needed to render flag icons in Angular templates.

When do I need to apply Canopy flag icon best practices in my UI?▼

You need to apply Canopy flag icon best practices when rendering flag icons in Angular templates to ensure consistent design system alignment, proper accessibility considerations, and safe component integration.

Why does my Canopy flag icon not align with the design system?▼

Your Canopy flag icon may not align with the design system if you deviate from the recommended import paths, fail to enforce naming standards, or neglect the accessibility considerations required for consistent usage.

Related Skills

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

canopy-pipes-kebab-case

Transform strings to kebab-case in Angular templates with Canopy's LgKebabCasePipe.

Official
Basic
zzafergokzzafergok
1

ui-ux-audit-specialist

Audits UI components and pages for WCAG AA compliance and design-system conformance.

Community
Intermediate
remimoulremimoul

shadcn-ui

Implement accessible shadcn/ui components with Radix UI and Tailwind CSS.

Community
Intermediate
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced