Comprehensive rules for building a NextJS AI outreach platform with TypeScript, Tailwind, and Shadcn UI in a monorepo structure. Includes patterns for hero sections, content management, and multi-channel messaging features.
Build a NextJS-based AI outreach platform with marketing website and admin dashboard in a monorepo structure using TypeScript, Tailwind CSS, Shadcn UI, and Tailark components.
1. Use TypeScript for all files with `.tsx` or `.ts` extensions
2. Write functional components with hooks exclusively
3. Define proper TypeScript interfaces for all component props
4. Export reusable types and interfaces from components
5. Apply `const` assertions to readonly objects for type safety
1. Implement the HeroWrapper pattern for flexible, prop-based hero sections with variants (default, simple, minimal)
2. Favor composition over inheritance for component design
3. Create reusable components with clear, well-documented prop interfaces
4. Use content configuration objects for managing page-specific data
5. Support multiple styling variants for flexibility across pages
1. Use Tailwind CSS utility classes for all styling
2. Follow responsive-first design approach: mobile → tablet → desktop
3. Build upon Shadcn UI components as the base component layer
4. Implement comprehensive dark mode support with CSS variables
5. Use CSS custom properties for consistent theming across the application
Follow this directory structure:
```
website/src/
├── app/ # NextJS app router pages
├── components/
│ ├── ui/ # Shadcn base components
│ ├── blocks/ # Tailark components
│ ├── hero-wrapper.tsx # Flexible hero system
│ └── site-header.tsx # Shared header
├── config/ # Site configuration
├── lib/ # Utilities and content
└── tailark-core/ # Tailark component system
```
1. Use structured content objects with TypeScript interfaces for type safety
2. Centralize site-wide configuration in `config/site.config.ts`
3. Define page-specific content within respective page files
4. Implement prop-based content system for maximum reusability
1. Use single header approach - avoid double headers
2. Integrate navigation directly into hero sections
3. Maintain consistent branding with "Elemente" and custom logo
4. Ensure mobile-responsive navigation with hamburger menu
1. Implement comprehensive meta tags for SEO optimization
2. Use Next.js Image component for automatic optimization
3. Enable SVG support with `dangerouslyAllowSVG: true` configuration
4. Lazy load components where appropriate to reduce initial bundle size
5. Monitor and optimize Core Web Vitals metrics
1. Primary brand identity: "Elemente - AI-Driven Outreach That Converts"
2. Focus messaging on conversion rates, automation capabilities, and AI personalization
3. Target audiences: Sales teams, marketing professionals, agencies
4. Emphasize value propositions: AI personalization, multi-channel outreach, workflow automation
1. Lead with results and measurable metrics (e.g., "300% conversion increase")
2. Incorporate social proof through customer testimonials and case studies
3. Present clear pricing tiers: Starter ($49), Professional ($149), Enterprise (custom)
4. Offer free trial with no credit card required to reduce friction
5. Use benefits-focused copy in feature showcases
1. Implement hero variants for different page contexts:
- **default**: Full-featured hero with images and CTAs
- **simple**: Clean layout with essential elements
- **minimal**: Text-focused for content-heavy pages
2. Integrate strategic CTAs in footers and key conversion points
3. Create feature showcases that emphasize user benefits
4. Build stats sections highlighting impressive platform metrics
1. Support motion/framer-motion for engaging animations
2. Integrate Tailark component library for advanced UI patterns
3. Enable multi-channel messaging: Email, LinkedIn, phone
4. Implement analytics and conversion tracking systems
Follow these steps for consistent development:
1. **Start with strategy**: Define content strategy and user needs first
2. **Use HeroWrapper**: Implement consistent page headers using the HeroWrapper pattern
3. **Mobile-first approach**: Build for mobile, then progressively enhance for desktop
4. **Test responsiveness**: Verify design across all breakpoints (sm, md, lg, xl, 2xl)
5. **Optimize performance**: Focus on Core Web Vitals optimization
6. **Error handling**: Implement proper error boundaries and loading states
1. Monitor and control bundle size - avoid unnecessary dependencies
2. Use dynamic imports for large or conditionally-rendered components
3. Optimize images: use WebP/AVIF formats, proper sizing, lazy loading
4. Gradually enable TypeScript strict mode for improved type safety
5. Track build times and optimize compilation when needed
6. Implement code splitting at route level
Before committing code, verify:
1. Write meaningful, descriptive commit messages
2. Ignore build artifacts: `.next/`, `dist/`, `node_modules/`
3. Remove large files before committing to keep repository lean
4. Use semantic versioning (MAJOR.MINOR.PATCH) for releases
5. Create feature branches for new development work
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/elemente-v2-ai-outreach-platform-development-hla38v/raw