Oc Capmetro Skill

Key Patterns & Code

Core Implementation

import { useState, useCallback, memo } from 'react';
import { useQuery } from '@tanstack/react-query';

interface CapmetroSkillProps {
    className?: string;
    onSelect?: (id: string) => void;
}

export const CapmetroSkill = memo(function CapmetroSkill({ className, onSelect }: CapmetroSkillProps) {
    const [selected, setSelected] = useState<string | null>(null);

    const { data, isLoading, error } = useQuery({
        queryKey: ['capmetro-skill'],
        queryFn: () => fetch('/api/capmetro-skill').then((r) => r.json()),
        staleTime: 30_000,
    });

    const handleSelect = useCallback((id: string) => {
        setSelected(id);
        onSelect?.(id);
    }, [onSelect]);

    if (isLoading) return <div className="animate-pulse">Loading...</div>;
    if (error) return <div className="text-red-500">Error loading data</div>;

    return (
        <div className={`space-y-2 ${className ?? ''}`}>
            {data?.map((item: { id: string; name: string }) => (
                <button
                    key={item.id}
                    onClick={() => handleSelect(item.id)}
                    className={`p-3 rounded border ${
                        selected === item.id
                            ? 'border-blue-500 bg-blue-50'
                            : 'border-gray-200 hover:border-gray-300'
                    }`}
                >
                    {item.name}
                </button>
            ))}
        </div>
    );
});

Configuration & Setup

# Capmetro Skill — Configuration
# Author: luo-kai (Lous Creations)

config = {
    "name": "capmetro-skill",
    "version": "1.0.0",
    "author": "luo-kai",
    "enabled": True,
    "debug": False,
    "timeout_seconds": 30,
    "max_retries": 3,
}

Error Handling

# Robust error handling pattern
import logging
logger = logging.getLogger("capmetro-skill")

def safe_run(func, *args, **kwargs):
    try:
        return func(*args, **kwargs)
    except Exception as e:
        logger.error(f"capmetro-skill error: {e}", exc_info=True)
        raise

Best Practices

• Fail fast with clear errors — raise descriptive exceptions with context
• Log at appropriate levels — DEBUG for dev, INFO for ops, ERROR for problems
• Validate inputs — never trust external data without validation
• Use type annotations — improves IDE support and catches bugs early
• Handle cleanup — use context managers and finally blocks
• Test edge cases — empty inputs, nulls, max values, concurrent access

Common Pitfalls

Related Skills

• typescript-expert
• capmetro-skill-advanced
• performance-optimization
• error-handling
• testing-expert