skills.rest
SonarSource
SonarSourceOFFICIAL
Explore all skills by this author →
Website𝕏@SonarSourceGitHub

echoes-components

Locates Echoes component interfaces and CSS token mappings in reference files.

11|15|Updated Dec 6, 2024
Search Tags:#typescript#react#components#design tokens#ui library
One-click install
npx skills add https://github.com/SonarSource/sonarqube-webapp --skill echoes-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: echoes-components
Source: https://github.com/SonarSource/sonarqube-webapp/tree/main/.claude/skills/echoes-components
Command: npx skills add https://github.com/SonarSource/sonarqube-webapp --skill echoes-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers correctly use the shared component library and design tokens from @sonarsource/echoes-react by providing guidance on locating and understanding component interfaces and design token definitions.

Core Features & Use Cases

  • Component Interface Discovery: Find and inspect the TypeScript definitions for Echoes components.
  • Design Token Access: Locate and understand the usage of CSS design tokens for styling.
  • Use Case: A developer needs to implement a new button using the Echoes library. They can use this Skill to find the Button component's interface in the reference files and understand its available props and usage patterns.

Quick Start

Find the interface definition for the 'Banner' component within the provided reference files.

Frequently Asked Questions about echoes-components

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

FAQPage Schema
How do I find the TypeScript interface definitions for echoes-react components?▼

To find echoes-react component interfaces, navigate through the project's TypeScript reference files to locate the type definitions. This provides direct access to component interfaces and available props for implementation.

How do I use CSS design tokens from the echoes-react UI library?▼

CSS design tokens from echoes-react are applied via CSS variable conventions. Locate the design token definitions within the reference files to understand the available styling variables and their mappings.

What is the best way to identify available props for a SonarSource Echoes component?▼

The best way to identify Echoes component props is inspecting the TypeScript definitions in the reference files. This exposes the component interfaces, revealing the exact properties and usage patterns required for implementation.

Do I need TypeScript knowledge to work with the Echoes shared component library?▼

Yes, TypeScript knowledge is required to work with the Echoes component library. Effective application demands understanding TypeScript interfaces to interpret component definitions and CSS design token mappings correctly.

Can I use echoes-react design tokens to style custom components outside the library?▼

Echoes-react design tokens use standard CSS variable conventions, allowing application across custom components. Locate the specific CSS variable definitions in the reference files to map and apply them to your styling.

Related Skills

Explore More Software Engineering Skills→
JosiahSiegelJosiahSiegel
51

react-typescript

Provide TypeScript patterns for React component props, events, hooks, and generics.

Community
Intermediate
ConectateConectate
15

ct-components

Provide Material Design-compliant Web Components for JavaScript frameworks.

Official
Intermediate
vultisigvultisig
19

reuse-shared-props

Compose shared prop types like InputProps and OnClickProp in React TypeScript components.

Official
Basic
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate