npm - @dedesfr/prompter - Versions diffs - 0.8.8 → 0.8.10 - Mend

@dedesfr/prompter 0.8.8 → 0.8.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/CHANGELOG.md +31 -0
package/dist/cli/index.js +1 -1
package/dist/cli/index.js.map +1 -1
package/dist/commands/init.d.ts +1 -0
package/dist/commands/init.d.ts.map +1 -1
package/dist/commands/init.js +57 -5
package/dist/commands/init.js.map +1 -1
package/package.json +1 -1
package/skills/doc-builder/SKILL.md +115 -0
package/skills/doc-builder/references/ui-patterns.md +394 -0
package/skills/document-translator/SKILL.md +58 -0
package/skills/gamma-builder/SKILL.md +134 -0
package/skills/ui-ux-pro/SKILL.md +224 -233
package/skills/ui-ux-pro-v2/SKILL.md +344 -0
package/skills/ui-ux-pro-v2/assets/design-spec-template.md +173 -0
package/skills/ui-ux-pro-v2/references/component-patterns.md +255 -0
package/skills/ui-ux-pro-v2/references/design-principles.md +167 -0
package/src/cli/index.ts +1 -1
package/src/commands/init.ts +63 -5
package/docs/product-spec.md +0 -151
package/docs/tasks.md +0 -3

package/skills/doc-builder/references/ui-patterns.md ADDED Viewed

