kempo-ui 0.4.7 → 0.4.9

package/AGENTS.md

@@ -96,6 +96,30 @@ Do not prefix identifiers with underscores.
   - Use clear, descriptive names without prefixes.
   - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
 
+## Template and File Structure Rules
+
+### Follow Templates Exactly
+When using templates (task templates, component scaffolds, etc.), follow them **exactly as written**. Do not:
+- Add placeholder text or instructions to sections marked "leave blank"
+- Deviate from the template structure
+- Make creative changes or improvements to the template format
+- Add commentary or helper text beyond what is explicitly requested
+
+### Task Validation Result Sections - Critical Rules
+Task files have two validation sections that follow specific timing rules:
+
+**LLM Validation Results** (fill during step 6: task-validate)
+- **Leave blank** during task-create and task-prepare skills
+- **Fill in completely** during task-validate skill with:
+  - Subheading for each acceptance criterion tested
+  - Subheading for each testing plan item
+  - Pass/fail status with supporting evidence/screenshots
+  - At least one screenshot for visual changes
+
+**User Validation Results** (optionally filled by user during step 7)
+- **Always leave completely blank** — the user may optionally add notes here if they have additional information beyond what was documented in LLM Validation Results
+- Never add placeholder text, never auto-fill this section
+
 ## Development Workflow
 
 ### Local Development Server

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.4.9] - 2026-05-01
+### Changed
+- **Timestamp component**: Enhanced documentation with comprehensive list of supported date/time input formats
+  - Supports EPOCH milliseconds, ISO 8601 (full, date-only, with/without timezone), RFC 2822, JavaScript date strings, US date format, and named month formats
+  - Added interactive examples and important notes about browser compatibility and timezone handling
+  - Updated llms.txt component reference with full format information
+
+## [0.4.3] - 2026-04-30
+### Added
+- Initial CHANGELOG entry. All prior work is condensed into this log entry.
+
+[0.4.3]: https://github.com/dustinpoissant/kempo-ui/releases/tag/v0.4.3

package/dist/components/Timestamp.js

@@ -1 +1 @@
-import{html as t}from"../lit-all.min.js";import e from"./ShadowComponent.js";import s from"../utils/formatTimestamp.js";export default class m extends e{static properties={timestamp:{type:Number,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp=0,this.format="",this.locale=""}render(){const e=this.timestamp?s(this.timestamp,this.format,this.locale||navigator.language):"";return t`<span>${e}</span>`}}window.customElements.define("k-timestamp",m);
+import{html as t}from"../lit-all.min.js";import e from"./ShadowComponent.js";import s from"../utils/formatTimestamp.js";export default class i extends e{static properties={timestamp:{type:String,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp="",this.format="",this.locale=""}render(){const e=this.timestamp?s(this.timestamp,this.format,this.locale||navigator.language):"";return t`<span>${e}</span>`}}window.customElements.define("k-timestamp",i);

package/dist/utils/formatTimestamp.js

@@ -1 +1 @@
-export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||Intl.DateTimeFormat().resolvedOptions().locale)};
+export default(e,i,t)=>{const s=isNaN(e)?Date.parse(e):parseInt(e),l=new Date(s);if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:l.getFullYear(),YY:String(l.getFullYear()).slice(-2),MM:e(l.getMonth()+1,2),M:l.getMonth()+1,DD:e(l.getDate(),2),D:l.getDate(),hh:e(l.getHours(),2),h:l.getHours(),mm:e(l.getMinutes(),2),m:l.getMinutes(),ss:e(l.getSeconds(),2),s:l.getSeconds(),iiii:e(l.getMilliseconds(),3),iii:e(l.getMilliseconds(),3),ii:e(l.getMilliseconds(),2),i:l.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return l.toLocaleString(t||Intl.DateTimeFormat().resolvedOptions().locale)};

package/docs/components/timestamp.html

