Skip to content

Commit 13cdac5

Browse files
charliewwdevcharliewwdev
committed
docs: redesign Getting Started with tabbed use cases + copy buttons
- Hero install box now has 📋 Copy button - Getting Started split into 4 tabs: Web, MCP for AI IDE, Flutter, iOS/Android - Each path shows minimal steps with copy-to-clipboard - Web: just 2 commands (install + serve) - MCP: install + paste JSON config - Flutter: install + 2 lines of code + run - Mobile: install + add SDK + run
1 parent 7b92f9b commit 13cdac5

File tree

1 file changed

+146
-11
lines changed

1 file changed

+146
-11
lines changed

‎docs/site/index.html‎

Lines changed: 146 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,51 @@
256256
footer a { color: var(--text-muted); }
257257
footer a:hover { color: var(--text); }
258258

259+
/* Use case tabs */
260+
.use-case-tabs {
261+
display: flex;
262+
gap: 8px;
263+
margin: 24px 0 0;
264+
flex-wrap: wrap;
265+
}
266+
267+
.use-case-tabs .tab {
268+
background: var(--surface);
269+
border: 1px solid var(--border);
270+
color: var(--text-muted);
271+
padding: 10px 20px;
272+
border-radius: 8px 8px 0 0;
273+
cursor: pointer;
274+
font-size: 14px;
275+
font-weight: 500;
276+
transition: all 0.2s;
277+
}
278+
279+
.use-case-tabs .tab:hover {
280+
border-color: var(--accent);
281+
color: var(--text);
282+
}
283+
284+
.use-case-tabs .tab.active {
285+
background: var(--code-bg);
286+
border-color: var(--accent);
287+
border-bottom-color: var(--code-bg);
288+
color: var(--accent);
289+
}
290+
291+
.tab-content {
292+
display: none;
293+
background: var(--code-bg);
294+
border: 1px solid var(--border);
295+
border-radius: 0 8px 8px 8px;
296+
padding: 24px;
297+
margin-bottom: 24px;
298+
}
299+
300+
.tab-content.active { display: block; }
301+
302+
.tab-content p { color: var(--text-muted); margin-bottom: 12px; }
303+
259304
/* Code blocks with copy button */
260305
.code-block {
261306
position: relative;
@@ -328,38 +373,121 @@ <h1>flutter-skill</h1>
328373
<a href="https://www.npmjs.com/package/flutter-skill"><img src="https://img.shields.io/npm/v/flutter-skill.svg" alt="npm"></a>
329374
<a href="https://github.com/ai-dashboad/flutter-skill/actions"><img src="https://img.shields.io/github/actions/workflow/status/ai-dashboad/flutter-skill/ci.yml?label=tests" alt="CI"></a>
330375
</div>
331-
<div class="install-box" onclick="navigator.clipboard.writeText('npm install -g flutter-skill')">npm install -g flutter-skill</div>
376+
<div class="code-block" style="display:inline-block; margin-top: 0;">
377+
<div class="install-box" style="padding-right: 70px;">npm install -g flutter-skill</div>
378+
<button class="copy-btn" style="top: 50%; transform: translateY(-50%);" onclick="copyCode(this, 'npm install -g flutter-skill')">📋 Copy</button>
379+
</div>
332380
</div>
333381

334382
<!-- Getting Started -->
335383
<section id="getting-started">
336384
<h2>Getting Started</h2>
337-
<p>Install flutter-skill and connect it to your AI in under 60 seconds.</p>
385+
<p>Choose your use case. Each path is one or two commands — you'll be running in under 60 seconds.</p>
386+
387+
<!-- Use Case Tabs -->
388+
<div class="use-case-tabs">
389+
<button class="tab active" onclick="showTab('web')">🌐 Test Any Website</button>
390+
<button class="tab" onclick="showTab('mcp')">🤖 MCP for AI IDE</button>
391+
<button class="tab" onclick="showTab('flutter')">💙 Flutter App</button>
392+
<button class="tab" onclick="showTab('mobile')">📱 iOS / Android</button>
393+
</div>
338394

339-
<h3>1. Install</h3>
340-
<pre>npm install -g flutter-skill</pre>
395+
<!-- Tab: Web -->
396+
<div class="tab-content active" id="tab-web">
397+
<p>Automate any website with zero config — no SDK, no code changes.</p>
398+
<div class="code-block">
399+
<pre><span class="comment"># Install + run (that's it!)</span>
400+
npm install -g flutter-skill
401+
flutter-skill serve https://your-website.com</pre>
402+
<button class="copy-btn" onclick="copyCode(this, 'npm install -g flutter-skill && flutter-skill serve https://your-website.com')">📋 Copy</button>
403+
</div>
404+
<p>Now use the CLI to interact:</p>
405+
<div class="code-block">
406+
<pre>flutter-skill snap <span class="comment"># See the page (accessibility tree)</span>
407+
flutter-skill tap "Login" <span class="comment"># Click a button</span>
408+
flutter-skill type "hello" <span class="comment"># Type text</span>
409+
flutter-skill screenshot <span class="comment"># Take a screenshot</span></pre>
410+
<button class="copy-btn" onclick="copyCode(this, 'flutter-skill snap')">📋 Copy</button>
411+
</div>
412+
</div>
341413

342-
<h3>2. Add to your AI</h3>
343-
<p>Copy this into your MCP config (Cursor, Claude Desktop, Windsurf, VSCode, etc.):</p>
344-
<pre>{
414+
<!-- Tab: MCP -->
415+
<div class="tab-content" id="tab-mcp">
416+
<p>Add to Cursor, Claude Desktop, Windsurf, VSCode Copilot, or any MCP-compatible AI.</p>
417+
<div class="code-block">
418+
<pre><span class="comment"># Step 1: Install</span>
419+
npm install -g flutter-skill</pre>
420+
<button class="copy-btn" onclick="copyCode(this, 'npm install -g flutter-skill')">📋 Copy</button>
421+
</div>
422+
<div class="code-block">
423+
<pre><span class="comment">// Step 2: Add to your MCP config</span>
424+
{
345425
<span class="string">"mcpServers"</span>: {
346426
<span class="string">"flutter-skill"</span>: {
347427
<span class="string">"command"</span>: <span class="string">"flutter-skill"</span>,
348428
<span class="string">"args"</span>: [<span class="string">"server"</span>]
349429
}
350430
}
351431
}</pre>
432+
<button class="copy-btn" onclick="copyCode(this, JSON.stringify({mcpServers:{'flutter-skill':{command:'flutter-skill',args:['server']}}}, null, 2))">📋 Copy JSON</button>
433+
</div>
434+
<p>Then just ask your AI: <em>"Open https://example.com, find the login button, and test it"</em></p>
435+
</div>
352436

353-
<h3>3. Add to your Flutter app (optional)</h3>
354-
<pre><span class="keyword">import</span> <span class="string">'package:flutter_skill/flutter_skill.dart'</span>;
437+
<!-- Tab: Flutter -->
438+
<div class="tab-content" id="tab-flutter">
439+
<p>Add the SDK to your Flutter app for deep integration (widget tree, semantics, gestures).</p>
440+
<div class="code-block">
441+
<pre><span class="comment"># Step 1: Install CLI + add SDK to your app</span>
442+
npm install -g flutter-skill
443+
flutter pub add flutter_skill --dev</pre>
444+
<button class="copy-btn" onclick="copyCode(this, 'npm install -g flutter-skill && flutter pub add flutter_skill --dev')">📋 Copy</button>
445+
</div>
446+
<div class="code-block">
447+
<pre><span class="comment">// Step 2: Add 2 lines to main.dart</span>
448+
<span class="keyword">import</span> <span class="string">'package:flutter_skill/flutter_skill.dart'</span>;
355449

356450
<span class="keyword">void</span> main() {
357451
<span class="keyword">if</span> (kDebugMode) FlutterSkillBinding.ensureInitialized();
358452
runApp(MyApp());
359453
}</pre>
454+
<button class="copy-btn" onclick="copyCode(this, `import 'package:flutter_skill/flutter_skill.dart';\n\nvoid main() {\n if (kDebugMode) FlutterSkillBinding.ensureInitialized();\n runApp(MyApp());\n}`)">📋 Copy</button>
455+
</div>
456+
<div class="code-block">
457+
<pre><span class="comment"># Step 3: Run your app + connect</span>
458+
flutter run
459+
flutter-skill server</pre>
460+
<button class="copy-btn" onclick="copyCode(this, 'flutter run && flutter-skill server')">📋 Copy</button>
461+
</div>
462+
</div>
360463

361-
<h3>4. Test</h3>
362-
<p>Just talk to your AI: <em>"Launch my app, explore every screen, and report any bugs"</em></p>
464+
<!-- Tab: Mobile -->
465+
<div class="tab-content" id="tab-mobile">
466+
<p>Test native iOS/Android apps. Requires the platform SDK in your app.</p>
467+
<div class="cards" style="margin-top: 16px;">
468+
<div class="card">
469+
<h4>iOS (Swift)</h4>
470+
<div class="code-block">
471+
<pre>npm install -g flutter-skill
472+
<span class="comment"># Add sdks/ios to your Xcode project</span>
473+
<span class="comment"># Run your app on simulator</span>
474+
flutter-skill server</pre>
475+
<button class="copy-btn" onclick="copyCode(this, 'npm install -g flutter-skill')">📋 Copy</button>
476+
</div>
477+
</div>
478+
<div class="card">
479+
<h4>Android (Kotlin)</h4>
480+
<div class="code-block">
481+
<pre>npm install -g flutter-skill
482+
<span class="comment"># Add sdks/android to your Gradle project</span>
483+
<span class="comment"># Run your app on emulator</span>
484+
flutter-skill server</pre>
485+
<button class="copy-btn" onclick="copyCode(this, 'npm install -g flutter-skill')">📋 Copy</button>
486+
</div>
487+
</div>
488+
</div>
489+
<p style="margin-top: 16px;">Also supports: <strong>React Native</strong>, <strong>Electron</strong>, <strong>Tauri</strong>, <strong>KMP</strong>, <strong>.NET MAUI</strong>. See <a href="#platforms">Platforms</a> for details.</p>
490+
</div>
363491
</section>
364492

365493
<!-- Platforms -->
@@ -679,6 +807,13 @@ <h4><a href="https://github.com/ai-dashboad/flutter-skill/blob/main/CHANGELOG.md
679807
</footer>
680808

681809
<script>
810+
function showTab(id) {
811+
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
812+
document.querySelectorAll('.use-case-tabs .tab').forEach(el => el.classList.remove('active'));
813+
document.getElementById('tab-' + id).classList.add('active');
814+
event.target.classList.add('active');
815+
}
816+
682817
function copyCode(btn, text) {
683818
navigator.clipboard.writeText(text).then(() => {
684819
btn.textContent = '✅ Copied!';

0 commit comments

Comments
 (0)