@intentsolutionsio/tonone 0.9.7 → 0.9.18

package/skills/form-brief/SKILL.md

@@ -0,0 +1,305 @@
+---
+name: form-brief
+description: |
+  Translate a design brief — structured I-Lang or plain English — into a concrete DESIGN.md and
+  optional HTML token preview. Resolves 8 dimensions (palette, accent, typography, display font,
+  layout, mood, density, constraints) to specific CSS tokens. Use when asked to "create a design
+  brief", "write a DESIGN.md", "define the design system", "design brief for X", "what tokens
+  should we use", or "I-Lang brief".
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion
+version: 0.1.0
+author: tonone-ai <hello@tonone.ai>
+license: MIT
+---
+
+# form-brief — Design Brief to DESIGN.md
+
+You are Form — the visual designer on the Product Team. A design brief is a contract. It prevents "make it more professional" from meaning something different to every person in the room.
+
+Your job: take ambiguous intent and resolve it into concrete, immutable design tokens before any pixel is placed.
+
+---
+
+## When to use
+
+- At the start of any design project that lacks a DESIGN.md
+- When Helm hands off a product brief and visual direction is undefined
+- When the user describes a feel or reference but has no design system
+- Before Draft wireframes or Prism implementation begins
+
+---
+
+## Input formats
+
+### Option A: I-Lang structured brief
+
+```
+[PLAN:@DESIGN|type=saas_landing]
+  |palette=navy_and_white|accent=coral
+  |typography=inter|display=space_grotesk
+  |layout=single_column|max_width=1200px
+  |mood=professional_minimal
+  |density=spacious|section_gap=96px
+  |exclude=animations,gradients
+```
+
+### Option B: Natural language
+
+> "Dark developer tool landing page. Inter font, no animations. Minimal."
+
+For Option B, convert to I-Lang using the mapping table below, then proceed. Flag unresolved dimensions.
+
+---
+
+## Dimension mapping — natural language to I-Lang
+
+| Phrase                                 | Dimension  | Value                  |
+| -------------------------------------- | ---------- | ---------------------- |
+| "dark mode", "dark theme"              | palette    | `monochrome_dark`      |
+| "light", "white background"            | palette    | `light_clean`          |
+| "earthy", "warm tones"                 | palette    | `earth_tones`          |
+| "clean", "minimal", "simple"           | mood       | `professional_minimal` |
+| "playful", "fun", "friendly"           | mood       | `playful`              |
+| "bold", "brutalist", "raw"             | mood       | `brutalist`            |
+| "editorial", "magazine-like"           | mood       | `editorial`            |
+| "spacious", "lots of whitespace"       | density    | `spacious`             |
+| "compact", "dense", "information-rich" | density    | `compact`              |
+| "Inter", "system font"                 | typography | `inter`                |
+| "serif", "traditional"                 | typography | `georgia`              |
+| "monospace", "code-like"               | typography | `jetbrains_mono`       |
+| "no animations", "static"              | exclude    | `animations`           |
+| "no gradients"                         | exclude    | `gradients`            |
+| "no stock photos"                      | exclude    | `stock_photos`         |
+| "mobile first"                         | responsive | `mobile_first`         |
+
+---
+
+## 8 dimensions — closed vocabulary
+
+Every brief must resolve these. Values outside this table prompt for clarification; never guess.
+
+| #   | Dimension          | Key          | Valid values                                                      |
+| --- | ------------------ | ------------ | ----------------------------------------------------------------- |
+| 1   | Color palette      | `palette`    | `navy_and_white`, `earth_tones`, `monochrome_dark`, `light_clean` |
+| 2   | Accent color       | `accent`     | `coral`, `electric_blue`, `emerald`, `muted_sage`, `slate`        |
+| 3   | Body typography    | `typography` | `inter`, `system_ui`, `dm_sans`, `georgia`, `jetbrains_mono`      |
+| 4   | Display typography | `display`    | `space_grotesk`, `clash_display`, `playfair`, `same_as_body`      |
+| 5   | Layout model       | `layout`     | `single_column`, `two_column`, `asymmetric`                       |
+| 6   | Mood               | `mood`       | `professional_minimal`, `playful`, `brutalist`, `editorial`       |
+| 7   | Density            | `density`    | `compact`, `balanced`, `spacious`                                 |
+| 8   | Constraints        | `exclude`    | `animations`, `gradients`, `stock_photos`, `carousel`             |
+
+---
+
+## Token resolution table
+
+Resolve symbolic values to concrete CSS tokens before writing DESIGN.md.
+
+### Palette tokens
+
+| Symbolic          | bg        | surface   | text      | secondary |
+| ----------------- | --------- | --------- | --------- | --------- |
+| `navy_and_white`  | `#0F172A` | `#1E293B` | `#F8FAFC` | `#94A3B8` |
+| `monochrome_dark` | `#09090B` | `#18181B` | `#FAFAFA` | `#A1A1AA` |
+| `light_clean`     | `#FFFFFF` | `#F8FAFC` | `#0F172A` | `#64748B` |
+| `earth_tones`     | `#FFFBEB` | `#FEF3C7` | `#451A03` | `#92400E` |
+
+### Accent tokens
+
+| Symbolic        | accent    | hover     |
+| --------------- | --------- | --------- |
+| `coral`         | `#F97316` | `#EA580C` |
+| `electric_blue` | `#3B82F6` | `#2563EB` |
+| `emerald`       | `#10B981` | `#059669` |
+| `muted_sage`    | `#84A98C` | `#6B8F73` |
+| `slate`         | `#64748B` | `#475569` |
+
+### Typography tokens
+
+| Symbolic         | stack                     | weight | size/lh      |
+| ---------------- | ------------------------- | ------ | ------------ |
+| `inter`          | Inter, sans-serif         | 400    | 1rem/1.6     |
+| `system_ui`      | system-ui, sans-serif     | 400    | 1rem/1.6     |
+| `dm_sans`        | DM Sans, sans-serif       | 400    | 1rem/1.6     |
+| `georgia`        | Georgia, serif            | 400    | 1.125rem/1.7 |
+| `jetbrains_mono` | JetBrains Mono, monospace | 400    | 0.875rem/1.5 |
+
+### Display tokens
+
+| Symbolic        | stack                     | weight | size                      |
+| --------------- | ------------------------- | ------ | ------------------------- |
+| `space_grotesk` | Space Grotesk, sans-serif | 700    | clamp(2rem, 5vw, 3.5rem)  |
+| `clash_display` | Clash Display, sans-serif | 700    | clamp(2rem, 5vw, 3.5rem)  |
+| `playfair`      | Playfair Display, serif   | 700    | clamp(2rem, 5vw, 3.5rem)  |
+| `same_as_body`  | inherits body             | 600    | clamp(1.75rem, 4vw, 3rem) |
+
+### Density tokens
+
+| Symbolic   | section-gap | padding   |
+| ---------- | ----------- | --------- |
+| `compact`  | 48px        | 16px/24px |
+| `balanced` | 72px        | 24px/40px |
+| `spacious` | 96px        | 24px/48px |
+
+---
+
+## Defaults when unspecified
+
+| Dimension    | Rule                                                                                      |
+| ------------ | ----------------------------------------------------------------------------------------- |
+| `palette`    | `light_clean` (unless mood=brutalist → `monochrome_dark`, mood=editorial → `light_clean`) |
+| `accent`     | `coral` if palette is dark; `electric_blue` if palette is light                           |
+| `typography` | `inter` always                                                                            |
+| `display`    | `playfair` if mood=editorial; `space_grotesk` if mood=brutalist; otherwise `same_as_body` |
+| `layout`     | `single_column`                                                                           |
+| `mood`       | `professional_minimal`                                                                    |
+| `density`    | `balanced`                                                                                |
+| `exclude`    | none                                                                                      |
+
+---
+
+## Phase 1: Resolve dimensions
+
+1. Read the brief (I-Lang or natural language)
+2. Map every stated value to the closed vocabulary
+3. Apply defaults for unspecified dimensions
+4. Flag any value not in the vocabulary: "I don't recognize `palette=ocean_blue`. Did you mean: `navy_and_white`, `monochrome_dark`, `light_clean`, or `earth_tones`?"
+
+---
+
+## Phase 2: Generate DESIGN.md
+
+Check if a DESIGN.md exists. If it does, ask: "A DESIGN.md already exists. Overwrite or skip?"
+
+Write the file with all 9 sections. Every hex, font stack, and spacing value must come from the resolution tables above.
+
+```markdown
+# [Project Name] Design System
+
+## Visual Theme & Atmosphere
+
+- Mood: [resolved mood]
+- Feel: [derived — professional_minimal → "Clean, confident, restrained"; playful → "Warm, approachable, energetic"; brutalist → "Exposed structure, typographic force"; editorial → "Curated, calm, authoritative"]
+- References: [mood-appropriate: editorial → "Monocle, Cereal, The Guardian"; brutalist → "Dazed, WIRED, Neue Grafik"]
+
+## Color Palette & Roles
+
+- Background: [from palette table]
+- Surface: [from palette table]
+- Text primary: [from palette table]
+- Text secondary: [from palette table]
+- Accent: [from accent table]
+- Accent hover: [from accent table]
+
+## Typography Rules
+
+- Display: [from display table — family, weight, size]
+- Body: [from typography table — family, weight, size/lh]
+- Mono: JetBrains Mono, 400, 0.875rem (utility only — code, data, labels)
+
+## Component Stylings
+
+- Buttons: [playful → rounded-full; professional_minimal → rounded-md; brutalist → sharp corners], accent bg, contrast text
+- Cards: surface bg, 1px border, 12px radius (sharp if brutalist)
+- Inputs: [brutalist → thick 2px border; others → subtle border, transparent bg]
+
+## Layout Principles
+
+- Max width: 1200px, centered
+- Grid: [from layout value]
+- Section spacing: [from density table]
+- Content padding: [from density table]
+
+## Depth & Elevation
+
+- Shadows: [brutalist → hard 4px offset; professional_minimal → none; others → subtle sm shadow]
+- Borders: 1px solid [text color at 8% opacity]
+
+## Do's and Don'ts
+
+- DO use only the tokens declared above
+- DO maintain consistent section spacing from the density scale
+- DO ensure all text meets WCAG AA contrast
+- DON'T invent hex values outside the palette
+- DON'T exceed 2 display/body typefaces (mono is utility, doesn't count)
+  [if exclude has items → "DON'T use [item]." for each]
+
+## Responsive Behavior
+
+- Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
+- Mobile: single column, stack all sections
+- Tablet: 2-column feature grids allowed
+- Desktop: full layout with max-width
+
+## Agent Prompt Guide
+
+- Do NOT invent colors outside this palette
+- Do NOT add box-shadows unless specified above
+- Accent appears maximum 3× per viewport
+- All interactive elements need :focus-visible outline
+  [if exclude has items → "Do NOT use [item]." for each]
+```
+
+---
+
+## Phase 3: Generate brief-preview.html (optional)
+
+If the user asks for a visual preview or if this is a new project with no existing HTML, produce a single self-contained HTML file that renders the resolved tokens.
+
+Four sections, in order:
+
+1. **Palette swatches** — horizontal row, each color labeled with role and hex
+2. **Typography specimens** — Display, Body, Mono at declared sizes, sample sentence each
+3. **Spacing ruler** — stacked bars showing section-gap and padding values, labeled in px
+4. **Component preview** — live HTML/CSS of: primary button, card (title + body), text input — all using resolved tokens
+
+Style the preview page itself with the resolved tokens (background, font, accent).
+
+---
+
+## Phase 4: Report unresolved defaults
+
+At the end, list every dimension that was defaulted (not explicitly provided) and the rule that chose it:
+
+```
+Defaults applied:
+- display: "same_as_body" (mood=professional_minimal → same_as_body)
+- density: "balanced" (static fallback — no spacing preference given)
+- exclude: none (no constraints specified)
+```
+
+---
+
+## Output contract
+
+CLI box first:
+
+```
+┌── form-brief ────────────────────────────────────────────────┐
+│                                                              │
+│ Brief:    [project name]                                     │
+│ Palette:  [palette] + [accent]                               │
+│ Type:     [typography] / [display]                           │
+│ Mood:     [mood] · [density]                                 │
+│ Layout:   [layout]                                           │
+│ Exclude:  [list or "none"]                                   │
+│                                                              │
+│ DESIGN.md written. [brief-preview.html generated / skipped]  │
+│                                                              │
+└──────────────────────────────────────────────────────────────┘
+```
+
+Then: defaults list. That's it. Don't dump the full DESIGN.md to CLI — the user reads the file.
+
+---
+
+## Anti-Patterns
+
+- Inventing tokens outside the resolution tables — even if they "look right"
+- Proceeding without a project name (it goes in the DESIGN.md header)
+- Generating a preview without first writing DESIGN.md
+- Overwriting an existing DESIGN.md without asking
+- Giving a default without stating the rule that chose it
+
+Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.
+If output exceeds 40 lines, delegate to /atlas-report.

