devskill 2.0.2

package/skills/deploy-to-vercel/resources/deploy.sh

@@ -0,0 +1,301 @@
+#!/bin/bash
+
+# Vercel Deployment Script (via claimable deploy endpoint)
+# Usage: ./deploy.sh [project-path]
+# Returns: JSON with previewUrl, claimUrl, deploymentId, projectId
+
+set -euo pipefail
+
+DEPLOY_ENDPOINT="https://claude-skills-deploy.vercel.com/api/deploy"
+
+# Detect framework from package.json
+detect_framework() {
+    local pkg_json="$1"
+
+    if [ ! -f "$pkg_json" ]; then
+        echo "null"
+        return
+    fi
+
+    local content=$(cat "$pkg_json")
+
+    # Helper to check if a package exists in dependencies or devDependencies.
+    # Use exact matching by default, with a separate prefix matcher for scoped
+    # package families like "@remix-run/".
+    has_dep_exact() {
+        echo "$content" | grep -q "\"$1\""
+    }
+
+    has_dep_prefix() {
+        echo "$content" | grep -q "\"$1"
+    }
+
+    # Order matters - check more specific frameworks first
+
+    # Blitz
+    if has_dep_exact "blitz"; then echo "blitzjs"; return; fi
+
+    # Next.js
+    if has_dep_exact "next"; then echo "nextjs"; return; fi
+
+    # Gatsby
+    if has_dep_exact "gatsby"; then echo "gatsby"; return; fi
+
+    # Remix
+    if has_dep_prefix "@remix-run/"; then echo "remix"; return; fi
+
+    # React Router (v7 framework mode)
+    if has_dep_prefix "@react-router/"; then echo "react-router"; return; fi
+
+    # TanStack Start
+    if has_dep_exact "@tanstack/start"; then echo "tanstack-start"; return; fi
+
+    # Astro
+    if has_dep_exact "astro"; then echo "astro"; return; fi
+
+    # Hydrogen (Shopify)
+    if has_dep_exact "@shopify/hydrogen"; then echo "hydrogen"; return; fi
+
+    # SvelteKit
+    if has_dep_exact "@sveltejs/kit"; then echo "sveltekit-1"; return; fi
+
+    # Svelte (standalone)
+    if has_dep_exact "svelte"; then echo "svelte"; return; fi
+
+    # Nuxt
+    if has_dep_exact "nuxt"; then echo "nuxtjs"; return; fi
+
+    # Vue with Vitepress
+    if has_dep_exact "vitepress"; then echo "vitepress"; return; fi
+
+    # Vue with Vuepress
+    if has_dep_exact "vuepress"; then echo "vuepress"; return; fi
+
+    # Gridsome
+    if has_dep_exact "gridsome"; then echo "gridsome"; return; fi
+
+    # SolidStart
+    if has_dep_exact "@solidjs/start"; then echo "solidstart-1"; return; fi
+
+    # Docusaurus
+    if has_dep_exact "@docusaurus/core"; then echo "docusaurus-2"; return; fi
+
+    # RedwoodJS
+    if has_dep_prefix "@redwoodjs/"; then echo "redwoodjs"; return; fi
+
+    # Hexo
+    if has_dep_exact "hexo"; then echo "hexo"; return; fi
+
+    # Eleventy
+    if has_dep_exact "@11ty/eleventy"; then echo "eleventy"; return; fi
+
+    # Angular / Ionic Angular
+    if has_dep_exact "@ionic/angular"; then echo "ionic-angular"; return; fi
+    if has_dep_exact "@angular/core"; then echo "angular"; return; fi
+
+    # Ionic React
+    if has_dep_exact "@ionic/react"; then echo "ionic-react"; return; fi
+
+    # Create React App
+    if has_dep_exact "react-scripts"; then echo "create-react-app"; return; fi
+
+    # Ember
+    if has_dep_exact "ember-cli" || has_dep_exact "ember-source"; then echo "ember"; return; fi
+
+    # Dojo
+    if has_dep_exact "@dojo/framework"; then echo "dojo"; return; fi
+
+    # Polymer
+    if has_dep_prefix "@polymer/"; then echo "polymer"; return; fi
+
+    # Preact
+    if has_dep_exact "preact"; then echo "preact"; return; fi
+
+    # Stencil
+    if has_dep_exact "@stencil/core"; then echo "stencil"; return; fi
+
+    # UmiJS
+    if has_dep_exact "umi"; then echo "umijs"; return; fi
+
+    # Sapper (legacy Svelte)
+    if has_dep_exact "sapper"; then echo "sapper"; return; fi
+
+    # Saber
+    if has_dep_exact "saber"; then echo "saber"; return; fi
+
+    # Sanity
+    if has_dep_exact "sanity"; then echo "sanity-v3"; return; fi
+    if has_dep_prefix "@sanity/"; then echo "sanity"; return; fi
+
+    # Storybook
+    if has_dep_prefix "@storybook/"; then echo "storybook"; return; fi
+
+    # NestJS
+    if has_dep_exact "@nestjs/core"; then echo "nestjs"; return; fi
+
+    # Elysia
+    if has_dep_exact "elysia"; then echo "elysia"; return; fi
+
+    # Hono
+    if has_dep_exact "hono"; then echo "hono"; return; fi
+
+    # Fastify
+    if has_dep_exact "fastify"; then echo "fastify"; return; fi
+
+    # h3
+    if has_dep_exact "h3"; then echo "h3"; return; fi
+
+    # Nitro
+    if has_dep_exact "nitropack"; then echo "nitro"; return; fi
+
+    # Express
+    if has_dep_exact "express"; then echo "express"; return; fi
+
+    # Vite (generic - check last among JS frameworks)
+    if has_dep_exact "vite"; then echo "vite"; return; fi
+
+    # Parcel
+    if has_dep_exact "parcel"; then echo "parcel"; return; fi
+
+    # No framework detected
+    echo "null"
+}
+
+# Parse arguments
+INPUT_PATH="${1:-.}"
+
+# Create temp directory for packaging
+TEMP_DIR=$(mktemp -d)
+TARBALL="$TEMP_DIR/project.tgz"
+STAGING_DIR="$TEMP_DIR/staging"
+CLEANUP_TEMP=true
+
+cleanup() {
+    if [ "$CLEANUP_TEMP" = true ]; then
+        rm -rf "$TEMP_DIR"
+    fi
+}
+trap cleanup EXIT
+
+echo "Preparing deployment..." >&2
+
+# Check if input is a .tgz file or a directory
+FRAMEWORK="null"
+
+if [ -f "$INPUT_PATH" ] && [[ "$INPUT_PATH" == *.tgz ]]; then
+    # Input is already a tarball, use it directly
+    echo "Using provided tarball..." >&2
+    TARBALL="$INPUT_PATH"
+    CLEANUP_TEMP=false
+    # Can't detect framework from tarball, leave as null
+elif [ -d "$INPUT_PATH" ]; then
+    # Input is a directory, need to tar it
+    PROJECT_PATH=$(cd "$INPUT_PATH" && pwd)
+
+    # Detect framework from package.json
+    FRAMEWORK=$(detect_framework "$PROJECT_PATH/package.json")
+
+    # Stage files into a temporary directory to avoid mutating the source tree.
+    mkdir -p "$STAGING_DIR"
+    echo "Staging project files..." >&2
+    tar -C "$PROJECT_PATH" \
+        --exclude='node_modules' \
+        --exclude='.git' \
+        --exclude='.env' \
+        --exclude='.env.*' \
+        -cf - . | tar -C "$STAGING_DIR" -xf -
+
+    # Check if this is a static HTML project (no package.json)
+    if [ ! -f "$PROJECT_PATH/package.json" ]; then
+        # Find HTML files in root
+        HTML_FILES=$(find "$STAGING_DIR" -maxdepth 1 -name "*.html" -type f)
+        HTML_COUNT=$(printf '%s\n' "$HTML_FILES" | sed '/^$/d' | wc -l | tr -d '[:space:]')
+
+        # If there's exactly one HTML file and it's not index.html, rename it
+        if [ "$HTML_COUNT" -eq 1 ]; then
+            HTML_FILE=$(echo "$HTML_FILES" | head -1)
+            BASENAME=$(basename "$HTML_FILE")
+            if [ "$BASENAME" != "index.html" ]; then
+                echo "Renaming $BASENAME to index.html..." >&2
+                mv "$HTML_FILE" "$STAGING_DIR/index.html"
+            fi
+        fi
+    fi
+
+    # Create tarball from the staging directory
+    echo "Creating deployment package..." >&2
+    tar -czf "$TARBALL" -C "$STAGING_DIR" .
+else
+    echo "Error: Input must be a directory or a .tgz file" >&2
+    exit 1
+fi
+
+if [ "$FRAMEWORK" != "null" ]; then
+    echo "Detected framework: $FRAMEWORK" >&2
+fi
+
+# Deploy
+echo "Deploying..." >&2
+RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK")
+
+# Check for error in response
+if echo "$RESPONSE" | grep -q '"error"'; then
+    ERROR_MSG=$(echo "$RESPONSE" | grep -o '"error":"[^"]*"' | cut -d'"' -f4)
+    echo "Error: $ERROR_MSG" >&2
+    exit 1
+fi
+
+# Extract URLs from response
+PREVIEW_URL=$(echo "$RESPONSE" | grep -o '"previewUrl":"[^"]*"' | cut -d'"' -f4)
+CLAIM_URL=$(echo "$RESPONSE" | grep -o '"claimUrl":"[^"]*"' | cut -d'"' -f4)
+
+if [ -z "$PREVIEW_URL" ]; then
+    echo "Error: Could not extract preview URL from response" >&2
+    echo "$RESPONSE" >&2
+    exit 1
+fi
+
+echo "Deployment started. Waiting for build to complete..." >&2
+echo "Preview URL: $PREVIEW_URL" >&2
+
+# Poll the preview URL until it returns a non-5xx response (5xx = still building)
+MAX_ATTEMPTS=60  # 5 minutes max (60 * 5 seconds)
+ATTEMPT=0
+
+while [ $ATTEMPT -lt $MAX_ATTEMPTS ]; do
+    HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" "$PREVIEW_URL")
+
+    if [ "$HTTP_STATUS" -eq 200 ]; then
+        echo "" >&2
+        echo "Deployment ready!" >&2
+        break
+    elif [ "$HTTP_STATUS" -ge 500 ]; then
+        # 5xx means still building/deploying
+        echo "Building... (attempt $((ATTEMPT + 1))/$MAX_ATTEMPTS)" >&2
+        sleep 5
+        ATTEMPT=$((ATTEMPT + 1))
+    elif [ "$HTTP_STATUS" -ge 400 ] && [ "$HTTP_STATUS" -lt 500 ]; then
+        # 4xx might be an error or the app itself returns 4xx - it's responding
+        echo "" >&2
+        echo "Deployment ready (returned $HTTP_STATUS)!" >&2
+        break
+    else
+        # Any other status, assume it's ready
+        echo "" >&2
+        echo "Deployment ready!" >&2
+        break
+    fi
+done
+
+if [ $ATTEMPT -eq $MAX_ATTEMPTS ]; then
+    echo "" >&2
+    echo "Warning: Timed out waiting for deployment, but it may still be building." >&2
+fi
+
+echo "" >&2
+echo "Preview URL: $PREVIEW_URL" >&2
+echo "Claim URL:   $CLAIM_URL" >&2
+echo "" >&2
+
+# Output JSON for programmatic use
+echo "$RESPONSE"

