refactor(frontend): update UI components for database migration

- Update UsageFooter component to handle new data structure
- Modify SkillsPage to work with database-backed skills management
- Ensure frontend compatibility with refactored backend

src/components/UsageFooter.tsx

@@ -156,7 +156,8 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
                 {t("usage.remaining")}
               </span>
               <span
-                className={`font-semibold tabular-nums ${isExpired
+                className={`font-semibold tabular-nums ${
+                  isExpired
                     ? "text-red-500 dark:text-red-400"
                     : firstUsage.remaining <
                         (firstUsage.total || firstUsage.remaining) * 0.1
@@ -310,7 +311,8 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
               {t("usage.remaining")}
             </span>
             <span
-              className={`font-semibold tabular-nums ${isExpired
+              className={`font-semibold tabular-nums ${
+                isExpired
                   ? "text-red-500 dark:text-red-400"
                   : remaining < (total || remaining) * 0.1
                     ? "text-orange-500 dark:text-orange-400"