heraspec 0.1.14 → 0.1.15

package/dist/core/templates/skills/design-system/skill.md

@@ -0,0 +1,176 @@
+# Skill: Design System Reference (Cross-Cutting)
+
+## Purpose
+
+This skill provides access to **54 real-world design systems** extracted from production websites (Stripe, Vercel, Linear, Supabase, Apple, etc.) in the Google Stitch DESIGN.md format. Each design system contains detailed color palettes, typography rules, component stylings, shadow systems, and agent-ready prompts.
+
+Use this skill to create UIs that match the look and feel of specific well-known brands, or to find design inspiration from real-world references.
+
+## When to Use
+
+- When user requests UI "like Stripe" / "inspired by Vercel" / "Linear-style"
+- When building a product in a specific industry (fintech, devtools, AI) and need proven design patterns
+- When you need precise color values, font weights, shadow values from real design systems
+- When creating a DESIGN.md for a new project
+- When comparing design approaches (e.g., Stripe vs Vercel shadow philosophies)
+
+## Prerequisites
+
+None — this skill uses the same search engine as UI/UX skill.
+
+## Step-by-Step Process
+
+### Step 1: Identify the Design Reference
+
+Determine which design system(s) are relevant:
+
+**By brand name:**
+```bash
+python3 scripts/search.py "stripe" --domain design-system
+python3 scripts/search.py "linear dark mode" --domain design-system  
+python3 scripts/search.py "vercel minimal" --domain design-system
+```
+
+**By style/industry:**
+```bash
+python3 scripts/search.py "fintech premium dark" --domain design-system
+python3 scripts/search.py "developer tools dark emerald" --domain design-system
+python3 scripts/search.py "ai platform warm editorial" --domain design-system
+python3 scripts/search.py "enterprise blue structured" --domain design-system
+```
+
+**By visual technique:**
+```bash
+python3 scripts/search.py "shadow-as-border" --domain design-system
+python3 scripts/search.py "neon glow dark" --domain design-system
+python3 scripts/search.py "blue-tinted shadows" --domain design-system
+python3 scripts/search.py "luminance stacking" --domain design-system
+```
+
+### Step 2: Read the Full DESIGN.md
+
+After finding a matching brand, read the complete DESIGN.md from knowledge base:
+
+```
+knowledge/design-systems/<folder>/DESIGN.md
+```
+
+The `Folder` field in search results tells you the directory name. For example:
+- Stripe → `knowledge/design-systems/stripe/DESIGN.md`
+- Linear → `knowledge/design-systems/linear.app/DESIGN.md`
+- Supabase → `knowledge/design-systems/supabase/DESIGN.md`
+
+### Step 3: Apply the Design System
+
+Use the `Agent_Quick_Prompt` from search results as a starting point, then reference the full DESIGN.md for details:
+
+1. **Colors**: Apply exact hex values from Color Palette section
+2. **Typography**: Use specified fonts, weights, and letter-spacing
+3. **Components**: Follow button, card, input, navigation specifications
+4. **Shadows**: Use exact shadow values (this is often what makes a design "feel" right)
+5. **Spacing**: Follow the spacing scale and border-radius values
+6. **Do's/Don'ts**: Respect the design system's guardrails
+
+### Step 4: Combine with UI/UX Skill
+
+For maximum quality, combine design-system references with other UI/UX skill searches:
+
+```bash
+# 1. Get the design system reference
+python3 scripts/search.py "stripe" --domain design-system
+
+# 2. Get UX guidelines
+python3 scripts/search.py "animation" --domain ux
+python3 scripts/search.py "accessibility" --domain ux
+
+# 3. Get page structure
+python3 scripts/search.py "pricing plans" --domain pages
+
+# 4. Get stack-specific guidelines
+python3 scripts/search.py "responsive layout" --stack html-tailwind
+```
+
+## Available Design Systems
+
+### By Category
+
+| Category | Count | Examples |
+|----------|-------|---------|
+| **AI & ML** | 12 | Claude, Mistral AI, Ollama, Cursor, xAI, ElevenLabs |
+| **Developer Tools** | 14 | Vercel, Linear, Supabase, Raycast, Warp, Sentry |
+| **Infrastructure** | 6 | Stripe, MongoDB, HashiCorp, ClickHouse, Sanity |
+| **Design & Productivity** | 10 | Notion, Figma, Framer, Miro, Airtable, Pinterest |
+| **Fintech & Crypto** | 4 | Coinbase, Revolut, Wise, Kraken |
+| **Enterprise & Consumer** | 8 | Apple, Airbnb, Spotify, BMW, SpaceX, Uber, IBM |
+
+### By Theme
+
+| Theme | Brands |
+|-------|--------|
+| **Dark-mode native** | Linear, Supabase, Cursor, Spotify, SpaceX, Warp, Resend |
+| **Light-first** | Stripe, Vercel, Notion, Apple, Mintlify, Ollama |
+| **Both modes** | IBM, Uber, Framer, Lovable, Cohere, Together AI |
+
+### By Design Philosophy
+
+| Philosophy | Brand | Key Technique |
+|------------|-------|---------------|
+| Weight-as-luxury | Stripe | font-weight: 300 for elegance |
+| Shadow-as-border | Vercel | box-shadow: 0px 0px 0px 1px rgba() |
+| Luminance stacking | Linear | Background opacity stepping for depth |
+| Warm editorial | Claude | Terracotta accent, anti-tech-cold palette |
+| Terminal-native | Resend, Warp | Monospace accents, dark void backgrounds |
+| Full-bleed imagery | SpaceX | Text over cinematic photos |
+
+## Search Reference
+
+```bash
+# Search by brand
+python3 scripts/search.py "<brand-name>" --domain design-system
+
+# Search by keywords
+python3 scripts/search.py "<style-keywords>" --domain design-system
+
+# Search with semantic mode
+python3 scripts/search.py "elegant dark developer tool" --domain design-system --mode hybrid
+
+# Multiple results
+python3 scripts/search.py "fintech" --domain design-system -n 5
+```
+
+## DESIGN.md Format (Google Stitch Standard)
+
+Each DESIGN.md file contains 9 standard sections:
+
+1. **Visual Theme & Atmosphere** — Design philosophy, mood, density
+2. **Color Palette & Roles** — Hex values with semantic roles
+3. **Typography Rules** — Font families, full type scale table
+4. **Component Stylings** — Buttons, cards, inputs with states
+5. **Layout Principles** — Spacing scale, grid, whitespace
+6. **Depth & Elevation** — Shadow system, surface hierarchy
+7. **Do's and Don'ts** — Design guardrails, anti-patterns
+8. **Responsive Behavior** — Breakpoints, touch targets
+9. **Agent Prompt Guide** — Quick reference prompts for AI agents
+
+## Updating Design Systems
+
+Design system files are sourced from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md). To update:
+
+1. Pull latest from `awesome-design-md` repository
+2. Copy updated `DESIGN.md` files to `knowledge/design-systems/<folder>/`
+3. Update `design-systems.csv` in `data/` if new brands are added
+4. Update `index.json` in `knowledge/design-systems/` with new entries
+
+## Tips for Best Results
+
+1. **Be specific** — "dark mode with purple accents" is better than "dark"
+2. **Reference real brands** — "like Stripe" gives much better results than "fintech"
+3. **Read the full DESIGN.md** — The CSV gives a summary, but the DESIGN.md has full specs
+4. **Combine skills** — Design-system + UI/UX + Stack = production-quality output
+5. **Use Agent_Quick_Prompt** — Each entry has a ready-to-use prompt in the CSV
+
+## Links to Other Skills
+
+- **ui-ux**: Use together for comprehensive design system + UX guidelines
+- **documents**: Use to document your project's design system
+- **content-optimization**: Use to optimize CTA placement with brand colors