package/skills/pinia/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: pinia
+description: Pinia state management for Vue 3 using Composition API (Setup Stores) — TypeScript-first, storeToRefs for reactivity, focused stores, and API calls in composables. Use when the project uses Vue 3 Composition API / <script setup>.
+metadata:
+  author: Vũ Lưu
+  version: "2026.3.23"
+  source: Hand-written based on https://pinia.vuejs.org and instructions/pinia.md
+---
+
+# Pinia (Composition API / Setup Stores)
+
+> This skill focuses on **Setup Stores** with TypeScript and using them inside **Composition API / `<script setup>`** components.
+
+## Key Rules (from instructions)
+
+- **Prefer TypeScript** over JavaScript for all stores and composables.
+- **Use `storeToRefs`** when destructuring state from stores to maintain reactivity.
+- **Prefer smaller, focused stores** over large monolithic stores.
+- **Keep API calls in separate composable functions** — do not embed them directly in store actions.
+
+## Core
+
+| Topic | Description | Reference |
+|-------|-------------|-----------|
+| Setup Stores | Define stores with `ref`, `computed`, functions inside `defineStore` | [setup-stores](references/setup-stores.md) |
+| Using in Components | `storeToRefs`, direct action calls in `<script setup>` | [using-in-components](references/using-in-components.md) |
+| API in Composables | Separate API calls from store actions via composable functions | [api-in-composables](references/api-in-composables.md) |
+
+## Quick Reference
+
+### Define a Setup Store (TypeScript)
+
+```ts
+// stores/counter.ts
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const name = ref('My App')
+
+  const doubled = computed(() => count.value * 2)
+
+  function increment() {
+    count.value++
+  }
+
+  return { count, name, doubled, increment }
+})
+```
+
+### Use in a `<script setup>` Component
+
+```vue
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useCounterStore } from '@/stores/counter'
+
+const store = useCounterStore()
+
+// ✅ Use storeToRefs to keep reactivity when destructuring state/getters
+const { count, doubled } = storeToRefs(store)
+
+// ✅ Actions can be destructured directly (they are plain functions)
+const { increment } = store
+</script>
+
+<template>
+  <p>Count: {{ count }} | Doubled: {{ doubled }}</p>
+  <button @click="increment">Increment</button>
+</template>
+```
+
+### API Calls in Composables (not in stores)
+
+```ts
+// composables/useCounterApi.ts
+import { useCounterStore } from '@/stores/counter'
+
+export function useCounterApi() {
+  const store = useCounterStore()
+
+  async function fetchCount() {
+    const data = await fetch('/api/counter').then(r => r.json())
+    store.count = data.count
+  }
+
+  return { fetchCount }
+}
+```
+
+```vue
+<script setup lang="ts">
+import { useCounterApi } from '@/composables/useCounterApi'
+
+const { fetchCount } = useCounterApi()
+</script>
+```
+
+## Key Rules Detail
+
+- **Never** call `useStore()` at module top-level — only inside `setup()` / `<script setup>` / composables.
+- `storeToRefs` extracts **reactive refs** for state and getters; actions remain plain functions and don't need `storeToRefs`.
+- Each store should represent **one domain concern** — split user, cart, notifications into separate stores.
+- Store actions should orchestrate state mutations only; delegate HTTP/fetch calls to composables.

