diff --git a/app/api/projects/[project_id]/skills/[name]/route.ts b/app/api/projects/[project_id]/skills/[name]/route.ts
new file mode 100644
index 00000000..f7a3ebed
--- /dev/null
+++ b/app/api/projects/[project_id]/skills/[name]/route.ts
@@ -0,0 +1,45 @@
+/**
+ * Single skill API
+ * GET    /api/projects/[project_id]/skills/[name] - read a skill
+ * DELETE /api/projects/[project_id]/skills/[name] - delete a skill
+ */
+
+import { NextRequest } from 'next/server';
+import { getSkill, deleteSkill, SkillError } from '@/lib/services/skills';
+import { createSuccessResponse, createErrorResponse, handleApiError } from '@/lib/utils/api-response';
+
+interface RouteContext {
+  params: Promise<{ project_id: string; name: string }>;
+}
+
+export async function GET(_request: NextRequest, { params }: RouteContext) {
+  try {
+    const { project_id, name } = await params;
+    const skill = await getSkill(project_id, name);
+    if (!skill) {
+      return createErrorResponse('Skill not found', undefined, 404);
+    }
+    return createSuccessResponse(skill);
+  } catch (error) {
+    if (error instanceof SkillError) {
+      return createErrorResponse(error.message, undefined, error.status);
+    }
+    return handleApiError(error, 'API', 'Failed to read skill');
+  }
+}
+
+export async function DELETE(_request: NextRequest, { params }: RouteContext) {
+  try {
+    const { project_id, name } = await params;
+    const ok = await deleteSkill(project_id, name);
+    return createSuccessResponse({ deleted: ok, name });
+  } catch (error) {
+    if (error instanceof SkillError) {
+      return createErrorResponse(error.message, undefined, error.status);
+    }
+    return handleApiError(error, 'API', 'Failed to delete skill');
+  }
+}
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
diff --git a/app/api/projects/[project_id]/skills/route.ts b/app/api/projects/[project_id]/skills/route.ts
new file mode 100644
index 00000000..e048c514
--- /dev/null
+++ b/app/api/projects/[project_id]/skills/route.ts
@@ -0,0 +1,51 @@
+/**
+ * Per-project Skills API
+ * GET  /api/projects/[project_id]/skills        - list skills
+ * POST /api/projects/[project_id]/skills        - create/update a skill
+ */
+
+import { NextRequest } from 'next/server';
+import { listAllSkills, saveSkill, SkillError } from '@/lib/services/skills';
+import { createSuccessResponse, createErrorResponse, handleApiError } from '@/lib/utils/api-response';
+
+interface RouteContext {
+  params: Promise<{ project_id: string }>;
+}
+
+export async function GET(_request: NextRequest, { params }: RouteContext) {
+  try {
+    const { project_id } = await params;
+    const skills = await listAllSkills(project_id);
+    return createSuccessResponse(skills);
+  } catch (error) {
+    if (error instanceof SkillError) {
+      return createErrorResponse(error.message, undefined, error.status);
+    }
+    return handleApiError(error, 'API', 'Failed to list skills');
+  }
+}
+
+export async function POST(request: NextRequest, { params }: RouteContext) {
+  try {
+    const { project_id } = await params;
+    const body = await request.json().catch(() => ({}));
+    if (!body || typeof body.name !== 'string' || body.name.trim().length === 0) {
+      return createErrorResponse('name is required', undefined, 400);
+    }
+    const skill = await saveSkill(project_id, {
+      name: body.name,
+      description: typeof body.description === 'string' ? body.description : '',
+      content: typeof body.content === 'string' ? body.content : '',
+      raw: typeof body.raw === 'string' ? body.raw : undefined,
+    });
+    return createSuccessResponse(skill, 201);
+  } catch (error) {
+    if (error instanceof SkillError) {
+      return createErrorResponse(error.message, undefined, error.status);
+    }
+    return handleApiError(error, 'API', 'Failed to save skill');
+  }
+}
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
diff --git a/components/settings/ProjectSettings.tsx b/components/settings/ProjectSettings.tsx
index 0c6dee0d..f3726080 100644
--- a/components/settings/ProjectSettings.tsx
+++ b/components/settings/ProjectSettings.tsx
@@ -9,6 +9,7 @@ import { GeneralSettings } from './GeneralSettings';
 import { AIAssistantSettings } from './AIAssistantSettings';
 import { EnvironmentSettings } from './EnvironmentSettings';
 import { ServiceSettings } from './ServiceSettings';