@@ -495,6 +495,7 @@
           <ul>
             <li><a href="#timeFormat">Time Format</a></li>
           </ul>
+          <a href="#supportedFormats">Supported Input Formats</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -562,6 +563,98 @@
 
 
 
+    <h3 id="supportedFormats"><a href="#supportedFormats" class="no-link">Supported Input Formats</a></h3>
+    <p>The <code>Timestamp</code> component accepts various date/time input formats. The component uses JavaScript's <code>Date.parse()</code> for parsing, which supports multiple standard formats:</p>
+    
+    <div class="table-wrapper mb">
+      <table>
+        <thead>
+          <tr>
+            <th>Format Type</th>
+            <th>Example</th>
+            <th>Notes</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>EPOCH Milliseconds</td>
+            <td><code>1633024800000</code></td>
+            <td>Number value representing milliseconds since January 1, 1970</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (Full)</td>
+            <td><code>2021-10-01T00:00:00Z</code></td>
+            <td>Includes date, time, and UTC timezone indicator</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (Date Only)</td>
+            <td><code>2021-10-01</code></td>
+            <td>Date portion only; time assumed to be midnight in UTC</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (With Timezone)</td>
+            <td><code>2021-10-01T00:00:00+00:00</code></td>
+            <td>Includes timezone offset; can use +/- with hours and minutes</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (No Timezone)</td>
+            <td><code>2021-10-01T00:00:00</code></td>
+            <td>Interpreted as local time</td>
+          </tr>
+          <tr>
+            <td>RFC 2822</td>
+            <td><code>Fri, 01 Oct 2021 00:00:00 GMT</code></td>
+            <td>Email date format with day of week and timezone</td>
+          </tr>
+          <tr>
+            <td>JavaScript Date String</td>
+            <td><code>Fri Oct 01 2021 00:00:00 GMT+0000</code></td>
+            <td>Output format from JavaScript's <code>Date.toString()</code></td>
+          </tr>
+          <tr>
+            <td>US Date Format</td>
+            <td><code>10/01/2021</code></td>
+            <td>MM/DD/YYYY format; ambiguous with international formats</td>
+          </tr>
+          <tr>
+            <td>ISO Date String</td>
+            <td><code>2021-10-01 00:00:00</code></td>
+            <td>YYYY-MM-DD HH:MM:SS format</td>
+          </tr>
+          <tr>
+            <td>Named Month Format</td>
+            <td><code>October 1, 2021</code></td>
+            <td>Month name followed by day and year</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h5>Format Examples</h5>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="ISO 8601">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"2021-10-01T00:00:00Z"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+          <p class="mt">Result:</p>
+          <k-timestamp timestamp="2021-10-01T00:00:00Z"></k-timestamp>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Named Month Format">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"October 1, 2021"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+          <p class="mt">Result:</p>
+          <k-timestamp timestamp="October 1, 2021"></k-timestamp>
+        </k-card>
+      </div>
+    </div>
+
+    <h5>Important Notes</h5>
+    <ul>
+      <li><strong>Browser Compatibility:</strong> Some formats may be parsed differently across browsers. ISO 8601 formats are the most reliable.</li>
+      <li><strong>Timezone Handling:</strong> Formats without explicit timezone information are interpreted as local time. ISO 8601 with <code>Z</code> or timezone offset are interpreted as absolute times.</li>
+      <li><strong>Format String Ambiguity:</strong> Ambiguous formats like <code>10/01/2021</code> may be interpreted differently depending on browser locale settings.</li>
+    </ul>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -574,8 +667,8 @@
     </ul>
 
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h5><code>timestamp<i>: number</i></code></h5>
-    <p>The timestamp to be formatted and displayed. Syncs to <code>timestamp</code> attribute.</p>
+    <h5><code>timestamp<i>: string | number</i></code></h5>
+    <p>The timestamp to be formatted and displayed. Accepts EPOCH milliseconds (number), ISO 8601 formats, RFC 2822 formats, or other JavaScript-parseable date strings. See <a href="#supportedFormats">Supported Input Formats</a> for details. Syncs to <code>timestamp</code> attribute.</p>
     <h5><code>format<i>: string</i></code></h5>
     <p>The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided,
       uses the default format. Syncs to <code>format</code> attribute.</p>