package/dist/core/templates/skills/documents/skill.md

@@ -0,0 +1,104 @@
+# Skill: Documents (Cross-Cutting & Multi-Format)
+
+## Purpose
+
+This skill is used to create comprehensive documentation for both technical and end-user audiences. It supports parallel generation of Markdown files (for repository/GitHub) and interactive HTML files (for browser-based manuals).
+
+## Core Requirements
+
+### 1. Multi-Format Output
+Every documentation task should ideally generate four versions:
+- `documentation.txt`: A concise, text-only overview for quick reading and AI context.
+- `documentation.md`: High-quality Markdown for version control and GitHub READMEs.
+- `documentation.html`: An interactive, premium documentation page with sidebar navigation.
+- `documentation-landing-page.html`: A visual, high-end landing page to showcase the project/plugin.
+
+### 2. Dynamic Design (Not Fixed Templates)
+- **Do NOT follow a rigid template**: The Agent must **design** the documentation layout and content structure specifically for the project.
+- **Synergy with ui-ux**: use of the `ui-ux` skill is **MANDATORY** for `documentation.html` and `documentation-landing-page.html`.
+
+### 3. Standard Quality Structure (Mandatory)
+To ensure clarity and completeness, the generated documentation MUST include:
+
+#### A. Interactive Documentation (documentation.html)
+1.  **Quick Start**: Clear steps to get running in < 2 minutes.
+2.  **System Requirements**: OS, versions, dependencies.
+3.  **Installation & Setup**: Detailed step-by-step guide.
+4.  **Configuration**: Explanation of all settings (config files, UI settings).
+5.  **Core Features**: Deep dive into each component found in `heraspec/specs/`.
+6.  **Technical Reference**: (For Devs) API endpoints, Hooks, Filters, Functions.
+7.  **Troubleshooting & FAQ**: Common issues and solutions.
+
+#### B. Premium Landing Page (documentation-landing-page.html)
+1.  **Hero Section**: High-impact headline and clear sub-headline.
+2.  **Value Proposition**: Briefly explain "The Problem" vs "The Solution".
+3.  **Feature Showcase**: A visual grid of key benefits with icons/images.
+4.  **How It Works**: A simplified 1-2-3 step process of using the project.
+5.  **CTA (Call to Action)**: Prominent buttons to "Get Started" or "View Docs".
+
+### 4. Visual Excellence
+- Use gradients, smooth animations (fade-in, slide), and premium fonts (e.g., Inter, Montserrat).
+- The HTML documentation should feel like a modern SaaS dashboard or a high-end technical manual.
+
+### 4. Project-Wide Scope
+When tasked with generating documentation for the entire project:
+- **Data Source**: Agent MUST read `heraspec/project.md` and ALL files in `heraspec/specs/`.
+- **Synthesis**: Agent must combine information from all components and features into a unified manual.
+- **Landing Page**: Should serve as the project homepage, summarizing the main value proposition and key features across all modules.
+
+## Implementation Steps
+
+### Step 1: Intelligence Gathering & Design Planning
+1. **Analyze Project**: Scan all relevant `.md` files in the project. Understand the core purpose and technical details.
+2. **Enforce UI/UX Dependency**:
+   - Check if `heraspec/skills/ui-ux/` exists.
+   - If missing: **Execute `heraspec skill add ui-ux`** immediately. Do NOT proceed with HTML generation until this skill is available.
+3. **Define Design System**: Consult the `ui-ux` skill to establish a visual language (colors, fonts, animation styles).
+4. **Plan Structures**: Outline what needs to go into the `.txt`, `.md`, and `.html` versions.
+
+### Step 2: Constructing Documentation Assets
+1. **Compose documentation.txt & .md**: Focus on clarity and technical accuracy.
+2. **Develop documentation.html**: Build a split-panel layout (Sidebar + Content). DO NOT just fill a template; **write the HTML/CSS/JS** needed to make it look premium and project-specific.
+3. **Design documentation-landing-page.html**: Create a compelling Hero section and feature showcase. Link to the main docs.
+
+## Required Input
+
+- **Project Context**: The name of the plugin/project (e.g., "polyutilities").
+- **Specs/Docs**: All existing documentation and specification files.
+- **Design Guidelines**: Inputs from the `ui-ux` skill.
+
+## Expected Output (Save to /documentations/)
+
+**CRITICAL**: All files MUST be placed in a `/documentations` folder at the project root. If this folder does not exist, the Agent MUST create it first.
+
+- `/documentations/documentation.txt`: Plain text overview.
+- `/documentations/documentation.md`: Markdown version.
+- `/documentations/documentation.html`: Interactive split-panel HTML.
+- `/documentations/documentation-landing-page.html`: Visual landing page.
+- `/documentations/style.css` & `/documentations/landing-style.css`: Custom-generated styles.
+- `/documentations/script.js` & `/documentations/landing-script.js`: Interactive logic.
+
+## Tone & Rules
+
+- **Consistent Content**: The core information must be synchronized across all formats.
+- **Design Autonomy**: The Agent is responsible for the final aesthetic and structural quality.
+- **Visual Impact**: Documentation must WOW the user with its premium feel.
+
+## Reference Templates
+These are provided as starting points or inspiration. The Agent should feel free to expand or modify them to suit the project:
+
+- `templates/documentation.html` - Base HTML documentation layout
+- `templates/documentation-landing-page.html` - Premium Landing Page layout
+- `templates/style.css` - Premium styles for HTML documentation
+- `templates/landing-style.css` - Premium styles for Landing Page
+- `templates/script.js` - Interactive logic for HTML documentation
+- `templates/landing-script.js` - Interactive logic for Landing Page
+- `templates/technical-doc-template.md` - Technical documentation
+- `templates/user-guide-template.md` - User guide
+- `templates/api-doc-template.md` - API documentation
+- `templates/changelog-template.md` - Changelog template
+
+## Links to Other Skills
+
+- **ui-ux**: ESSENTIAL. Use this to determine the look and feel of the HTML documentation.
+- **content-optimization**: Use to ensure the text is clear and professional.