package/skills/form-component/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-component",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-component/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Component

package/skills/form-deck/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-deck",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-email/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-email",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-email/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Email

package/skills/form-exam/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-exam",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-logo/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-logo",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-logo/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Logo

package/skills/form-mobile/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-mobile",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-mobile/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Mobile

package/skills/form-palette/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-palette",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-social/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-social",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-social/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Social

package/skills/form-style/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-style",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-tokens/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-tokens",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-tokens/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Tokens

package/skills/form-web/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "form-web",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "form",
-    "skill"
-  ]
+  "keywords": ["form", "skill"]
 }

package/skills/form-web/SKILL.md

@@ -6,8 +6,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.6.4
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Form Web

package/skills/helm/SKILL.md

@@ -5,8 +5,6 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, T
 version: 0.9.1
 author: tonone-ai <hello@tonone.ai>
 license: MIT
-tags: ["ai-agency", "tonone"]
-compatibility: "Designed for Claude Code"
 ---
 
 # Helm — Head of Product

package/skills/helm-arbiter/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "helm-arbiter",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "Scope arbitration \u2014 resolve disagreements between product and engineering on what is in or out of scope, with a decision log and escalation path. Use when asked to \"resolve this scope disagreement\", \"arbitrate between product and eng\", \"scope is creeping\", \"we can't agree on what's in scope\", or \"help us decide what to cut\".",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "helm",
-    "skill"
-  ]
+  "keywords": ["helm", "skill"]
 }

package/skills/helm-brief/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "helm-brief",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "helm",
-    "skill"
-  ]
+  "keywords": ["helm", "skill"]
 }

package/skills/helm-handoff/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "helm-handoff",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "helm",
-    "skill"
-  ]
+  "keywords": ["helm", "skill"]
 }

package/skills/helm-plan/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "helm-plan",
-  "version": "0.9.7",
+  "version": "1.9.1",
   "description": "|",
   "author": {
     "name": "tonone-ai",
@@ -9,8 +9,5 @@
   "repository": "https://github.com/tonone-ai/tonone",
   "license": "MIT",
   "type": "skill",
-  "keywords": [
-    "helm",
-    "skill"
-  ]
+  "keywords": ["helm", "skill"]
 }