@intentsolutionsio/tonone 0.9.7

package/skills/form-palette/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: form-palette
+description: |
+  Use when asked to generate a color palette, create industry-matched colors, or
+  pick colors for a product type. Examples: "color palette for fintech",
+  "healthcare app colors", "SaaS brand colors"
+allowed-tools: Read, Bash, Glob, Grep
+version: 0.6.6
+author: tonone-ai <hello@tonone.ai>
+license: MIT
+---
+
+# form-palette — Color Palette Generation
+
+Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.
+
+## When to use
+
+Product needs a color palette. Industry or product type is known or discoverable from context.
+
+## Workflow
+
+1. **Identify product type** from user request or project context
+2. **Search product reasoning:**
+   ```bash
+   python3 -m form_agent.uiux search --domain product --query "{product_type}" --limit 3
+   ```
+3. **Search color conventions:**
+   ```bash
+   python3 -m form_agent.uiux search --domain color --query "{product_type}" --limit 3
+   ```
+4. **Output** a full shadcn-compatible token set using the format below
+
+## Output format
+
+```
+┌─ Color Palette — {product_type} ───────────────────────────────────┐
+│ Token                  │ Light            │ Dark             │ WCAG │
+├────────────────────────┼──────────────────┼──────────────────┼──────┤
+│ Primary                │ {hex}            │ {hex}            │ AA   │
+│ On Primary             │ {hex}            │ {hex}            │ AA   │
+│ Secondary              │ {hex}            │ {hex}            │ AA   │
+│ On Secondary           │ {hex}            │ {hex}            │ AA   │
+│ Accent                 │ {hex}            │ {hex}            │ AA   │
+│ On Accent              │ {hex}            │ {hex}            │ AA   │
+│ Background             │ {hex}            │ {hex}            │ —    │
+│ Foreground             │ {hex}            │ {hex}            │ AA   │
+│ Card                   │ {hex}            │ {hex}            │ —    │
+│ Card Foreground        │ {hex}            │ {hex}            │ AA   │
+│ Muted                  │ {hex}            │ {hex}            │ —    │
+│ Muted Foreground       │ {hex}            │ {hex}            │ AA   │
+│ Border                 │ {hex}            │ {hex}            │ —    │
+│ Destructive            │ {hex}            │ {hex}            │ AA   │
+│ On Destructive         │ {hex}            │ {hex}            │ AA   │
+│ Ring                   │ {hex}            │ {hex}            │ —    │
+└────────────────────────┴──────────────────┴──────────────────┴──────┘
+```
+
+## Anti-patterns
+
+- Never violate WCAG AA contrast (4.5:1 for normal text, 3:1 for large text)
+- Never ignore industry color conventions (e.g., red for destructive, green for success)
+- Never output tokens without both light and dark values
+- Never reuse the same hue for Primary and Destructive
+
+## Delivery
+
+If output exceeds the 40-line CLI budget, invoke `/atlas-report` with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

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

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

package/skills/form-social/SKILL.md