package/dist/core/templates/skills/e2e-test/skill.md

@@ -0,0 +1,119 @@
+# Skill: End-to-End (E2E) Testing (Cross-Cutting)
+
+## Purpose
+
+This skill is used to create end-to-end tests that verify complete user workflows from start to finish. E2E tests simulate real user interactions with the application.
+
+## When to Use
+
+- When testing complete user workflows
+- When testing critical user journeys
+- When testing UI interactions
+- When verifying application behavior from user perspective
+- When testing authentication flows
+- When testing payment/transaction flows
+
+## Step-by-Step Process
+
+### Step 1: Identify User Journeys
+- Map critical user workflows
+- Identify key user scenarios
+- List user personas and their goals
+- Determine test priorities (critical paths first)
+- Document expected user behavior
+
+### Step 2: Set Up E2E Testing Framework
+- Choose E2E testing tool (Playwright, Cypress, Selenium, etc.)
+- Configure test environment
+- Set up test browser/headless mode
+- Configure test data and user accounts
+- Set up test application instance
+
+### Step 3: Write E2E Tests
+- Create test files for each user journey
+- Write tests simulating user actions (click, type, navigate)
+- Test complete workflows from start to finish
+- Verify UI elements and feedback
+- Test error scenarios and edge cases
+- Use page objects for maintainability
+
+### Step 4: Run and Verify
+- Run E2E tests
+- Verify tests pass consistently
+- Check test execution time
+- Review test failures and flakiness
+- Ensure tests are stable and reliable
+
+### Step 5: Maintain Tests
+- Update tests when UI changes
+- Keep page objects synchronized with UI
+- Document test scenarios
+- Monitor test stability
+
+## Required Input
+
+- **User journeys**: List of critical user workflows
+- **Test environment**: Application URL and test environment setup
+- **Test accounts**: User accounts for testing
+- **E2E framework**: Testing framework to use
+- **Browser**: Browser to test in (Chrome, Firefox, etc.)
+
+## Expected Output
+
+- E2E test files
+- Test scenarios covering user journeys
+- Page objects for UI elements
+- Passing E2E test suite
+- Documentation of E2E test scenarios
+
+## Tone & Rules
+
+### Test Scope
+- Focus on critical user journeys
+- Test from user perspective
+- Verify complete workflows
+- Test happy paths and error scenarios
+
+### Test Stability
+- Use reliable selectors (data-testid, stable IDs)
+- Add appropriate waits for async operations
+- Handle flaky elements (retries, explicit waits)
+- Keep tests independent and isolated
+
+### Performance
+- E2E tests are slowest (run separately)
+- Use headless mode for CI
+- Parallelize tests when possible
+- Consider test execution time
+
+### Limitations
+- ❌ DO NOT test every UI element (focus on journeys)
+- ❌ DO NOT use brittle selectors (XPath with complex paths)
+- ❌ DO NOT skip error handling
+- ❌ DO NOT write tests that depend on timing
+- ❌ DO NOT test implementation details
+
+## Available Templates
+
+- `templates/e2e-test-template.js` - JavaScript/Playwright template
+- `templates/e2e-test-template.ts` - TypeScript/Cypress template
+- `templates/e2e-test-template.py` - Python/Selenium template
+
+## Available Scripts
+
+- `scripts/setup-e2e-env.sh` - Set up E2E test environment
+- `scripts/run-e2e-tests.sh` - Run E2E test suite
+
+## Examples
+
+See `examples/` directory for reference:
+- `good-e2e-test/` - Well-structured E2E tests
+- `bad-e2e-test/` - Examples to avoid
+
+## Links to Other Skills
+
+- **unit-test**: Use for testing individual components
+- **integration-test**: Use for testing component interactions
+- **ui-ux**: Reference when testing UI interactions
+- **documents**: Use to document E2E test strategy
+