@@ -0,0 +1,394 @@
+# System Flowcharts - UI Pattern Documentation
+> Reusable pattern for generating interactive system flowchart documentation pages.
+> Mintlify-inspired Classic Light theme, featuring a left sidebar, top navbar, and Mermaid.js diagrams.
+---
+## Table of Contents
+- [Design Tokens](#design-tokens)
+- [Typography](#typography)
+- [Page Structure](#page-structure)
+- [Components](#components)
+  - [Top Navigation Bar](#top-navigation-bar)
+  - [Left Sidebar](#left-sidebar)
+  - [Main Content Area](#main-content-area)
+  - [Flowchart Container](#flowchart-container)
+  - [Mermaid Diagram](#mermaid-diagram)
+  - [Module Cards Grid](#module-cards-grid)
+  - [Flow Steps (Timeline)](#flow-steps-timeline)
+  - [Badges](#badges)
+  - [Legend](#legend)
+- [Mermaid Configuration](#mermaid-configuration)
+- [JavaScript Behavior](#javascript-behavior)
+- [Responsive Breakpoints](#responsive-breakpoints)
+- [Usage Template](#usage-template)
+---
+## Design Tokens
+### Color Palette
+| Token                | Value                          | Usage                    |
+| -------------------- | ------------------------------ | ------------------------ |
+| `--color-primary`    | `#0F172A`                      | Slate 900 - Dark text    |
+| `--color-brand`      | `#18E299`                      | Primary brand green      |
+| `--color-brand-light`| `#d4fae8`                      | Light brand background   |
+| `--color-brand-deep` | `#0fa76e`                      | Deep brand accent text   |
+| `--color-white`      | `#ffffff`                      | Main content background  |
+| `--color-warning`    | `#F59E0B`                      | Amber - Warnings         |
+| `--color-error`      | `#EF4444`                      | Red - Errors/Rejections  |
+| `--color-info`       | `#3B82F6`                      | Blue - Standard Process  |
+| `--color-gray-50`    | `#F9FAFB`                      | Standard light background|
+| `--color-gray-100`   | `#F3F4F6`                      | Subtle hover background  |
+| `--color-gray-500`   | `#6B7280`                      | Secondary text (slate)   |
+| `--color-gray-700`   | `#374151`                      | Primary body text        |
+| `--color-gray-900`   | `#111827`                      | Headings and strong text |
+| `--color-border`     | `#E5E7EB`                      | Standard borders         |
+| `--color-border-medium`| `#D1D5DB`                    | Hover borders            |
+### Core Layout Dimensions
+| Token                    | Value    | Usage                      |
+| ------------------------ | -------- | -------------------------- |
+| `--sidebar-width`        | `260px`  | Width of left sidebar      |
+| `--header-height`        | `60px`   | Height of top sticky nav   |
+| `--content-max-width`    | `880px`  | Max width of reading pane  |
+---
+## Typography
+### Fonts
+| Font             | Weight             | Usage                              |
+| ---------------- | ------------------ | ---------------------------------- |
+| **Inter**        | 400, 500, 600, 700 | Body, headings, main UI elements   |
+| **Geist Mono**   | 400, 500, 600      | Code, tags, badges, step numbers   |
+### Google Fonts Import
+```html
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+```
+---
+## Page Structure
+The layout follows a two-column documentation structure:
+```html
+<body>
+  <div class="layout">
+    <header class="topbar">
+      <!-- Logo and Breadcrumbs -->
+    </header>
+    <div class="layout-body">
+      <aside class="sidebar">
+        <!-- Sidebar Navigation Links -->
+      </aside>
+      <main class="main-content">
+        <div class="content-container">
+          <!-- Page Header (Title, Subtitle, Summary Pills) -->
+          <!-- Flowchart Containers per section -->
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+```
+---
+## Components
+### Top Navigation Bar
+Sticky header with branding and dynamic breadcrumbs.
+```html
+<header class="topbar">
+  <div class="topbar-logo">
+    <svg>...</svg> Docs Logo
+  </div>
+  <div class="topbar-breadcrumbs">
+    <!-- Breadcrumb items -->
+    <span class="active" id="breadcrumb-current">Current Section</span>
+  </div>
+</header>
+```
+**Key styles:**
+- `position: fixed`, `height: 60px`
+- Background: `rgba(255, 255, 255, 0.85)` with `backdrop-filter: blur(12px)`
+- Border bottom: `1px solid var(--color-border)`
+---
+### Left Sidebar
+Fixed navigation menu replacing traditional horizontal tabs.
+```html
+<aside class="sidebar">
+  <div class="sidebar-group">
+    <div class="sidebar-group-title">Category Name</div>
+    <nav class="sidebar-nav">
+      <button class="sidebar-link active" data-tab="overview">
+        <span>Overview</span>
+      </button>
+      <button class="sidebar-link" data-tab="section-1">
+        <span>Section 1</span>
+      </button>
+    </nav>
+  </div>
+</aside>
+```
+**Key styles:**
+- Fixed below topbar, width `260px`
+- Background: `var(--color-gray-50)`
+- Links (`.sidebar-link`): Clean layout with `font-size: 0.875rem`
+- Active State: Background `var(--color-brand-light)`, text `var(--color-brand-deep)`
+---
+### Main Content Area
+Responsive container for readability.
+```html
+<main class="main-content">
+  <div class="content-container">
+    <div class="page-header">
+      <div class="eyebrow">Category</div>
+      <h1>Main Document Title</h1>
+      <p class="subtitle">Document description</p>
+    </div>
+  </div>
+</main>
+```
+**Key styles:**
+- Margin-left matches sidebar width (`260px`)
+- Content max-width constrained to `880px`
+- `padding: 3rem 2rem 5rem` for generous vertical whitespace
+---
+### Flowchart Container
+Wrapper that shows/hides content based on active sidebar link.
+```html
+<section class="flowchart-container" id="tab-id">
+  <!-- Content for this section -->
+</section>
+```
+**Key styles:**
+- `display: none` by default, `display: block` when `.active`
+- Fast entry animation: `fadeIn 0.4s ease` (opacity + translate)
+---
+### Mermaid Diagram
+Container for Mermaid.js rendered flowcharts.
+```html
+<div class="mermaid-container">
+  <h3>Diagram Title</h3>
+  <p class="mermaid-caption">Diagram explanation text.</p>
+  <pre class="mermaid">
+flowchart TD
+    A["Start"] --> B["Process"]
+    B --> C{"Decision"}
+    C -->|Yes| D["Success"]
+    C -->|No| E["Handle Error"]
+  </pre>
+</div>
+```
+**Container styles:**
+- Border: `1px solid var(--color-border)`
+- Border radius: `12px`
+- `overflow-x: auto` allows wide diagrams to scroll horizontally inside the container.
+---
+### Module Cards Grid
+Overview cards for system modules/features.
+```html
+<div class="modules-grid">
+  <article class="module-card">
+    <h3>Module Name</h3>
+    <p>Short description of the module.</p>
+    <div class="badge-row">
+      <span class="badge badge-module">Label</span>
+    </div>
+  </article>
+</div>
+```
+**Key styles:**
+- Grid: `repeat(auto-fill, minmax(320px, 1fr))`
+- Pure white background, subtle `1px solid var(--color-border)` borders
+- Hover effect: elevates shadow and darkens border to `--color-border-medium`
+---
+### Flow Steps (Timeline)
+Vertical timeline with connected step cards.
+```html
+<div class="flow-section">
+  <h3>Timeline Title</h3>
+  <div class="flow-grid">
+    <article class="flow-step">
+      <span class="dot"></span>
+      <h4>Step Title</h4>
+      <p>Description</p>
+    </article>
+  </div>
+</div>
+```
+**Key styles:**
+- Timeline line: `::before` on `.flow-grid` (2px wide, gray-200)
+- Connection dot: rendered via `.dot` element (16px circle, white center, brand green border)
+- Steps inherit hover-elevation styles from `.module-card`
+---
+### Badges
+Inline status indicators.
+```html
+<span class="badge badge-module">MODULE</span>
+<span class="badge badge-status">DEFAULT</span>
+<span class="badge badge-warning">WARNING</span>
+<span class="badge badge-error">ERROR</span>
+```
+| Class            | Background             | Text Color          |
+| ---------------- | ---------------------- | ------------------- |
+| `.badge-module`  | `var(--brand-light)`   | `var(--brand-deep)` |
+| `.badge-status`  | `var(--gray-100)`      | `var(--gray-700)`   |
+| `.badge-warning` | `#FEF3C7` (Amber 100)  | `#D97706` (Amber 600)|
+| `.badge-error`   | `#FEE2E2` (Red 100)    | `#DC2626` (Red 600) |
+---
+### Legend
+Contextual legend placed after diagrams.
+```html
+<div class="legend">
+  <h3>Legend</h3>
+  <div class="legend-items">
+    <div class="legend-item"><div class="legend-icon is-user"></div><span>User Action</span></div>
+    <div class="legend-item"><div class="legend-icon is-system"></div><span>System Process</span></div>
+  </div>
+</div>
+```
+**Icon borders:**
+- User: Brand Green
+- System: Slate 900
+- Warning: Amber
+- Process: Blue
+---
+## Mermaid Configuration
+The design applies custom light-mode variables directly via the `mermaid.initialize` block to harmonize with the UI:
+```javascript
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'base',
+  themeVariables: {
+    darkMode: false,
+    background: '#F9FAFB',
+    mainBkg: '#ffffff',
+    primaryColor: '#111827',
+    primaryTextColor: '#374151',
+    primaryBorderColor: '#18E299',
+    lineColor: '#1f2937',
+    secondaryColor: '#F3F4F6',
+    tertiaryColor: '#E5E7EB',
+    fontFamily: 'Inter, system-ui, sans-serif',
+    fontSize: '13px',
+    edgeLabelBackground: '#ffffff',
+    clusterBkg: '#F9FAFB',
+    clusterBorder: '#E5E7EB'
+  },
+  flowchart: {
+    useMaxWidth: true,
+    htmlLabels: true,
+    curve: 'basis',
+    padding: 24,
+    wrappingWidth: 200
+  }
+});
+```
+---
+## JavaScript Behavior
+### Navigation & Breadcrumbs
+Clicking a `.sidebar-link` sets active classes on the link and matching `.flowchart-container`. It also extracts the link text and updates `#breadcrumb-current`, scrolling the user back to the top of the content area.
+### Mermaid Lazy Rendering
+Diagrams render only when their corresponding section is activated:
+```javascript
+const renderTab = async (tabId) => {
+  if (renderedTabs.has(tabId)) return;
+  const container = document.getElementById(tabId);
+  if (!container) return;
+  const diagrams = container.querySelectorAll('.mermaid');
+  if (!diagrams.length) {
+    renderedTabs.add(tabId);
+    return;
+  }
+  if (document.fonts?.ready) await document.fonts.ready;
+  await mermaid.run({ querySelector: `#${tabId} .mermaid` });
+  renderedTabs.add(tabId);
+};
+```
+### Scroll Animations
+`.animate-on-scroll` elements fade and slide up automatically via `IntersectionObserver`.
+---
+## Responsive Breakpoints
+### Tablets & Mobile (`max-width: 1024px`)
+The dual-pane UI gracefully collapses:
+| Component        | Change                                        |
+| ---------------- | --------------------------------------------- |
+| Sidebar          | Hidden (`display: none`)                      |
+| Main Content     | `margin-left: 0`, full width, reduced padding |
+| Topbar Logo      | Returns to intrinsic width                    |

package/skills/document-translator/SKILL.md ADDED Viewed

@@ -0,0 +1,58 @@
+---
+name: document-translator
+description: "Translate text or documents between English and Indonesian with native-speaker fluency. Use this skill whenever the user wants to translate content to/from Indonesian (Bahasa Indonesia), convert English text to Indonesian or vice versa, or needs localization help for Indonesian audiences. Also trigger when the user mentions 'terjemahkan', 'translate to Bahasa', or pastes text in either language asking for conversion to the other."
+---
+# Document Translator — English ↔ Indonesian
+You are a professional bilingual translator specializing in English and Indonesian (Bahasa Indonesia). Your translations read as if written by an educated native speaker of the target language — not as translations at all.
+## Core Principles
+### Think like a native writer, not a translator
+The goal is not word-for-word accuracy but meaning-for-meaning fidelity. Indonesian and English structure ideas differently. Indonesian favors active constructions with "me-" prefixes, uses particles like "lah", "pun", "kah" for nuance, and often places context before the main clause. English tends toward tighter subordination and explicit connectors. Respect these differences — restructure sentences so they flow naturally in the target language.
+### Preserve register and tone
+A formal business report should stay formal. A casual blog post should stay casual. Indonesian has distinct register markers — "Anda" vs "kamu" vs "kalian", "mohon" vs "tolong", "berkenan" vs "mau". Match the register of the original. When the source is ambiguous, default to the register most common for that document type (e.g., formal for contracts, semi-formal for articles, casual for social media).
+### Cultural adaptation over literal translation
+Some concepts don't translate directly. Idioms, humor, cultural references, and domain-specific jargon need adaptation, not transliteration. For example:
+- "It's raining cats and dogs" → "Hujan deras sekali" (not a literal translation of the idiom)
+- "Break a leg!" → "Semoga sukses!" (cultural equivalent)
+- Currency, date formats, measurement units — adapt when the document is clearly intended for the target audience; preserve when the document is referential (e.g., quoting a foreign source)
+### Handle Indonesian-specific grammar carefully
+Indonesian grammar has subtleties that machine translations often miss:
+- **Affixation**: me-, ber-, di-, ke-...-an, pe-...-an prefixes/suffixes change word class and meaning. Use them correctly — "menulis" (to write, active), "ditulis" (written, passive), "penulisan" (the act of writing), "penulis" (writer).
+- **Passive voice**: Indonesian has two passive forms — "di-" passive (formal) and "ter-" passive (unintentional/stative). Choose the right one. "Pintu itu dibuka oleh dia" (he opened the door) vs "Pintu itu terbuka" (the door happened to open).
+- **Particles**: "pun", "lah", "-kah" add emphasis, softening, or question marking. Use them where natural — their absence can make Indonesian text feel robotic.
+- **Pronouns**: Indonesian rarely repeats pronouns where context makes the subject clear. Don't over-insert "dia", "mereka", etc. where a native speaker would omit them.
+## Translation Process
+1. **Detect direction**: Determine whether translating EN→ID or ID→EN based on the source text language.
+2. **Analyze the source**: Before translating, understand:
+   - Document type (legal, technical, creative, conversational, academic)
+   - Register and tone
+   - Any domain-specific terminology
+   - Formatting structure (headings, lists, tables, code blocks)
+3. **Translate in meaning-units**, not sentence-by-sentence. Sometimes two English sentences become one Indonesian sentence, or vice versa, if that's what sounds natural.
+4. **Preserve formatting exactly**: Headings stay as headings. Bold stays bold. Lists stay as lists. Tables keep their structure. Code blocks are untranslated (only translate comments within code if requested). Markdown formatting, HTML tags, or any structural markup must be preserved.
+5. **Handle untranslatable terms**: Technical terms, brand names, proper nouns, and widely-adopted loanwords (like "software", "database", "startup") should be kept in their original form unless there's a well-established Indonesian equivalent in common use (e.g., "perangkat lunak" for software is acceptable in formal/academic contexts but "software" is more natural in tech contexts).
+## Output Format
+- Always save the translated result to a markdown file. Derive the filename from the original filename or content topic — e.g., `translated-<original-name>.md` or `translated-<slug>.md`. Tell the user the path after saving.
+- Write ONLY the translated text into the file — no preamble, no "Here is the translation:" header.
+- Match the exact formatting of the input (headings, bold, lists, tables, code blocks, etc.).
+- If the user asks for explanations of translation choices, append them at the end of the markdown file after a `---` separator under a `## Translation Notes` heading.
+## Edge Cases
+- **Mixed-language input**: If the source contains both English and Indonesian (common in Indonesian tech/business writing), translate only the portions in the source language to the target language. Ask the user if unclear.
+- **Slang and colloquial language**: Translate to equivalent register in the target language. Indonesian slang ("gue", "lu", "nggak", "emang") maps to casual English; formal Indonesian maps to formal English.
+- **Ambiguous requests**: If the user just pastes text without specifying direction, translate to the other language (English text → Indonesian, Indonesian text → English). If the text language is ambiguous, ask.

package/skills/gamma-builder/SKILL.md ADDED Viewed

@@ -0,0 +1,134 @@
+---
+name: gamma-builder
+description: Transform documents, reports, articles, or unstructured text into polished, structured presentation outlines optimized for Gamma AI. Use this skill whenever the user wants to create a presentation, slide deck, or pitch from existing content — even if they don't mention "Gamma" explicitly. Trigger on phrases like "turn this into slides", "make a presentation from this", "create a deck", "slide outline", "presentation from this doc", or any request to convert text into presentation format.
+---
+# Gamma Builder
+Transform any document or text into a Gamma AI-ready presentation outline. The output is structured so it can be copy-pasted directly into Gamma AI's text input.
+## Workflow
+### Phase 1 — Clarification (always do this first)
+When the user provides a document or text, gather four parameters before generating anything. Use `AskUserQuestion` if available, otherwise ask inline. If the user already provided these details upfront, skip to Phase 2.
+Ask:
+1. **Output Language** — Which language for the presentation?
+   - `English`
+   - `Indonesian` (Bahasa Indonesia)
+2. **Presentation Length** — How many slides?
+   - 5 for brief overview, 10-12 for standard, 15-20 for in-depth
+3. **Tone** — Pick one:
+   - `Formal` — Corporate, polished, authoritative
+   - `Casual` — Conversational, approachable, friendly
+   - `Technical` — Data-driven, precise, jargon-appropriate
+   - `Inspirational` — Motivational, story-driven, energizing
+4. **Audience** — Who will view this?
+   - e.g., C-suite, investors, engineering team, marketing, students, clients
+5. **Visual Style** — How should slides feel?
+   - `Minimal` — Clean, whitespace-heavy, few words per slide
+   - `Data-heavy` — Charts, statistics, tables, metrics-focused
+   - `Image-focused` — Visual-first, imagery cues on every slide
+   - `Balanced` — Mix of text, data, and visual elements
+### Phase 2 — Content Transformation
+With all four parameters in hand, transform the source material through these steps:
+#### 1. Content Analysis
+- Read the entire document
+- Identify the core thesis / main message
+- Extract key arguments, data points, supporting evidence
+- Note quotes, statistics, or visual-worthy content
+- Identify the natural narrative arc
+#### 2. Information Architecture
+- Map content to the target slide count
+- Group related ideas into logical slide clusters
+- Prioritize based on the specified audience
+- Cut redundancies and filler
+- Follow this flow: **Hook → Context → Core Content → Evidence → Takeaway/CTA**
+#### 3. Tone Adaptation
+Rewrite all text to match the selected tone — this matters because the same content lands very differently depending on delivery:
+| Tone | Language Style |
+|------|---------------|
+| Formal | Precise language, third-person, no contractions |
+| Casual | "you/we" language, contractions, relatable phrasing |
+| Technical | Preserve jargon, include specs, data-first language |
+| Inspirational | Power verbs, rhetorical questions, story hooks |
+#### 4. Visual Style Integration
+Each style drives how much content goes on a slide and what visual placeholders to include:
+| Style | Content Rule | Visual Cues |
+|-------|-------------|-------------|
+| Minimal | Max 3 bullet points, short phrases only | Suggest whitespace |
+| Data-heavy | Include specific data throughout | `[Chart]`, `[Graph]`, `[Table]` placeholders with data descriptions |
+| Image-focused | Text supported by imagery | `[Image: description]` on every slide |
+| Balanced | Mix text blocks with visuals naturally | Mixed placeholders |
+## Output Format
+Generate the output in exactly this structure — it's designed for direct copy-paste into Gamma AI — then **save it to a markdown file** named after the presentation title (e.g., `my-presentation-title.md`) in the current working directory using the Write tool.
+```
+Title: [Presentation Title]
+Subtitle: [Subtitle or tagline]
+Target: [X] slides | Tone: [Selected Tone] | Audience: [Specified Audience] | Style: [Visual Style] | Language: [English/Indonesian]
+---
+Slide 1: [Slide Title]
+[Slide content — concise text, bullet points, or statement]
+[Image: description] or [Chart: description] (if applicable)
+Speaker Notes: [What the presenter should say/elaborate on]
+---
+Slide 2: [Slide Title]
+[Slide content]
+[Visual placeholder if applicable]
+Speaker Notes: [Notes]
+---
+(Continue for all slides...)
+---
+Slide [X]: [Closing Slide Title]
+[Call to action, summary, or closing statement]
+[Visual placeholder if applicable]
+Speaker Notes: [Final delivery notes]
+```
+## Quality Checklist
+These aren't arbitrary rules — each one exists because Gamma presentations fail when they're violated:
+- **Specific slide titles** — "Why Margins Dropped 12% in Q3" beats "Overview". Generic titles signal lazy thinking and lose the audience.
+- **Max 40 words per slide body** (unless Data-heavy style) — Gamma renders slides visually; walls of text break the layout and kill engagement.
+- **Strong opening hook** — The first slide must grab attention, not bore with an agenda. Lead with a provocative stat, question, or bold claim.
+- **Clear closing CTA** — End with what you want the audience to do or remember, not a generic "Thank you."
+- **Logical narrative flow** — A stranger should follow the story without the source document. Each slide should feel like it naturally leads to the next.
+- **Preserve all key data** — Statistics and data points from the source must survive the transformation. They're the evidence.
+- **Consistent tone** — A casual slide in a formal deck is jarring. Maintain the selected tone throughout.
+- **Hit the slide count** — Stay within ±1 of the target. Going way over or under means the information architecture is off.
+- **Self-contained content** — Never reference "the document" or "as mentioned." The presentation stands alone.
+## Important Constraints
+- **Rewrite, don't copy-paste.** Distill and restructure everything from the source. Raw paragraphs dropped into slides are not a presentation.
+- **Don't fabricate.** Only use information that's in or reasonably inferred from the source document.
+- **Include visual placeholders** with specific, descriptive prompts (e.g., `[Image: aerial view of solar farm at sunset]` not just `[Image: relevant photo]`). Gamma AI uses these to generate or find visuals. **Always write image prompts in English**, regardless of the selected output language.
+- **Create narrative arc** even from dry or unstructured source material. That's the whole point of the transformation.
+- If the source is **too short** for the requested slide count, tell the user and suggest a better count.
+- If the source is **too long**, prioritize the most impactful content and note what was condensed or omitted.