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/Input.tsx

@@ -0,0 +1,79 @@
+import { InputHTMLAttributes, forwardRef } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(({
+  label,
+  error,
+  helperText,
+  leftIcon,
+  rightIcon,
+  className = '',
+  id,
+  ...props
+}, ref) => {
+  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className="w-full">
+      {label && (
+        <label 
+          htmlFor={inputId} 
+          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">
+        {leftIcon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+            {leftIcon}
+          </div>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={`
+            w-full border rounded-lg px-3 py-2
+            transition-colors placeholder:text-gray-400
+            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'
+            }
+            ${leftIcon ? 'pl-10' : ''}
+            ${rightIcon ? 'pr-10' : ''}
+            ${className}
+          `}
+          {...props}
+        />
+        {rightIcon && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+            {rightIcon}
+          </div>
+        )}
+      </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>
+  );
+});
+
+Input.displayName = 'Input';
+export default Input;