package/dist/core/templates/skills/email-sequence/skill.md

@@ -0,0 +1,68 @@
+# Skill: Email Sequence (Cross-Cutting)
+
+## Purpose
+
+Design and draft multi-email sequences (drip campaigns, nurture flows, onboarding series) with full copy, timing delays, branching logic, exit conditions, and performance benchmarks.
+
+## When to Use
+
+- When building user onboarding, lead nurturing, re-engagement, win-back, or product launch email flows.
+- When you need a complete campaign map showing visual delays and conditions.
+- When setting up automated email campaigns in platforms like Klaviyo, HubSpot, Mailchimp, or Customer.io.
+
+## Step-by-Step Process
+
+### Step 1: Sequence Strategy
+- Define the core goal of the sequence (e.g., convert trial to paid) and exit conditions (when a recipient completes the goal, remove them).
+- Establish the overall narrative arc and progression across all emails.
+
+### Step 2: Sequence Architecture & Delays
+- Map out the number of emails and delay intervals (e.g., Email 1 on day 0, Email 2 on day 3, etc.).
+- Set branching logic based on user action (e.g., opened but did not click vs. clicked).
+
+### Step 3: Write Email Copy
+- For each email, provide 2-3 subject line options and a compelling preview text (40-90 chars).
+- Draft scannable body copy with clear benefit hooks and exactly one primary CTA.
+
+### Step 4: Define Exit & Suppression Logic
+- Specify who should be excluded (suppression rules) and when they exit the flow automatically.
+
+### Step 5: Establish Performance Benchmarks
+- Provide standard industry metrics (Open Rate, CTR, Conversion Rate) for tracking.
+
+## Required Input
+
+- **Sequence Type**: Onboarding, lead nurture, re-engagement, win-back, etc.
+- **Goal**: The single action that ends the sequence.
+- **Audience**: Segmentation details, buyer persona, lifecycle stage.
+- **Delays/Timing**: Desired delay intervals.
+
+## Expected Output
+
+- **Sequence Overview Table**: Summary of emails, delays, and CTAs.
+- **Email Drafts**: Full copy-paste-ready drafts including subject lines, preview text, body copy, and CTAs.
+- **Branching Flow Diagram**: Text-based ASCII flow chart displaying paths and exit points.
+- **Target Performance Benchmarks Table**: Expected Open Rate, CTR, and Conversion metrics.
+
+## Tone & Rules
+
+- Write in a friendly, conversational, yet highly professional and value-first tone.
+- Avoid multiple competing CTAs in a single email. Keep it highly focused on one next step.
+- Include personalization tokens (e.g., `{{first_name}}`, `{{company}}`) in email body text.
+
+## Available Templates
+
+- None
+
+## Available Scripts
+
+- None
+
+## Examples
+
+See `examples/` directory.
+
+## Links to Other Skills
+
+- **content-creation**: Use content guidelines and hook formulas to write email drafts.
+- **documents**: Use to outline technical integration guides linked in the emails.

