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.
AI 开发 Web 前端时应遵循的规范指引。当 Agent 执行前端开发任务（写组件、页面、样式、状态管理、构建配置、调试前端代码）时，加载本技能获取与最新主流 LLM 训练数据互补的规范约束：覆盖技术栈版本基线、AI 常见缺陷模式防御、代码质量红线、样式与界面设计质量（去 AI 味）、验证闭环流程。加载后按第 4 章工作流约束每一次代码生成行为。
Install Frontend Guidelines
$ npx skills add cigery-useio/useio-skills --skill frontend-guidelines -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install cigery-useio/useio-skills frontend-guidelines --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/cigery-useio/useio-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/frontend-guidelines .claude/skills/frontend-guidelines && 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 "frontend-guidelines" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/frontend-guidelines into .claude/skills/frontend-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-guidelines", 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/cigery-useio/useio-skills/tree/main/frontend-guidelinesType 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 cigery-useio/useio-skills --skill frontend-guidelines -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install cigery-useio/useio-skills frontend-guidelines --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/frontend-guidelines .agents/skills/frontend-guidelines && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-guidelines" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/frontend-guidelines into .agents/skills/frontend-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-guidelines", 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 cigery-useio/useio-skills --skill frontend-guidelines -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install cigery-useio/useio-skills frontend-guidelines --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/frontend-guidelines .cursor/skills/frontend-guidelines && 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 "frontend-guidelines" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/frontend-guidelines into .cursor/skills/frontend-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-guidelines", 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/cigery-useio/useio-skills.git --path frontend-guidelines--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 cigery-useio/useio-skills --skill frontend-guidelines -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install cigery-useio/useio-skills frontend-guidelines --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/frontend-guidelines .gemini/skills/frontend-guidelines && 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 "frontend-guidelines" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/frontend-guidelines into .gemini/skills/frontend-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-guidelines", 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 cigery-useio/useio-skills frontend-guidelinesInstalls 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 cigery-useio/useio-skills --skill frontend-guidelines -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/frontend-guidelines .github/skills/frontend-guidelines && 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 "frontend-guidelines" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/frontend-guidelines into .github/skills/frontend-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-guidelines", 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 cigery-useio/useio-skills --skill frontend-guidelines -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install cigery-useio/useio-skills frontend-guidelines --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/frontend-guidelines .opencode/skills/frontend-guidelines && 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 "frontend-guidelines" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/frontend-guidelines into .opencode/skills/frontend-guidelines/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-guidelines", 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
frontend-guidelines- GitHub stars
- 104
- Token cost
- ~2.8k tokens
- SKILL.md length
- 863 words
- Files
- 1
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- None found
At a glance
AI 开发 Web 前端时应遵循的规范指引。当 Agent 执行前端开发任务（写组件、页面、样式、状态管理、构建配置、调试前端代码）时，加载本技能获取与最新主流 LLM 训练数据互补的规范约束：覆盖技术栈版本基线、AI 常见缺陷模式防御、代码质量红线、样式与界面设计质量（去 AI 味）、验证闭环流程。加载后按第 4 章工作流约束每一次代码生成行为。
- Works in 7 steps: 技能概述 → 版本基线（2026-09） → AI 生成前端的缺陷防御（红线清单） → …
- Frontend & Design work in your project
- SKILL.md covers 1. 技能概述, 2. 版本基线（2026-09）, 3. AI 生成前端的缺陷防御（红线清单） and 4. 执行工作流, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Guidelines is an agent skill from cigery-useio/useio-skills. AI 开发 Web 前端时应遵循的规范指引。当 Agent 执行前端开发任务（写组件、页面、样式、状态管理、构建配置、调试前端代码）时，加载本技能获取与最新主流 LLM 训练数据互补的规范约束：覆盖技术栈版本基线、AI 常见缺陷模式防御、代码质量红线、样式与界面设计质量（去 AI 味）、验证闭环流程。加载后按第 4 章工作流约束每一次代码生成行为。
Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. It works with Tailwind CSS, React, Vue.js and Vite.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/frontend-guidelines”
Requirements
- Node.js
Workflow steps
7 steps, taken from the step headings in SKILL.md.
- 技能概述
- 版本基线（2026-09）
- AI 生成前端的缺陷防御（红线清单）
- 执行工作流
- 输出规范
- 异常处理
- 质量自检清单（Agent 交付前逐项核对）
What it can do on your machine
Read from SKILL.md and the folder at commit 558d635. 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
Frontend Guidelines loads about 2.8k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 863 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 863 words (~2,776 tokens).
“角色定位：本技能是一份面向 AI Agent 的前端开发规范指引。当 Agent 执行任何 Web 前端开发任务（编写组件、页面、样式、状态逻辑、构建配置，或修改调试前端代码）时，本技能作为行为约束层生效，确保产出代码符合工程标准、规避 AI 生成代码的典型缺陷模式，并与最新主流 LLM 训练数据形成互补。”
- name
- frontend-guidelines
- triggerKeywords
- 前端规范, AI前端开发, 前端代码规范, 前端验收标准, 前端最佳实践, AI写前端, 前端开发规范, 去AI味
- version
- 1.0.0
Files
Just SKILL.md in frontend-guidelines of cigery-useio/useio-skills.
Open the folder on GitHubat commit 558d635
Compare with similar skills
Frontend Guidelines 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 |
|---|---|---|---|---|---|---|
| Frontend Guidelines this skillcigery-useio/useio-skills | 104 | — | ~2.8k | Automated safety check: Pass | None | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Kill AI Slopyetone/kill-ai-slop | 1.3k | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Uni Appsonofmagic/uni-app-tailwindcss-template | 336 | 2 repos | ~1k | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
Uni App
sonofmagic/uni-app-tailwindcss-template
Comprehensive skill reference for uni-app cross-platform development framework
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
More from cigery-useio/useio-skills
All 10 skills in this repoRights Prep
cigery-useio/useio-skills
帮普通人把"权益受损类事务"的原始材料（聊天记录、转账凭证、单据、平台通知、官方查询结果等）整理成可提交的文书与证据册。流程为：先定性并锁定救济路径与法定期限，再把用户的口述拆成待证要件，接着筛选与核查证据、识别有害表述，然后成文、编证据清单、排版打印，最后按期限交付并留存提交凭证。产出文书草稿、证据清单、可打印证据册及提交指引。
HTML Ppt Creator
cigery-useio/useio-skills
HTML 幻灯片制作技能，生成专业级静态 HTML 演示文稿。内置 36 套主题、15 套完整 deck 模板、31 种页面布局、47 个动效，以及演讲者模式（逐字稿提词器+计时器）。最终通过 bundle.js 打包为单 HTML 文件，可拷贝发送给他人。当用户要求做 PPT、幻灯片、演讲稿、分享 slides、pitch deck、小红书图文等时触发。
Ppt Creator
cigery-useio/useio-skills
PPT 制作技能，支持创建和修改 PowerPoint 演示文稿。包含嵌入式 Python（Windows x64，约 25MB），支持企业内网环境零依赖运行。支持标题页、内容页、双栏页、表格页、图片页、章节页、图表页等多种布局。默认 16:9 宽高比，支持模板创建和修改前自动备份。
Browser Automation
cigery-useio/useio-skills
浏览器自动化技能，通过 browseraction 工具控制 Chrome 浏览器执行多步骤网页操作任务。支持页面导航、元素点击与输入、页面状态提取、截图分析、控制台错误与网络请求监控查询等。适用于网页数据采集、表单自动填写、网页信息查询、多步骤网页交互等场景。
Debugger Pro
cigery-useio/useio-skills
系统性调试技能，通过证据驱动的6阶段工作流精准定位和修复bug。以五大核心原则为防护链，确保诊断有证据、修复有评估、验证有回归。支持问题分级（P0-P3）、修复风险评估与门控、Context7文档查询降级策略，输出含分级清单和风险报告的完整调试报告。
Knowledge Extractor
cigery-useio/useio-skills
UseIO 元技能，用于从当前对话内容中提取有价值的知识条目并保存到知识库。当用户要求"提取知识""保存为知识""记录到知识库"时触发，引导 agent 分析对话内容，调用 saveknowledge 工具完成结构化知识存储，支持用户指定分类或由 agent 自动判断。
Related
Works with
Categories
Questions about Frontend Guidelines
What does Frontend Guidelines do?
AI 开发 Web 前端时应遵循的规范指引。当 Agent 执行前端开发任务（写组件、页面、样式、状态管理、构建配置、调试前端代码）时，加载本技能获取与最新主流 LLM 训练数据互补的规范约束：覆盖技术栈版本基线、AI 常见缺陷模式防御、代码质量红线、样式与界面设计质量（去 AI 味）、验证闭环流程。加载后按第 4 章工作流约束每一次代码生成行为。. Frontend Guidelines is an agent skill from cigery-useio/useio-skills.
When should I use Frontend Guidelines?
Frontend Guidelines fits situations like: frontend & Design work in your project.
How do I install Frontend Guidelines in Claude Code?
Run `npx skills add cigery-useio/useio-skills --skill frontend-guidelines -a claude-code`. Or copy the skill folder (frontend-guidelines in cigery-useio/useio-skills) into .claude/skills/frontend-guidelines in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Guidelines in Codex?
Run `npx skills add cigery-useio/useio-skills --skill frontend-guidelines -a codex`. Or copy the skill folder (frontend-guidelines in cigery-useio/useio-skills) into .agents/skills/frontend-guidelines in your project. Codex loads it when a task matches its description.
Can I use Frontend Guidelines 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 cigery-useio/useio-skills --skill frontend-guidelines -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-guidelines, .gemini/skills/frontend-guidelines, .github/skills/frontend-guidelines and .opencode/skills/frontend-guidelines in your project.
What does Frontend Guidelines need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Guidelines is instructions for the agent only. Our summary lists: Node.js.
Does Frontend Guidelines 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 Frontend Guidelines 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 Frontend Guidelines use?
No licence was found for Frontend Guidelines or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Frontend Guidelines use?
About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend Guidelines?
Skills that share tags, products or a category with Frontend Guidelines: Web Artifacts Builder (anthropics/skills, 180k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars) and Uni App (sonofmagic/uni-app-tailwindcss-template, 336 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Guidelines?
cigery-useio (a GitHub user) maintains it in cigery-useio/useio-skills, which has 104 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 23, 2026.
Source: cigery-useio/useio-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.