package/docs/src/components/Timestamp.js

@@ -1 +1 @@
-import{html as t}from"../lit-all.min.js";import e from"./ShadowComponent.js";import s from"../utils/formatTimestamp.js";export default class m extends e{static properties={timestamp:{type:Number,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp=0,this.format="",this.locale=""}render(){const e=this.timestamp?s(this.timestamp,this.format,this.locale||navigator.language):"";return t`<span>${e}</span>`}}window.customElements.define("k-timestamp",m);
+import{html as t}from"../lit-all.min.js";import e from"./ShadowComponent.js";import s from"../utils/formatTimestamp.js";export default class i extends e{static properties={timestamp:{type:String,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp="",this.format="",this.locale=""}render(){const e=this.timestamp?s(this.timestamp,this.format,this.locale||navigator.language):"";return t`<span>${e}</span>`}}window.customElements.define("k-timestamp",i);

package/docs/src/utils/formatTimestamp.js

@@ -1 +1 @@
-export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||Intl.DateTimeFormat().resolvedOptions().locale)};
+export default(e,i,t)=>{const s=isNaN(e)?Date.parse(e):parseInt(e),l=new Date(s);if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:l.getFullYear(),YY:String(l.getFullYear()).slice(-2),MM:e(l.getMonth()+1,2),M:l.getMonth()+1,DD:e(l.getDate(),2),D:l.getDate(),hh:e(l.getHours(),2),h:l.getHours(),mm:e(l.getMinutes(),2),m:l.getMinutes(),ss:e(l.getSeconds(),2),s:l.getSeconds(),iiii:e(l.getMilliseconds(),3),iii:e(l.getMilliseconds(),3),ii:e(l.getMilliseconds(),2),i:l.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return l.toLocaleString(t||Intl.DateTimeFormat().resolvedOptions().locale)};

package/docs-src/components/timestamp.page.html

@@ -10,6 +10,7 @@
           <ul>
             <li><a href="#timeFormat">Time Format</a></li>
           </ul>
+          <a href="#supportedFormats">Supported Input Formats</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
           <a href="#constructor">Constructor</a><br />
@@ -77,6 +78,98 @@
 
 
 