package/dist/core/templates/skills/email-sequence/skill.vi.md

@@ -0,0 +1,68 @@
+# Kỹ năng: Chuỗi Email Tự động (Email Sequence) (Cross-Cutting)
+
+## Mục đích
+
+Thiết kế và soạn thảo các chuỗi email tự động (drip campaigns, nurture flows, onboarding series) kèm nội dung chi tiết, thời gian giãn cách giữa các email, logic rẽ nhánh, điều kiện dừng và các chỉ số đo lường hiệu năng.
+
+## Khi nào sử dụng
+
+- Khi xây dựng chuỗi email chào mừng (onboarding), nuôi dưỡng leads (lead nurture), tương tác lại (re-engagement), kéo khách hàng quay lại (win-back) hoặc ra mắt sản phẩm.
+- Khi cần sơ đồ hóa toàn bộ luồng gửi email kèm các điều kiện rẽ nhánh và điểm dừng.
+- Khi thiết lập các chiến dịch tự động hóa trên các nền tảng như Klaviyo, HubSpot, Mailchimp hoặc Customer.io.
+
+## Quy trình từng bước
+
+### Bước 1: Chiến lược Chuỗi Email
+- Xác định mục tiêu cốt lõi của chuỗi (ví dụ: chuyển đổi từ dùng thử sang trả phí) và điều kiện thoát khỏi luồng (khi người nhận hoàn thành mục tiêu, tự động dừng gửi).
+- Thiết lập cốt truyện (narrative arc) xuyên suốt và logic tiến trình giữa các email.
+
+### Bước 2: Cấu trúc Chuỗi & Thời gian chờ (Delays)
+- Lên sơ đồ số lượng email và khoảng cách thời gian gửi (ví dụ: Email 1 gửi ngay ngày 0, Email 2 sau 3 ngày, v.v...).
+- Thiết lập logic rẽ nhánh dựa trên hành động của người nhận (ví dụ: đã mở nhưng chưa click vs. đã click link).
+
+### Bước 3: Soạn thảo Nội dung Email
+- Với mỗi email, cung cấp 2-3 phương án dòng tiêu đề (subject lines) và mô tả preview text hấp dẫn (40-90 ký tự).
+- Viết thân bài dễ đọc, ngắn gọn, đi thẳng vào lợi ích của khách hàng và chỉ chứa duy nhất một CTA chính.
+
+### Bước 4: Định nghĩa Điều kiện Dừng & Loại trừ
+- Chỉ rõ các đối tượng cần loại trừ (suppression rules) và thời điểm họ tự động thoát khỏi luồng để tránh spam.
+
+### Bước 5: Thiết lập Chỉ số Đo lường (Benchmarks)
+- Đưa ra các chỉ số tiêu chuẩn của ngành (Tỷ lệ Mở - Open Rate, Tỷ lệ Click - CTR, Tỷ lệ Chuyển đổi) để theo dõi và tối ưu.
+
+## Input yêu cầu
+
+- **Loại chuỗi**: Chào mừng (onboarding), nuôi dưỡng leads, re-engagement, win-back, v.v...
+- **Mục tiêu**: Hành động duy nhất để hoàn thành chuỗi email.
+- **Đối tượng**: Chi tiết phân khúc, chân dung khách hàng, giai đoạn vòng đời.
+- **Thời gian chờ/Giãn cách**: Khoảng cách mong muốn giữa các email.
+
+## Output mong đợi
+
+- **Bảng tóm tắt chuỗi**: Tóm tắt các email, thời gian chờ, và CTAs.
+- **Bản thảo chi tiết**: Bài viết hoàn chỉnh sẵn sàng copy-paste, bao gồm các phương án tiêu đề, preview text, thân bài và CTAs.
+- **Sơ đồ luồng rẽ nhánh**: Sơ đồ ASCII mô tả trực quan các luồng gửi và điểm dừng.
+- **Bảng mục tiêu hiệu năng**: Tỷ lệ mở, tỷ lệ click và tỷ lệ chuyển đổi kỳ vọng.
+
+## Giọng điệu & Quy tắc
+
+- Viết bằng giọng điệu thân thiện, mang tính đối thoại nhưng vẫn giữ sự chuyên nghiệp và luôn trao giá trị trước.
+- Tránh chèn quá nhiều CTAs cạnh tranh nhau trong một email. Tập trung cao độ vào một hành động tiếp theo duy nhất.
+- Sử dụng các token cá nhân hóa (ví dụ: `{{first_name}}`, `{{company}}`) trong văn bản.
+
+## Templates có sẵn
+
+- Không có
+
+## Templates Scripts có sẵn
+
+- Không có
+
+## Ví dụ
+
+Xem thư mục `examples/`.
+
+## Liên kết với các kỹ năng khác
+
+- **content-creation**: Áp dụng các nguyên tắc viết tiêu đề và viết mở bài thu hút để soạn thảo email.
+- **documents**: Dùng để phác thảo các hướng dẫn kỹ thuật chi tiết được đính kèm trong link email.

