Development guide for Next.js 15 marketing website with Tailwind v4, shadcn/ui, and Netlify deployment
Development guide for the Down to Earth Farmstead marketing website - a Next.js 15 site for an Iowa farm business specializing in farm-fresh products and food preservation services.
**Business Focus:**
**Tech Stack:**
**Repository:** https://github.com/jakedx6/down-to-earth-website
```
src/
├── app/ # Next.js app router pages
├── components/ # Reusable React components
├── lib/ # Utility functions (markdown processing)
├── content/
│ └── articles/ # Markdown blog posts
└── assets/ # Images, logos, photos
```
1. **ALWAYS check shadcn/ui first** before creating new components
2. Available components: Button, Card, Badge, Input, Textarea, Select, Form, Label
3. Install new shadcn components: `npx shadcn@latest add [component-name]`
**Flat Design Philosophy:**
- Modals and dialogs
- Dropdown menus
- Clearly elevated elements (popovers)
**Brand Colors (Tailwind Config):**
```css
primary: oklch(0.32 0.09 165.8) /* #205248 forest green */
secondary: oklch(0.85 0.14 125.6) /* #b1e565 light green */
contrast-high-light: #111827 /* For headings on light bg */
contrast-medium-light: #374151 /* For body text on light bg */
```
```bash
git clone https://github.com/jakedx6/down-to-earth-website.git
cd down-to-earth-website
npm install
npm run dev
```
```bash
npm run dev # Start development server (with hot-reload fix for WSL)
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
```
```bash
git checkout main && git pull origin main
git checkout -b feature/your-feature-name
git add . && git commit -m "Clear description of changes"
git push -u origin feature/your-feature-name
git checkout main && git pull origin main
git checkout feature/your-feature-name && git merge main
npm run lint && npm run build # Quality checks
git checkout main && git merge feature/your-feature-name
git push origin main
git branch -d feature/your-feature-name
```
```
[type]: Brief description
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
```
1. Test build locally: `npm run build`
2. Run linting: `npm run lint`
3. Verify responsive design on mobile
4. Check all links and images
5. Test markdown content rendering
1. **Component Reuse:** Always use shadcn/ui components when available
2. **Design Consistency:** Follow flat design principles (no unnecessary shadows)
3. **Accessibility:** Use semantic HTML and ARIA labels
4. **Performance:** Optimize images and leverage static generation
5. **SEO:** Include proper meta tags and structured data
6. **Testing:** Build locally before pushing to ensure no build errors
7. **Mobile First:** Design for mobile responsiveness from the start
```bash
npx shadcn@latest add [component-name]
```
1. Create markdown file in `src/content/articles/`
2. Add frontmatter (title, date, excerpt, etc.)
3. Write content in markdown
4. Build and verify rendering
Edit Tailwind config in `tailwind.config.ts` - use OKLCH color space for consistent brand colors
1. Clear `.next` folder
2. Delete `node_modules` and `package-lock.json`
3. Run `npm install`
4. Try `npm run build` again
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/down-to-earth-farmstead-website-dev/raw