القائمة
Use whenever it is necessary to work with the echoes shared component library or design tokens from @sonarsource/echoes-react
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | echoes-components |
| description | Use whenever it is necessary to work with the echoes shared component library or design tokens from @sonarsource/echoes-react |
When working with Echoes components from @sonarsource/echoes-react is it always necessary to know the correct usage of the components you're working with. Typically, you'll want to identify the set of components you care about, find them in the typescript reference tree, and look at their interfaces. The interfaces often contain usage documentation as well.
components/index.d.ts is a good place to begin.
Full props and example docs are available in the compiled type definitions in ./reference/components/
You should check ./reference/components/<componentFolderName>/index.d.ts first if looking for a component. The documentation you want may be in there rather than the component-named-file. If you don't see it there, move on to checking other places, but ALWAYS look in the index.
./reference/components/buttons/Button.d.ts./reference/components/table/index.d.ts and not ./reference/components/table/Table.d.ts./reference/components/layout/index.d.tsSome components are "namespaced". Table has Table.Body, Table.Row, etc.
CSS design tokens are defined in ./reference/generated/design-tokens-base.json.d.ts and ./reference/generated/design-tokens-themed.json.d.ts
You can infer the mapping between the value in that file and the CSS variable name --echoes-*
When using color tokens always prioritize accessing the design token with the cssVar function defined in ./reference/utils/design-tokens.d.ts
Use this skill when you need to write or understand testing best practices in webapp
Use this skill when you need a better understanding of how the projects in the webapp NX monorepository are connected, how they interact, and where code should live. Recommend using this skill eagerly if it seems like it may be helpful.
Webapp review — analyse your current branch or an existing PR for DRY violations, missing abstractions, SOLID issues, module boundary violations, and extensibility gaps in this NX monorepo.