From 338420a92404d8b2660a7a8b101d479cd1f21d45 Mon Sep 17 00:00:00 2001
From: Zied <zinzied@gmail.com>
Date: Wed, 25 Feb 2026 10:05:30 +0100
Subject: [PATCH] feat: add interactive prompt builder to skill detail page

---
 web-app/src/pages/SkillDetail.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/web-app/src/pages/SkillDetail.jsx b/web-app/src/pages/SkillDetail.jsx
index 8f08eb77..4d7c99df 100644
--- a/web-app/src/pages/SkillDetail.jsx
+++ b/web-app/src/pages/SkillDetail.jsx
@@ -11,6 +11,7 @@ export function SkillDetail() {
     const [loading, setLoading] = useState(true);
     const [copied, setCopied] = useState(false);
     const [error, setError] = useState(null);
+    const [customContext, setCustomContext] = useState('');
 
     useEffect(() => {
         // 1. Fetch index to get skill metadata and path
@@ -50,7 +51,12 @@ export function SkillDetail() {
     }, [id]);
 
     const copyToClipboard = () => {
-        navigator.clipboard.writeText(`Use @${skill.name} ...`);
+        const basePrompt = `Use @${skill.name}`;
+        const finalPrompt = customContext.trim()
+            ? `${basePrompt}\n\nContext:\n${customContext}`
+            : basePrompt;
+
+        navigator.clipboard.writeText(finalPrompt);
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     };
@@ -111,6 +117,23 @@ export function SkillDetail() {
                             <span>{copied ? 'Copied!' : 'Copy Prompt'}</span>
                         </button>
                     </div>
+
+                    <div className="mt-6 border-t border-slate-200 dark:border-slate-800 pt-6">
+                        <label htmlFor="context" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                            Interactive Prompt Builder (Optional)
+                        </label>
+                        <p className="text-xs text-slate-500 dark:text-slate-400 mb-3">
+                            Add specific details below (e.g. "Use React 19 and Tailwind"). The "Copy Prompt" button will automatically attach your context.
+                        </p>
+                        <textarea
+                            id="context"
+                            rows={3}
+                            className="w-full rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-4 py-3 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 outline-none transition-all resize-y"
+                            placeholder="Type your specific task requirements here..."
+                            value={customContext}
+                            onChange={(e) => setCustomContext(e.target.value)}
+                        />
+                    </div>
                 </div>
 
                 <div className="p-6 sm:p-8">