Project Purpose

This project serves as a modern component catalog and pattern library built with Nuxt 3 (with Nuxt 4 features enabled). It acts as a foundation for extracting and adapting patterns across different technology stacks and environments.

Development Philosophy

• Build Fast, Adapt Later: Use modern tools (Vue/Nuxt) for rapid initial development
• Pattern Extraction: Components and patterns are designed to be stack-agnostic
• Technology Agnostic: While built with Vue, patterns should be extractable to:
  • React applications
  • AEM projects
  • Other backend environments

Key Considerations

• Atomic Design: Components and features are built with atomic design principles
• Security First: Implementation of secure patterns and practices
• Progressive Enhancement: Starting with solid HTML/CSS that can be enhanced based on the target environment

Technology Stack

• Frontend: Nuxt 3 with Nuxt 4 features enabled
• Styling: TailwindCSS
• Future Integrations:
  • Supabase for backend services
  • Preview deployment pipelines
  • Additional security measures

Development Workflow

1. Build components/features in this modern stack
2. Document HTML/CSS patterns
3. Extract and adapt for target environments
4. Maintain atomic commits with clear documentation
5. Regular security reviews

Notes for AI Assistance

When working with AI assistants on this project:

1. Focus on atomic, well-organized changes
2. Consider cross-platform compatibility
3. Emphasize security implications
4. Document patterns for reuse
5. Maintain clear commit messages and documentation

Component Documentation Structure

components/
  └── [component]/
      ├── Component.vue
      ├── Component.docs.md
      └── adaptations/
          ├── react.md
          └── aem.md

Commit Message Structure

feat(pattern/[component-name]): Add responsive navigation
- HTML/CSS base implementation
- Vue-specific enhancements
- Extraction notes for React/AEM