ThibautMelen

components

@ThibautMelen/components
ThibautMelen
137
19 forks
Updated 1/18/2026
View on GitHub

šŸ“š Skill: <div align="center">

Installation

$skills install @ThibautMelen/components
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Pathimplementation/components/skill.md
Branchmain
Scoped Name@ThibautMelen/components

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

skills list

Skill Instructions

<div align="center">

šŸ  Home › šŸ”§ Implementation › šŸ“¦ Components › šŸ“š Skill

← 🦓 Slash Command ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā—ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā” šŸŖ Hook →

</div>

šŸ“š Skill

A Skill is a reusable capability that provides specialized knowledge or methodology for specific task types.


Key Characteristics

PropertyValue
InvocationSkill tool or automatic based on context
Location.claude/skills/*/SKILL.md
LoadingOn-demand when relevant
ScopeEnhances šŸ” main agent capabilities

File Structure

.claude/skills/test-driven-development/
└── SKILL.md
# .claude/skills/test-driven-development/SKILL.md

---
description: Use when implementing features - write tests first, then code
---

# Test-Driven Development Skill

## Methodology
1. RED: Write a failing test
2. GREEN: Write minimal code to pass
3. REFACTOR: Clean up while tests pass

Note: Skill name from directory name. Frontmatter: name (optional), description (required), allowed-tools (optional).


Frontmatter Reference

FieldRequiredDescription
nameNoSkill name (default: directory name, max 64 chars)
descriptionYesWhen to use this skill (max 1024 chars)
allowed-toolsNoRestricts tool access for this skill

Mermaid Representation

%%{init: {'theme': 'base', 'themeVariables': {'lineColor': '#64748b'}}}%%
flowchart TB
    classDef user fill:#6366f1,stroke:#4f46e5,stroke-width:2px,color:#ffffff
    classDef main fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#ffffff
    classDef skill fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#ffffff
    classDef decision fill:#f59e0b,stroke:#d97706,stroke-width:2px,color:#ffffff

    REQ["šŸ™‹ā€ā™€ļøšŸ“„ User Request"]:::user --> CHECK{"šŸ“š Skill Applicable?"}:::decision
    CHECK -->|Yes| LOAD["šŸ“š Load Skill"]:::skill
    CHECK -->|No| DIRECT["šŸ”āš” Direct Execution"]:::main
    LOAD --> APPLY["šŸ”šŸ“š Apply Methodology"]:::main
    APPLY --> EXEC["šŸ”āš” Execute with Skill"]:::main
    EXEC --> RESULT["šŸ’ā€ā™€ļøšŸ“¤ Enhanced Result"]
    DIRECT --> RESULT

How Skills Work

  1. Detection: Claude analyzes the request context
  2. Matching: Compares against skill descriptions
  3. Loading: Injects skill content into context
  4. Application: Follows methodology during execution

Progressive Skills Mechanism

%%{init: {'theme': 'base', 'themeVariables': {'lineColor': '#64748b'}}}%%
flowchart TB
    classDef main fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#ffffff
    classDef skill fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#ffffff
    classDef decision fill:#f59e0b,stroke:#d97706,stroke-width:2px,color:#ffffff

    REQ["šŸ™‹ā€ā™€ļøšŸ“„ User Request"] --> MA["šŸ” Main Agent"]:::main
    MA --> CHECK{"šŸ“š Match Skills?"}:::decision

    CHECK -->|TDD Task| TDD["šŸ“š test-driven-development"]:::skill
    CHECK -->|Debug Task| DEBUG["šŸ“š systematic-debugging"]:::skill
    CHECK -->|Review Task| REVIEW["šŸ“š code-review"]:::skill
    CHECK -->|None| DIRECT[Direct Execution]

    TDD --> EXEC["āœ… Enhanced Execution"]
    DEBUG --> EXEC
    REVIEW --> EXEC
    DIRECT --> EXEC

Example Skill Content

# .claude/skills/systematic-debugging/SKILL.md

---
description: Use when debugging errors or unexpected behavior - systematic root cause analysis
---

# Systematic Debugging

## Process
1. **Reproduce**: Confirm the issue is reproducible
2. **Isolate**: Narrow down to smallest failing case
3. **Hypothesize**: Form theories about cause
4. **Test**: Verify each hypothesis
5. **Fix**: Apply minimal fix
6. **Verify**: Confirm fix works without regressions

Tips

  • Write clear, actionable descriptions
  • Include step-by-step methodologies
  • Document when to use (and when NOT to use)
  • Keep skills focused on single concerns

<div align="center">

← 🦓 Slash Command ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā—ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā”ā” šŸŖ Hook →

</div>