package/dist/core/templates/skills/email-sequence-skill.md

@@ -0,0 +1,68 @@
+# Skill: Email Sequence (Cross-Cutting)
+
+## Purpose
+
+Design and draft multi-email sequences (drip campaigns, nurture flows, onboarding series) with full copy, timing delays, branching logic, exit conditions, and performance benchmarks.
+
+## When to Use
+
+- When building user onboarding, lead nurturing, re-engagement, win-back, or product launch email flows.
+- When you need a complete campaign map showing visual delays and conditions.
+- When setting up automated email campaigns in platforms like Klaviyo, HubSpot, Mailchimp, or Customer.io.
+
+## Step-by-Step Process
+
+### Step 1: Sequence Strategy
+- Define the core goal of the sequence (e.g., convert trial to paid) and exit conditions (when a recipient completes the goal, remove them).
+- Establish the overall narrative arc and progression across all emails.
+
+### Step 2: Sequence Architecture & Delays
+- Map out the number of emails and delay intervals (e.g., Email 1 on day 0, Email 2 on day 3, etc.).
+- Set branching logic based on user action (e.g., opened but did not click vs. clicked).
+
+### Step 3: Write Email Copy
+- For each email, provide 2-3 subject line options and a compelling preview text (40-90 chars).
+- Draft scannable body copy with clear benefit hooks and exactly one primary CTA.
+
+### Step 4: Define Exit & Suppression Logic
+- Specify who should be excluded (suppression rules) and when they exit the flow automatically.
+
+### Step 5: Establish Performance Benchmarks
+- Provide standard industry metrics (Open Rate, CTR, Conversion Rate) for tracking.
+
+## Required Input
+
+- **Sequence Type**: Onboarding, lead nurture, re-engagement, win-back, etc.
+- **Goal**: The single action that ends the sequence.
+- **Audience**: Segmentation details, buyer persona, lifecycle stage.
+- **Delays/Timing**: Desired delay intervals.
+
+## Expected Output
+
+- **Sequence Overview Table**: Summary of emails, delays, and CTAs.
+- **Email Drafts**: Full copy-paste-ready drafts including subject lines, preview text, body copy, and CTAs.
+- **Branching Flow Diagram**: Text-based ASCII flow chart displaying paths and exit points.
+- **Target Performance Benchmarks Table**: Expected Open Rate, CTR, and Conversion metrics.
+
+## Tone & Rules
+
+- Write in a friendly, conversational, yet highly professional and value-first tone.
+- Avoid multiple competing CTAs in a single email. Keep it highly focused on one next step.
+- Include personalization tokens (e.g., `{{first_name}}`, `{{company}}`) in email body text.
+
+## Available Templates
+
+- None
+
+## Available Scripts
+
+- None
+
+## Examples
+
+See `examples/` directory.
+
+## Links to Other Skills
+
+- **content-creation**: Use content guidelines and hook formulas to write email drafts.
+- **documents**: Use to outline technical integration guides linked in the emails.