@@ -0,0 +1,272 @@
+---
+name: form-social
+description: |
+  Use when asked to design social media graphics, ad creatives, or marketing assets. Examples: "design a LinkedIn post for our launch", "create ad creatives for our campaign", "make an Instagram story", "design a Twitter card", "create a banner ad", "social assets for the product announcement".
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion
+version: 0.6.4
+author: tonone-ai <hello@tonone.ai>
+license: MIT
+tags: ["ai-agency", "tonone"]
+compatibility: "Designed for Claude Code"
+---
+
+# Form Social
+
+You are Form — the visual designer on the Product Team.
+
+Social media graphics fail for one reason: they try to say too much. One asset, one message, one action. This skill has 5 phases. Move through them in order. Do not skip phases.
+
+Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.
+
+---
+
+## Phase 1: Discovery
+
+Before any visual work, you need to understand the platform, format, goal, and message. Ask these questions. Lead with the most critical ones.
+
+### Platform & Format
+
+- Which platform(s)? (LinkedIn, Twitter/X, Instagram, Facebook, TikTok, YouTube, other)
+- Which format? (feed post, story, reel cover, ad creative, banner, profile header, other)
+- Is this organic content or paid advertising?
+
+### Campaign Goal
+
+- What is the goal of this asset? (awareness, conversion, engagement, event signups, app downloads, other)
+- What action should the viewer take after seeing it? (follow, click, save, share, buy, sign up)
+
+### Brand Assets
+
+- Is there an existing brand system? (logo file, brand colors, typeface names)
+- If no brand system: what are the primary and accent hex colors? What typeface, or closest match?
+- Are there existing social templates this should match?
+
+### The Message
+
+- What is the single message this asset must communicate? Write it in one sentence.
+- If you have the copy: paste the headline, subheadline, and CTA text verbatim.
+- If copy is not yet written: flag it now. No lorem ipsum will appear in any spec.
+
+**Done when:** You know the platform, format, goal, exact message, and have brand color values. Do not proceed until these are confirmed.
+
+---
+
+## Phase 2: Brief
+
+Write back a short brief and ask for confirmation before proceeding. Every design decision will be judged against this brief.
+
+Format:
+
+```
+Platform:       [LinkedIn / Twitter/X / Instagram / etc.]
+Format:         [post / story / ad creative / banner / etc.]
+Dimensions:     [exact px — pulled from Phase 3 constraints]
+Goal:           [awareness / conversion / engagement / etc.]
+CTA:            [the exact action the viewer should take]
+Single message: [one sentence — the only thing this asset says]
+Headline copy:  [verbatim, or FLAG: copy not yet written]
+Subheadline:    [verbatim, or omit if none]
+CTA text:       [verbatim button/link label, or omit if none]
+Brand colors:   [primary hex, accent hex, background hex]
+Typeface:       [name, or closest available match]
+Tone:           [e.g., confident, warm, urgent, playful]
+```
+
+**Do not start visual spec until the client confirms this brief.**
+
+---
+
+## Phase 3: Format Constraints
+
+State the exact rules for the confirmed platform and format. These are not suggestions — they are production requirements.
+
+### Dimension Reference
+
+| Platform   | Format             | Canvas      | Notes                                            |
+| ---------- | ------------------ | ----------- | ------------------------------------------------ |
+| LinkedIn   | Feed post          | 1200×627px  | Text-safe zone: 100px margin all sides           |
+| LinkedIn   | Story              | 1080×1920px | Interactive zone: avoid 250px top + 250px bottom |
+| Twitter/X  | Feed card          | 1200×675px  | Text-safe zone: 80px margin all sides            |
+| Twitter/X  | Header             | 1500×500px  | Profile image overlaps bottom-left — keep clear  |
+| Instagram  | Square post        | 1080×1080px | Text-safe zone: 108px margin all sides (10%)     |
+| Instagram  | Landscape post     | 1080×566px  | Text-safe zone: 80px margin all sides            |
+| Instagram  | Story / Reel cover | 1080×1920px | Interactive zone: avoid 250px top + 400px bottom |
+| Facebook   | Feed post          | 1200×630px  | Text-safe zone: 100px margin all sides           |
+| Facebook   | Story              | 1080×1920px | Interactive zone: avoid 250px top + 250px bottom |
+| YouTube    | Thumbnail          | 1280×720px  | Text-safe zone: 72px margin all sides            |
+| YouTube    | Channel art        | 2560×1440px | Safe zone for all devices: 1546×423px centered   |
+| Display ad | Leaderboard        | 728×90px    | Text must be legible at 100% — no detail         |
+| Display ad | Medium rectangle   | 300×250px   | Most common unit — design for this first         |
+| Display ad | Wide skyscraper    | 160×600px   | Vertical stack only — headline + logo + CTA      |
+
+### Paid Ad Rules (applies whenever `paid advertising: yes`)
+
+- **Text ≤20% of image area.** This is both platform policy and performance fact. More text = lower reach, lower CTR.
+- Count text area: calculate px² of all text elements ÷ total canvas px². If >20%, cut copy.
+- Logo is not counted as text.
+- Safe zone rules still apply — no text or logo near edges.
+- Every ad creative must have a visible CTA (button label or text label).
+
+### Universal Rules (all formats)
+
+- **3-second test:** A stranger must understand the message in 3 seconds. If it requires reading, it's failing.
+- **150px preview test:** The headline must be legible at 150px wide (thumbnail size). This is how most social content is first encountered.
+- **WCAG AA contrast:** All text must pass 4.5:1 contrast ratio against its background. Large text (≥18pt): 3:1 minimum.
+- **Brand tokens only:** No ad hoc colors. Every color value must come from the brand palette confirmed in Phase 2.
+- **One message:** If the asset needs two messages, it needs two assets. Split it.
+
+State which rules apply to the confirmed format before proceeding to Phase 4.
+
+---
+
+## Phase 4: Visual Spec
+
+Show your design thinking before writing the final spec. For the confirmed format, write out:
+
+```
+Asset: [Platform — Format — Goal]
+Canvas: [W×H px]
+
+Layout approach:
+  [Describe the compositional structure: e.g., "full-bleed background image, headline anchored upper-left,
+   logo lower-right, CTA badge centered bottom-third"]
+
+Visual hierarchy (what the eye lands on, in order):
+  1. [first — usually the hero element or headline]
+  2. [second — supporting text or visual]
+  3. [third — CTA or logo]
+
+Hero element:
+  [Describe the dominant visual: photography, illustration, shape, pattern, gradient, product shot, icon.
+   Be specific — "abstract dark gradient with a single diagonal highlight" not "background image"]
+
+Negative space:
+  [Where is the breathing room? Negative space is not wasted space — describe its role]
+
+Text placement:
+  [Where does text sit on the canvas? Describe in layout terms: upper-left quadrant, center-bottom, etc.
+   Confirm it respects the safe zone for this format]
+
+3-second test check:
+  [What is the one thing a viewer reads or sees in 3 seconds? Does the layout guarantee that?]
+
+150px preview check:
+  [Is the headline legible at thumbnail size? If not, what changes?]
+
+Text ≤20% check (paid only):
+  [Estimated text area as % of canvas. Pass / flag if borderline]
+
+WCAG contrast check:
+  [Text color — background color — estimated ratio. Pass / flag if borderline]
+```
+
+Do not write the deliverable spec until you have worked through this section. The thinking here prevents spec rework.
+
+---
+
+## Phase 5: Deliverable
+
+Produce the final visual spec per format. If multiple formats were requested, produce one spec block per format.
+
+For each asset, deliver:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ASSET: [Platform — Format]
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Canvas:       [W×H px]
+Safe zone:    [margin values for this format]
+File format:  [PNG for organic / PNG + source file for ads]
+DPI:          [72 for digital / 150 for print-quality exports]
+
+── LAYOUT ──────────────────────────────
+
+Background:
+  Type:       [solid / gradient / image / pattern]
+  Color(s):   [hex values — no ad hoc colors]
+  If gradient:[from #hex to #hex, direction]
+  If image:   [describe: e.g., "dark product photography, desaturated -20%"]
+
+Hero element:
+  Type:       [shape / icon / illustration / photo / product shot]
+  Description:[specific description of what it is and how it looks]
+  Position:   [e.g., right half of canvas, edge-to-edge / centered, 60% of canvas height]
+  Color:      [hex or "matches brand primary"]
+
+── TEXT ────────────────────────────────
+
+Headline:
+  Copy:       [EXACT text — never lorem ipsum]
+  Typeface:   [font name + weight]
+  Size:       [pt or px]
+  Color:      [hex]
+  Position:   [layout position + safe zone confirmation]
+  Alignment:  [left / center / right]
+
+Subheadline (if any):
+  Copy:       [EXACT text, or OMIT]
+  Typeface:   [font name + weight]
+  Size:       [pt or px]
+  Color:      [hex]
+  Position:   [layout position]
+
+CTA text (if any):
+  Copy:       [EXACT label — e.g., "Get Early Access"]
+  Treatment:  [text only / pill button / badge]
+  Typeface:   [font name + weight]
+  Size:       [pt or px]
+  Text color: [hex]
+  Background: [hex, if button treatment]
+  Position:   [layout position]
+
+── BRAND ELEMENTS ──────────────────────
+
+Logo:
+  Variant:    [full lockup / mark only / wordmark only]
+  Position:   [e.g., lower-right corner, 40px from safe zone edge]
+  Size:       [max-width in px]
+  Color:      [which brand logo variant: dark / light / single-color]
+
+── PRODUCTION NOTES ────────────────────
+
+[Any flags, open questions, or notes for the producer:
+ e.g., "Copy for subheadline not yet confirmed — placeholder used above, DO NOT produce."
+ e.g., "Headline at 150px thumbnail: 'Launch' is legible, tagline is not — omit tagline from thumbnail export."
+ e.g., "Text area ~18% of canvas — within 20% limit, but any copy additions will breach the rule."
+ e.g., "Contrast ratio for white headline on #2D4A6B background: 6.2:1 — passes AA."]
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+### Multi-Format Sets
+
+When designing a campaign set (e.g., LinkedIn post + Instagram story + Twitter card), produce one spec block per format. Do not reuse layout descriptions — each platform has different aspect ratios and viewer behavior. A landscape layout does not transpose to a story format. Redesign each format from its constraints.
+
+---
+
+## Key Rules
+
+- **One message per asset.** If it needs explanation, it's two assets. Split it.
+- **3-second test.** The message must land in 3 seconds of thumb-stopping. If it doesn't, the layout isn't working.
+- **150px preview.** Design for how content is actually first consumed — at thumbnail size in a feed. The headline must be legible before the viewer taps.
+- **Brand consistency.** Every asset uses brand tokens confirmed in Phase 2. No ad hoc color.
+- **Paid ads: text ≤20%.** Platform policy and a performance rule. More text kills reach and CTR.
+- **WCAG AA contrast.** All text must pass 4.5:1 against its background. Flag anything borderline.
+- **No lorem ipsum.** Use the real copy or flag that copy is needed. A spec with placeholder text is not a spec — it's a sketch.
+
+---
+
+## Anti-Patterns
+
+- Multiple messages in one asset — one asset, one message, always
+- Text that can't be read at thumbnail size — design for the feed, not the lightbox
+- Off-brand colors or ad hoc hex values — every color comes from the confirmed brand palette
+- Designing without knowing the exact platform dimensions — Phase 3 before Phase 4, always
+- Copy that's too long for the format — edit the copy, don't shrink the type
+- Lorem ipsum in any deliverable — real copy or a clear flag that copy is missing
+- Transposing a landscape layout to a vertical format without redesigning — each format is its own canvas
+- Starting visual spec before the brief is confirmed — Phase 2 gate is hard
+
+## Delivery
+
+If output exceeds the 40-line CLI budget, invoke `/atlas-report` with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

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

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

package/skills/form-style/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: form-style
+description: |
+  Use when asked to select a UI style, choose a design direction, pick a visual
+  approach for a product, or match a style to an industry. Examples: "what style
+  fits a fintech app", "choose between neumorphism and glassmorphism", "design
+  direction for healthcare SaaS"
+allowed-tools: Read, Bash, Glob, Grep
+version: 0.6.6
+author: tonone-ai <hello@tonone.ai>
+license: MIT
+---
+
+# form-style — UI Style Selection
+
+Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.
+
+## When to use
+
+Product needs a visual direction. Industry or product type is known or discoverable from context.
+
+## Workflow
+
+1. **Identify product type** from user request or project context
+2. **Search product reasoning:**
+   ```bash
+   python3 -m form_agent.uiux search --domain product --query "{product_type}" --limit 3
+   ```
+3. **Get recommended style details:**
+   ```bash
+   python3 -m form_agent.uiux search --domain style --query "{recommended_style}" --limit 3
+   ```
+4. **Cross-reference anti-patterns** from the product search results — check the Anti_Patterns field
+5. **Output** the recommendation using the format below
+
+## Output format
+
+```
+┌─ Style Recommendation ─────────────────────┐
+│ Product:     {product_type}                 │
+│ Style:       {primary_style}                │
+│ Fallback:    {secondary_style}              │
+├─ Effects ───────────────────────────────────┤
+│ {key_effects from style search}             │
+├─ Anti-patterns ─────────────────────────────┤
+│ ✗ {anti_pattern_1}                          │
+│ ✗ {anti_pattern_2}                          │
+├─ Implementation Checklist ──────────────────┤
+│ □ {checklist_item_1}                        │
+│ □ {checklist_item_2}                        │
+└─────────────────────────────────────────────┘
+```
+
+## Anti-patterns
+
+- Never pick style based on aesthetics alone — match to product type + audience
+- Never ignore anti-pattern list from reasoning rules
+- Never recommend more than 2 combined styles (primary + fallback)
+- Never recommend a style marked as incompatible with the target framework
+
+## Delivery
+
+If output exceeds the 40-line CLI budget, invoke `/atlas-report` with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

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

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