Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
设计、实现、迭代或评审真实前端页面与交互流程，包括 SaaS、仪表盘、编辑器、落地页和可视化工具。关注产品任务、现有设计语言、可达状态与浏览器验证；不用于纯后端工作。
Install Cs Frontend Design
$ npx skills add ChenShuo2004/cs-skills --skill cs-frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ChenShuo2004/cs-skills cs-frontend-design --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/ChenShuo2004/cs-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cs-frontend-design .claude/skills/cs-frontend-design && 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 "cs-frontend-design" agent skill from https://github.com/ChenShuo2004/cs-skills/tree/main/cs-frontend-design into .claude/skills/cs-frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cs-frontend-design", 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/ChenShuo2004/cs-skills/tree/main/cs-frontend-designType 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 ChenShuo2004/cs-skills --skill cs-frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ChenShuo2004/cs-skills cs-frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ChenShuo2004/cs-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/cs-frontend-design .agents/skills/cs-frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "cs-frontend-design" agent skill from https://github.com/ChenShuo2004/cs-skills/tree/main/cs-frontend-design into .agents/skills/cs-frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cs-frontend-design", 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 ChenShuo2004/cs-skills --skill cs-frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ChenShuo2004/cs-skills cs-frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ChenShuo2004/cs-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/cs-frontend-design .cursor/skills/cs-frontend-design && 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 "cs-frontend-design" agent skill from https://github.com/ChenShuo2004/cs-skills/tree/main/cs-frontend-design into .cursor/skills/cs-frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cs-frontend-design", 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/ChenShuo2004/cs-skills.git --path cs-frontend-design--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 ChenShuo2004/cs-skills --skill cs-frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ChenShuo2004/cs-skills cs-frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ChenShuo2004/cs-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/cs-frontend-design .gemini/skills/cs-frontend-design && 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 "cs-frontend-design" agent skill from https://github.com/ChenShuo2004/cs-skills/tree/main/cs-frontend-design into .gemini/skills/cs-frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cs-frontend-design", 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 ChenShuo2004/cs-skills cs-frontend-designInstalls 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 ChenShuo2004/cs-skills --skill cs-frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ChenShuo2004/cs-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/cs-frontend-design .github/skills/cs-frontend-design && 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 "cs-frontend-design" agent skill from https://github.com/ChenShuo2004/cs-skills/tree/main/cs-frontend-design into .github/skills/cs-frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cs-frontend-design", 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 ChenShuo2004/cs-skills --skill cs-frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ChenShuo2004/cs-skills cs-frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ChenShuo2004/cs-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/cs-frontend-design .opencode/skills/cs-frontend-design && 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 "cs-frontend-design" agent skill from https://github.com/ChenShuo2004/cs-skills/tree/main/cs-frontend-design into .opencode/skills/cs-frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cs-frontend-design", 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.
Facts
- Skill name
cs-frontend-design- GitHub stars
- 194
- Token cost
- ~327 tokens
- SKILL.md length
- 46 words
- Files
- 3 (incl. references)
- Skills in repo
- 26
- Repo updated
- First seen
- Licence
- MIT
At a glance
设计、实现、迭代或评审真实前端页面与交互流程，包括 SaaS、仪表盘、编辑器、落地页和可视化工具。关注产品任务、现有设计语言、可达状态与浏览器验证；不用于纯后端工作。
- Frontend & Design work in your project
- SKILL.md covers Work Modes, 产品与视觉判断, 实现与验收 and 交付
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Cs Frontend Design is an agent skill from ChenShuo2004/cs-skills. 设计、实现、迭代或评审真实前端页面与交互流程，包括 SaaS、仪表盘、编辑器、落地页和可视化工具。关注产品任务、现有设计语言、可达状态与浏览器验证；不用于纯后端工作。
Its SKILL.md is about 330 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `agents/openai.yaml` and `references/execution-contract.md`).
It sits in Frontend & Design. The repository describes itself as: 陈硕的 Codex Skills 与 AI 工作流手册：把产品、内容、调研与交付沉淀为可复用的智能工作流。 The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/cs-frontend-design”
What it can do on your machine
Read from SKILL.md and the folder at commit 6f5009d. It shows what the files ask for, not the result of running them.
Tool permissions
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.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Cs Frontend Design loads about 327 tokens when it runs, and up to ~978 if it reads all its reference files. Until then it costs about 26 tokens; SKILL.md has 46 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.
Safety
Auto-check passed
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.
SKILL.md
The full file from ChenShuo2004/cs-skills at commit 6f5009d, republished under its MIT licence (© ChenShuo2004). 46 words, ~327 tokens.
Download SKILL.mdSave it as
.claude/skills/cs-frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- cs-frontend-design
- description
- 设计、实现、迭代或评审真实前端页面与交互流程，包括 SaaS、仪表盘、编辑器、落地页和可视化工具。关注产品任务、现有设计语言、可达状态与浏览器验证；不用于纯后端工作。
<!-- CS Skills · 陈硕 | https://github.com/ChenShuo2004/cs-skills -->CS Frontend Design
先理解页面给谁用、主要动作是什么、完成后应发生什么。检查现有页面、路由、组件、设计 tokens 与真实数据，再作设计决定。
Work Modes
- Build：交付可运行的页面或完整用户流程。
- Iterate：解决指定体验问题，保留产品目的与已有视觉语言。
- Review：交付具体发现、证据和修复优先级，不擅自改代码。
目标明确时直接执行。小改动只需简短说明；新页面或复杂流程可内部整理 Page Spec。多状态流程可用 State Matrix；简单静态改动不用填表。只有需要更详细交接时读 execution contract。
产品与视觉判断
- 用户要求工具时，第一屏就是可工作的工具；不要替换成营销落地页。原型中的示例数据需明确，不能冒充已连接服务。
- 沿用项目组件、字体、颜色、圆角与间距。新项目默认极简、现代、留白充足，以 Apple、Linear、Vercel、Notion 的清晰度为参考；用户品牌或参考图优先。
- 布局由信息关系决定。表格服务比较，列表服务扫描，卡片用于独立内容组；不设脱离项目的固定圆角上限或颜色禁令。
- 按钮标签说明动作和结果。熟悉且重复的工具操作可以用带可访问名称的图标；陌生、核心或破坏性动作保留清晰文字。
- 只使用能解释真实产品的截图、素材或图形。装饰、动画和依赖必须对理解或操作有帮助。
- 复用项目栈。无既有栈时可选 React、TypeScript、TailwindCSS 和适用的 shadcn/ui；不要为简单页面引入整套服务架构。
实现与验收
完成真实可达的 loading、empty、error、success、disabled 状态与恢复动作。检查键盘操作、焦点、表单标签、可读对比度；不要给静态页面制造假的加载或错误状态。
用项目适用的构建/类型检查验证实现，并在可用浏览器中操作主流程和最容易失败的分支。响应式页面至少检查桌面与窄屏的导航、溢出、点击目标与内容顺序；截图好看不等于按钮可用。
Verification Evidence 记录实际路由、动作、观察结果和必要的视口。工具不可用时说清未做的检查，不把源码推断当作浏览器通过。通过验收后交付，只有新失败或变更才重复检查。
交付
简短说明用户能做什么、修改文件、实际检查与未验证项。Review 按影响排序，区分缺陷与设计建议。不要强制输出完整 Page Spec 或 State Matrix。
© ChenShuo2004, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (references) in cs-frontend-design of ChenShuo2004/cs-skills.
- SKILL.md
- agents/openai.yaml
- references/execution-contract.md
Open the folder on GitHubat commit 6f5009d
Compare with similar skills
Cs Frontend Design 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 |
|---|---|---|---|---|---|---|
| Cs Frontend Design this skillChenShuo2004/cs-skills | 194 | — | ~327 | Automated safety check: Pass | MIT | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
Similar skills
- Official
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
- Official
Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
More from ChenShuo2004/cs-skills
All 26 skills in this repoCs Checkpoint Version
ChenShuo2004/cs-skills
A skill your agent uses when the user asks to save the current repository version, create a rollback point, checkpoint dirty worktree changes, preserve staged/unstaged/untracked files before risky…
Cs Code Video
ChenShuo2004/cs-skills
用代码做动画视频：页面暴露 render(t)，Playwright 逐帧截图 + FFmpeg 合成 mp4，可接合成配乐、出图和配音。通用模式先明确主题、规格、风格和声音，出风格卡、分镜与关键帧后逐镜制作；Vibe知识大赏模式额外查证来源、记录真实素材许可、先渲 10 秒样片。触发词包括…
Cs Knowledge Film
ChenShuo2004/cs-skills
制作明确要求暗夜星空、衬线双语字幕与金色光点风格的知识解说片，或用户显式调用 $cs-knowledge-film：从概念与画面隐喻设计，到口播、场景 spec、配音和 1080p 渲染。普通科普视频不默认套用这一视觉模板；网页产品演示、ChatCut 策划和电商视频复刻各用对应 skill。
Cs Auto Videl
ChenShuo2004/cs-skills
A skill your agent uses when the user types $cs-auto-videl or asks for Douyin/TikTok ecommerce video workflows, including competitor replication, strong-Hook nine-grid promptimage.md to image2…
Cs Digital Human Product Video Pipeline
ChenShuo2004/cs-skills
当用户要把产品事实、口播、数字人、产品界面和 CTA 制作成可验收的数字人产品介绍视频时使用：统一预检 ChatCut、FFmpeg、ComfyUI、Fish/TTS 与 Remotion，按 plan、sample、batch 三种模式编排，先完成可审批样片再批量或出成片。用于有明确产品包的横版/竖版产品视频流水线；不要用于通用自动剪辑、电商短视频复刻、纯视频选题策划或未经确认的批量生成与发布。
Cs Code Story Video
ChenShuo2004/cs-skills
把中文口播、角色和参考素材制作成可验收的 16:9 代码叙事视频：A-roll 角色讲述、全屏场景 B-roll、真实音频时码、Remotion 样片与成片、3:4/4:3 杂志风封面。仅用于代码驱动的叙事视频，不替代 ChatCut 剪辑、数字人产品片或电商复刻。
Related
Categories
Questions about Cs Frontend Design
What does Cs Frontend Design do?
设计、实现、迭代或评审真实前端页面与交互流程，包括 SaaS、仪表盘、编辑器、落地页和可视化工具。关注产品任务、现有设计语言、可达状态与浏览器验证；不用于纯后端工作。. Cs Frontend Design is an agent skill from ChenShuo2004/cs-skills.
When should I use Cs Frontend Design?
Cs Frontend Design fits situations like: frontend & Design work in your project.
How do I install Cs Frontend Design in Claude Code?
Run `npx skills add ChenShuo2004/cs-skills --skill cs-frontend-design -a claude-code`. Or copy the skill folder (cs-frontend-design in ChenShuo2004/cs-skills) into .claude/skills/cs-frontend-design in your project. Claude Code loads it when a task matches its description.
How do I install Cs Frontend Design in Codex?
Run `npx skills add ChenShuo2004/cs-skills --skill cs-frontend-design -a codex`. Or copy the skill folder (cs-frontend-design in ChenShuo2004/cs-skills) into .agents/skills/cs-frontend-design in your project. Codex loads it when a task matches its description.
Can I use Cs Frontend Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ChenShuo2004/cs-skills --skill cs-frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cs-frontend-design, .gemini/skills/cs-frontend-design, .github/skills/cs-frontend-design and .opencode/skills/cs-frontend-design in your project.
What does Cs Frontend Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Cs Frontend Design is instructions for the agent only.
Does Cs Frontend Design access the network?
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.
Is Cs Frontend Design safe to install?
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.
What licence does Cs Frontend Design use?
Cs Frontend Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Cs Frontend Design use?
About 327 tokens (SKILL.md is roughly 1.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 651 tokens, read only when the agent opens those files.
What are the alternatives to Cs Frontend Design?
Skills that share tags, products or a category with Cs Frontend Design: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Cs Frontend Design?
ChenShuo2004 (a GitHub user) maintains it in ChenShuo2004/cs-skills, which has 194 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 8, 2026.
Source: ChenShuo2004/cs-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.