package/dist/core/templates/skills/email-sequence-skill.vi.md

@@ -0,0 +1,68 @@
+# Kỹ năng: Chuỗi Email Tự động (Email Sequence) (Cross-Cutting)
+
+## Mục đích
+
+Thiết kế và soạn thảo các chuỗi email tự động (drip campaigns, nurture flows, onboarding series) kèm nội dung chi tiết, thời gian giãn cách giữa các email, logic rẽ nhánh, điều kiện dừng và các chỉ số đo lường hiệu năng.
+
+## Khi nào sử dụng
+
+- Khi xây dựng chuỗi email chào mừng (onboarding), nuôi dưỡng leads (lead nurture), tương tác lại (re-engagement), kéo khách hàng quay lại (win-back) hoặc ra mắt sản phẩm.
+- Khi cần sơ đồ hóa toàn bộ luồng gửi email kèm các điều kiện rẽ nhánh và điểm dừng.
+- Khi thiết lập các chiến dịch tự động hóa trên các nền tảng như Klaviyo, HubSpot, Mailchimp hoặc Customer.io.
+
+## Quy trình từng bước
+
+### Bước 1: Chiến lược Chuỗi Email
+- Xác định mục tiêu cốt lõi của chuỗi (ví dụ: chuyển đổi từ dùng thử sang trả phí) và điều kiện thoát khỏi luồng (khi người nhận hoàn thành mục tiêu, tự động dừng gửi).
+- Thiết lập cốt truyện (narrative arc) xuyên suốt và logic tiến trình giữa các email.
+
+### Bước 2: Cấu trúc Chuỗi & Thời gian chờ (Delays)
+- Lên sơ đồ số lượng email và khoảng cách thời gian gửi (ví dụ: Email 1 gửi ngay ngày 0, Email 2 sau 3 ngày, v.v...).
+- Thiết lập logic rẽ nhánh dựa trên hành động của người nhận (ví dụ: đã mở nhưng chưa click vs. đã click link).
+
+### Bước 3: Soạn thảo Nội dung Email
+- Với mỗi email, cung cấp 2-3 phương án dòng tiêu đề (subject lines) và mô tả preview text hấp dẫn (40-90 ký tự).
+- Viết thân bài dễ đọc, ngắn gọn, đi thẳng vào lợi ích của khách hàng và chỉ chứa duy nhất một CTA chính.
+
+### Bước 4: Định nghĩa Điều kiện Dừng & Loại trừ
+- Chỉ rõ các đối tượng cần loại trừ (suppression rules) và thời điểm họ tự động thoát khỏi luồng để tránh spam.
+
+### Bước 5: Thiết lập Chỉ số Đo lường (Benchmarks)
+- Đưa ra các chỉ số tiêu chuẩn của ngành (Tỷ lệ Mở - Open Rate, Tỷ lệ Click - CTR, Tỷ lệ Chuyển đổi) để theo dõi và tối ưu.
+
+## Input yêu cầu
+
+- **Loại chuỗi**: Chào mừng (onboarding), nuôi dưỡng leads, re-engagement, win-back, v.v...
+- **Mục tiêu**: Hành động duy nhất để hoàn thành chuỗi email.
+- **Đối tượng**: Chi tiết phân khúc, chân dung khách hàng, giai đoạn vòng đời.
+- **Thời gian chờ/Giãn cách**: Khoảng cách mong muốn giữa các email.
+
+## Output mong đợi
+
+- **Bảng tóm tắt chuỗi**: Tóm tắt các email, thời gian chờ, và CTAs.
+- **Bản thảo chi tiết**: Bài viết hoàn chỉnh sẵn sàng copy-paste, bao gồm các phương án tiêu đề, preview text, thân bài và CTAs.
+- **Sơ đồ luồng rẽ nhánh**: Sơ đồ ASCII mô tả trực quan các luồng gửi và điểm dừng.
+- **Bảng mục tiêu hiệu năng**: Tỷ lệ mở, tỷ lệ click và tỷ lệ chuyển đổi kỳ vọng.
+
+## Giọng điệu & Quy tắc
+
+- Viết bằng giọng điệu thân thiện, mang tính đối thoại nhưng vẫn giữ sự chuyên nghiệp và luôn trao giá trị trước.
+- Tránh chèn quá nhiều CTAs cạnh tranh nhau trong một email. Tập trung cao độ vào một hành động tiếp theo duy nhất.
+- Sử dụng các token cá nhân hóa (ví dụ: `{{first_name}}`, `{{company}}`) trong văn bản.
+
+## Templates có sẵn
+
+- Không có
+
+## Templates Scripts có sẵn
+
+- Không có
+
+## Ví dụ
+
+Xem thư mục `examples/`.
+
+## Liên kết với các kỹ năng khác
+
+- **content-creation**: Áp dụng các nguyên tắc viết tiêu đề và viết mở bài thu hút để soạn thảo email.
+- **documents**: Dùng để phác thảo các hướng dẫn kỹ thuật chi tiết được đính kèm trong link email.