heraspec 0.1.0

package/dist/core/templates/skills/templates/pages-proposed-summary.md

@@ -0,0 +1,273 @@
+# Proposed Additional Page Types
+
+This file lists common page types proposed to be added to the system. Please review and confirm which pages you want to integrate.
+
+## 📋 Overview
+
+**Currently have:** 9 page types (Home, About, Post Details, Category, Pricing, FAQ, Contact, Product Category, Product Details)
+
+**Proposed additions:** 21 common page types
+
+---
+
+## 🎯 Group 1: E-Commerce & Shopping (4 pages)
+
+### 10. Cart (Shopping Cart)
+**Description:** Shopping cart page displaying added products, allowing quantity adjustment, product removal, and navigation to checkout.
+
+**When to use:** All e-commerce websites
+
+**Priority:** ⭐⭐⭐⭐⭐ (Very high - essential for e-commerce)
+
+---
+
+### 11. Checkout
+**Description:** Checkout page with shipping address form, payment method selection, and order summary.
+
+**When to use:** All e-commerce websites
+
+**Priority:** ⭐⭐⭐⭐⭐ (Very high - essential for e-commerce)
+
+---
+
+### 12. Thank You (Order Confirmation)
+**Description:** Confirmation page after successful order placement, displaying order number and next steps.
+
+**When to use:** All e-commerce websites
+
+**Priority:** ⭐⭐⭐⭐ (High - improves UX)
+
+---
+
+### 13. Compare (Product Comparison)
+**Description:** Product comparison page with side-by-side comparison, helping users decide between options.
+
+**When to use:** E-commerce with many similar products
+
+**Priority:** ⭐⭐⭐ (Medium - optional)
+
+---
+
+## 🔐 Group 2: User Account & Authentication (4 pages)
+
+### 14. Login
+**Description:** Login page with email/password form, forgot password link, and social login options.
+
+**When to use:** All websites with user accounts
+
+**Priority:** ⭐⭐⭐⭐⭐ (Very high - essential)
+
+---
+
+### 15. Register (Sign Up)
+**Description:** Registration page for new accounts with signup form and terms & conditions.
+
+**When to use:** All websites with user accounts
+
+**Priority:** ⭐⭐⭐⭐⭐ (Very high - essential)
+
+---
+
+### 16. Dashboard (User Dashboard)
+**Description:** User account overview page with statistics, personal information, and navigation.
+
+**When to use:** All websites with user accounts
+
+**Priority:** ⭐⭐⭐⭐ (High - improves UX)
+
+---
+
+### 17. Account Settings
+**Description:** Account settings page to change personal information, password, and preferences.
+
+**When to use:** All websites with user accounts
+
+**Priority:** ⭐⭐⭐⭐ (High - improves UX)
+
+---
+
+## 📝 Group 3: Content & Blog (2 pages)
+
+### 18. Blog Listing
+**Description:** Main blog listing page (different from Category - this is the index page for the entire blog).
+
+**When to use:** Websites with blog/content
+
+**Priority:** ⭐⭐⭐⭐ (High - distinguishes from Category)
+
+---
+
+### 19. Search Results
+**Description:** Search results page with filters, sort options, and empty state when no results found.
+
+**When to use:** All websites with search functionality
+
+**Priority:** ⭐⭐⭐⭐ (High - improves UX)
+
+---
+
+## 🎨 Group 4: Business & Services (4 pages)
+
+### 20. Services
+**Description:** Page introducing services/solutions that the company provides.
+
+**When to use:** Service-based businesses (agency, consulting, etc.)
+
+**Priority:** ⭐⭐⭐⭐ (High - common for service businesses)
+
+---
+
+### 21. Portfolio
+**Description:** Page showcasing projects/work done with filters and lightbox.
+
+**When to use:** Creative agencies, freelancers, designers
+
+**Priority:** ⭐⭐⭐ (Medium - industry-dependent)
+
+---
+
+### 22. Testimonials (Standalone)
+**Description:** Separate page for testimonials/reviews with filters and video testimonials.
+
+**When to use:** All business types (can be integrated into Home but standalone is better)
+
+**Priority:** ⭐⭐⭐ (Medium - optional)
+
+---
+
+### 23. Team (Standalone)
+**Description:** Separate page introducing team (different from About - About may have team but Team page is more detailed).
+
+**When to use:** Companies wanting to highlight team members
+
+**Priority:** ⭐⭐⭐ (Medium - optional)
+
+---
+
+## 💼 Group 5: Business Operations (2 pages)
+
+### 24. Careers (Jobs)
+**Description:** Careers page with open positions list, company culture, and application form.
+
+**When to use:** Companies that are hiring
+
+**Priority:** ⭐⭐⭐ (Medium - as needed)
+
+---
+
+### 25. Events
+**Description:** Events page with calendar, events list, and registration.
+
+**When to use:** Event organizers, conferences, workshops
+
+**Priority:** ⭐⭐ (Low - industry-dependent)
+
+---
+
+## 📚 Group 6: Documentation & Help (1 page)
+
+### 26. Documentation (Help Center)
+**Description:** Technical documentation page with search, sidebar navigation, code examples.
+
+**When to use:** Developer tools, SaaS platforms, technical products
+
+**Priority:** ⭐⭐⭐ (Medium - product-dependent)
+
+---
+
+## ⚖️ Group 7: Legal Pages (2 pages)
+
+### 27. Privacy Policy
+**Description:** Privacy policy page - legal requirement for most websites.
+
+**When to use:** All websites (legal requirement)
+
+**Priority:** ⭐⭐⭐⭐⭐ (Very high - mandatory)
+
+---
+
+### 28. Terms of Service
+**Description:** Terms of service page - legal requirement for most websites.
+
+**When to use:** All websites (legal requirement)
+
+**Priority:** ⭐⭐⭐⭐⭐ (Very high - mandatory)
+
+---
+
+## 🚧 Group 8: Utility Pages (2 pages)
+
+### 29. 404 Error (Not Found)
+**Description:** Friendly 404 error page with navigation and search to help users find content again.
+
+**When to use:** All websites
+
+**Priority:** ⭐⭐⭐⭐ (High - improves UX)
+
+---
+
+### 30. Coming Soon
+**Description:** "Coming soon" page with countdown timer and email signup form.
+
+**When to use:** Pre-launch websites, maintenance mode
+
+**Priority:** ⭐⭐ (Low - situation-dependent)
+
+---
+
+## 📊 Summary of Proposals
+
+### Very High Priority (Should integrate immediately):
+1. ✅ **Cart** - E-commerce
+2. ✅ **Checkout** - E-commerce
+3. ✅ **Login** - User accounts
+4. ✅ **Register** - User accounts
+5. ✅ **Privacy Policy** - Legal requirement
+6. ✅ **Terms of Service** - Legal requirement
+
+### High Priority (Should integrate):
+7. ✅ **Thank You** - E-commerce UX
+8. ✅ **Dashboard** - User accounts
+9. ✅ **Account Settings** - User accounts
+10. ✅ **Blog Listing** - Content sites
+11. ✅ **Search Results** - All sites
+12. ✅ **Services** - Service businesses
+13. ✅ **404 Error** - All sites
+
+### Medium Priority (Optional):
+14. ⚠️ **Compare** - E-commerce
+15. ⚠️ **Portfolio** - Creative agencies
+16. ⚠️ **Testimonials** - All businesses
+17. ⚠️ **Team** - All businesses
+18. ⚠️ **Careers** - Hiring companies
+19. ⚠️ **Documentation** - Technical products
+
+### Low Priority (Situation-dependent):
+20. ⚠️ **Events** - Event organizers
+21. ⚠️ **Coming Soon** - Pre-launch
+
+---
+
+## 🎯 Integration Recommendation
+
+**Integrate immediately (13 pages):**
+- Cart, Checkout, Thank You
+- Login, Register, Dashboard, Account Settings
+- Blog Listing, Search Results
+- Services
+- Privacy Policy, Terms of Service
+- 404 Error
+
+**Integrate later (8 pages):**
+- Compare, Portfolio, Testimonials, Team, Careers, Documentation, Events, Coming Soon
+
+---
+
+## 📝 Notes
+
+- Each page has detailed description in `pages-proposed.csv` file
+- Can integrate by group or all at once depending on needs
+- Legal pages (Privacy Policy, Terms) should be integrated early due to legal requirements
+- E-commerce pages (Cart, Checkout, Thank You) are essential for e-commerce websites
+
+**Please confirm which pages you want to integrate into the system!** 🚀

