add-to-site

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Project to Portfolio

向作品集添加项目

Use this skill to add a new app or project to the dividend-solo portfolio at

/Users/james/Developer/repos/dividendsolo/dividend-solo

使用此技能将新应用或项目添加到位于

/Users/james/Developer/repos/dividendsolo/dividend-solo

的dividend-solo作品集。

Step 0 — Classify the project

步骤0 — 对项目进行分类

First determine which kind of entry this is — it changes where

href

and

image

come from:

Deployed to production (has a live URL — custom domain or
```
*.vercel.app
```
):
```
href
```
is the production URL,
```
image
```
is an OG image (see table below).
MVP / not deployed (prototype, local-only, demo-stage):
```
href
```
is a Screen Studio share link to the demo video — James generates it from his Screen Studio account ("Shareable link" export). Ask him for the link if you don't have it; do NOT host the video file yourself or use a file path. The demo recording workflow lives in the project's
```
scripts/cursor-demo.ts
```
(see recall/fieldlog for the pattern).

首先确定这是哪类项目条目，这会改变

href

和

image

的来源：

已部署到生产环境（拥有在线URL——自定义域名或
```
*.vercel.app
```
）：
```
href
```
为生产环境URL，
```
image
```
为OG图片（见下表）。
MVP/未部署（原型、仅本地可用、演示阶段）：
```
href
```
为指向演示视频的Screen Studio共享链接——James会从他的Screen Studio账户生成该链接（“可共享链接”导出）。如果没有该链接，请向他索要；请勿自行托管视频文件或使用文件路径。演示录制流程位于项目的
```
scripts/cursor-demo.ts
```
中（可查看记录/日志了解模式）。

Step 1 — Gather project info

步骤1 — 收集项目信息

You need four things. If the user hasn't provided them, ask:

Field	Where to find it
name	The display name (e.g. "EchoForm")
href	Deployed → production URL (e.g. `https://echo-form.com` ). MVP → Screen Studio share link from James (Step 0).
description	1–2 sentence summary. If not provided, read the project's CLAUDE.md or README at `~/Developer/repos/dividendsolo/<repo>/` and draft one.
tech	Key libraries/services. Read `package.json` in the project repo if not provided.
image	Deployed only: OG image URL. Check if the repo has `app/opengraph-image.tsx` — if so, use `<href>/opengraph-image` . Otherwise check for `public/og.png` . If neither exists, create `app/opengraph-image.tsx` in the project repo (see note below) and use the `/opengraph-image` URL. MVP: no deployed origin to serve from — use a screenshot/poster frame committed to dividend-solo's `public/` instead.

Description style: short, punchy, dash-separated clauses. Match the existing entries:

"Investment portfolio tracker — SEC EDGAR integration, multi-asset support, performance analytics."
"SEAL training prep — digital workout programs based on the NSW Training Guide, PST tracking, analytics."

Tech array: 4–6 items max, most recognizable first (Next.js, then DB, then payments/auth, then extras).

你需要以下四项信息。如果用户未提供，请询问：

字段	查找位置
name	显示名称（例如“EchoForm”）
href	已部署项目→生产环境URL（例如 `https://echo-form.com` ）。MVP项目→James提供的Screen Studio共享链接（步骤0）。
description	1-2句话的摘要。如果未提供，请读取项目仓库 `~/Developer/repos/dividendsolo/<repo>/` 下的CLAUDE.md或README文件并撰写摘要。
tech	核心库/服务。如果未提供，请读取项目仓库中的 `package.json` 文件。
image	仅已部署项目：OG图片URL。检查仓库是否有 `app/opengraph-image.tsx` ——如果有，使用 `<href>/opengraph-image` 。否则检查是否有 `public/og.png` 。如果两者都不存在，在项目仓库中创建 `app/opengraph-image.tsx` （见下方说明）并使用 `/opengraph-image` URL。MVP项目：没有部署源提供服务——改用提交到dividend-solo的 `public/` 目录下的截图/海报帧。

