Update skills: add website-creator, mql-developer, ecommerce-astro

Changes:
- Add FAL_KEY and GEMINI_API_KEY to .env.example
- Update picture-it to use ~/.config/opencode/.env (unified creds)
- Remove shodh-memory skill (no longer used)
- Remove alphaear-* skills (deprecated)
- Remove thai-frontend-dev skill (replaced by website-creator)
- Remove theme-factory skill
- Add mql-developer skill (MQL5 trading)
- Add ecommerce-astro skill (Astro e-commerce)
- Add website-creator skill (Next.js + Payload CMS)
- Update install script for new skills

skills/ecommerce-astro/scripts/templates/src/components/ui/Select.tsx

@@ -0,0 +1,91 @@
+import { SelectHTMLAttributes, forwardRef } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(({
+  label,
+  error,
+  helperText,
+  options,
+  placeholder = 'เลือก...',
+  className = '',
+  id,
+  ...props
+}, ref) => {
+  const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label 
+          htmlFor={selectId} 
+          className="block text-sm font-medium text-gray-700 mb-1"
+        >
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div className="relative">
+        <select
+          ref={ref}
+          id={selectId}
+          className={`
+            w-full border rounded-lg px-3 py-2 pr-10
+            appearance-none bg-white
+            transition-colors cursor-pointer
+            focus:outline-none focus:ring-2 focus:ring-offset-0
+            ${error 
+              ? 'border-red-500 focus:border-red-500 focus:ring-red-200' 
+              : 'border-gray-300 focus:border-blue-500 focus:ring-blue-200'
+            }
+            ${className}
+          `}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map(option => (
+            <option 
+              key={option.value} 
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
+      </div>
+      {error && (
+        <p className="text-red-500 text-sm mt-1 flex items-center gap-1">
+          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+          </svg>
+          {error}
+        </p>
+      )}
+      {helperText && !error && (
+        <p className="text-gray-500 text-sm mt-1">{helperText}</p>
+      )}
+    </div>
+  );
+});
+
+Select.displayName = 'Select';
+export default Select;