heraspec 0.1.0

package/dist/core/templates/skills/templates/example-prompt-full-theme.md

@@ -0,0 +1,333 @@
+# Example Prompts: Creating Full Theme Packages
+
+## Example Prompt 1: Healthcare & Spa Service Theme
+
+```
+Create a complete website package for professional healthcare and spa services with the following requirements:
+
+**Requirements:**
+- Product type: Beauty & Wellness Service
+- Style: Elegant, minimal, soft, professional
+- Industry: Healthcare/Beauty
+- Stack: html-tailwind (default)
+- Create all pages: home, about, services, blog listing, blog post details, category, pricing, faq, contact
+
+**Process:**
+1. Use skill ui-ux to search for design intelligence
+2. Create shared components first (Header, Footer, Button, Card)
+3. Implement each page in order: Home → About → Services → Category → Post Details → Pricing → FAQ → Contact
+4. Ensure consistency in colors, typography, spacing
+5. Responsive and accessible
+
+**Notes:**
+- Use search scripts with hybrid mode for best results
+- Follow pre-delivery checklist
+- Split components into separate files
+```
+
+---
+
+## Example Prompt 2: E-Commerce Theme
+
+```
+Create a complete website package for an online fashion store with the following requirements:
+
+**Requirements:**
+- Product type: E-commerce Luxury
+- Style: Elegant, premium, sophisticated
+- Industry: Fashion/Retail
+- Stack: Next.js with Tailwind CSS
+- Create all pages: home, about, product category, product details, cart, checkout, thank you, faq, contact
+
+**Process:**
+1. Use skill ui-ux to search:
+   - Product type recommendations
+   - Style guide with hybrid mode
+   - Color palette
+   - Typography
+   - Page types (home, product category, product details, cart, checkout, thank you)
+   - UX guidelines for e-commerce
+   - Next.js stack guidelines
+
+2. Create design system:
+   - Color palette from search results
+   - Typography from search results
+   - Component library (Button, Card, Form, etc.)
+
+3. Implement pages:
+   - Home with hero, featured products, testimonials
+   - Product category with filters
+   - Product details with gallery, add to cart
+   - Cart with quantity controls
+   - Checkout with form validation
+   - Thank you with order confirmation
+
+4. Ensure:
+   - Conversion optimization
+   - Mobile-first responsive
+   - Accessibility (WCAG AA)
+   - Performance optimization
+
+**Notes:**
+- Use vector/hybrid mode for better semantic search
+- Follow e-commerce best practices from search results
+```
+
+---
+
+## Example Prompt 3: SaaS Landing Theme
+
+```
+Create a complete website package for a project management SaaS platform with the following requirements:
+
+**Requirements:**
+- Product type: SaaS (General)
+- Style: Modern, clean, professional, tech-forward
+- Industry: B2B SaaS
+- Stack: React with Tailwind CSS
+- Create all pages: home, about, pricing, features, faq, contact, login, register, dashboard
+
+**Process:**
+1. Use skill ui-ux to search design intelligence:
+   ```bash
+   # Search with hybrid mode for best results
+   python3 heraspec/skills/ui-ux/scripts/search.py "SaaS project management" --domain product --mode hybrid
+   python3 heraspec/skills/ui-ux/scripts/search.py "modern clean professional tech" --domain style --mode hybrid
+   python3 heraspec/skills/ui-ux/scripts/search.py "SaaS" --domain color
+   python3 heraspec/skills/ui-ux/scripts/search.py "professional modern" --domain typography --mode vector
+   python3 heraspec/skills/ui-ux/scripts/search.py "home homepage" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "pricing plans tiers" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "login sign-in" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "dashboard account" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "responsive layout" --stack react --mode vector
+   ```
+
+2. Create shared components:
+   - Header with navigation
+   - Footer
+   - Button variants (primary, secondary, outline)
+   - Card components
+   - Form components
+   - Modal components
+
+3. Implement pages in order:
+   - Home: Hero, features, testimonials, CTA
+   - About: Mission, team, values
+   - Pricing: Plans comparison, FAQ
+   - Features: Feature showcase
+   - FAQ: Accordion with search
+   - Contact: Form + info
+   - Login/Register: Auth forms
+   - Dashboard: User dashboard with stats
+
+4. Ensure:
+   - Consistent design system
+   - Responsive design
+   - Accessibility
+   - Performance
+
+**Notes:**
+- Use search results to implement correct colors, fonts, styles
+- Follow SaaS design patterns from search results
+```
+
+---
+
+## Example Prompt 4: Blog/Content Site Theme
+
+```
+Create a complete website package for a technology blog with the following requirements:
+
+**Requirements:**
+- Product type: Content/News
+- Style: Clean, readable, modern
+- Industry: Technology/Education
+- Stack: Next.js with Tailwind CSS
+- Create all pages: home, blog listing, category, post details, about, contact, search results
+
+**Process:**
+1. Use skill ui-ux to search:
+   - Style recommendations for content sites
+   - Typography for readability
+   - Color palette for reading experience
+   - Page types (home, blog listing, category, post details, search results)
+
+2. Create components:
+   - Header with navigation and search
+   - Footer
+   - Post card component
+   - Category filter
+   - Search bar
+   - Author card
+   - Related posts component
+
+3. Implement pages:
+   - Home: Featured posts, recent posts, categories
+   - Blog listing: Post grid with pagination
+   - Category: Filtered post listing
+   - Post details: Full article with author, related posts
+   - Search results: Search with filters
+   - About: Author/company info
+   - Contact: Contact form
+
+4. Ensure:
+   - Readability is priority
+   - SEO optimization
+   - Fast loading
+   - Social sharing
+
+**Notes:**
+- Focus on typography and readability
+- Use vector mode for better semantic search
+```
+
+---
+
+## Example Prompt 5: Portfolio/Creative Agency Theme
+
+```
+Create a complete website package for a creative agency with the following requirements:
+
+**Requirements:**
+- Product type: Creative Agency
+- Style: Bold, creative, modern, artistic
+- Industry: Design/Marketing
+- Stack: React with Tailwind CSS
+- Create all pages: home, about, portfolio, services, team, contact, case studies
+
+**Process:**
+1. Use skill ui-ux to search:
+   - Creative agency style recommendations
+   - Bold, artistic color palettes
+   - Creative typography
+   - Portfolio page patterns
+   - Motion-driven design patterns
+
+2. Create components:
+   - Animated hero section
+   - Portfolio grid with filters
+   - Service cards
+   - Team member cards
+   - Case study components
+
+3. Implement pages:
+   - Home: Bold hero, featured work, services preview
+   - About: Agency story, mission
+   - Portfolio: Project grid with filters and lightbox
+   - Services: Service offerings
+   - Team: Team members
+   - Case studies: Detailed project showcases
+   - Contact: Contact form
+
+4. Ensure:
+   - Creative and unique
+   - Smooth animations
+   - Showcase work effectively
+   - Professional but artistic
+
+**Notes:**
+- Use motion-driven patterns from search results
+- Focus on visual impact
+```
+
+---
+
+## Standard Prompt Structure
+
+When creating prompts, should include:
+
+### 1. Basic Information
+```
+**Requirements:**
+- Product type: [SaaS, E-commerce, Service, etc.]
+- Style: [minimal, elegant, modern, etc.]
+- Industry: [Healthcare, Fintech, etc.]
+- Stack: [html-tailwind, react, nextjs, etc.]
+- Pages: [list pages to create]
+```
+
+### 2. Clear Process
+```
+**Process:**
+1. Use skill ui-ux to search design intelligence
+2. Create shared components
+3. Implement pages in order
+4. Ensure consistency and quality
+```
+
+### 3. Specific Search Commands (Optional)
+```
+**Search commands:**
+```bash
+python3 heraspec/skills/ui-ux/scripts/search.py "..." --domain ... --mode hybrid
+```
+```
+
+### 4. Special Notes
+```
+**Notes:**
+- Use appropriate search modes
+- Follow best practices
+- Check pre-delivery checklist
+```
+
+---
+
+## Tips for Effective Prompts
+
+1. **Be specific about product type and style** - Helps search more accurately
+2. **List all pages to create clearly** - Agent knows exact scope
+3. **Mention search modes** - Encourages using hybrid/vector for better results
+4. **Require consistency** - Ensures unified design system
+5. **Mention stack** - Agent will search stack-specific guidelines
+6. **Require accessibility** - Ensures WCAG compliance
+
+---
+
+## Short Prompt Example
+
+```
+Create a complete website package for [product type] with style [style keywords]. 
+Use skill ui-ux to search design intelligence with hybrid mode. 
+Create pages: [list pages]. 
+Stack: [stack]. 
+Ensure responsive, accessible, and consistent design system.
+```
+
+---
+
+## Detailed Prompt Example
+
+```
+Create a complete website package for [product type] with the following requirements:
+
+**Information:**
+- Product type: [type]
+- Style: [keywords]
+- Industry: [industry]
+- Stack: [stack]
+- Pages: [list]
+
+**Process:**
+1. Search design intelligence with skill ui-ux (use hybrid mode)
+2. Create shared components (Header, Footer, Button, Card)
+3. Implement pages: [order]
+4. Verify with pre-delivery checklist
+
+**Quality Requirements:**
+- Consistent design system
+- Responsive (320px, 768px, 1024px, 1440px)
+- Accessible (WCAG AA)
+- Performance optimized
+- Follow search results from ui-ux skill
+```
+
+---
+
+## Important Notes
+
+1. **Always mention skill ui-ux** - Agent will know to use this skill
+2. **Encourage using search modes** - Hybrid/Vector for better results
+3. **Require multi-page** - Agent will create full package instead of just landing page
+4. **Mention consistency** - Ensures all pages use same design system
+5. **Require checklist** - Agent will verify before delivering

