Add skill removal functionality and enhance UI components

- Integrated onRemoveSkill functionality in SkillEvaluation, SkillSelector, and SkillEvaluationCard components for better skill management.
- Updated UI to improve user experience when removing skills, including tooltip descriptions and styling adjustments.
- Added new skills to backend, devops, frontend, and mobile JSON files for comprehensive skill coverage.

components/evaluation/skill-evaluation-card.tsx

@@ -1,4 +1,4 @@
-import { ExternalLink, BookOpen, Target, Info } from "lucide-react";
+import { ExternalLink, Info, X } from "lucide-react";
 import {
   Tooltip,
   TooltipContent,
@@ -11,6 +11,7 @@ interface SkillEvaluationCardProps {
   skill: Skill;
   currentLevel: SkillLevel;
   onUpdateSkill: (skillId: string, level: SkillLevel) => void;
+  onRemoveSkill: (skillId: string) => void;
 }
 
 function getLevelColor(level: Exclude<SkillLevel, null>) {
@@ -43,6 +44,7 @@ export function SkillEvaluationCard({
   skill,
   currentLevel,
   onUpdateSkill,
+  onRemoveSkill,
 }: SkillEvaluationCardProps) {
   const TechIcon = getTechIcon(skill.id);
 
@@ -131,27 +133,19 @@ export function SkillEvaluationCard({
             );
           })}
 
-          {/* Goal buttons */}
-          <div className="flex items-center gap-1 ml-2 border-l border-white/10 pl-2">
+          {/* Remove button */}
+          <div className="flex items-center ml-2 border-l border-white/10 pl-2">
             <Tooltip>
               <TooltipTrigger asChild>
-                <button className="p-1 rounded-lg hover:bg-white/10 transition-colors">
-                  <BookOpen className="h-3 w-3 text-slate-400 hover:text-blue-400" />
+                <button
+                  onClick={() => onRemoveSkill(skill.id)}
+                  className="p-1 rounded-lg hover:bg-red-500/20 transition-colors"
+                >
+                  <X className="h-3 w-3 text-slate-400 hover:text-red-400" />
                 </button>
               </TooltipTrigger>
               <TooltipContent>
-                <p className="text-xs">Envie d'apprendre</p>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button className="p-1 rounded-lg hover:bg-white/10 transition-colors">
-                  <Target className="h-3 w-3 text-slate-400 hover:text-green-400" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p className="text-xs">Peut encadrer</p>
+                <p className="text-xs">Supprimer cette technologie</p>
               </TooltipContent>
             </Tooltip>
           </div>

components/evaluation/skill-evaluation-grid.tsx

@@ -5,12 +5,14 @@ interface SkillEvaluationGridProps {
   currentCategory: SkillCategory;
   currentEvaluation: CategoryEvaluation;
   onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
+  onRemoveSkill: (category: string, skillId: string) => void;
 }
 
 export function SkillEvaluationGrid({
   currentCategory,
   currentEvaluation,
   onUpdateSkill,
+  onRemoveSkill,
 }: SkillEvaluationGridProps) {
   const getSkillLevel = (skillId: string): SkillLevel => {
     const skillEval = currentEvaluation?.skills.find(
@@ -52,6 +54,9 @@ export function SkillEvaluationGrid({
               onUpdateSkill={(skillId, level) =>
                 onUpdateSkill(currentCategory.category, skillId, level)
               }
+              onRemoveSkill={(skillId) =>
+                onRemoveSkill(currentCategory.category, skillId)
+              }
             />
           );
         })}