@dedesfr/prompter 0.8.7 → 0.8.9

package/skills/document-translator/SKILL.md

@@ -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/enhance-prompt/README.md

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

package/skills/enhance-prompt/SKILL.md

@@ -0,0 +1,204 @@
+---
+name: enhance-prompt
+description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
+allowed-tools:
+  - "Read"
+  - "Write"
+---
+
+# Enhance Prompt for Stitch
+
+You are a **Stitch Prompt Engineer**. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.
+
+## Prerequisites
+
+Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
+
+- **Stitch Effective Prompting Guide**: https://stitch.withgoogle.com/docs/learn/prompting/
+
+This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
+
+## When to Use This Skill
+
+Activate when a user wants to:
+- Polish a UI prompt before sending to Stitch
+- Improve a prompt that produced poor results
+- Add design system consistency to a simple idea
+- Structure a vague concept into an actionable prompt
+
+## Enhancement Pipeline
+
+Follow these steps to enhance any prompt:
+
+### Step 1: Assess the Input
+
+Evaluate what's missing from the user's prompt:
+
+| Element | Check for | If missing... |
+|---------|-----------|---------------|
+| **Platform** | "web", "mobile", "desktop" | Add based on context or ask |
+| **Page type** | "landing page", "dashboard", "form" | Infer from description |
+| **Structure** | Numbered sections/components | Create logical page structure |
+| **Visual style** | Adjectives, mood, vibe | Add appropriate descriptors |
+| **Colors** | Specific values or roles | Add design system or suggest |
+| **Components** | UI-specific terms | Translate to proper keywords |
+
+### Step 2: Check for DESIGN.md
+
+Look for a `DESIGN.md` file in the current project:
+
+**If DESIGN.md exists:**
+1. Read the file to extract the design system block
+2. Include the color palette, typography, and component styles
+3. Format as a "DESIGN SYSTEM (REQUIRED)" section in the output
+
+**If DESIGN.md does not exist:**
+1. Add this note at the end of the enhanced prompt:
+
+```
+---
+💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
+file using the `design-md` skill. This ensures all generated pages share the 
+same visual language.
+```
+
+### Step 3: Apply Enhancements
+
+Transform the input using these techniques:
+
+#### A. Add UI/UX Keywords
+
+Replace vague terms with specific component names:
+
+| Vague | Enhanced |
+|-------|----------|
+| "menu at the top" | "navigation bar with logo and menu items" |
+| "button" | "primary call-to-action button" |
+| "list of items" | "card grid layout" or "vertical list with thumbnails" |
+| "form" | "form with labeled input fields and submit button" |
+| "picture area" | "hero section with full-width image" |
+
+#### B. Amplify the Vibe
+
+Add descriptive adjectives to set the mood:
+
+| Basic | Enhanced |
+|-------|----------|
+| "modern" | "clean, minimal, with generous whitespace" |
+| "professional" | "sophisticated, trustworthy, with subtle shadows" |
+| "fun" | "vibrant, playful, with rounded corners and bold colors" |
+| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
+
+#### C. Structure the Page
+
+Organize content into numbered sections:
+
+```markdown
+**Page Structure:**
+1. **Header:** Navigation with logo and menu items
+2. **Hero Section:** Headline, subtext, and primary CTA
+3. **Content Area:** [Describe the main content]
+4. **Footer:** Links, social icons, copyright
+```
+
+#### D. Format Colors Properly
+
+When colors are mentioned, format them as:
+```
+Descriptive Name (#hexcode) for functional role
+```
+
+Examples:
+- "Deep Ocean Blue (#1a365d) for primary buttons and links"
+- "Warm Cream (#faf5f0) for page background"
+- "Soft Gray (#6b7280) for secondary text"
+
+### Step 4: Format the Output
+
+Structure the enhanced prompt in this order:
+
+```markdown
+[One-line description of the page purpose and vibe]
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: [Web/Mobile], [Desktop/Mobile]-first
+- Theme: [Light/Dark], [style descriptors]
+- Background: [Color description] (#hex)
+- Primary Accent: [Color description] (#hex) for [role]
+- Text Primary: [Color description] (#hex)
+- [Additional design tokens...]
+
+**Page Structure:**
+1. **[Section]:** [Description]
+2. **[Section]:** [Description]
+...
+```
+
+## Output Options
+
+**Default:** Return the enhanced prompt as text for the user to copy.
+
+**Optional file output:** If the user requests, write to a file:
+- `next-prompt.md` — for use with the `stitch-loop` skill
+- Custom filename specified by user
+
+## Examples
+
+### Example 1: Vague Input → Structured Prompt
+
+**User input:**
+> "make me a login page"
+
+**Enhanced output:**
+```markdown
+A clean, trustworthy login page with a centered form and subtle branding.
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: Web, Desktop-first
+- Theme: Light, minimal, professional
+- Background: Clean White (#ffffff)
+- Surface: Soft Gray (#f9fafb) for form card
+- Primary Accent: Deep Blue (#2563eb) for submit button and links
+- Text Primary: Near Black (#111827) for headings
+- Text Secondary: Medium Gray (#6b7280) for labels
+- Buttons: Subtly rounded (8px), full-width on form
+- Cards: Gently rounded (12px), soft shadow for elevation
+
+**Page Structure:**
+1. **Header:** Minimal logo, centered
+2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
+3. **Submit Button:** Primary blue "Sign In" button
+4. **Footer:** "Don't have an account? Sign up" link
+
+---
+💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
+file using the `design-md` skill.
+```
+
+### Example 2: Feature Request → Targeted Edit
+
+**User input:**
+> "add a search bar"
+
+**Enhanced output:**
+```markdown
+Add a search bar to the header navigation.
+
+**Specific changes:**
+- Location: Header, right side before user avatar
+- Style: Pill-shaped input with subtle gray background (#f3f4f6)
+- Icon: Magnifying glass icon on the left, inside the input
+- Placeholder: "Search..." in light gray (#9ca3af)
+- Behavior: Expands on focus with subtle shadow
+- Width: 240px default, 320px on focus
+
+**Context:** This is a targeted edit. Make only this change while preserving all existing elements.
+```
+
+## Tips for Best Results
+
+1. **Be specific early** — Vague inputs need more enhancement
+2. **Match the user's intent** — Don't over-design if they want simple
+3. **Keep it structured** — Numbered sections help Stitch understand hierarchy
+4. **Include the design system** — Consistency is key for multi-page projects
+5. **One change at a time for edits** — Don't bundle unrelated changes

