Task Pattern	Activate Skill	Path
Building UI, styling, colors, components	smelteros-design-system	`.agent/skills/smelteros-design-system/`
Page layouts, buttons, cards, forms	smelteros-ui-patterns	`.agent/skills/smelteros-ui-patterns/`
Landing page, animations, Nixie tubes	smelteros-creative-build-directive	`.agent/skills/smelteros-creative-build/`
Deployments, CI/CD, Docker, releases	smelteros-workflow-execution	`.agent/skills/smelteros-workflow-execution/`
Images, assets, logos, backgrounds	smelteros-image-assets	`.agent/skills/smelteros-image-assets/`
MCP servers, ACP, UCP, Sanity, Composio	smelteros-mcp-management	`.agent/skills/smelteros-mcp-management/`
Data flow, state, architecture	oracle-architecture	`.agent/skills/oracle-architecture/`
Design guidelines, brand identity	oracle-design	`.agent/skills/oracle-design/`
Dev commands, git, troubleshooting	smelteros-common-actions	(this skill)

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

Package	Purpose
`framer-motion`	Animations
`@heroui/react`	UI components
`lucide-react`	Icons
`tailwindcss`	Styling
`@tanstack/react-query`	Data fetching

🎨 Component Creation Checklist

When creating a new component:

Create the component file:

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

Use the standard template:

"use client"

import { type ComponentProps } from "react"

interface ComponentNameProps {
  // Define props here
}

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

Export from index (if applicable):

export { ComponentName } from "./ComponentName"

Follow SmelterOS Design System for colors and styling

🖼️ Asset Management

Image Locations

Type	Path
Hero Images	`/apps/web/public/`
Logo Assets	`/apps/web/public/assets/`
Icons	Use `lucide-react` or Material Symbols

Current Key Assets

Asset	Path
Smelter Hero	`/apps/web/public/smelter-hero.png`
SmelterOS Logo	`/apps/web/public/smelteros-logo.jpg`
Full Logo	`/apps/web/public/assets/smelter-logo-full.png`
Magma Background	`/apps/web/public/assets/magma-bg.jpg`

Adding New Images

Place in /apps/web/public/ or /apps/web/public/assets/
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

Prefix	Usage
`feat:`	New feature
`fix:`	Bug fix
`style:`	UI/styling changes
`refactor:`	Code refactoring
`docs:`	Documentation
`chore:`	Maintenance

🔧 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

Run npm run build successfully
Test all routes manually
Verify responsive design (mobile/tablet/desktop)
Check for console errors
Validate all images load
Test any form submissions
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

smelteros-common-actions

SmelterOS Common Actions

🧭 Skill Activation Router