# Interactive Checklist Skill > Build interactive checklist, task tracker, and action item web apps as self-contained HTML files. Outputs single-file HTML with inline CSS and JS, deployable to Vercel via drag-and-drop. Features include multi-open accordions, per-item notes with HAS NOTES badges, structured markdown export for LLM consumption, checkbox state management with progress tracking, tabbed navigation by execution context, copy-to-clipboard on all code blocks, MANDATORY TRIGGERS: checklist, task tracker, action items, task list, to-do list, runbook tracker, step tracker, interactive checklist, checklist web app, task tracker app. - Skill: `fullrefit/interactive-checklist-skill` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add fullrefit/interactive-checklist-skill` - Raw SKILL.md: https://api.skillmd.com/api/skills/fullrefit/interactive-checklist-skill/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: fullREFIT (https://skillmd.com/u/fullrefit) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/fullrefit/interactive-checklist-skill --- # Interactive Checklist Skill Build production-quality interactive checklist web apps from task lists, action items, runbooks, or step-by-step procedures. Every output is a single self-contained HTML file with all CSS and JS inline — no build step, no framework, deployable to Vercel via drag-and-drop. ## Table of Contents 1. [When to Use](#when-to-use) 2. [Quick Start Workflow](#quick-start-workflow) 3. [Architecture Decision Tree](#architecture-decision-tree) 4. [Core Components](#core-components) 5. [Design System](#design-system) 6. [State Management](#state-management) 7. [Security](#security) 8. [Quality Gate](#quality-gate) 9. [Bundled Resources](#bundled-resources) --- ## When to Use Use this skill when the source content is fundamentally a checklist, task list, action item list, or step-by-step procedure with completion tracking. The primary concern is task completion tracking with notes and export. For content that is a document, report, guide, or reference that happens to contain some checklist elements, use the Universal Web Artifact Execution Prompt instead — its primary concern is information architecture. **Input:** Any format — markdown, plain text, bullet points, structured task list, or full runbook. **Output:** A single `.html` file with all CSS and JS inline. No external dependencies except Google Fonts (Outfit + JetBrains Mono). --- ## Quick Start Workflow ``` STEP 1: ANALYZE Read source content. Count items. Assess per-item complexity. Read references/component-spec.md for component details. ↓ STEP 2: DECIDE ARCHITECTURE Use the Architecture Decision Tree below to determine: - Tab count and grouping strategy - Card complexity (simple / medium / rich) - Persistence model (in-memory vs. localStorage) ↓ STEP 3: BUILD Read references/design-tokens.md for exact CSS values. Read assets/execution-prompt.md for the inline prompt template. Build the complete HTML file. ↓ STEP 4: VERIFY Run the Quality Gate checklist below. Read references/failure-modes.md to check for known anti-patterns. ↓ STEP 5: DELIVER Present the HTML file. Note architecture decisions in 2-3 sentences. End with: "This artifact is ready. Use Publish and Share to generate a link, or copy the source to host anywhere." ``` --- ## Architecture Decision Tree ### Question 1: Where will this run? | Context | Format | Persistence | |---------|--------|-------------| | Claude artifact preview | Self-contained HTML | In-memory JS only. No localStorage. | | Vercel drag-and-drop | Self-contained HTML | localStorage. All state survives reloads. | | Vercel with build step | Multi-file React | Supabase or localStorage for cross-device sync. | **Default:** Build for Claude artifact context (in-memory only). Include a commented-out localStorage persistence layer in the script section. ### Question 2: How many items? | Count | Tab Strategy | |-------|-------------| | 1–8 | No tabs. Single list with Expand All / Collapse All. | | 9–20 | 2–4 content tabs by execution context + 1 Export tab. | | 21–50 | 3–6 tabs with per-tab progress, global progress bar, Hide Completed toggle. | | 50+ | Recommend multi-file deployment. | ### Question 3: Per-item complexity? | Complexity | Rendering | |-----------|-----------| | Simple (title only) | Flat checkbox list, no accordion. | | Medium (title + detail + code) | Accordion card with expand/collapse. | | Rich (steps + code + prerequisites + notes) | Full task card per [`references/component-spec.md`](references/component-spec.md). | --- ## Core Components ### Task Card The atomic unit. Two states: collapsed and expanded. **Collapsed:** Checkbox + title + status badge (ON DECK / COMPLETE) + category badge + effort badge + HAS NOTES badge (gold, visible only when notes exist) + chevron indicator. **Expanded adds:** Description, prerequisite callout (amber box), step-by-step instructions, code blocks with copy buttons, notes textarea. **Checked state:** Title strikethrough, muted color, green left border, badge changes to COMPLETE, card opacity 0.85. For full component anatomy including CSS, see [`references/component-spec.md`](references/component-spec.md). ### Accordion Behavior **Multi-open is mandatory.** Every card toggles independently. Opening one NEVER closes another. Checkbox clicks must NOT trigger the accordion (use `stopPropagation`). ### Toolbar Sticky below hero. Contains: Expand All, Collapse All, Hide Completed toggle, Export to Markdown button. Expand/Collapse scope to active tab only. ### Tab Navigation Group items by execution context (where the work happens), not by topic. Each tab shows completion count: `"Infrastructure (3/6)"`. Final tab is always "Export". All tab panels stay in DOM — toggle visibility, never destroy/recreate. ### Notes System Every task card has a `