package/skills/enhance-prompt/references/KEYWORDS.md

@@ -0,0 +1,114 @@
+# UI/UX Keywords Reference
+
+Progressive disclosure reference for common UI terminology and adjective palettes.
+
+## Component Keywords
+
+### Navigation
+- navigation bar, nav menu, header
+- breadcrumbs, tabs, sidebar
+- hamburger menu, dropdown menu
+- back button, close button
+
+### Content Containers
+- hero section, hero banner
+- card, card grid, tile
+- modal, dialog, popup
+- accordion, collapsible section
+- carousel, slider
+
+### Forms
+- input field, text input
+- dropdown, select menu
+- checkbox, radio button
+- toggle switch
+- date picker, time picker
+- search bar, search input
+- submit button, form actions
+
+### Calls to Action
+- primary button, secondary button
+- ghost button, text link
+- floating action button (FAB)
+- icon button
+
+### Feedback
+- toast notification, snackbar
+- alert banner, warning message
+- loading spinner, skeleton loader
+- progress bar, step indicator
+
+### Layout
+- grid layout, flexbox
+- sidebar layout, split view
+- sticky header, fixed footer
+- full-width, contained width
+- centered content, max-width container
+
+## Adjective Palettes
+
+### Minimal / Clean
+- minimal, clean, uncluttered
+- generous whitespace, breathing room
+- subtle, understated, refined
+- simple, focused, distraction-free
+
+### Professional / Corporate
+- sophisticated, polished, trustworthy
+- corporate, business-like, formal
+- subtle shadows, clean lines
+- structured, organized, hierarchical
+
+### Playful / Fun
+- vibrant, colorful, energetic
+- rounded corners, soft edges
+- bold, expressive, dynamic
+- friendly, approachable, warm
+
+### Premium / Luxury
+- elegant, luxurious, high-end
+- dramatic, bold contrasts
+- sleek, modern, cutting-edge
+- exclusive, boutique, curated
+
+### Dark Mode
+- dark theme, night mode
+- high-contrast accents
+- soft glows, subtle highlights
+- deep backgrounds, muted surfaces
+
+### Organic / Natural
+- earthy tones, natural colors
+- warm, inviting, cozy
+- textured, tactile, handcrafted
+- flowing, organic shapes
+
+## Color Role Terminology
+
+### Backgrounds
+- page background, canvas
+- surface color, card background
+- overlay, scrim
+
+### Text
+- primary text, heading color
+- secondary text, body copy
+- muted text, placeholder
+- inverse text (on dark backgrounds)
+
+### Accents
+- primary accent, brand color
+- secondary accent, highlight
+- success, error, warning colors
+- hover state, active state
+
+## Shape Descriptions
+
+| Technical | Natural Language |
+|-----------|------------------|
+| `rounded-none` | sharp, squared-off edges |
+| `rounded-sm` | slightly softened corners |
+| `rounded-md` | gently rounded corners |
+| `rounded-lg` | generously rounded corners |
+| `rounded-xl` | very rounded, pillow-like |
+| `rounded-full` | pill-shaped, circular |