Skill Details

Runtime

(claude-4-6-sonnet)

Example user message

[userMessage]: Build me the dashboard screen for my social media manager

Example agent response

Here's your Dashboard screen — warm off-white background, 4 stat cards across the top, scheduled posts list on the left, and quick activity feed on the right. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Creatify — Dashboard</title> <style> :root { --bg: #FAF9F7; --surface: #FFFFFF; --surface-2: #F0EDE8; --surface-3: #E8E4DE; --border: #E5E0D8; --border-2: #D4CFC8; --text: #1A1A1A; --text-2: #6B6560; --text-3: #9C9690; --accent: #D97706; --accent-bg: #FEF3C7; --accent-hover: #B45309; --success: #059669; --success-bg: #D1FAE5; --error: #DC2626; --error-bg: #FEE2E2; --instagram: #E1306C; --facebook: #1877F2; --youtube: #FF0000; --linkedin: #0A66C2; --twitter: #000000; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px; --s6:24px;--s8:32px;--s10:40px; --r-sm:6px;--r-md:10px;--r-lg:16px;--r-full:9999px; --shadow-sm: 0 1px 3px rgba(120,100,60,0.08); --shadow-md: 0 4px 12px rgba(120,100,60,0.10); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'SF Mono', 'Fira Code', monospace; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; height: 100vh; overflow: hidden; } /* Sidebar */ .sidebar { width: 220px; min-width: 220px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--s4); gap: var(--s2); } .sidebar-logo { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); margin-bottom: var(--s4); } .logo-mark { width: 28px; height: 28px; background: var(--accent); color: white; border-radius: var(--r-sm); display: grid; place-items: center; font-weight: 800; font-size: 14px; } .logo-text { font-weight: 700; font-size: 16px; } .sidebar-nav { display: flex; flex-direction: column; gap: var(--s1); flex: 1; } .nav-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); text-decoration: none; color: var(--text-2); font-size: 14px; font-weight: 500; transition: all 0.15s ease; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .sidebar-bottom { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--border); } .avatar-circle { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; cursor: pointer; } /* Main */ .main-content { flex: 1; overflow-y: auto; padding: var(--s8); } .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s8); } .btn { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-sm); border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--font); transition: all 0.15s ease; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-3); } .btn-icon { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s2); cursor: pointer; } /* Stats */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s6); } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--s2); } .stat-header { display: flex; justify-content: space-between; align-items: center; } .stat-label { font-size: 13px; color: var(--text-2); font-weight: 500; } .stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; letter-spacing: -0.5px; } .stat-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); } .stat-badge.positive { background: var(--success-bg); color: var(--success); } .stat-badge.negative { background: var(--error-bg); color: var(--error); } /* Dashboard grid */ .dashboard-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s4); } .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-sm); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); } .post-list { display: flex; flex-direction: column; gap: var(--s3); } .post-list-item { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); border-radius: var(--r-md); transition: background 0.15s; } .post-list-item:hover { background: var(--surface-2); } .post-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; } .post-info { flex: 1; min-width: 0; } .platform-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-full); } .platform-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .platform-badge.instagram { color: var(--instagram); background: #FEE2E8; } .platform-badge.youtube { color: var(--youtube); background: #FEE2E2; } .platform-badge.linkedin { color: var(--linkedin); background: #DBEAFE; } .activity-list { display: flex; flex-direction: column; gap: var(--s3); } .activity-item { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .activity-item:last-child { border-bottom: none; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; } </style> </head> <body> <aside class="sidebar"> <div class="sidebar-logo"> <span class="logo-mark">C</span> <span class="logo-text">Creatify</span> </div> <nav class="sidebar-nav"> <a href="#" class="nav-item active"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg> <span>Dashboard</span> </a> <a href="#" class="nav-item"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> <span>Compose</span> </a> <a href="#" class="nav-item"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> <span>Calendar</span> </a> <a href="#" class="nav-item"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg> <span>Analytics</span> </a> </nav> <div class="sidebar-bottom"> <a href="#" class="nav-item"> <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> <span>Settings</span> </a> <div class="avatar-circle">JD</div> </div> </aside> <main class="main-content"> <div class="page-header"> <div> <h1 style="font-size:24px;font-weight:700;line-height:1.3">Dashboard</h1> <p style="font-size:13px;color:var(--text-3);margin-top:2px">Monday, June 23 · 5 posts scheduled today</p> </div> <button class="btn btn-primary">+ New Post</button> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-header"><span class="stat-label">Total Followers</span><span class="stat-badge positive">+12.4%</span></div> <div class="stat-value">48,291</div> <div style="font-size:13px;color:var(--text-3)">Across all platforms</div> </div> <div class="stat-card"> <div class="stat-header"><span class="stat-label">Posts This Month</span><span class="stat-badge positive">+3</span></div> <div class="stat-value">24</div> <div style="font-size:13px;color:var(--text-3)">6 days remaining</div> </div> <div class="stat-card"> <div class="stat-header"><span class="stat-label">Avg. Engagement</span><span class="stat-badge negative"