package/skills/pinia/references/api-in-composables.md

@@ -0,0 +1,139 @@
+# API Calls in Composables (not in Stores)
+
+## The Pattern
+
+Store actions should only **mutate state**. HTTP requests and business logic should live in **composable functions** that call the store.
+
+```
+Component
+  └── calls composable (useXxxApi)
+        └── fetches data from API
+        └── calls store action to update state
+```
+
+## Example: User Feature
+
+### 1. The Store (state only)
+
+```ts
+// stores/user.ts
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+export const useUserStore = defineStore('user', () => {
+  const currentUser = ref<User | null>(null)
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const isLoggedIn = computed(() => currentUser.value !== null)
+
+  function setUser(user: User) {
+    currentUser.value = user
+  }
+
+  function setLoading(value: boolean) {
+    isLoading.value = value
+  }
+
+  function setError(message: string | null) {
+    error.value = message
+  }
+
+  function logout() {
+    currentUser.value = null
+  }
+
+  return { currentUser, isLoading, error, isLoggedIn, setUser, setLoading, setError, logout }
+})
+```
+
+### 2. The API Composable
+
+```ts
+// composables/useUserApi.ts
+import { useUserStore } from '@/stores/user'
+
+export function useUserApi() {
+  const store = useUserStore()
+
+  async function fetchCurrentUser() {
+    store.setLoading(true)
+    store.setError(null)
+    try {
+      const response = await fetch('/api/me')
+      if (!response.ok) throw new Error('Failed to fetch user')
+      const user = await response.json()
+      store.setUser(user)
+    } catch (err) {
+      store.setError(err instanceof Error ? err.message : 'Unknown error')
+    } finally {
+      store.setLoading(false)
+    }
+  }
+
+  async function updateProfile(data: { name: string }) {
+    store.setLoading(true)
+    try {
+      const response = await fetch('/api/me', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      const updated = await response.json()
+      store.setUser(updated)
+    } finally {
+      store.setLoading(false)
+    }
+  }
+
+  return { fetchCurrentUser, updateProfile }
+}
+```
+
+### 3. Use in Component
+
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '@/stores/user'
+import { useUserApi } from '@/composables/useUserApi'
+
+const userStore = useUserStore()
+const { currentUser, isLoading, error } = storeToRefs(userStore)
+
+const { fetchCurrentUser, updateProfile } = useUserApi()
+
+onMounted(() => {
+  fetchCurrentUser()
+})
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="error">{{ error }}</div>
+  <div v-else-if="currentUser">Hello, {{ currentUser.name }}</div>
+</template>
+```
+
+## Why This Pattern?
+
+| Without composable (anti-pattern) | With composable (recommended) |
+|---|---|
+| Stores become fat with HTTP logic | Stores stay lean — only state mutations |
+| Hard to test store actions (need to mock fetch) | Composables are easy to test in isolation |
+| Loading/error state gets duplicated | Clearly owned by the composable |
+| Actions hard to reuse across components | Composables are reusable by design |
+
+## Rules
+
+- Store actions: **only set state** (`ref.value = ...`).
+- Composables: **fetch data, handle errors, call store setters**.
+- One composable per domain entity (e.g. `useUserApi`, `useCartApi`, `useProductApi`).
+- Composables can be used across multiple components without duplicating fetch logic.

package/skills/pinia/references/setup-stores.md

@@ -0,0 +1,105 @@
+# Setup Stores
+
+Setup Stores use a function (like `setup()`) to define state, getters, and actions — giving full TypeScript support and Composition API flexibility.
+
+## Anatomy
+
+```ts
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  // 🔵 state — reactive refs
+  const id = ref<number | null>(null)
+  const name = ref('')
+  const isAdmin = ref(false)
+
+  // 🟢 getters — computed
+  const displayName = computed(() =>
+    name.value ? name.value : 'Guest'
+  )
+
+  // 🟡 actions — plain functions (can be async)
+  function setUser(userData: { id: number; name: string; isAdmin: boolean }) {
+    id.value = userData.id
+    name.value = userData.name
+    isAdmin.value = userData.isAdmin
+  }
+
+  function reset() {
+    id.value = null
+    name.value = ''
+    isAdmin.value = false
+  }
+
+  return { id, name, isAdmin, displayName, setUser, reset }
+})
+```
+
+## Rules
+
+| Concept | How to define |
+|---------|--------------|
+| State | `ref()` or `reactive()` |
+| Getters | `computed()` |
+| Actions | Plain functions (sync or `async`) |
+
+- Everything returned from the setup function is **exposed** as store properties.
+- Use `ref` (not `reactive`) for primitives for simpler TypeScript inference.
+- Prefer multiple small stores (one per domain) over a single large one.
+
+## TypeScript Typing
+
+```ts
+// Explicit typing for complex state
+interface CartItem {
+  id: number
+  name: string
+  quantity: number
+  price: number
+}
+
+export const useCartStore = defineStore('cart', () => {
+  const items = ref<CartItem[]>([])
+
+  const total = computed(() =>
+    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  )
+
+  function addItem(item: CartItem) {
+    const existing = items.value.find(i => i.id === item.id)
+    if (existing) {
+      existing.quantity += item.quantity
+    } else {
+      items.value.push(item)
+    }
+  }
+
+  function removeItem(id: number) {
+    items.value = items.value.filter(i => i.id !== id)
+  }
+
+  return { items, total, addItem, removeItem }
+})
+```
+
+## Store Composition (using another store)
+
+```ts
+export const useOrderStore = defineStore('order', () => {
+  // ✅ Call other stores inside setup function — not at module level
+  const cart = useCartStore()
+  const user = useUserStore()
+
+  const orders = ref<Order[]>([])
+
+  async function placeOrder() {
+    if (!user.id) return
+    // compose from other stores
+    const payload = { userId: user.id, items: cart.items }
+    // ... submit payload
+  }
+
+  return { orders, placeOrder }
+})
+```