描述风格：简短有力，使用破折号分隔分句。与现有条目保持一致：

“投资组合追踪器——SEC EDGAR集成、多资产支持、绩效分析。”
“SEAL训练准备——基于NSW训练指南的数字化训练计划、PST追踪、分析。”

技术数组：最多4-6项，按辨识度从高到低排列（Next.js优先，然后是数据库，再是支付/认证服务，最后是其他工具）。

Step 2 — Add the entry

步骤2 — 添加条目

Edit

/Users/james/Developer/repos/dividendsolo/dividend-solo/components/ProjectsSection.tsx

(project data lives in

lib/projects-data.ts

The site has two project sections:

Production — deployed apps with live URLs (the original section).
MVP — demo-stage builds whose cards link to Screen Studio demo videos. This section carries a "Contact me if interested." message so visitors know these are available to commission/buy.

Put the entry in the section matching its Step 0 classification. (If the MVP section doesn't exist in the codebase yet, build it to mirror the Production section's card grid, plus the contact message linking to the existing contact form.)

Add a new object to the matching projects array, after the last existing entry:

typescript

{
  name: "<Name>",
  href: "<https://...>",
  description:
    "<One-line summary — key feature, key feature, key feature.>",
  tech: ["Next.js", "<DB>", "<Service>", ...],
  image: "<https://...>/opengraph-image",  // or /og.png if static
},

编辑

/Users/james/Developer/repos/dividendsolo/dividend-solo/components/ProjectsSection.tsx

（项目数据存储在

lib/projects-data.ts

中）。

网站包含两个项目板块：

生产环境项目——已部署的在线应用（原有板块）。
MVP项目——演示阶段版本，其卡片链接到Screen Studio演示视频。该板块带有“如有兴趣请联系我”的提示，让访客知道这些项目可委托开发/购买。

根据步骤0的分类，将条目放入对应板块。（如果代码库中还没有MVP板块，请参照生产环境板块的卡片网格创建该板块，并添加链接到现有联系表单的提示信息。）

在对应项目数组的最后一个现有条目之后添加新对象：

typescript

{
  name: "<Name>",
  href: "<https://...>",
  description:
    "<一行摘要——核心功能，核心功能，核心功能。>",
  tech: ["Next.js", "<DB>", "<Service>", ...],
  image: "<https://...>/opengraph-image",  // 如果是静态图片则使用/og.png
},

Step 2b — Create opengraph-image.tsx if missing

步骤2b — 缺失时创建opengraph-image.tsx

If the project repo has no OG image, create

/Users/james/Developer/repos/dividendsolo/<repo>/app/opengraph-image.tsx

tsx

import { ImageResponse } from "next/og"

export const size = { width: 1200, height: 630 }
export const contentType = "image/png"
export const alt = "<AppName> — <tagline>"

export default async function OgImage() {
  return new ImageResponse(
    <div
      style={{
        height: "100%", width: "100%", display: "flex",
        flexDirection: "column", justifyContent: "space-between",
        padding: 80, background: "#0a0a0a", color: "white",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      {/* Logo mark */}
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: "<brand-color>", display: "flex",
          alignItems: "center", justifyContent: "center",
          fontSize: 32, fontWeight: 800, color: "#0a0a0a",
        }}>
          <AppInitial>
        </div>
        <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em" }}>
          <AppName>
        </div>
      </div>
      {/* Headline */}
      <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        <div style={{ fontSize: 88, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1.0, display: "flex" }}>
          <Line 1>
        </div>
        <div style={{ fontSize: 88, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1.0, display: "flex", color: "<brand-color>" }}>
          <Line 2>
        </div>
      </div>
      {/* Footer */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontSize: 26, color: "#a1a1aa", display: "flex" }}>
          <domain> · <tagline>
        </div>
        <div style={{
          display: "flex", gap: 10, background: "<brand-color>", color: "#0a0a0a",
          fontSize: 26, fontWeight: 700, padding: "14px 28px", borderRadius: 999,
        }}>
          <span>Get started</span><span style={{ fontSize: 28 }}>→</span>
        </div>
      </div>
    </div>,
    size,
  )
}