+    <h3 id="supportedFormats"><a href="#supportedFormats" class="no-link">Supported Input Formats</a></h3>
+    <p>The <code>Timestamp</code> component accepts various date/time input formats. The component uses JavaScript's <code>Date.parse()</code> for parsing, which supports multiple standard formats:</p>
+    
+    <div class="table-wrapper mb">
+      <table>
+        <thead>
+          <tr>
+            <th>Format Type</th>
+            <th>Example</th>
+            <th>Notes</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>EPOCH Milliseconds</td>
+            <td><code>1633024800000</code></td>
+            <td>Number value representing milliseconds since January 1, 1970</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (Full)</td>
+            <td><code>2021-10-01T00:00:00Z</code></td>
+            <td>Includes date, time, and UTC timezone indicator</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (Date Only)</td>
+            <td><code>2021-10-01</code></td>
+            <td>Date portion only; time assumed to be midnight in UTC</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (With Timezone)</td>
+            <td><code>2021-10-01T00:00:00+00:00</code></td>
+            <td>Includes timezone offset; can use +/- with hours and minutes</td>
+          </tr>
+          <tr>
+            <td>ISO 8601 (No Timezone)</td>
+            <td><code>2021-10-01T00:00:00</code></td>
+            <td>Interpreted as local time</td>
+          </tr>
+          <tr>
+            <td>RFC 2822</td>
+            <td><code>Fri, 01 Oct 2021 00:00:00 GMT</code></td>
+            <td>Email date format with day of week and timezone</td>
+          </tr>
+          <tr>
+            <td>JavaScript Date String</td>
+            <td><code>Fri Oct 01 2021 00:00:00 GMT+0000</code></td>
+            <td>Output format from JavaScript's <code>Date.toString()</code></td>
+          </tr>
+          <tr>
+            <td>US Date Format</td>
+            <td><code>10/01/2021</code></td>
+            <td>MM/DD/YYYY format; ambiguous with international formats</td>
+          </tr>
+          <tr>
+            <td>ISO Date String</td>
+            <td><code>2021-10-01 00:00:00</code></td>
+            <td>YYYY-MM-DD HH:MM:SS format</td>
+          </tr>
+          <tr>
+            <td>Named Month Format</td>
+            <td><code>October 1, 2021</code></td>
+            <td>Month name followed by day and year</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h5>Format Examples</h5>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="ISO 8601">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"2021-10-01T00:00:00Z"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+          <p class="mt">Result:</p>
+          <k-timestamp timestamp="2021-10-01T00:00:00Z"></k-timestamp>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Named Month Format">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-timestamp</span> <span class="hljs-attr">timestamp</span>=<span class="hljs-string">"October 1, 2021"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-timestamp</span>&gt;</span></code></pre>
+          <p class="mt">Result:</p>
+          <k-timestamp timestamp="October 1, 2021"></k-timestamp>
+        </k-card>
+      </div>
+    </div>
+
+    <h5>Important Notes</h5>
+    <ul>
+      <li><strong>Browser Compatibility:</strong> Some formats may be parsed differently across browsers. ISO 8601 formats are the most reliable.</li>
+      <li><strong>Timezone Handling:</strong> Formats without explicit timezone information are interpreted as local time. ISO 8601 with <code>Z</code> or timezone offset are interpreted as absolute times.</li>
+      <li><strong>Format String Ambiguity:</strong> Ambiguous formats like <code>10/01/2021</code> may be interpreted differently depending on browser locale settings.</li>
+    </ul>
+
     <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -89,8 +182,8 @@
     </ul>
 
     <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
-    <h5><code>timestamp<i>: number</i></code></h5>
-    <p>The timestamp to be formatted and displayed. Syncs to <code>timestamp</code> attribute.</p>
+    <h5><code>timestamp<i>: string | number</i></code></h5>
+    <p>The timestamp to be formatted and displayed. Accepts EPOCH milliseconds (number), ISO 8601 formats, RFC 2822 formats, or other JavaScript-parseable date strings. See <a href="#supportedFormats">Supported Input Formats</a> for details. Syncs to <code>timestamp</code> attribute.</p>
     <h5><code>format<i>: string</i></code></h5>
     <p>The format to be used for formatting the timestamp using tokens like YYYY, MM, DD, hh, mm, ss. If not provided,
       uses the default format. Syncs to <code>format</code> attribute.</p>

package/llms.txt

