{
    "id": "bhaskar/issue-triage-inbox",
    "kind": "plan",
    "title": "Issue triage inbox",
    "summary": "A cream issue triage list: issues are assigned or closed as duplicates, the rest move up and the untriaged count drops from 9 to 6.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/issue-triage-inbox/",
    "stack": [
        "CSS",
        "Dashboard",
        "HTML"
    ],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "intermediate",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "An issue inbox with five cards. The first gets an ASSIGNED tag and slides away, a duplicate gets a red CLOSED tag and leaves, the others slide up and the Untriaged counter counts down. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.",
    "steps": [
        {
            "title": "Paste the prompt",
            "body": "One prompt builds the whole inbox.",
            "prompt": "Make a single-file HTML issue triage inbox, 1280x720, warm cream background #f6f3ee, ink #221d16. System fonts, no libraries.\nHeader: H1 \"Issue triage\", a muted \"Needs a decision\" and a right aligned counter \"Untriaged\" with a big number that counts down 9, 8, 7, 6 (CSS @property integer animation with steps).\nFive absolutely positioned white cards (90px tall, 16px radius, soft shadow), each with a coloured priority dot, bold title, meta line (issue number, opener, age) and pills on the right (P1 red, P2 amber, P3 blue, Bug purple, Feature/Docs blue): Checkout fails on Safari 17, Add CSV export to reports, Duplicate of #1990 - login loop, Docs typo on pricing page, Dark mode flicker on load.\nMotion (8 second loop): cards rise in. Card 1 gets a green ASSIGNED tag, slides 28px right then 90px and fades; cards below move up one slot. Card 3 gets a red CLOSED - DUPLICATE tag and leaves the same way. Counter steps down in sync. Reset at the end.\nRespect prefers-reduced-motion. Return only the complete HTML.",
            "done": "",
            "files": []
        },
        {
            "title": "Check the assign move",
            "body": "The first card should get a green tag and slide away.",
            "prompt": "",
            "done": "",
            "files": []
        },
        {
            "title": "Check the duplicate",
            "body": "The duplicate card should get a red tag and leave.",
            "prompt": "",
            "done": "You can see it working in the browser.",
            "files": []
        },
        {
            "title": "Make it real",
            "body": "Replace sample issues with your tracker data.",
            "prompt": "",
            "done": "",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "prompt.md",
            "note": "The full prompt.",
            "file": "prompt",
            "url": "https://ownlyplans.com/bhaskar/issue-triage-inbox/prompt/"
        },
        {
            "type": "markdown",
            "name": "index.html.md",
            "note": "Complete code of the result in the video.",
            "file": "index-html",
            "url": "https://ownlyplans.com/bhaskar/issue-triage-inbox/index-html/"
        }
    ],
    "install": "",
    "how_to_use": "Call get_step with step 1, do it, check \"done when\", then continue."
}