SmelterOS Common Actions

Quick reference for frequently performed development tasks. Use these to maintain consistency and reduce errors.

🧭 Skill Activation Router

Use this table to activate the correct skill based on your task:

Quick Activation Commands

When you need a specific skill, say:

• "Use the design system skill"
• "Activate UI patterns"
• "Load workflow execution skill"
• "Apply MCP management"

🔥 Project Structure Reference

The SmelterOS/
├── apps/web/                     # Next.js web application
│   ├── src/
│   │   ├── app/                  # Next.js App Router pages
│   │   ├── components/           # React components
│   │   │   ├── ui/               # Base UI components (buttons, cards, etc.)
│   │   │   └── animations/       # Framer Motion animations
│   │   └── lib/                  # Utilities and helpers
│   ├── public/                   # Static assets
│   │   └── assets/               # Images, logos, backgrounds
│   └── tailwind.config.ts        # Tailwind configuration
├── smelter/                      # Backend services
│   └── services/                 # Docker Compose services
├── chickenhawk/                  # Chicken Hawk Agent Framework
└── .agent/                       # Agent configuration
    ├── skills/                   # Skill definitions (this folder)
    └── workflows/                # Workflow definitions

🚀 Development Server Commands

Start Next.js Dev Server

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
npm run dev

URL: http://localhost:3000

Build for Production

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
npm run build

Start Docker Services

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS
docker-compose up -d

📦 Package Management

Install a New Package

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
npm install <package-name>

Install Dev Dependency

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
npm install -D <package-name>

Common Packages Used

🎨 Component Creation Checklist

When creating a new component:

1. Create the component file:

`` apps/web/src/components/[category]/ComponentName.tsx ``

1. Use the standard template:

```typescript "use client"

import { type ComponentProps } from "react"

interface ComponentNameProps { // Define props here }

export function ComponentName({ ...props }: ComponentNameProps) { return ( <div> {/ Component content /} </div> ) } ```

1. Export from index (if applicable):

``typescript export { ComponentName } from "./ComponentName" ``

1. Follow SmelterOS Design System for colors and styling

🖼️ Asset Management

Image Locations

Current Key Assets

Adding New Images

1. Place in /apps/web/public/ or /apps/web/public/assets/
2. Reference with leading slash: src="/smelter-hero.png" or src="/assets/magma-bg.jpg"

🔄 Common Git Operations

Commit with Message

git add .
git commit -m "feat: description of change"

Push to Main

git push origin main

Pull Latest

git pull origin main

Commit Message Prefixes

🔧 Troubleshooting

Clear Next.js Cache

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
Remove-Item -Recurse -Force .next
npm run dev

Reinstall Dependencies

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
Remove-Item -Recurse -Force node_modules
npm install

TypeScript Errors

cd c:\Users\rishj\OneDrive\Desktop\The SmelterOS\apps\web
npx tsc --noEmit

📋 Pre-Deploy Checklist

1. [ ] Run npm run build successfully
2. [ ] Test all routes manually
3. [ ] Verify responsive design (mobile/tablet/desktop)
4. [ ] Check for console errors
5. [ ] Validate all images load
6. [ ] Test any form submissions
7. [ ] Confirm environment variables are set

🎯 When to Use This Skill

• Starting work sessions — Review project structure
• Creating new components — Follow the checklist
• Managing assets — Check asset locations
• Troubleshooting — Use common fixes
• Preparing for deployment — Run pre-deploy checklist