Menu
Deploy websites to [subdomain].benjaminshafii.com via Vercel
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create and manage isolated git worktrees safely.
Opinionated workflow for submodule development + PRs + control-center pointer bumps.
Store Apple notarization IDs in Keychain and notarize/staple OpenWork DMGs locally.
Sync control-center master and update submodule pointers safely.
Require every OpenCode plugin to expose get_skills and get_version tools.
Use client.app.log() instead of console.log in OpenCode plugins
| name | website-deploy |
| description | Deploy websites to [subdomain].benjaminshafii.com via Vercel |
apps/<app-name>/:mkdir -p apps/<app-name>/src
{
"name": "@digital-empire/<app-name>",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "^5.6.3",
"vite": "^6.0.1"
}
}
vite.config.ts - Vite config with React plugintsconfig.json - TypeScript configindex.html - Entry HTMLsrc/main.tsx - React entry pointsrc/App.tsx - Main app componentpnpm install
pnpm --filter @digital-empire/<app-name> build
vercel switch $VERCEL_TEAM
cd apps/<app-name>
vercel --prod --yes
vercel domains add <subdomain>.$VERCEL_DOMAIN
Website will be live at: https://<subdomain>.benjaminshafii.com
For phone-optimized apps, use this index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#0a0a0a" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>App Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Dark theme base styles:
const styles = {
container: {
minHeight: '100dvh',
backgroundColor: '#0a0a0a',
color: '#fafafa',
fontFamily: "'JetBrains Mono', monospace",
padding: '24px 20px',
},
}
// Global styles to inject
const globalStyles = `
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html, body {
background-color: #0a0a0a;
overflow-x: hidden;
}
`
Required in .env (gitignored):
VERCEL_TEAM=bshafiis-projects
VERCEL_DOMAIN=benjaminshafii.com
vercel switch $VERCEL_TEAM before deploying to ensure domain accessbshafiis-projects.vercel/ directory first-webkit-appearance: none and -moz-appearance: textfieldwhich vercel
If not installed:
npm i -g vercel
vercel login
vercel teams ls
vercel domains ls
cat > .env << 'EOF'
VERCEL_TEAM=bshafiis-projects
VERCEL_DOMAIN=benjaminshafii.com
EOF
vercel switch $VERCEL_TEAM
vercel domains ls # Should show benjaminshafii.com
| Subdomain | App | Description |
|---|---|---|
| recipes | apps/recipes | Recipe ratio calculators (lemonade) |