package/dist/core/templates/skills/templates/pre-delivery-checklist.md

@@ -0,0 +1,42 @@
+# Pre-Delivery Checklist for UI/UX
+
+Before delivering UI code, verify these items:
+
+## Visual Quality
+
+- [ ] No emojis used as icons (use SVG instead - Heroicons, Lucide, Simple Icons)
+- [ ] All icons from consistent icon set
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift (use color/opacity, not scale)
+
+## Interaction
+
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+## Light/Dark Mode
+
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode (`bg-white/80` not `bg-white/10`)
+- [ ] Borders visible in both modes (`border-gray-200` in light mode)
+- [ ] Test both modes before delivery
+
+## Layout
+
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 320px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+- [ ] Consistent max-width (`max-w-6xl` or `max-w-7xl`)
+
+## Accessibility
+
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected
+- [ ] Keyboard navigation works
+- [ ] Screen reader friendly
+

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

@@ -0,0 +1,313 @@
+# Prompt Template: Creating Full Theme Packages
+
+## Basic Template (Copy & Paste)
+
+```
+Create a complete website package for [PRODUCT_TYPE] with the following requirements:
+
+**Project Information:**
+- Product type: [SaaS / E-commerce / Service / Portfolio / etc.]
+- Style: [minimal / elegant / modern / bold / etc.]
+- Industry: [Healthcare / Fintech / Beauty / etc.]
+- Stack: [html-tailwind / react / nextjs / etc.]
+- Pages to create: home, about, [add other pages if needed]
+
+**Process:**
+1. Use skill ui-ux to search design intelligence:
+   - Product type recommendations (--mode hybrid)
+   - Style guide (--mode hybrid)
+   - Color palette
+   - Typography (--mode vector)
+   - Page types for each page (--domain pages)
+   - UX guidelines
+   - Stack-specific guidelines (--stack [stack])
+
+2. Create shared components first:
+   - Header/Navigation
+   - Footer
+   - Button components
+   - Card components
+   - Form components
+
+3. Implement pages in order:
+   - Home → About → [other pages]
+   - Ensure consistency in colors, typography, spacing
+
+4. Verify with pre-delivery checklist
+
+**Quality Requirements:**
+- ✅ Consistent design system (same colors, fonts, spacing)
+- ✅ Responsive (320px, 768px, 1024px, 1440px)
+- ✅ Accessible (WCAG AA minimum)
+- ✅ Performance optimized
+- ✅ Follow search results from ui-ux skill
+
+**Notes:**
+- Use hybrid/vector mode for better search results
+- Split components into separate files
+- Follow best practices from search results
+```
+
+---
+
+## Template for E-Commerce
+
+```
+Create a complete website package for online [PRODUCT_TYPE] store with the following requirements:
+
+**Information:**
+- Product type: E-commerce [Luxury / General]
+- Style: [elegant / modern / vibrant]
+- Industry: [Fashion / Electronics / etc.]
+- Stack: [html-tailwind / nextjs / react]
+- Pages: home, about, product category, product details, cart, checkout, thank you, faq, contact
+
+**Process:**
+1. Search with skill ui-ux (use hybrid mode):
+   - E-commerce product recommendations
+   - Style guide
+   - Color palette
+   - Page types: product category, product details, cart, checkout, thank you
+   - E-commerce UX guidelines
+   - Stack guidelines
+
+2. Create design system and shared components
+
+3. Implement pages with focus on conversion:
+   - Product pages with clear CTAs
+   - Cart with easy management
+   - Checkout with trust signals
+   - Thank you with order confirmation
+
+**Requirements:**
+- Conversion optimization
+- Trust signals (reviews, security badges)
+- Clear pricing and product info
+- Mobile-first responsive
+- Fast loading
+```
+
+---
+
+## Template for SaaS
+
+```
+Create a complete website package for SaaS platform [PRODUCT_NAME] with the following requirements:
+
+**Information:**
+- Product type: SaaS [General / Micro SaaS]
+- Style: [modern / clean / professional / tech-forward]
+- Industry: [B2B / B2C]
+- Stack: [react / nextjs / vue]
+- Pages: home, about, pricing, features, faq, contact, login, register, dashboard
+
+**Process:**
+1. Search with skill ui-ux (hybrid mode):
+   - SaaS product recommendations
+   - Modern/clean style guide
+   - Professional color palette
+   - Typography for SaaS
+   - Page types: home, pricing, login, register, dashboard
+   - SaaS UX guidelines
+   - Stack guidelines
+
+2. Create components library
+
+3. Implement pages:
+   - Home: Hero, features, social proof, CTA
+   - Pricing: Plans comparison, FAQ
+   - Auth: Login/Register with validation
+   - Dashboard: User dashboard with stats
+
+**Requirements:**
+- Professional and trustworthy
+- Clear value proposition
+- Easy signup flow
+- Responsive dashboard
+```
+
+---
+
+## Template for Service Business
+
+```
+Create a complete website package for [SERVICE_TYPE] service with the following requirements:
+
+**Information:**
+- Product type: Service Landing Page / B2B Service
+- Style: [elegant / professional / trustworthy]
+- Industry: [Healthcare / Legal / Consulting / etc.]
+- Stack: html-tailwind
+- Pages: home, about, services, team, testimonials, faq, contact
+
+**Process:**
+1. Search with skill ui-ux:
+   - Service business recommendations
+   - Trust & Authority style
+   - Professional color palette
+   - Page types: home, about, services, team, testimonials
+   - UX guidelines for service businesses
+
+2. Create components
+
+3. Implement pages with focus on trust:
+   - Home: Hero, services preview, testimonials
+   - About: Story, mission, values
+   - Services: Service offerings
+   - Team: Team members
+   - Testimonials: Client feedback
+   - Contact: Contact form
+
+**Requirements:**
+- Build trust and credibility
+- Show expertise
+- Professional appearance
+- Easy contact
+```
+
+---
+
+## Template for Blog/Content Site
+
+```
+Create a complete website package for [TOPIC] blog with the following requirements:
+
+**Information:**
+- Product type: Content/News
+- Style: [clean / readable / minimal]
+- Industry: [Technology / Education / etc.]
+- Stack: [nextjs / react]
+- Pages: home, blog listing, category, post details, about, contact, search results
+
+**Process:**
+1. Search with skill ui-ux:
+   - Content site style
+   - Readable typography
+   - Color palette for reading
+   - Page types: blog listing, category, post details, search results
+   - Content UX guidelines
+
+2. Create components:
+   - Post cards
+   - Category filters
+   - Search bar
+   - Author cards
+   - Related posts
+
+3. Implement pages with focus on readability:
+   - Blog listing with pagination
+   - Post details with good typography
+   - Search results with filters
+   - Category pages
+
+**Requirements:**
+- Readability is priority
+- SEO optimization
+- Fast loading
+- Social sharing
+- Easy navigation
+```
+
+---
+
+## Quick Reference: Common Pages
+
+### Default Set (9 pages)
+- home
+- about
+- post details
+- category
+- pricing
+- faq
+- contact
+- product category (e-commerce)
+- product details (e-commerce)
+
+### E-Commerce Additional
+- cart
+- checkout
+- thank you
+
+### User Accounts Additional
+- login
+- register
+- dashboard
+- account settings
+
+### Content Sites Additional
+- blog listing
+- search results
+
+---
+
+## Tips for Using Templates
+
+1. **Replace [PRODUCT_TYPE]** with specific product type
+2. **Choose style keywords** that match your brand
+3. **List all pages** that need to be created
+4. **Choose stack** that fits your project
+5. **Mention search modes** to get better results
+6. **Require consistency** to ensure unified design system
+
+---
+
+## Complete Example
+
+```
+Create a complete website package for professional skincare service with the following requirements:
+
+**Project Information:**
+- Product type: Beauty & Wellness Service
+- Style: elegant, minimal, soft, professional
+- Industry: Healthcare/Beauty
+- Stack: html-tailwind (default)
+- Pages to create: home, about, services, blog listing, post details, category, pricing, faq, contact
+
+**Process:**
+1. Use skill ui-ux to search design intelligence:
+   ```bash
+   python3 heraspec/skills/ui-ux/scripts/search.py "beauty spa wellness service" --domain product --mode hybrid
+   python3 heraspec/skills/ui-ux/scripts/search.py "elegant minimal soft professional" --domain style --mode hybrid
+   python3 heraspec/skills/ui-ux/scripts/search.py "beauty spa wellness" --domain color
+   python3 heraspec/skills/ui-ux/scripts/search.py "elegant luxury" --domain typography --mode vector
+   python3 heraspec/skills/ui-ux/scripts/search.py "home homepage" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "about company story" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "services offerings" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "pricing plans" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "faq questions" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "contact" --domain pages
+   python3 heraspec/skills/ui-ux/scripts/search.py "animation accessibility" --domain ux
+   python3 heraspec/skills/ui-ux/scripts/search.py "layout responsive" --stack html-tailwind
+   ```
+
+2. Create shared components first:
+   - Header with navigation
+   - Footer
+   - Button components (primary, secondary)
+   - Card components (service cards, post cards)
+   - Form components
+
+3. Implement pages in order:
+   - Home: Hero, services preview, testimonials, CTA
+   - About: Mission, story, team, values
+   - Services: Service offerings with descriptions
+   - Blog listing: Post grid with pagination
+   - Category: Category page with filters
+   - Post details: Full article with author, related posts
+   - Pricing: Plans comparison, FAQ
+   - FAQ: Accordion with search
+   - Contact: Contact form + info
+
+4. Ensure:
+   - ✅ Consistent design system (same colors, fonts from search results)
+   - ✅ Responsive (320px, 768px, 1024px, 1440px)
+   - ✅ Accessible (WCAG AA)
+   - ✅ Performance optimized
+   - ✅ Follow search results from ui-ux skill
+
+**Notes:**
+- Use hybrid/vector mode for better search results
+- Split components into separate files
+- Follow pre-delivery checklist
+- Ensure all pages use the same design system
+```

package/dist/core/templates/skills/templates/responsive-design.md

@@ -0,0 +1,40 @@
+# Responsive Design Checklist
+
+## Breakpoints
+
+Test at these breakpoints:
+- **Mobile**: 320px, 375px, 414px
+- **Tablet**: 768px, 1024px
+- **Desktop**: 1280px, 1440px, 1920px
+
+## Mobile-First Approach
+
+- [ ] Start with mobile layout
+- [ ] Use `min-width` media queries
+- [ ] Progressive enhancement for larger screens
+
+## Touch Targets
+
+- [ ] Minimum 44x44px for touch targets
+- [ ] Adequate spacing between interactive elements
+- [ ] No hover-only interactions (provide tap alternatives)
+
+## Layout
+
+- [ ] No horizontal scroll on mobile
+- [ ] Content doesn't overflow containers
+- [ ] Images scale appropriately
+- [ ] Text remains readable at all sizes
+
+## Navigation
+
+- [ ] Mobile menu works correctly
+- [ ] Navigation accessible on all screen sizes
+- [ ] Fixed elements don't block content
+
+## Typography
+
+- [ ] Font sizes scale appropriately
+- [ ] Line height readable on mobile
+- [ ] Text doesn't overflow containers
+