+import { SkillsSettings } from './SkillsSettings';
 import GlobalSettings from './GlobalSettings';
 
 interface ProjectSettingsProps {
@@ -21,7 +22,7 @@ interface ProjectSettingsProps {
   onProjectUpdated?: (update: { name: string; description?: string | null }) => void;
 }
 
-type SettingsTab = 'general' | 'ai-assistant' | 'environment' | 'services';
+type SettingsTab = 'general' | 'ai-assistant' | 'environment' | 'services' | 'skills';
 
 export function ProjectSettings({
   isOpen,
@@ -58,6 +59,12 @@ export function ProjectSettings({
           label: 'Services',
           icon: <span className="w-4 h-4 inline-flex"><FaPlug /></span>,
         },
+        {
+          id: 'skills' as SettingsTab,
+          label: 'Skills',
+          icon: <span className="w-4 h-4 inline-flex items-center justify-center text-sm leading-none">✦</span>,
+          hidden: !isProjectScoped,
+        },
       ].filter(tab => !('hidden' in tab) || !tab.hidden),
     [isProjectScoped]
   );
@@ -140,8 +147,8 @@ export function ProjectSettings({
           )}
           
           {activeTab === 'services' && (
-            <ServiceSettings 
-              projectId={projectId} 
+            <ServiceSettings
+              projectId={projectId}
               onOpenGlobalSettings={() => {
                 // Open Global Settings with services tab
                 setShowGlobalSettings(true);
@@ -149,6 +156,10 @@ export function ProjectSettings({
               }}
             />
           )}
+
+          {activeTab === 'skills' && (
+            <SkillsSettings projectId={projectId} />
+          )}
         </div>
       </div>
     </SettingsModal>
diff --git a/components/settings/SkillsSettings.tsx b/components/settings/SkillsSettings.tsx
new file mode 100644
index 00000000..3635d8dd
--- /dev/null
+++ b/components/settings/SkillsSettings.tsx
@@ -0,0 +1,314 @@
+/**
+ * Skills Settings — manage per-project Agent Skills and view global (shared) skills.
+ * Skills are auto-loaded by the agent (settingSources: ['project','user']).
+ */
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? '';
+
+interface Skill {
+  name: string;
+  description: string;
+  content: string;
+  raw: string;
+  scope: 'project' | 'global';
+}
+
+interface SkillsSettingsProps {
+  projectId: string;
+}
+
+const EXAMPLE = `When asked to do X, follow these steps:
+1. ...
+2. ...
+
+Reference any conventions or helper files the agent should follow.`;
+
+function SkillCard({
+  skill,
+  onEdit,
+  onDelete,
+}: {
+  skill: Skill;
+  onEdit?: () => void;
+  onDelete?: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const isGlobal = skill.scope === 'global';
+  return (
+    <div className="group rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition-all">
+      <div className="flex items-start gap-3 p-3.5">
+        <div
+          className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-sm ${
+            isGlobal ? 'bg-violet-50 text-violet-600' : 'bg-blue-50 text-blue-600'
+          }`}
+        >
+          ✦
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="truncate font-mono text-sm font-medium text-gray-900">{skill.name}</span>
+            <span
+              className={`rounded-full px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${
+                isGlobal ? 'bg-violet-100 text-violet-700' : 'bg-blue-100 text-blue-700'
+              }`}
+            >
+              {isGlobal ? 'Global' : 'Project'}
+            </span>
+          </div>
+          <p className="mt-0.5 line-clamp-2 text-xs text-gray-500">
+            {skill.description || 'No description'}
+          </p>
+          <div className="mt-2 flex items-center gap-3">
+            <button
+              onClick={() => setOpen((v) => !v)}
+              className="text-xs font-medium text-gray-500 hover:text-gray-800"
+            >
+              {open ? 'Hide' : 'View'} instructions
+            </button>
+            {onEdit && (
+              <button onClick={onEdit} className="text-xs font-medium text-blue-600 hover:text-blue-700">
+                Edit
+              </button>
+            )}
+            {onDelete && (
+              <button onClick={onDelete} className="text-xs font-medium text-red-500 hover:text-red-600">
+                Delete
+              </button>
+            )}
+          </div>
+          {open && (
+            <pre className="mt-2 max-h-56 overflow-auto whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-[11px] leading-relaxed text-gray-700">
+              {skill.content || '(no body)'}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SkillsSettings({ projectId }: SkillsSettingsProps) {
+  const [project, setProject] = useState<Skill[]>([]);
+  const [global, setGlobal] = useState<Skill[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const [editing, setEditing] = useState<string | null>(null);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [content, setContent] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/projects/${projectId}/skills`);
+      const json = await res.json();
+      const data = json?.data ?? {};
+      setProject(Array.isArray(data.project) ? data.project : []);
+      setGlobal(Array.isArray(data.global) ? data.global : []);
+    } catch (e) {
+      console.error('Failed to load skills:', e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const resetForm = () => {
+    setEditing(null);
+    setName('');
+    setDescription('');
+    setContent('');
+    setError(null);
+  };
+  const startNew = () => {
+    resetForm();
+    setEditing('__new__');
+  };
+  const startEdit = (s: Skill) => {
+    setEditing(s.name);
+    setName(s.name);
+    setDescription(s.description);
+    setContent(s.content);
+    setError(null);
+  };
+
+  const save = async () => {
+    if (!name.trim()) {
+      setError('Name is required');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch(`${API_BASE}/api/projects/${projectId}/skills`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, description, content }),
+      });
+      const json = await res.json();
+      if (!res.ok || json?.success === false) {
+        setError(json?.error || 'Failed to save skill');
+        return;
+      }
+      resetForm();
+      await load();
+    } catch {
+      setError('Failed to save skill');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (skillName: string) => {
+    try {
+      await fetch(`${API_BASE}/api/projects/${projectId}/skills/${encodeURIComponent(skillName)}`, {
+        method: 'DELETE',
+      });
+      if (editing === skillName) resetForm();
+      await load();
+    } catch (e) {
+      console.error('Failed to delete skill:', e);
+    }
+  };
+
+  const filteredGlobal = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return global;
+    return global.filter(
+      (s) => s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q)
+    );
+  }, [global, query]);
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900">Skills</h3>
+        <p className="mt-1 text-sm text-gray-500">
+          Reusable instructions the agent loads automatically. Project skills live in this project; global
+          skills are shared across all projects.
+        </p>
+      </div>
+
+      {/* Project skills */}
+      <section className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h4 className="flex items-center gap-2 text-sm font-semibold text-gray-800">
+            Project skills
+            <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
+              {project.length}
+            </span>
+          </h4>
+          {editing === null && (
+            <button
+              onClick={startNew}
+              className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700"
+            >
+              + Add skill
+            </button>
+          )}
+        </div>
+
+        {editing !== null && (
+          <div className="space-y-3 rounded-xl border border-blue-200 bg-blue-50/40 p-4">
+            <div className="text-sm font-medium text-gray-900">
+              {editing === '__new__' ? 'New skill' : `Edit: ${editing}`}
+            </div>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={editing !== '__new__'}
+              placeholder="skill-name (e.g. brand-voice)"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm disabled:bg-gray-100"
+            />
+            <input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Description — when should the agent use this?"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              rows={9}
+              placeholder={EXAMPLE}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-xs"
+            />
+            {error && <p className="text-xs text-red-600">{error}</p>}
+            <div className="flex gap-2">
+              <button
+                onClick={save}
+                disabled={saving}
+                className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+              >
+                {saving ? 'Saving…' : 'Save skill'}
+              </button>
+              <button
+                onClick={resetForm}
+                className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {project.length === 0 && editing === null ? (
+          <div className="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-400">
+            No project skills yet. Add one to teach the agent project-specific conventions.
+          </div>
+        ) : (
+          <div className="grid gap-3 sm:grid-cols-2">
+            {project.map((s) => (
+              <SkillCard key={s.name} skill={s} onEdit={() => startEdit(s)} onDelete={() => remove(s.name)} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Global skills */}
+      <section className="space-y-3">
+        <div className="flex items-center justify-between gap-3">
+          <h4 className="flex items-center gap-2 text-sm font-semibold text-gray-800">
+            Available globally
+            <span className="rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+              {global.length}
+            </span>
+          </h4>
+          {global.length > 0 && (
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search skills…"
+              className="w-44 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:w-56 transition-all"
+            />
+          )}
+        </div>
+        <p className="text-xs text-gray-400">
+          Installed for every project (e.g. SEO/GEO pack, Nuxt UI). Read-only here.
+        </p>
+        {isLoading ? (
+          <p className="text-sm text-gray-400">Loading…</p>
+        ) : filteredGlobal.length === 0 ? (
+          <div className="rounded-xl border border-dashed border-gray-300 p-6 text-center text-sm text-gray-400">
+            {global.length === 0 ? 'No global skills installed.' : 'No skills match your search.'}
+          </div>
+        ) : (
+          <div className="grid gap-3 sm:grid-cols-2">
+            {filteredGlobal.map((s) => (
+              <SkillCard key={s.name} skill={s} />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default SkillsSettings;
diff --git a/lib/constants/claudeModels.ts b/lib/constants/claudeModels.ts
index b5465428..1e795f81 100644
--- a/lib/constants/claudeModels.ts
+++ b/lib/constants/claudeModels.ts
@@ -1,4 +1,5 @@
 export type ClaudeModelId =
+  | 'claude-opus-4-8'
   | 'claude-opus-4-6'
   | 'claude-sonnet-4-6'
   | 'claude-haiku-4-5-20251001';
@@ -16,20 +17,33 @@ export interface ClaudeModelDefinition {
 }
 
 export const CLAUDE_MODEL_DEFINITIONS: ClaudeModelDefinition[] = [
+  {
+    id: 'claude-opus-4-8',
+    name: 'Claude Opus 4.8',
+    description: 'The most intelligent model for building agents and coding',
+    supportsImages: true,
+    aliases: [
+      'claude-opus-4-8',
+      'claude-opus-4.8',
+      'opus-4-8',
+      'opus-4.8',
+      // Generic opus aliases resolve to the newest Opus
+      'claude-opus-4',
+      'claude-opus',
+      'opus-4',
+      'opus',
+    ],
+  },
   {
     id: 'claude-opus-4-6',
     name: 'Claude Opus 4.6',
-    description: 'The most intelligent model for building agents and coding',
+    description: 'Previous-generation Opus',
     supportsImages: true,
     aliases: [
       'claude-opus-4-6',
       'claude-opus-4.6',
-      'claude-opus-4',
-      'claude-opus',
       'opus-4-6',
       'opus-4.6',
-      'opus-4',
-      'opus',
       // Legacy aliases
       'claude-opus-4-5-20251101',
       'claude-opus-4-5',
@@ -90,7 +104,7 @@ export const CLAUDE_MODEL_DEFINITIONS: ClaudeModelDefinition[] = [
   },
 ];
 
-export const CLAUDE_DEFAULT_MODEL: ClaudeModelId = 'claude-sonnet-4-6';
+export const CLAUDE_DEFAULT_MODEL: ClaudeModelId = 'claude-opus-4-8';
 
 const CLAUDE_MODEL_ALIAS_MAP: Record<string, ClaudeModelId> = CLAUDE_MODEL_DEFINITIONS.reduce(
   (map, definition) => {
diff --git a/lib/services/cli/claude.ts b/lib/services/cli/claude.ts
index 5f15f3cf..e52ac7d1 100644
--- a/lib/services/cli/claude.ts
+++ b/lib/services/cli/claude.ts
@@ -718,19 +718,22 @@ export async function executeClaude(
     const response = query({
       prompt: instruction,
       options: {
+        cwd: absoluteProjectPath, // SDK uses `cwd` (workingDirectory is ignored); without this the agent edits Claudable's own /app
         workingDirectory: absoluteProjectPath, // Work only in project folder (protects Claudable root)
         additionalDirectories: [absoluteProjectPath],
+        // Load filesystem settings so per-project skills in <project>/.claude/skills/
+        // (and container-global ~/.claude/skills/) are discovered by the agent.
+        settingSources: ['project', 'user'],
         model: resolvedModel,
         resume: sessionId, // Resume previous session
         permissionMode: 'bypassPermissions', // Auto-approve commands and edits
-        systemPrompt: `You are an expert web developer building a Next.js application.
-- Use Next.js 15 App Router
-- Use TypeScript
-- Use Tailwind CSS for styling
-- Write clean, production-ready code
-- Follow best practices
+        systemPrompt: `You are an expert web developer building a Nuxt application.
+- Use Nuxt 4 (Vue 3, <script setup lang="ts">, file-based routing in pages/)
+- Use Nuxt UI (@nuxt/ui) components for the UI; the app is wrapped in <UApp>. There is a "nuxt-ui" skill available — use it for component names, props, theming and patterns.
+- Use TypeScript and Tailwind utility classes (Nuxt UI ships Tailwind v4)
+- Write clean, production-ready code; follow Nuxt conventions (composables/, components/, server/api/ for endpoints)
 - The platform automatically installs dependencies and manages the preview dev server. Do not run package managers or dev-server commands yourself; rely on the existing preview.
-- Keep all project files directly in the project root. Never scaffold frameworks into subdirectories (avoid commands like "mkdir new-app" or "create-next-app my-app"; run generators against the current directory instead).
+- Keep all project files directly in the project root. Never scaffold frameworks into subdirectories (avoid commands like "mkdir new-app" or "nuxi init my-app"; build against the current directory instead).
 - Never override ports or start your own development server processes. Rely on the managed preview service which assigns ports from the approved pool.
 - When sharing a preview link, read the actual NEXT_PUBLIC_APP_URL (e.g. from .env/.env.local or project metadata) instead of assuming a default port.
 - Prefer giving the user the live preview link that is actually running rather than written instructions.`,
@@ -1160,15 +1163,15 @@ export async function initializeNextJsProject(
   model: string = CLAUDE_DEFAULT_MODEL,
   requestId?: string
 ): Promise<void> {
-  console.log(`[ClaudeService] Initializing Next.js project: ${projectId}`);
+  console.log(`[ClaudeService] Initializing Nuxt project: ${projectId}`);
 
-  // Next.js project creation command
+  // Nuxt project creation command
   const fullPrompt = `
-Create a new Next.js 15 application with the following requirements:
+Build a Nuxt 4 application with the following requirements:
 ${initialPrompt}
 
-Use App Router, TypeScript, and Tailwind CSS.
-Set up the basic project structure and implement the requested features.
+Use Nuxt 4 (Vue 3 <script setup lang="ts">, file-based routing in pages/) and Nuxt UI (@nuxt/ui) components — consult the "nuxt-ui" skill. The app is wrapped in <UApp>. Use TypeScript and Tailwind utility classes.
+Build on the existing scaffold in the project root and implement the requested features.
 `.trim();
 
   await executeClaude(projectId, projectPath, fullPrompt, model, undefined, requestId);
diff --git a/lib/services/skills.ts b/lib/services/skills.ts
new file mode 100644
index 00000000..ee931b20
--- /dev/null
+++ b/lib/services/skills.ts
@@ -0,0 +1,172 @@
+/**
+ * Per-project Agent Skills.
+ *
+ * Skills live in `<project>/.claude/skills/<name>/SKILL.md`. Because the agent
+ * runs with cwd = project dir and Claudable enables `settingSources: ['project']`
+ * (see cli/claude.ts), every skill here is auto-discovered for that project's agent.
+ *
+ * A SKILL.md is markdown with YAML frontmatter:
+ *   ---
+ *   name: my-skill
+ *   description: One line shown to the model to decide when to use it.
+ *   ---
+ *   <instructions body>
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { getProjectById } from '@/lib/services/project';
+
+const PROJECTS_DIR = process.env.PROJECTS_DIR || './data/projects';
+const PROJECTS_DIR_ABSOLUTE = path.isAbsolute(PROJECTS_DIR)
+  ? PROJECTS_DIR
+  : path.resolve(process.cwd(), PROJECTS_DIR);
+
+export interface Skill {
+  name: string;
+  description: string;
+  content: string; // body (without frontmatter)
+  raw: string; // full SKILL.md
+  scope: 'project' | 'global'; // project = editable; global = read-only (shared)
+}
+
+export class SkillError extends Error {
+  constructor(message: string, readonly status = 400) {
+    super(message);
+    this.name = 'SkillError';
+  }
+}
+
+/** kebab-case slug; rejects path traversal / unsafe names. */
+export function normalizeSkillName(name: string): string {
+  const slug = String(name)
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+  if (!slug) {
+    throw new SkillError('Invalid skill name');
+  }
+  return slug;
+}
+
+async function projectBaseDir(projectId: string): Promise<string> {
+  const project = await getProjectById(projectId);
+  if (!project) {
+    throw new SkillError('Project not found', 404);
+  }
+  if (project.repoPath) {
+    return path.isAbsolute(project.repoPath)
+      ? project.repoPath
+      : path.resolve(process.cwd(), project.repoPath);
+  }
+  return path.join(PROJECTS_DIR_ABSOLUTE, projectId);
+}
+
+async function skillsDir(projectId: string): Promise<string> {
+  return path.join(await projectBaseDir(projectId), '.claude', 'skills');
+}
+
+function parseFrontmatter(raw: string): { name?: string; description?: string; body: string } {
+  const match = raw.match(/^---\s*\n([\s\S]*?)\n---\s*\n?([\s\S]*)$/);
+  if (!match) {
+    return { body: raw };
+  }
+  const [, fm, body] = match;
+  const get = (key: string) => {
+    const m = fm.match(new RegExp(`^${key}\\s*:\\s*(.+)$`, 'm'));
+    return m ? m[1].trim().replace(/^["']|["']$/g, '') : undefined;
+  };
+  return { name: get('name'), description: get('description'), body: body.trimStart() };
+}
+
+function buildSkillMarkdown(name: string, description: string, content: string): string {
+  const desc = (description || '').replace(/\n/g, ' ').trim();
+  return `---\nname: ${name}\ndescription: ${desc}\n---\n\n${content.trim()}\n`;
+}
+
+/** Global skills shared across all projects: ~/.claude/skills (mounted into the container). */
+function globalSkillsDir(): string {
+  return path.join(os.homedir(), '.claude', 'skills');
+}
+
+async function readSkillsDir(dir: string, scope: 'project' | 'global'): Promise<Skill[]> {
+  let entries: string[] = [];
+  try {
+    entries = await fs.readdir(dir);
+  } catch {
+    return [];
+  }
+  const skills: Skill[] = [];
+  for (const entry of entries) {
+    try {
+      const raw = await fs.readFile(path.join(dir, entry, 'SKILL.md'), 'utf8');
+      const { name, description, body } = parseFrontmatter(raw);
+      skills.push({ name: name || entry, description: description || '', content: body, raw, scope });
+    } catch {
+      // skip dirs without a readable SKILL.md
+    }
+  }
+  return skills.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/** Project-scoped (editable) skills. */
+export async function listSkills(projectId: string): Promise<Skill[]> {
+  return readSkillsDir(await skillsDir(projectId), 'project');
+}
+
+/** Global (read-only, shared) skills. */
+export async function listGlobalSkills(): Promise<Skill[]> {
+  return readSkillsDir(globalSkillsDir(), 'global');
+}
+
+/** Project + global skills (both shown in the UI). */
+export async function listAllSkills(projectId: string): Promise<{ project: Skill[]; global: Skill[] }> {
+  const [project, global] = await Promise.all([listSkills(projectId), listGlobalSkills()]);
+  return { project, global };
+}
+
+export async function getSkill(projectId: string, name: string): Promise<Skill | null> {
+  const slug = normalizeSkillName(name);
+  const file = path.join(await skillsDir(projectId), slug, 'SKILL.md');
+  try {
+    const raw = await fs.readFile(file, 'utf8');
+    const parsed = parseFrontmatter(raw);
+    return { name: parsed.name || slug, description: parsed.description || '', content: parsed.body, raw, scope: 'project' };
+  } catch {
+    return null;
+  }
+}
+
+/** Create or overwrite a skill. Accepts either a full `raw` SKILL.md or name/description/content. */
+export async function saveSkill(
+  projectId: string,
+  input: { name: string; description?: string; content?: string; raw?: string },
+): Promise<Skill> {
+  const slug = normalizeSkillName(input.name);
+  const dir = path.join(await skillsDir(projectId), slug);
+  await fs.mkdir(dir, { recursive: true });
+
+  const raw =
+    input.raw && input.raw.trim().length > 0
+      ? input.raw
+      : buildSkillMarkdown(slug, input.description ?? '', input.content ?? '');
+
+  await fs.writeFile(path.join(dir, 'SKILL.md'), raw.endsWith('\n') ? raw : `${raw}\n`, 'utf8');
+
+  const parsed = parseFrontmatter(raw);
+  return { name: parsed.name || slug, description: parsed.description || '', content: parsed.body, raw, scope: 'project' };
+}
+
+export async function deleteSkill(projectId: string, name: string): Promise<boolean> {
+  const slug = normalizeSkillName(name);
+  const dir = path.join(await skillsDir(projectId), slug);
+  try {
+    await fs.rm(dir, { recursive: true, force: true });
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/lib/utils/scaffold.ts b/lib/utils/scaffold.ts
index 6fcdbe8b..430cce4f 100644
--- a/lib/utils/scaffold.ts
+++ b/lib/utils/scaffold.ts
@@ -13,6 +13,10 @@ async function writeFileIfMissing(filePath: string, contents: string) {
   await fs.writeFile(filePath, contents, 'utf8');
 }
 
+/**
+ * Scaffold a minimal Nuxt 4 + Nuxt UI app.
+ * (Kept the historical export name so existing imports keep working.)
+ */
 export async function scaffoldBasicNextApp(
   projectPath: string,
   projectId: string
@@ -25,21 +29,17 @@ export async function scaffoldBasicNextApp(
     version: '0.1.0',
     scripts: {
       dev: 'node scripts/run-dev.js',
-      build: 'next build',
-      start: 'next start',
-      lint: 'next lint',
+      build: 'nuxt build',
+      generate: 'nuxt generate',
+      preview: 'nuxt preview',
+      postinstall: 'nuxt prepare',
     },
     dependencies: {
-      next: '15.1.0',
-      react: '19.0.0',
-      'react-dom': '19.0.0',
+      nuxt: 'latest',
+      '@nuxt/ui': 'latest',
     },
     devDependencies: {
       typescript: '^5.7.2',
-      '@types/react': '^19.0.0',
-      '@types/node': '^22.10.0',
-      eslint: '^9.17.0',
-      'eslint-config-next': '15.1.0',
     },
   };
 
@@ -49,181 +49,64 @@ export async function scaffoldBasicNextApp(
   );
 
   await writeFileIfMissing(
-    path.join(projectPath, 'next.config.js'),
-    `/** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    typedRoutes: true,
-  },
-};
-
-module.exports = nextConfig;
+    path.join(projectPath, 'nuxt.config.ts'),
+    `// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-01-01',
+  devtools: { enabled: true },
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css'],
+  // Allow the managed preview proxy host (Vite dev blocks unknown hosts otherwise)
+  vite: { server: { allowedHosts: true } },
+});
 `
   );
 
   await writeFileIfMissing(
     path.join(projectPath, 'tsconfig.json'),
     `{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "extends": "./.nuxt/tsconfig.json"
 }
 `
   );
 
+  // Nuxt UI v4 uses Tailwind v4 via its own Vite plugin.
   await writeFileIfMissing(
-    path.join(projectPath, 'next-env.d.ts'),
-    `/// <reference types="next" />
-/// <reference types="next/navigation-types/navigation" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+    path.join(projectPath, 'assets/css/main.css'),
+    `@import "tailwindcss";
+@import "@nuxt/ui";
 `
   );
 
+  // Nuxt UI requires the app wrapped in <UApp>.
   await writeFileIfMissing(
-    path.join(projectPath, 'app/layout.tsx'),
-    `import type { ReactNode } from 'react';
-import './globals.css';
-
-export default function RootLayout({ children }: { children: ReactNode }) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
+    path.join(projectPath, 'app.vue'),
+    `<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>
 `
   );
 
   await writeFileIfMissing(
-    path.join(projectPath, 'app/page.tsx'),
-    `export default function Home() {
-  return (
-    <div style={{
-      display: 'grid',
-      gridTemplateRows: '20px 1fr 20px',
-      alignItems: 'center',
-      justifyItems: 'center',
-      minHeight: '100vh',
-      padding: '80px',
-      gap: '64px',
-      fontFamily: 'var(--font-geist-sans)',
-    }}>
-      <main style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '32px',
-        gridRow: 2,
-        alignItems: 'center',
-      }}>
-        <h1 style={{
-          fontSize: '3rem',
-          fontWeight: 600,
-          textAlign: 'center',
-        }}>
-          Get started by editing
-        </h1>
-        <code style={{
-          fontFamily: 'monospace',
-          fontSize: '1rem',
-          padding: '12px 20px',
-          background: 'rgba(0, 0, 0, 0.05)',
-          borderRadius: '8px',
-        }}>
-          app/page.tsx
-        </code>
-      </main>
-      <footer style={{
-        gridRow: 3,
-        display: 'flex',
-        gap: '24px',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-      }}>
-        <a
-          href="https://nextjs.org/learn"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            textDecoration: 'none',
-            color: 'inherit',
-          }}
-        >
-          Learn →
-        </a>
-        <a
-          href="https://vercel.com/templates"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            textDecoration: 'none',
-            color: 'inherit',
-          }}
-        >
-          Examples →
-        </a>
-        <a
-          href="https://nextjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            textDecoration: 'none',
-            color: 'inherit',
-          }}
-        >
-          Next.js →
-        </a>
-      </footer>
-    </div>
-  );
-}
+    path.join(projectPath, 'pages/index.vue'),
+    `<template>
+  <UContainer class="flex min-h-screen flex-col items-center justify-center gap-6 py-24 text-center">
+    <h1 class="text-4xl font-bold sm:text-6xl">Welcome to Nuxt</h1>
+    <p class="text-lg text-(--ui-text-muted)">
+      Start building by editing <code>pages/index.vue</code>.
+    </p>
+    <UButton to="https://ui.nuxt.com" target="_blank" size="lg">
+      Nuxt UI docs
+    </UButton>
+  </UContainer>
+</template>
 `
   );
 
-  await writeFileIfMissing(
-    path.join(projectPath, 'app/globals.css'),
-    `:root {
-  color-scheme: light;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-}
-`
-  );
+  // NOTE: no postcss.config.js — Nuxt manages PostCSS via nuxt.config and warns
+  // if a file-based config is present; Nuxt UI uses its own Tailwind Vite plugin.
 
   await writeFileIfMissing(
     path.join(projectPath, 'scripts/run-dev.js'),
@@ -235,115 +118,62 @@ const path = require('path');
 const projectRoot = path.join(__dirname, '..');
 const isWindows = process.platform === 'win32';
 
-function parseCliArgs(argv) {
-  const passthrough = [];
-  let preferredPort;
-
+function resolvePort(argv) {
   for (let i = 0; i < argv.length; i += 1) {
-    const arg = argv[i];
-
-    if (arg === '--port' || arg === '-p') {
-      const value = argv[i + 1];
-      if (value && !value.startsWith('-')) {
-        const parsed = Number.parseInt(value, 10);
-        if (!Number.isNaN(parsed)) {
-          preferredPort = parsed;
-        }
-        i += 1;
-        continue;
-      }
-    } else if (arg.startsWith('--port=')) {
-      const value = arg.slice('--port='.length);
-      const parsed = Number.parseInt(value, 10);
-      if (!Number.isNaN(parsed)) {
-        preferredPort = parsed;
-      }
-      continue;
-    } else if (arg.startsWith('-p=')) {
-      const value = arg.slice('-p='.length);
-      const parsed = Number.parseInt(value, 10);
-      if (!Number.isNaN(parsed)) {
-        preferredPort = parsed;
-      }
-      continue;
+    const a = argv[i];
+    if ((a === '--port' || a === '-p') && argv[i + 1]) {
+      const n = Number.parseInt(argv[i + 1], 10);
+      if (!Number.isNaN(n)) return n;
+    } else if (a.startsWith('--port=')) {
+      const n = Number.parseInt(a.slice(7), 10);
+      if (!Number.isNaN(n)) return n;
     }
-
-    passthrough.push(arg);
   }
-
-  return { preferredPort, passthrough };
-}
-
-function resolvePort(preferredPort) {
-  const candidates = [
-    preferredPort,
-    process.env.PORT,
-    process.env.WEB_PORT,
-    process.env.PREVIEW_PORT_START,
-    3100,
-  ];
-
-  for (const candidate of candidates) {
-    if (candidate === undefined || candidate === null) {
-      continue;
-    }
-
-    const numeric =
-      typeof candidate === 'number'
-        ? candidate
-        : Number.parseInt(String(candidate), 10);
-
-    if (!Number.isNaN(numeric) && numeric > 0 && numeric <= 65535) {
-      return numeric;
-    }
+  for (const c of [process.env.PORT, process.env.WEB_PORT, process.env.PREVIEW_PORT_START]) {
+    const n = Number.parseInt(String(c), 10);
+    if (!Number.isNaN(n) && n > 0 && n <= 65535) return n;
   }
-
   return 3100;
 }
 
-(async () => {
-  const argv = process.argv.slice(2);
-  const { preferredPort, passthrough } = parseCliArgs(argv);
-  const port = resolvePort(preferredPort);
-  const url =
-    process.env.NEXT_PUBLIC_APP_URL || \`http://localhost:\${port}\`;
-
-  process.env.PORT = String(port);
-  process.env.WEB_PORT = String(port);
-  process.env.NEXT_PUBLIC_APP_URL = url;
-
-  console.log(\`🚀 Starting Next.js dev server on \${url}\`);
-
-  const child = spawn(
-    'npx',
-    ['next', 'dev', '--port', String(port), ...passthrough],
-    {
-      cwd: projectRoot,
-      stdio: 'inherit',
-      shell: isWindows,
-      env: {
-        ...process.env,
-        PORT: String(port),
-        WEB_PORT: String(port),
-        NEXT_PUBLIC_APP_URL: url,
-        NEXT_TELEMETRY_DISABLED: '1',
-      },
-    }
-  );
+const port = resolvePort(process.argv.slice(2));
+const host = process.env.PREVIEW_BIND_HOST || '0.0.0.0';
+const url = process.env.NEXT_PUBLIC_APP_URL || \`http://localhost:\${port}\`;
+
+console.log(\`🚀 Starting Nuxt dev server on \${url}\`);
+
+// Nuxt uses --host (not --hostname); ignore other passthrough flags.
+const child = spawn(
+  'npx',
+  ['nuxt', 'dev', '--port', String(port), '--host', host],
+  {
+    cwd: projectRoot,
+    stdio: 'inherit',
+    shell: isWindows,
+    env: {
+      ...process.env,
+      PORT: String(port),
+      HOST: host,
+      NITRO_PORT: String(port),
+      NITRO_HOST: host,
+      NUXT_TELEMETRY_DISABLED: '1',
+      NEXT_PUBLIC_APP_URL: url,
+    },
+  }
+);
 
-  child.on('exit', (code) => {
-    if (typeof code === 'number' && code !== 0) {
-      console.error(\`❌ Next.js dev server exited with code \${code}\`);
-      process.exit(code);
-    }
-  });
+child.on('exit', (code) => {
+  if (typeof code === 'number' && code !== 0) {
+    console.error(\`❌ Nuxt dev server exited with code \${code}\`);
+    process.exit(code);
+  }
+});
 
-  child.on('error', (error) => {
-    console.error('❌ Failed to start Next.js dev server');
-    console.error(error instanceof Error ? error.message : error);
-    process.exit(1);
-  });
-})();
+child.on('error', (error) => {
+  console.error('❌ Failed to start Nuxt dev server');
+  console.error(error instanceof Error ? error.message : error);
+  process.exit(1);
+});
 `
   );
 }