skills.rest
AxaFrance
AxaFranceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canopee-prospect-client

Guide React developers on Canopée Prospect and Client imports, APIs, tokens, and theming.

29|89|Updated Dec 12, 2023
Search Tags:#react#design-system#client#import-paths#prospect#canopée
One-click install
npx skills add https://github.com/AxaFrance/design-system --skill canopee-prospect-client
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopee-prospect-client
Source: https://github.com/AxaFrance/design-system/tree/main/plugins/canopee-prospect-client/skills/canopee-prospect-client
Command: npx skills add https://github.com/AxaFrance/design-system --skill canopee-prospect-client

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Canopée adoption for Prospect and Client often requires consistent guidance to ensure developers use the same APIs, theming approach, and imports across both universes. This Skill provides a structured guide to align usage, parity, and best practices for React integrations.

Core Features & Use Cases

  • Clear guidance on importing from @axa-fr/canopee-react/prospect or @axa-fr/canopee-react/client to ensure consistent theming and tokens.
  • Demonstrates how to apply CSS tokens, the Grid system, and parity between Prospect and Client components for reusable UI.
  • Use Case: a developer rapidly scaffolds a new two-theme app with identical components and APIs in Prospect and Client.

Quick Start

Import a component from @axa-fr/canopee-react/prospect or @axa-fr/canopee-react/client to initialize Canopée CSS and components in your app.

Frequently Asked Questions about canopee-prospect-client

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

FAQPage Schema
How do I import Canopée React components for Prospect and Client universes?▼

Import Canopée React components from @axa-fr/canopee-react/prospect or @axa-fr/canopee-react/client to initialize the correct CSS, theming, and tokens for each universe in your React application.

What is the Canopée adoption gap for Prospect and Client?▼

The Canopée adoption gap is the inconsistency developers face when applying APIs, theming, and import paths across Prospect and Client universes, which this Skill resolves by providing structured guidance and parity patterns.

How do I maintain API and theming parity between Prospect and Client in React?▼

Maintain Prospect and Client parity by using consistent import paths, applying shared CSS tokens, leveraging the Grid system, and following cross-theme best practices to ensure identical component behavior across both universes.

Can I scaffold a two-theme React app with identical components using Canopée?▼

Yes, you can rapidly scaffold a two-theme React app by importing identical component APIs from the Prospect and Client paths, applying shared CSS tokens, and using the Grid system for consistent, reusable UI across both themes.

Does Canopée React require specific dependencies for Prospect and Client integration?▼

Canopée React requires no external dependencies for Prospect and Client integration, allowing you to directly import components, CSS tokens, and theming from the dedicated prospect and client paths to ensure consistent UI.

What is the best way to apply CSS tokens and the Grid system in Canopée React?▼

The best way to apply Canopée CSS tokens and the Grid system is by importing components from the specific @axa-fr/canopee-react/prospect or /client paths, ensuring proper theming and structural parity across your React application.

Related Skills

Explore More Software Engineering Skills→
mjamoremjamore

expo-tailwind-setup

Configure Tailwind CSS v4 styling in Expo projects with NativeWind and Metro.

Community
Intermediate
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic
congthang12312congthang12312

ui-styling

Integrate accessible shadcn/ui components with Tailwind tokens into React apps.

Community
Advanced
kkn1125kkn1125

design-system-guard

Audit UI components against design system standards and provide adherence guidance.

Community
Advanced