@dedesfr/prompter 0.8.23 → 1.0.0

package/skills/doc-builder/SKILL.md

@@ -1,115 +0,0 @@
----
-name: doc-builder
-description: Generate interactive system flowchart documentation pages with Mermaid.js diagrams. Use this skill whenever the user asks to create documentation, document architecture, generate flowcharts, visualize system flows, or create technical diagrams for any scope — a single page, feature, module, or entire project/repo. Also use when the user says things like "create documentation for ...", "document this module", "generate system diagrams", or "visualize the architecture".
----
-
-# System Flowcharts Generator
-
-Generate interactive, self-contained HTML documentation pages with Mermaid.js flowchart diagrams. The pages follow a Mintlify-inspired design system with a sidebar, top navbar, module cards, and lazy-rendered diagrams.
-
-## When to use
-
-- User asks to document a system, module, feature, or entire repo
-- User wants flowcharts, architecture diagrams, or system visualizations
-- User says "create documentation", "document the flows", "generate diagrams", etc.
-
-## Workflow
-
-### 1. Determine Scope and Output Strategy
-
-Ask the user (or infer from context) what they want documented. Then, after exploring the codebase, **recommend** whether to use a single file or multiple files — but let the user decide.
-
-When making your recommendation, consider:
-- **Number of flows/sections**: A feature with 3 flows fits comfortably in one file. A module with 12+ flows gets unwieldy.
-- **Content density**: If each flow has detailed diagrams and step timelines, even a few flows can make a single page very long.
-- **Navigability**: A single file with sidebar sections is simpler to share and browse. Multiple files are easier to maintain and load faster individually.
-
-Present your recommendation like: "This module has 8 major flows — I'd suggest splitting into separate pages per domain area with an index page, but I can also put it all in one file if you prefer. What do you think?"
-
-For multi-file output, create an `index.html` that links to each module's page. Each module page is fully self-contained (all CSS/JS inline).
-
-### 2. Explore the Codebase
-
-Investigate the target scope to understand:
-- System architecture and module boundaries
-- Data flows and request lifecycles
-- Key processes, workflows, and decision points
-- External integrations and dependencies
-- Error handling paths
-
-### 3. Identify Flowchart Content
-
-For each section/module, identify:
-- **Overview**: What the module does, its key components (rendered as module cards)
-- **Flows**: The major workflows worth diagramming (each becomes a sidebar section with a Mermaid flowchart)
-- **Steps**: Key process steps (rendered as timeline flow steps)
-
-### 4. Generate the HTML
-
-Read the full design system spec from `references/ui-patterns.md` in this skill's directory. Follow it exactly — all design tokens, components, typography, responsive breakpoints, and JavaScript behavior.
-
-Key requirements:
-- Single self-contained HTML file per page (all CSS and JS inline)
-- Google Fonts loaded via `<link>` tag (Inter + Geist Mono)
-- Mermaid.js loaded via CDN
-- Left sidebar navigation with sections for Overview + each flow
-- Lazy Mermaid rendering (diagrams render only when their tab is activated)
-- Tab switching updates breadcrumbs and scrolls to top
-- Scroll animations via IntersectionObserver
-- Mobile responsive (sidebar collapses below 1024px)
-
-### 5. Output Location
-
-Save output to `docs/` directory by default:
-- Single scope: `docs/flowcharts.html` or `docs/<name>-flowcharts.html`
-- Multi-file: `docs/flowcharts/index.html` + `docs/flowcharts/<module>.html`
-
-Ask the user if they want a different location.
-
----
-
-## Mermaid Diagram Conventions
-
-Use consistent node styling to communicate meaning:
-
-| Color | Meaning | Mermaid Style |
-|-------|---------|---------------|
-| Cyan (`#06B6D4`) | Start/Entry point | `style A fill:#06B6D4,color:#fff` |
-| Green (`#18E299`) | System process | `style B fill:#18E299,color:#0F172A` |
-| Amber (`#F59E0B`) | Approval/Decision requiring human input | `style C fill:#F59E0B,color:#0F172A` |
-| Red (`#EF4444`) | Error/Rejection | `style D fill:#EF4444,color:#fff` |
-| White (`#ffffff`) | Standard process step | (default, no override needed) |
-
-Always include a legend after each diagram explaining the color conventions used.
-
-## Mermaid Tips
-
-- Use `flowchart TD` (top-down) for most flows
-- Use descriptive node labels in quotes: `A["User Submits Form"]`
-- Use edge labels for conditions: `C -->|"Valid"| D`
-- Keep diagrams focused — if a flow has more than ~15 nodes, split into sub-flows
-- Use subgraphs to group related steps: `subgraph "Authentication" ... end`
-
----
-
-## Index Page (Multi-file Output)
-
-When generating multiple module pages, create an `index.html` that:
-- Uses the same design system (topbar, styling)
-- Shows a grid of module cards (one per module page)
-- Each card links to the module's HTML file
-- Includes a brief project overview at the top
-
----
-
-## Design System Reference
-
-The complete UI pattern specification is bundled at `references/ui-patterns.md`. Read it before generating any HTML. It contains:
-- All design tokens (colors, spacing, dimensions)
-- Typography specs (Inter + Geist Mono)
-- Component HTML/CSS patterns (topbar, sidebar, flowchart containers, module cards, flow steps, badges, legends)
-- Mermaid.js configuration block
-- JavaScript for tab switching, lazy rendering, scroll animations
-- Responsive breakpoints
-
-Follow the spec precisely — do not improvise styles or deviate from the documented patterns.

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

@@ -1,394 +0,0 @@
-# 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

@@ -1,58 +0,0 @@
----
-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/enhance-prompt/README.md

@@ -1,34 +0,0 @@
-# Stitch Enhance Prompt Skill
-
-## Install
-
-```bash
-npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global
-```
-
-## Example Prompt
-
-```text
-Enhance my prompt "make me a login page" for better Stitch generation results.
-```
-
-## Skill Structure
-
-This repository follows the **Agent Skills** open standard. Each skill is self-contained with its own logic, workflow, and reference materials.
-
-```text
-enhance-prompt/
-├── SKILL.md           — Core instructions & workflow
-├── references/        — UI/UX vocabulary and adjective palettes
-└── README.md          — This file
-```
-
-## How it Works
-
-When activated, the agent follows a prompt enhancement pipeline:
-
-1. **Assessment**: Evaluates the input for missing elements (platform, structure, visual style, colors).
-2. **DESIGN.md Check**: Looks for an existing design system to inject; recommends creating one if missing.
-3. **Enhancement**: Applies UI/UX keywords, vibe adjectives, and structured page sections.
-4. **Formatting**: Outputs a Stitch-optimized prompt with design system block and numbered structure.
-5. **Delivery**: Returns enhanced text for user review, with optional file output.