package/dist/core/templates/skills/templates/page-types-guide.md

@@ -0,0 +1,338 @@
+# Page Types Guide - Multi-Page Website Package
+
+This guide provides templates and best practices for creating complete website packages with multiple page types.
+
+## Default Page Set
+
+When creating a complete website package (not just a landing page), the default set includes:
+
+1. **Home** - Main homepage
+2. **About** - Company/story page
+3. **Post Details** - Blog/article detail page
+4. **Category** - Blog/category listing page
+5. **Pricing** - Pricing/plans page
+6. **FAQ** - Frequently asked questions
+7. **Contact** - Contact form and information
+8. **Product Category** - E-commerce category listing
+9. **Product Details** - E-commerce product detail page
+
+## Page Type Templates
+
+### 1. Home Page
+
+**Purpose**: Main entry point, first impression, conversion focus
+
+**Key Sections**:
+- Hero with headline and primary CTA
+- Value proposition (what makes you different)
+- Key features (3-5 features with icons)
+- Social proof (testimonials, logos, stats)
+- Secondary CTA section
+- Footer with navigation
+
+**Layout Pattern**: Hero-Centric or Feature-Rich Showcase
+
+**Search Query**: `python3 scripts/search.py "home homepage" --domain pages`
+
+### 2. About Page
+
+**Purpose**: Build trust, humanize brand, show expertise
+
+**Key Sections**:
+- Page header with title
+- Mission/Vision statement
+- Story/Timeline (how you started)
+- Team grid (photos + roles)
+- Values/Principles
+- Optional: Stats/metrics
+- Optional: CTA
+
+**Layout Pattern**: Storytelling-Driven or Trust & Authority
+
+**Search Query**: `python3 scripts/search.py "about company story" --domain pages`
+
+### 3. Post Details (Blog Article)
+
+**Purpose**: Content consumption, readability, SEO
+
+**Key Sections**:
+- Breadcrumbs navigation
+- Article title + meta (date, author, category)
+- Featured image
+- Content body (readable typography)
+- Author bio card
+- Related posts grid
+- Optional: Comments section
+- Social share buttons
+
+**Layout Pattern**: Minimal & Direct or Content-First
+
+**Search Query**: `python3 scripts/search.py "post article blog" --domain pages`
+
+### 4. Category Page (Blog/Content)
+
+**Purpose**: Content discovery, filtering, browsing
+
+**Key Sections**:
+- Category header with title
+- Category description
+- Filter/search bar (optional)
+- Post grid (cards or list view)
+- Pagination
+- Optional: Sidebar with widgets
+
+**Layout Pattern**: Minimal & Direct or Bento Box Grid
+
+**Search Query**: `python3 scripts/search.py "category archive listing" --domain pages`
+
+### 5. Pricing Page
+
+**Purpose**: Conversion, clear pricing, address objections
+
+**Key Sections**:
+- Hero headline
+- Price comparison cards (3-4 tiers)
+- Feature comparison table
+- FAQ section (address common objections)
+- Optional: Testimonials
+- Final CTA
+
+**Layout Pattern**: Pricing-Focused Landing
+
+**Search Query**: `python3 scripts/search.py "pricing plans tiers" --domain pages`
+
+### 6. FAQ Page
+
+**Purpose**: Reduce support tickets, self-service
+
+**Key Sections**:
+- Hero with search bar
+- Popular categories/tabs
+- FAQ accordion (expandable Q&A)
+- Contact/support CTA (for unresolved questions)
+- Related articles
+
+**Layout Pattern**: FAQ/Documentation Landing
+
+**Search Query**: `python3 scripts/search.py "faq questions help" --domain pages`
+
+### 7. Contact Page
+
+**Purpose**: Lead capture, customer support
+
+**Key Sections**:
+- Hero/Header
+- Contact form (name, email, message - max 3-4 fields)
+- Contact information cards (address, phone, email)
+- Optional: Map embed
+- Social media links
+- Success message feedback
+
+**Layout Pattern**: Minimal & Direct or Trust & Authority
+
+**Search Query**: `python3 scripts/search.py "contact get-in-touch" --domain pages`
+
+### 8. Product Category (E-commerce)
+
+**Purpose**: Product discovery, filtering, browsing
+
+**Key Sections**:
+- Category header
+- Filter/sort bar
+- Product grid (cards with images, titles, prices)
+- Pagination or infinite scroll
+- Optional: Sidebar filters
+- Quick view modal (optional)
+
+**Layout Pattern**: E-commerce Clean or Bento Box Grid
+
+**Search Query**: `python3 scripts/search.py "product-category shop catalog" --domain pages`
+
+### 9. Product Details (E-commerce)
+
+**Purpose**: Conversion, product information, purchase decision
+
+**Key Sections**:
+- Breadcrumbs
+- Product image gallery (with zoom)
+- Product title + price
+- Product description
+- Add to cart form + options (size, color, quantity)
+- Specifications table
+- Reviews/ratings section
+- Related products grid
+
+**Layout Pattern**: Conversion-Optimized or Feature-Rich Showcase
+
+**Search Query**: `python3 scripts/search.py "product-detail single-product" --domain pages`
+
+## Implementation Workflow
+
+### Step 1: Search Page Type Template
+
+For each page type, search the pages database:
+
+```bash
+python3 scripts/search.py "<page-type-keywords>" --domain pages
+```
+
+### Step 2: Search Design System
+
+For consistent design across all pages:
+
+```bash
+# Product type
+python3 scripts/search.py "<product-type>" --domain product
+
+# Style
+python3 scripts/search.py "<style-keywords>" --domain style
+
+# Color palette
+python3 scripts/search.py "<product-type>" --domain color
+
+# Typography
+python3 scripts/search.py "<typography-keywords>" --domain typography
+```
+
+### Step 3: Create Shared Components
+
+Before creating individual pages, create shared components:
+
+- **Header/Navigation** - Consistent across all pages
+- **Footer** - Consistent across all pages
+- **Button styles** - Primary, secondary, CTA
+- **Card components** - For features, products, posts
+- **Form components** - For contact, search
+- **Layout wrapper** - Consistent spacing and max-width
+
+### Step 4: Implement Pages in Order
+
+Recommended order:
+
+1. **Home** - Establishes design system
+2. **About** - Uses same header/footer
+3. **Category** - Reuses card components
+4. **Post Details** - Uses category navigation
+5. **Pricing** - Standalone but consistent
+6. **FAQ** - Standalone but consistent
+7. **Contact** - Standalone but consistent
+8. **Product Category** (if e-commerce)
+9. **Product Details** (if e-commerce)
+
+### Step 5: Ensure Consistency
+
+- Same color palette across all pages
+- Same typography (heading + body fonts)
+- Same spacing system (Tailwind spacing scale)
+- Same navigation structure
+- Same footer content
+- Consistent button styles
+- Consistent card styles
+
+## Code Organization
+
+### File Structure
+
+```
+src/
+├── components/
+│   ├── shared/
+│   │   ├── Header.tsx (or Header.html)
+│   │   ├── Footer.tsx (or Footer.html)
+│   │   ├── Button.tsx
+│   │   └── Card.tsx
+│   ├── home/
+│   │   ├── Hero.tsx
+│   │   └── Features.tsx
+│   ├── about/
+│   │   ├── Team.tsx
+│   │   └── Timeline.tsx
+│   └── ...
+├── pages/
+│   ├── index.html (or Home.tsx)
+│   ├── about.html (or About.tsx)
+│   ├── blog/
+│   │   ├── [slug].html (or PostDetails.tsx)
+│   │   └── category/[category].html
+│   ├── pricing.html
+│   ├── faq.html
+│   ├── contact.html
+│   └── products/
+│       ├── category/[category].html
+│       └── [slug].html
+└── styles/
+    ├── globals.css (or tailwind.config.js)
+    └── components.css
+```
+
+### Component Reusability
+
+- Extract common patterns into components
+- Use props/variables for customization
+- Keep components under 200-300 lines
+- One component per file
+
+## Best Practices
+
+### Navigation
+
+- Consistent navigation across all pages
+- Active state indication (current page highlighted)
+- Mobile-responsive hamburger menu
+- Breadcrumbs for deep pages (3+ levels)
+
+### Responsive Design
+
+- Mobile-first approach
+- Test at: 320px, 768px, 1024px, 1440px
+- No horizontal scroll on mobile
+- Touch-friendly targets (44x44px minimum)
+
+### Performance
+
+- Lazy load images below fold
+- Optimize images (WebP format, appropriate sizes)
+- Minimize JavaScript
+- Use CSS for animations when possible
+
+### Accessibility
+
+- Semantic HTML
+- ARIA labels where needed
+- Keyboard navigation
+- Focus indicators
+- Alt text for images
+- Form labels
+- Color contrast (4.5:1 minimum)
+
+## Example: Complete Website Package
+
+**User Request**: "Tạo gói website đầy đủ cho dịch vụ chăm sóc da"
+
+**Agent Workflow**:
+
+1. Search product type: `python3 scripts/search.py "beauty spa wellness service" --domain product`
+2. Search style: `python3 scripts/search.py "elegant minimal soft" --domain style`
+3. Search color: `python3 scripts/search.py "beauty spa wellness" --domain color`
+4. Search typography: `python3 scripts/search.py "elegant luxury" --domain typography`
+
+5. For each page type:
+   - `python3 scripts/search.py "home homepage" --domain pages`
+   - `python3 scripts/search.py "about company" --domain pages`
+   - `python3 scripts/search.py "post article" --domain pages`
+   - `python3 scripts/search.py "category archive" --domain pages`
+   - `python3 scripts/search.py "pricing plans" --domain pages`
+   - `python3 scripts/search.py "faq questions" --domain pages`
+   - `python3 scripts/search.py "contact" --domain pages`
+
+6. Create shared components (Header, Footer, Button, Card)
+7. Implement pages in recommended order
+8. Ensure consistency across all pages
+9. Verify with pre-delivery checklist
+
+## Notes
+
+- **Default pages**: If user doesn't specify, create all 9 default pages
+- **Custom pages**: User can specify which pages to create
+- **E-commerce pages**: Only create Product Category and Product Details if product type is e-commerce
+- **Consistency**: Most important - all pages should feel like one cohesive website