@@ -89,7 +89,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |
 | `<k-theme-switcher>` | `ThemeSwitcher.js` | Theme switcher with segmented and toggle display modes | [theme-switcher.html](https://dustinpoissant.github.io/kempo-ui/components/theme-switcher.html) |
 | `<k-time>` | `Time.js` | Wraps native `<input type="time">` with segmented hour/minute/AM-PM editing; `value` is 24-hour `HH:MM`; `increment` attr sets minute step (arrow-key granularity); `military` attr forces 24-hour display via `lang="en-GB"`; form-associated; fires `change` | [time.html](https://dustinpoissant.github.io/kempo-ui/components/time.html) |
-| `<k-timestamp>` | `Timestamp.js` | Displays a `value` timestamp as human-readable relative time | [timestamp.html](https://dustinpoissant.github.io/kempo-ui/components/timestamp.html) |
+| `<k-timestamp>` | `Timestamp.js` | Displays a formatted timestamp; accepts EPOCH milliseconds, ISO 8601, RFC 2822, and other JavaScript-parseable date formats; `value`/`format`/`locale` attributes | [timestamp.html](https://dustinpoissant.github.io/kempo-ui/components/timestamp.html) |
 | `<k-toast>` `<k-toast-container>` | `Toast.js` | Toast notifications; use `<k-toast-container>` once in page, call `.addToast(options)` | [toast.html](https://dustinpoissant.github.io/kempo-ui/components/toast.html) |
 | `<k-toggle>` | `Toggle.js` | On/off toggle; `value` (Boolean, reflects); methods: `on()`, `off()`, `toggle()`; fires `change`, `on`, `off` | [toggle.html](https://dustinpoissant.github.io/kempo-ui/components/toggle.html) |
 | `<k-tree>` `<k-tree-node>` | `Tree.js` | Expandable tree; nodes have `label`, `icon`, `href`, `expanded` | [tree.html](https://dustinpoissant.github.io/kempo-ui/components/tree.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Timestamp.js

@@ -4,14 +4,14 @@ import formatTimestamp from '../utils/formatTimestamp.js';
 
 export default class Timestamp extends ShadowComponent {
   static properties = {
-    timestamp: { type: Number, reflect: true },
+    timestamp: { type: String, reflect: true },
     format: { type: String, reflect: true },
     locale: { type: String, reflect: true }
   };
 
   constructor() {
     super();
-    this.timestamp = 0;
+    this.timestamp = '';
     this.format = '';
     this.locale = '';
   }
@@ -20,7 +20,7 @@ export default class Timestamp extends ShadowComponent {
     Rendering Logic
   */
   render() {
-    const formattedTime = this.timestamp 
+    const formattedTime = this.timestamp
       ? formatTimestamp(this.timestamp, this.format, this.locale || navigator.language)
       : '';
       

package/src/utils/formatTimestamp.js

@@ -1,5 +1,6 @@
 export default (timestamp, format, forceLocale) => {
-  const date = new Date(parseInt(timestamp));
+  const ms = isNaN(timestamp) ? Date.parse(timestamp) : parseInt(timestamp);
+  const date = new Date(ms);
   if (format) {
     const pad = (num, size) => ('000' + num).slice(size * -1);
     const tokens = {

package/tasks/_template.md

@@ -0,0 +1,39 @@
+# {Task Number} - {Task Description } 
+
+## Status: {Planning | Ready | Blocked | In Progress | Testing | Complete | Released}
+
+## Dependency
+{What other task needs to be completed first before this task can be started, prefer markdown links}
+
+## References
+{What other tasks or resources should the developer/LLM be aware of before starting this task, prefer markdown links}
+
+## Current State
+{How does this feature currently work}
+
+## Aceptance Criteria
+{How does it need to work to consider this task a success}
+
+### In-Scope
+{What are some examples of repos/files/ect that can be changed to do this task}
+
+### Out of Scope
+{What are some examples of repos/files/ect that should not be changed to do this task, if we find a need to, create a new task (in this repo, or that repo)}
+
+## Task Details
+{What steps need to happen to complete this task}
+
+## Testing / Validation Plan
+{How should this task be tested/validated, make sure all of the acceptance criteria is covered by the test plan}
+
+### Testing / Validation Results
+
+#### LLM Validation Results
+**IMPORTANT: DO NOT fill this in during task-create or task-prepare.** This section is filled in during the "task-validate" skill (which is linked from the "task-complete" skill step 6). Include:
+- Subheadings for each acceptance criterion that was validated
+- Subheadings for each item in the testing plan
+- Pass/fail status and details for each item
+- Screenshots or evidence showing validation passed
+
+#### User Validation Results
+**IMPORTANT: Always leave this section completely blank.** The user may optionally add notes here during the "task-complete" skill step 7 of task-complete if they have additional validation information beyond what the LLM documented in the LLM Validation Results section.