skills.rest
ClubMediterranee
ClubMediterraneeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

trident-icons

Locate icons from the @clubmed/trident-icons catalog and generate SVG-use import code.

4|Updated Mar 19, 2026
Search Tags:#react#catalog#icons#icon#design-system#import#trident-icons
One-click install
npx skills add https://github.com/ClubMediterranee/ai-core --skill trident-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trident-icons
Source: https://github.com/ClubMediterranee/ai-core/tree/main/skills/trident-icons
Command: npx skills add https://github.com/ClubMediterranee/ai-core --skill trident-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Find and use icons from the @clubmed/trident-icons library. Use when a user asks which icon to use for a given concept, writes <Icon name= without knowing the right name, mentions "@clubmed/trident-icons", asks "quelle icône pour X", "which icon for Y", "find me an icon", "what icon represents Z", "liste les icônes de transport", or needs import code for Trident icons. Also triggers when writing or reviewing a component that should display an icon from the Club Med design system.

Core Features & Use Cases

  • Catalog fetch via WebFetch to obtain icons-metadata.json.
  • Icon search by natural language description with orientation and category hints.
  • Generate type-safe, category-based import code using svg-use imports for React projects.
  • Inclusion guidance with Storybook and live catalog references for quick validation.

Quick Start

Use the trident-icons skill to locate the right icon in the catalog and generate the corresponding import code.

Frequently Asked Questions about trident-icons

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

FAQPage Schema
How do I find the right React icon for a specific concept in a design system?▼

To find the right React icon, describe the concept in natural language and the skill fetches the live icons-metadata.json catalog to locate the most accurate match and generate the proper SVG-use import code.

What import code do I need to use Trident icons in a React component?▼

You generate type-safe, category-based import code using svg-use imports tailored for React projects, ensuring the visual representation precisely matches the selected Trident icon.

Can I search for Club Med icons using a natural language description?▼

Yes, you can search the Trident icons catalog by natural language description, using orientation and category hints to pinpoint the correct icon for your UI development tasks.

Does the Trident icon catalog include references for validating icons in Storybook?▼

Yes, the skill provides inclusion guidance with Storybook and live catalog references, allowing you to quickly validate the chosen icon's visual representation during component implementation.

When should I use this approach for finding icons instead of guessing the name?▼

Use this approach when you are writing or reviewing a component that should display an icon, or when you need to ensure iconography matches a concept precisely without guessing the exact catalog name.

Related Skills

Explore More Design & Creative Skills→
NazmusSayadNazmusSayad
3

hugeicons

Render Hugeicons icons in React using HugeiconsIcon and core-free imports.

Community
Basic
cartridge-ggcartridge-gg

ui-architecture-icon

Converts SVG assets into reusable React icon components and updates Storybook exports.

Official
Advanced
JBonfimJBonfim

storybook-stories

Create and maintain Storybook stories for React components with repository conventions.

Community
Intermediate
wukangcheng2944wukangcheng2944

icon-finder

Search six Iconify libraries and deliver icons as SVG or components.

Community
Intermediate