Add skill-creator and improve agent-browser skill (#341)

* add skills-creator

* update skill

* better docs

* minor fixes

docs/src/app/quick-start/page.tsx

@@ -6,14 +6,31 @@ export default function QuickStart() {
       <div className="prose">
         <h1>Quick Start</h1>
 
-        <h2>Basic workflow</h2>
+        <h2>Core workflow</h2>
+        <p>Every browser automation follows this pattern:</p>
+        <CodeBlock code={`# 1. Navigate
+agent-browser open example.com
+
+# 2. Snapshot to get element refs
+agent-browser snapshot -i
+# Output:
+# @e1 [heading] "Example Domain"
+# @e2 [link] "More information..."
+
+# 3. Interact using refs
+agent-browser click @e2
+
+# 4. Re-snapshot after page changes
+agent-browser snapshot -i`} />
+
+        <h2>Common commands</h2>
         <CodeBlock code={`agent-browser open example.com
-agent-browser snapshot                    # Get accessibility tree with refs
-agent-browser click @e2                   # Click by ref from snapshot
-agent-browser fill @e3 "test@example.com" # Fill by ref
-agent-browser get text @e1                # Get text by ref
-agent-browser screenshot                  # Save to a temporary directory
-agent-browser screenshot page.png         # Save to a specific path
+agent-browser snapshot -i                # Get interactive elements with refs
+agent-browser click @e2                  # Click by ref
+agent-browser fill @e3 "test@example.com" # Fill input by ref
+agent-browser get text @e1               # Get text content
+agent-browser screenshot                 # Save to temp directory
+agent-browser screenshot page.png        # Save to specific path
 agent-browser close`} />
 
         <h2>Traditional selectors</h2>
@@ -22,29 +39,23 @@ agent-browser close`} />
 agent-browser fill "#email" "test@example.com"
 agent-browser find role button click --name "Submit"`} />
 
-        <h2>AI workflow</h2>
-        <p>Optimal workflow for AI agents:</p>
-        <CodeBlock code={`# 1. Navigate and get snapshot
-agent-browser open example.com
-agent-browser snapshot -i --json   # AI parses tree and refs
-
-# 2. AI identifies target refs from snapshot
-# 3. Execute actions using refs
-agent-browser click @e2
-agent-browser fill @e3 "input text"
-
-# 4. Get new snapshot if page changed
-agent-browser snapshot -i --json`} />
-
         <h2>Headed mode</h2>
         <p>Show browser window for debugging:</p>
         <CodeBlock code="agent-browser open example.com --headed" />
 
+        <h2>Wait for content</h2>
+        <CodeBlock code={`agent-browser wait @e1                   # Wait for element
+agent-browser wait --load networkidle    # Wait for network idle
+agent-browser wait --url "**/dashboard"  # Wait for URL pattern
+agent-browser wait 2000                  # Wait milliseconds`} />
+
         <h2>JSON output</h2>
-        <p>Use <code>--json</code> for machine-readable output:</p>
+        <p>For programmatic parsing in scripts:</p>
         <CodeBlock code={`agent-browser snapshot --json
-agent-browser get text @e1 --json
-agent-browser is visible @e2 --json`} />
+agent-browser get text @e1 --json`} />
+        <p>
+          Note: The default text output is more compact and preferred for AI agents.
+        </p>
       </div>
     </div>
   );