What's Next styling guidelines

Details

Raw Data

{
  "id": "23349e29-545f-4a9c-91e1-9a4fd8cac446",
  "type": "general",
  "status": "completed",
  "title": "What's Next styling guidelines",
  "description": "HTML/CSS code for the What's Next section in kontask cards",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\">\n<h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">What's Next Section - Styling Guide</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#98c379;margin:0 0 12px 0;font-family:sans-serif;\">From CLAUDE.md Guidelines</h3>\n<p style=\"font-family:sans-serif;line-height:1.6;margin:0 0 12px 0;\">Every OUTPUT kontask should end with a suggested next action. The format is:</p>\n<pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;overflow-x:auto;line-height:1.6;font-size:0.9rem;\"><code>&lt;div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;\"&gt;\n  &lt;h4 style=\"margin:0 0 12px 0;color:#fff;\"&gt;What's Next?&lt;/h4&gt;\n  &lt;p style=\"color:#e0e0e0;margin:0;\"&gt;Suggested actions based on context...&lt;/p&gt;\n&lt;/div&gt;</code></pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;font-family:sans-serif;\">Full HTML Example (as used in Termux response)</h3>\n<pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;overflow-x:auto;line-height:1.6;font-size:0.85rem;\"><code><span style=\"color:#e5c07b;\">&lt;div</span> <span style=\"color:#c678dd;\">style=</span><span style=\"color:#98c379;\">\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;\"</span><span style=\"color:#e5c07b;\">&gt;</span>\n  <span style=\"color:#e5c07b;\">&lt;h4</span> <span style=\"color:#c678dd;\">style=</span><span style=\"color:#98c379;\">\"margin:0 0 12px 0;color:#fff;\"</span><span style=\"color:#e5c07b;\">&gt;</span>What's Next?<span style=\"color:#e5c07b;\">&lt;/h4&gt;</span>\n  <span style=\"color:#e5c07b;\">&lt;p</span> <span style=\"color:#c678dd;\">style=</span><span style=\"color:#98c379;\">\"color:#9ca3af;margin:0;\"</span><span style=\"color:#e5c07b;\">&gt;</span>Would you like me to:<span style=\"color:#e5c07b;\">&lt;/p&gt;</span>\n  <span style=\"color:#e5c07b;\">&lt;ul</span> <span style=\"color:#c678dd;\">style=</span><span style=\"color:#98c379;\">\"color:#e0e0e0;margin:8px 0 0 0;padding-left:20px;line-height:1.8;\"</span><span style=\"color:#e5c07b;\">&gt;</span>\n    <span style=\"color:#e5c07b;\">&lt;li&gt;</span>Look up the latest Claude Code system requirements?<span style=\"color:#e5c07b;\">&lt;/li&gt;</span>\n    <span style=\"color:#e5c07b;\">&lt;li&gt;</span>Research any specific Termux compatibility issues?<span style=\"color:#e5c07b;\">&lt;/li&gt;</span>\n    <span style=\"color:#e5c07b;\">&lt;li&gt;</span>Find alternative mobile workflows for Claude?<span style=\"color:#e5c07b;\">&lt;/li&gt;</span>\n  <span style=\"color:#e5c07b;\">&lt;/ul&gt;</span>\n<span style=\"color:#e5c07b;\">&lt;/div&gt;</span></code></pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;font-family:sans-serif;\">Key CSS Properties</h3>\n<table style=\"width:100%;border-collapse:collapse;font-family:sans-serif;font-size:0.9rem;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<th style=\"text-align:left;padding:8px;color:#fff;\">Element</th>\n<th style=\"text-align:left;padding:8px;color:#fff;\">Style</th>\n</tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\">\n<td style=\"padding:8px;\">Container</td>\n<td style=\"padding:8px;\"><code style=\"color:#98c379;\">background:#2d2d2d; padding:16px; border-radius:6px; margin-top:16px;</code></td>\n</tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\">\n<td style=\"padding:8px;\">Heading (h4)</td>\n<td style=\"padding:8px;\"><code style=\"color:#98c379;\">margin:0 0 12px 0; color:#fff;</code></td>\n</tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\">\n<td style=\"padding:8px;\">Intro text (p)</td>\n<td style=\"padding:8px;\"><code style=\"color:#98c379;\">color:#9ca3af; margin:0;</code></td>\n</tr>\n<tr>\n<td style=\"padding:8px;\">List (ul)</td>\n<td style=\"padding:8px;\"><code style=\"color:#98c379;\">color:#e0e0e0; margin:8px 0 0 0; padding-left:20px; line-height:1.8;</code></td>\n</tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#56b6c2;margin:0 0 12px 0;font-family:sans-serif;\">Color Palette (One Dark Theme)</h3>\n<div style=\"display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:sans-serif;font-size:0.9rem;\">\n<div><span style=\"display:inline-block;width:16px;height:16px;background:#2d2d2d;border-radius:3px;vertical-align:middle;margin-right:8px;\"></span><code>#2d2d2d</code> - Section bg</div>\n<div><span style=\"display:inline-block;width:16px;height:16px;background:#fff;border-radius:3px;vertical-align:middle;margin-right:8px;\"></span><code>#fff</code> - Headings</div>\n<div><span style=\"display:inline-block;width:16px;height:16px;background:#9ca3af;border-radius:3px;vertical-align:middle;margin-right:8px;\"></span><code>#9ca3af</code> - Secondary text</div>\n<div><span style=\"display:inline-block;width:16px;height:16px;background:#e0e0e0;border-radius:3px;vertical-align:middle;margin-right:8px;\"></span><code>#e0e0e0</code> - Body text</div>\n</div>\n</div>\n\n<div style=\"background:#1a3a1a;border:1px solid #22c55e;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h4 style=\"color:#22c55e;margin:0 0 8px 0;font-family:sans-serif;\">Live Preview</h4>\n<p style=\"font-family:sans-serif;margin:0 0 12px 0;color:#e0e0e0;\">Here's what it looks like rendered:</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:16px;\">\n<h4 style=\"margin:0 0 12px 0;color:#fff;\">What's Next?</h4>\n<p style=\"color:#9ca3af;margin:0;\">Would you like me to:</p>\n<ul style=\"color:#e0e0e0;margin:8px 0 0 0;padding-left:20px;line-height:1.8;\">\n<li>Show alternative variations (compact, with icons)?</li>\n<li>Add this to CLAUDE.md with more examples?</li>\n<li>Create a snippet library for common patterns?</li>\n</ul>\n</div>\n</div>",
    "requestedAt": "2026-01-03T10:05:00Z",
    "requestId": "70d579a8-b5f1-4d65-a646-c9e53aff1305"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T22:39:39.516Z",
  "updatedAt": "2026-01-02T22:39:39.668Z",
  "requestId": "70d579a8-b5f1-4d65-a646-c9e53aff1305",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "ui",
    "styling"
  ],
  "targetUser": "claude"
}