Find the brand color in

app/globals.css

(

--primary

variable). Run

bun run typecheck

in that repo after adding.

如果项目仓库没有OG图片，创建

/Users/james/Developer/repos/dividendsolo/<repo>/app/opengraph-image.tsx

：

tsx

import { ImageResponse } from "next/og"

export const size = { width: 1200, height: 630 }
export const contentType = "image/png"
export const alt = "<AppName> — <tagline>"

export default async function OgImage() {
  return new ImageResponse(
    <div
      style={{
        height: "100%", width: "100%", display: "flex",
        flexDirection: "column", justifyContent: "space-between",
        padding: 80, background: "#0a0a0a", color: "white",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      {/* Logo标识 */}
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: "<brand-color>", display: "flex",
          alignItems: "center", justifyContent: "center",
          fontSize: 32, fontWeight: 800, color: "#0a0a0a",
        }}>
          <AppInitial>
        </div>
        <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em" }}>
          <AppName>
        </div>
      </div>
      {/* 标题 */}
      <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        <div style={{ fontSize: 88, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1.0, display: "flex" }}>
          <Line 1>
        </div>
        <div style={{ fontSize: 88, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1.0, display: "flex", color: "<brand-color>" }}>
          <Line 2>
        </div>
      </div>
      {/* 页脚 */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontSize: 26, color: "#a1a1aa", display: "flex" }}>
          <domain> · <tagline>
        </div>
        <div style={{
          display: "flex", gap: 10, background: "<brand-color>", color: "#0a0a0a",
          fontSize: 26, fontWeight: 700, padding: "14px 28px", borderRadius: 999,
        }}>
          <span>Get started</span><span style={{ fontSize: 28 }}>→</span>
        </div>
      </div>
    </div>,
    size,
  )
}

在

app/globals.css

中查找品牌颜色（

--primary

变量）。添加文件后在该仓库中运行

bun run typecheck

。

Step 3 — Verify

步骤3 — 验证

Run the type check and lint to confirm no issues:

bash

cd /Users/james/Developer/repos/dividendsolo/dividend-solo
bun tsc --noEmit && bun run lint

Fix any errors before finishing.

运行类型检查和代码检查以确认无问题：

bash

cd /Users/james/Developer/repos/dividendsolo/dividend-solo
bun tsc --noEmit && bun run lint

完成前修复所有错误。

Step 4 — Update next.config if needed

步骤4 — 必要时更新next.config

The portfolio uses

next/image

. If the new project's OG image is hosted on a domain not already in

remotePatterns

, add it.

Check

/Users/james/Developer/repos/dividendsolo/dividend-solo/next.config.ts

— look for the

images.remotePatterns

array. If the new image hostname is missing, add:

typescript

{ protocol: "https", hostname: "<new-domain>" }

作品集使用

next/image

。如果新项目的OG图片托管在未列入

remotePatterns

的域名上，请添加该域名。

查看

/Users/james/Developer/repos/dividendsolo/dividend-solo/next.config.ts

——找到

images.remotePatterns

数组。如果新图片的主机名缺失，添加：

typescript

{ protocol: "https", hostname: "<new-domain>" }

Notes

注意事项

Projects are displayed in the order they appear in the array — newest goes last.
The grid is 2 columns on
```
sm:
```
and above, 1 column on mobile.
Images use
```
aspect-[1200/630]
```
— standard OG aspect ratio. Make sure the image URL resolves to a real image before shipping.
Do NOT ship — wait for the user to run
```
/shipit
```
.

项目按数组中的顺序显示——最新项目放在最后。
网格在
```
sm:
```
及以上屏幕为2列，移动端为1列。
图片使用
```
aspect-[1200/630]
```
——标准OG图片宽高比。发布前确保图片URL指向有效图片。
请勿发布——等待用户运行
```
/shipit
```
命令。