Login
thedaviddias/ux-patterns-for-developers
A skill your agent uses when implementing user authentication and sign-in forms.
Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit…
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flow --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/portfolio-flow .claude/skills/portfolio-flow && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "portfolio-flow" agent skill from https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flow into .claude/skills/portfolio-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-flow", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flowType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flow --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/portfolio-flow .agents/skills/portfolio-flow && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "portfolio-flow" agent skill from https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flow into .agents/skills/portfolio-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-flow", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flow --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/portfolio-flow .cursor/skills/portfolio-flow && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "portfolio-flow" agent skill from https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flow into .cursor/skills/portfolio-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-flow", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git --path skills/portfolio-flow--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flow --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/portfolio-flow .gemini/skills/portfolio-flow && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "portfolio-flow" agent skill from https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flow into .gemini/skills/portfolio-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-flow", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flowInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/portfolio-flow .github/skills/portfolio-flow && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "portfolio-flow" agent skill from https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flow into .github/skills/portfolio-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-flow", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install TencentEdgeOne/awesome-website-prompts-and-skills portfolio-flow --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/portfolio-flow .opencode/skills/portfolio-flow && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "portfolio-flow" agent skill from https://github.com/TencentEdgeOne/awesome-website-prompts-and-skills/tree/main/skills/portfolio-flow into .opencode/skills/portfolio-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "portfolio-flow", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
portfolio-flowGenerates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit…
Portfolio Flow is an agent skill from TencentEdgeOne/awesome-website-prompts-and-skills. Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit analytics. Deploys to EdgeOne Pages with Edge Functions, KV Storage, JWT auth, and middleware. Use when a user wants to build a personal portfolio site, designer's online showcase, individual brand website, or multi-discipline design portfolio covering landscape, graphic, interior, industrial, or UX/UI design. Triggers…
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 23 other files, including reference files (for example `references/ai-generate.md`, `references/auth-jwt.md` and `references/deploy-workflow.md`).
It sits in Backend & APIs, covering Authentication and UI design. The repository describes itself as: Tencent EdgeOne 维护的网站资源合集。在 AI 编程工具中,给它一个 Prompt 或 Skill,就能生成精美酷炫的网页,或者带有登录、支付、AI 能力的完整网站。WorkBuddy × Tencent EdgeOne AI Prompts × Skills 挑战赛官方作品池。 The licence is MIT.
5 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit e3f25bd. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships script files (JavaScript, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
JWT_SECRETFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Portfolio Flow loads about 1.3k tokens when it runs, and up to ~28k if it reads all its reference files. Until then it costs about 183 tokens; SKILL.md has 336 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from TencentEdgeOne/awesome-website-prompts-and-skills at commit e3f25bd, republished under its MIT licence (© TencentEdgeOne). 336 words, ~1,331 tokens.
.claude/skills/portfolio-flow/SKILL.md (or your agent's skills folder). This skill also uses 19 other files; get the full folder from GitHub.把一句话,变成设计师的完整作品集网站。
PortfolioFlow 是面向5 大设计领域(景观 / 平面 / 室内 / 工业 / UX)的作品集 建站 Skill。用户用一句中文或英文描述需求,本 Skill 自动生成:
最终通过 edgeone-pages-deploy 一键部署到 EdgeOne Pages。
收到符合本 Skill 触发条件的用户请求后,按以下顺序执行:
如果用户描述中缺少以下任意字段,向用户一次性追问(不要反复问):
| 字段 | 必填 | 示例 | 默认值 |
|---|---|---|---|
| 设计师姓名 | ✅ | "李博" / "Alex Chen" | 用户名 |
| 设计领域 | ✅ | 景观 / 平面 / 室内 / 工业 / UX | 询问选一个 |
| 网站标题 | ❌ | "Lee · 景观设计作品集" | "{姓名} 作品集" |
| 一句话定位 | ❌ | "让设计回到土地与人居" | 按领域默认 |
| 主题方案 | ❌ | "暗夜森林" / hex 颜色 | "暗夜森林" |
| 预填作品数 | ❌ | 3-6 | 默认 3 个示例作品 |
追问示例:
我需要确认几个关键信息:
- 你的设计领域是什么?(景观/平面/室内/工业/UX)
- 设计师姓名?
- 主题方案?(暗夜森林/晨曦米色/深海蓝调/暖阳橙红/纯白极简,或者直接给一个 hex 颜色)
view 以下参考文件之一,根据用户领域加载对应的内容套路:
references/portfolio-knowledge.md 中的对应章节在 /tmp/portfolio-{slug}/ 下创建以下文件(禁止使用 cd 进入路径包含特殊字符的目录,所有
路径都用绝对路径或 ~/Desktop/ 下的干净路径):
portfolio-{slug}/
├── index.html # 前台首页(用 templates/index.html 模板)
├── portfolio-detail.html # 作品详情
├── admin.html # 管理后台
├── login.html # 登录页
├── assets/ # 图片素材(用户上传或占位图)
├── functions/
│ ├── api/
│ │ ├── auth.js # 登录鉴权 + JWT 签发(参考 references/auth-jwt.md)
│ │ ├── portfolios.js # 作品 CRUD(参考 references/portfolio-crud.md)
│ │ ├── generate.js # AI 生成介绍(参考 references/ai-generate.md)
│ │ └── stats.js # 访问统计(参考 references/stats-kv.md)
│ └── _middleware.js # JWT 校验 + CORS
└── README.md用户选定的主题方案需要同时注入到:
index.html 的 <style> 中的 CSS 变量admin.html 的同位置login.html 的同位置5 套预设主题的具体 CSS 变量值见 references/design-system.md。
如果用户传入 hex 颜色(如 #FF6B6B),按 references/design-system.md 中"hex
转完整主题"的算法生成配套色阶。
完成所有文件生成后,调用 edgeone-pages-deploy Skill 执行部署:
触发短语:deploy this portfolio to EdgeOne Pages
项目目录:~/Desktop/portfolio-{slug}/部署成功后,必须:
PORTFOLIO_USERS ← 用户账号库PORTFOLIO_WORKS ← 作品库PORTFOLIO_STATS ← 访问统计env.PORTFOLIO_WORKS(这是 EdgeOne Pages 的特殊规范)。下表帮助 AI 决定何时打开哪份 reference:
| 用户场景关键词 | 加载的 reference |
|---|---|
| "主题色 / 配色 / 视觉风格 / hex / 自定义颜色" | references/design-system.md |
| "登录 / 鉴权 / JWT / 密码 / token" | references/auth-jwt.md |
| "作品 / CRUD / 添加 / 编辑 / 删除 / 增删改查" | references/portfolio-crud.md |
| "AI 生成 / 作品介绍 / 描述生成 / 智能填写" | references/ai-generate.md |
| "统计 / 浏览量 / PV / 热门作品 / 看板" | references/stats-kv.md |
| "部署 / 上线 / EdgeOne / 域名 / KV 绑定" | references/deploy-workflow.md |
| "景观 / 平面 / 室内 / 工业 / UX 行业话术" | references/portfolio-knowledge.md |
绝不依赖外部 API Key——默认模式下所有功能(包括 AI 生成)必须零配置可跑。
references/ai-generate.md 描述了可选的 DeepSeek 增强模式,但不是默认行为。
绝不写入用户路径含特殊字符的目录——优先使用 ~/Desktop/ 下不含 × ' " / 的干净路径。
图片字段不做 startsWith('http') 兜底判断——直接信任传入的 img 字段,
本地 /assets/xxx.jpg 和远程 https://... 都要原样使用。
JWT secret 不硬编码在代码里——从 EdgeOne Pages 环境变量 JWT_SECRET
读取,部署后引导用户在控制台手动设置。
首次部署完成后必须返回:
| 用户说 | 启用 |
|---|---|
| "接真 AI" / "用 DeepSeek" / "AI 能力更强一点" | references/ai-generate.md 中的 Plan B:DeepSeek 双引擎 |
| "支持中英文切换" / "双语" | 在 index.html 添加 i18n 字典 + 切换按钮 |
| "加上 RSS / 订阅功能" | 新增 functions/api/rss.js |
| "支持作品评论" | 新增 functions/api/comments.js + 评论 KV namespace |
landscapeflow Prompt执行完成后,向用户输出以下结构化结果:
✅ PortfolioFlow 作品集已就绪
🌐 访问 URL: https://portfolio-{slug}.edgeone.cool
🔐 管理后台: https://portfolio-{slug}.edgeone.cool/admin
- 默认账号: admin@portfolio.local
- 默认密码: PortfolioFlow_{随机6位}
- ⚠️ 首次登录后请立即修改密码
📊 已部署能力:
✅ 前台作品集首页({N} 个示例作品)
✅ 作品详情页
✅ 管理后台(登录 / CRUD / AI 生成)
✅ Edge Functions × 4
✅ KV Storage × 3
✅ JWT 鉴权 + CORS Middleware
🎨 当前主题: {主题名称}
📁 项目目录: {本地路径}
下一步建议:
1. 登录后台添加你的真实作品
2. 上传头像和封面图到 /assets/
3. 修改 footer 中的版权和联系方式© TencentEdgeOne, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 19 other files (references) in skills/portfolio-flow of TencentEdgeOne/awesome-website-prompts-and-skills.
Open the folder on GitHubat commit e3f25bd
Portfolio Flow next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Portfolio Flow this skillTencentEdgeOne/awesome-website-prompts-and-skills | 183 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Loginthedaviddias/ux-patterns-for-developers | 258 | — | ~1.1k | Automated safety check: Pass | Custom licence | |
| Vue Component Developmentgdarko/laravel-vue-starter | 145 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Game UI UXukanwat/overtime | 387 | 1 repos | ~2.2k | Automated safety check: Pass | Apache-2.0 | |
| Auth Web CloudbaseTencentCloudBase/CloudBase-AI-Toolkit | 1.1k | 2 repos | ~4.4k | Automated safety check: Notes | MIT | |
| Ee Featurerhesis-ai/rhesis | 397 | — | ~398 | Automated safety check: Pass | Custom licence |
thedaviddias/ux-patterns-for-developers
A skill your agent uses when implementing user authentication and sign-in forms.
gdarko/laravel-vue-starter
Activate when creating or modifying Vue 3 components, pages, layouts, stores, or services in the frontend.
ukanwat/overtime
Design and build game UI/UX — HUDs, menus, and overlays — that survive every screen: anchor- based responsive layout, resolution/aspect scaling and safe areas, keyboard/gamepad focus navigation, a…
TencentCloudBase/CloudBase-AI-Toolkit
CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked.
rhesis-ai/rhesis
Add a new Enterprise Edition feature behind a feature gate, across backend and frontend.
greenpau/caddy-security
Configure and verify optional cross-device portal login, QR activation, explicit approval, browser binding, cancellation, and lifecycle through Caddy.
TencentEdgeOne/awesome-website-prompts-and-skills
基于 EdgeOne Pages 的全栈网站生成方案。用户说一句话(如「帮我建一个电商站」「做一个AI客服站」「做个管理后台」),AI 自动组合 Auth、Cart、Payment、AI Chat、Admin 五大模块,生成完整 Next.js 前后端代码并部署到 EdgeOne Pages 全球 CDN。支持电商、AI 助手、SaaS 管理后台三大模板。底层使用 Edge…
TencentEdgeOne/awesome-website-prompts-and-skills
Generate a complete SaaS landing page with EdgeOne Pages deployment.
Categories
Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit…. Portfolio Flow is an agent skill from TencentEdgeOne/awesome-website-prompts-and-skills. Generates a complete designer portfolio website with admin login, portfolio CRUD management, AI-powered project description generation, theme customization (5 presets or custom hex), and visit analytics.
Portfolio Flow fits situations like: A user wants to build a personal portfolio site; designers online showcase; individual brand website; multi-discipline design portfolio covering landscape.
Run `npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a claude-code`. Or copy the skill folder (skills/portfolio-flow in TencentEdgeOne/awesome-website-prompts-and-skills) into .claude/skills/portfolio-flow in your project. Claude Code loads it when a task matches its description.
Run `npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a codex`. Or copy the skill folder (skills/portfolio-flow in TencentEdgeOne/awesome-website-prompts-and-skills) into .agents/skills/portfolio-flow in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TencentEdgeOne/awesome-website-prompts-and-skills --skill portfolio-flow -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/portfolio-flow, .gemini/skills/portfolio-flow, .github/skills/portfolio-flow and .opencode/skills/portfolio-flow in your project.
Going by SKILL.md and its folder, Portfolio Flow needs JavaScript for the scripts in its folder and credentials named JWT_SECRET. Our summary lists: Node.js; A credential in JWT_SECRET.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Portfolio Flow is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 26k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Portfolio Flow: Login (thedaviddias/ux-patterns-for-developers, 258 stars), Vue Component Development (gdarko/laravel-vue-starter, 145 stars), Game UI UX (ukanwat/overtime, 387 stars) and Auth Web Cloudbase (TencentCloudBase/CloudBase-AI-Toolkit, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
TencentEdgeOne (a GitHub organization) maintains it in TencentEdgeOne/awesome-website-prompts-and-skills, which has 183 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on June 4, 2026.
Source: TencentEdgeOne/awesome-website-prompts-and-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.