agent-browser-automati…
Automate browser interactions for development testing using Puppeteer MCP
Scaffold production-ready Deno Fresh 2.0 application with islands architecture and modern development workflow
How it fires
How this command gets triggered: by you, by Claude, or both.
/scaffold-deno-freshContext preview
What this command does when you run it.
Scaffold production-ready Deno Fresh 2.0 application with islands architecture and modern development workflow
allowed-tools: Bash(deno:*), Bash(cd:*), Bash(eza:*), Bash(fd:*), Bash(bat:*), Bash(gdate:*), Bash(jq:*), Write, Read name: "Scaffold Deno Fresh" description: "Scaffold production-ready Deno Fresh 2.0 application with islands architecture and modern development workflow" author: "wcygan" tags: ["scaffold","deno"] version: "1.0.0" created_at: "2025-07-14T00:00:00Z" updated_at: "2025-07-14T00:00:00Z"
STEP 1: Initialize Fresh 2.0 scaffolding session with comprehensive validation
# Initialize scaffolding session state
echo '{
"sessionId": "'$SESSION_ID'",
"projectName": "'$ARGUMENTS'",
"timestamp": "'$(gdate -Iseconds 2>/dev/null || date -Iseconds)'",
"denoVersion": "'$(deno --version | head -1 | cut -d' ' -f2)'",
"targetDirectory": "'$(pwd)/$ARGUMENTS'",
"scaffoldingSteps": [],
"freshVersion": "2.0.0-alpha.34",
"status": "initializing"
}' > /tmp/fresh-scaffold-$SESSION_ID.jsonSTEP 2: Pre-scaffolding validation and environment preparation
TRY:
IF project_name is empty OR contains invalid characters:
IF directory already exists:
echo "📁 Existing directory contents:"
eza -la "$ARGUMENTS" 2>/dev/null || ls -la "$ARGUMENTS"
if fd "deno.json" "$ARGUMENTS" >/dev/null; then
echo "🦕 Existing Deno project detected"
bat "$ARGUMENTS/deno.json" 2>/dev/null | head -20
fiIF Deno not installed OR version incompatible:
STEP 3: Execute Fresh 2.0 scaffolding with modern patterns
TRY:
**Primary Scaffolding Strategy (Fresh 2.0 Official):**
# Use Fresh 2.0 alpha initializer echo "🚀 Initializing Fresh 2.0 project: $ARGUMENTS" deno run -Ar jsr:@fresh/init@2.0.0-alpha.34 "$ARGUMENTS"
**Enhanced Configuration Integration:**
# Navigate to project directory cd "$ARGUMENTS" # Verify Fresh 2.0 structure echo "📦 Fresh 2.0 project structure:" eza -la --tree --level=2 2>/dev/null || find . -type f -name "*.ts" -o -name "*.tsx" -o -name "*.json" | head -10 # Display key configuration files echo "⚙️ Core configuration:" if [ -f "deno.json" ]; then echo "📄 deno.json:" bat deno.json 2>/dev/null || cat deno.json fi if [ -f "fresh.config.ts" ]; then echo "🔧 fresh.config.ts:" bat fresh.config.ts 2>/dev/null || cat fresh.config.ts fi
STEP 4: Fresh 2.0 optimization and best practices integration
**Configure Modern Development Workflow:**
# Enhance deno.json with comprehensive tasks
if [ -f "deno.json" ]; then
echo "🔧 Enhancing deno.json with modern workflow tasks"
# Backup original
cp deno.json deno.json.backup
# Add enhanced task configuration
jq '.tasks += {
"init": "deno cache --reload --node-modules-dir=auto main.ts",
"check": "deno check **/*.ts **/*.tsx",
"fmt": "deno fmt",
"lint": "deno lint",
"test": "deno test --allow-all",
"test:watch": "deno test --allow-all --watch",
"up": "deno task dev",
"ci": "deno task check && deno task lint && deno task test"
}' deno.json > deno.json.tmp && mv deno.json.tmp deno.json
fi**Apply Fresh 2.0 Best Practices:**
# Create enhanced CSS fallback strategy (Fresh 2.0 Tailwind plugin reliability)
echo "🎨 Setting up Tailwind CSS fallback strategy"
echo '@tailwind base;
@tailwind components;
@tailwind utilities;
/* Fresh 2.0 Tailwind Plugin Fallbacks */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.p-4 { padding: 1rem; }
.m-4 { margin: 1rem; }
.bg-gray-100 { background-color: #f3f4f6; }
.text-gray-900 { color: #111827; }
.rounded { border-radius: 0.375rem; }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }' > static/styles.css
# Create AppShell component pattern
echo "🏗️ Creating AppShell pattern for consistent layouts"
mkdir -p components
echo 'import { ComponentChildren } from "preact";
interface AppShellProps {
children: ComponentChildren;
title?: string;
}
export default function AppShell({ children, title = "Fresh 2.0 App" }: AppShellProps) {
return (
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body class="min-h-screen bg-gray-100">
<main class="min-h-screen flex items-center justify-center">
{children}
</main>
</body>
</htmA lightweight (~46kB) and comprehensive CLI tool for managing Claude commands, configurations, and workflows.
Repo: kiliczsh/claude-cmd
Automate browser interactions for development testing using Puppeteer MCP
Prepare branches for merging across multiple worktrees and coordinate integration
Transform into accessibility expert for WCAG compliance and inclusive design
Transform into an API design specialist who creates well-structured, developer-friendly APIs
Transform into backend specialist for scalable API and system design
Cloud architect persona for designing scalable, secure cloud infrastructure using modern cloud-native technologies