Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
Install Frontend UI Foundry
$ npx skills add jiushiwon/wg-skills --skill frontend-ui-foundry -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jiushiwon/wg-skills frontend-ui-foundry --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/jiushiwon/wg-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/vibeCoding/frontend/frontend-ui-foundry .claude/skills/frontend-ui-foundry && 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-ui-foundry" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry into .claude/skills/frontend-ui-foundry/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-ui-foundry", 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/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundryType 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 jiushiwon/wg-skills --skill frontend-ui-foundry -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jiushiwon/wg-skills frontend-ui-foundry --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/vibeCoding/frontend/frontend-ui-foundry .agents/skills/frontend-ui-foundry && 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-ui-foundry" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry into .agents/skills/frontend-ui-foundry/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-ui-foundry", 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 jiushiwon/wg-skills --skill frontend-ui-foundry -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jiushiwon/wg-skills frontend-ui-foundry --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/vibeCoding/frontend/frontend-ui-foundry .cursor/skills/frontend-ui-foundry && 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-ui-foundry" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry into .cursor/skills/frontend-ui-foundry/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-ui-foundry", 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/jiushiwon/wg-skills.git --path vibeCoding/frontend/frontend-ui-foundry--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 jiushiwon/wg-skills --skill frontend-ui-foundry -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jiushiwon/wg-skills frontend-ui-foundry --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/vibeCoding/frontend/frontend-ui-foundry .gemini/skills/frontend-ui-foundry && 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-ui-foundry" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry into .gemini/skills/frontend-ui-foundry/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-ui-foundry", 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 jiushiwon/wg-skills frontend-ui-foundryInstalls 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 jiushiwon/wg-skills --skill frontend-ui-foundry -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/vibeCoding/frontend/frontend-ui-foundry .github/skills/frontend-ui-foundry && 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-ui-foundry" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry into .github/skills/frontend-ui-foundry/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-ui-foundry", 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 jiushiwon/wg-skills --skill frontend-ui-foundry -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jiushiwon/wg-skills frontend-ui-foundry --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/vibeCoding/frontend/frontend-ui-foundry .opencode/skills/frontend-ui-foundry && 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-ui-foundry" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/vibeCoding/frontend/frontend-ui-foundry into .opencode/skills/frontend-ui-foundry/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-ui-foundry", 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-ui-foundry- GitHub stars
- 114
- Token cost
- ~1.4k tokens
- SKILL.md length
- 279 words
- Files
- 56 (incl. scripts, references)
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
- Works in 3 steps: 无参数 → 渲染子命令菜单 + 场景选择器，引导用户选择 → 首词匹配子命令 → 加载对应 references/commands/.md… → 首词不匹配 → 视为通用设计请求，按"识别场景 → 选择风格 → 加载…
- Generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D)
- SKILL.md covers 设计哲学, 子命令, 核心资源 and 关键设计法则（精简版）, plus 3 more sections
- Runs Shell scripts from its folder
What it does
Frontend UI Foundry is an agent skill from jiushiwon/wg-skills. Use when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting design tokens from code, when applying a brand style, or when auditing a frontend project for design and code quality. Covers 8 scenarios, 10 mainstream color palettes, 15 font pairings, 4pt spacing scale, OKLCH color strategy, and 6 tech stacks (HTML+Tailwind/React+Next/Vue+Nuxt/uniapp/RN/Svelte).
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 59 other files, including scripts and reference files (for example `README.md`, `demo/README.md` and `demo/verify.sh`).
It sits in Frontend & Design, covering Frontend development, Theming and dark mode and Typography. It works with React, Vue.js, Nuxt and Svelte. The licence is Apache-2.0.
When your agent uses it
- Generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D)
- Refactoring an existing HTML/Vue/React project to a unified design system
- Extracting design tokens from code
- Applying a brand style
Example prompts
- “/frontend-ui-foundry”
Requirements
- A Bash shell
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- 无参数 → 渲染子命令菜单 + 场景选择器，引导用户选择
- 首词匹配子命令 → 加载对应 references/commands/.md 并按其流程执行
- 首词不匹配 → 视为通用设计请求，按"识别场景 → 选择风格 → 加载 Token → 实施"主流程
What it can do on your machine
Read from SKILL.md and the folder at commit 3569fb8. 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
Ships 1 file in scripts/ (Shell, from the files we listed), which the agent can run.
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 UI Foundry loads about 1.4k tokens when it runs, and up to ~58k if it reads all its reference files. Until then it costs about 125 tokens; SKILL.md has 279 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); the scripts in this folder are not scanned.
SKILL.md
The full file from jiushiwon/wg-skills at commit 3569fb8, republished under its Apache-2.0 licence (© jiushiwon). 279 words, ~1,370 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-ui-foundry/SKILL.md (or your agent's skills folder). This skill also uses 55 other files; get the full folder from GitHub.- name
- frontend-ui-foundry
- description
- Use when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting design tokens from code, when applying a brand style, or when auditing a frontend project for design and code quality. Covers 8 scenarios, 10 mainstream color palettes, 15 font pairings, 4pt spacing scale, OKLCH color strategy, and 6 tech stacks (HTML+Tailwind/React+Next/Vue+Nuxt/uniapp/RN/Svelte).
- argument-hint
- [forge|optimize|tokens|unify|audit|brand|scenario|stack] [args]
- user-invocable
- true
Frontend UI Foundry
综合性前端 UI 技能：按场景生成、一键优化、Token 统一、品牌套用、设计审查六位一体。
设计哲学
- 场景驱动：不同场景（移动端/PC/管理端/营销页/文档/金融/原生/3D）有截然不同的布局、组件、交互基线
- Token 优先：所有视觉决策沉淀为可消费的设计 Token，颜色/字体/间距/圆角/阴影/动效一应俱全
- 双模式闭环：
forge从零生成，optimize智能重构现有项目 - 复用协同：直接引用
impeccable的设计法则、ui-ux-pro-max的规则库、ui-audit的决策框架 - 多栈适配：HTML+Tailwind、React+Next、Vue+Nuxt、uniapp、RN、Svelte 六栈统一体验
子命令
| 命令 | 类别 | 用途 | 详细 |
|---|---|---|---|
forge <scenario> | 生成 | 从零按场景生成页面或项目 | commands/forge.md |
optimize [target] | 优化 | 一键智能重构现有项目 | commands/optimize.md |
tokens <action> | Token | 提取/注入/导出设计 Token | commands/tokens.md |
unify [target] | 统一 | 多页面/多模块风格统一 | commands/unify.md |
audit [target] | 审查 | 设计 + 代码双维审查 | commands/audit.md |
brand <name> | 品牌 | 套用品牌风格到目标 | commands/brand.md |
scenario <type> | 场景 | 输出场景方案基线 | commands/scenario.md |
stack <name> | 技术栈 | 技术栈最佳实践 | commands/stack.md |
路由规则
- 无参数 → 渲染子命令菜单 + 场景选择器，引导用户选择
- 首词匹配子命令 → 加载对应
references/commands/<cmd>.md并按其流程执行 - 首词不匹配 → 视为通用设计请求，按"识别场景 → 选择风格 → 加载 Token → 实施"主流程
主流程（首词不匹配时）
1. 识别场景（mobile-responsive / pc-corporate / admin-dashboard / landing-marketing / docs-site / fintech-app / mobile-native / threejs-3d）
2. 选择风格（brand 名称 / 调色板 / 用户自描述）
3. 选择技术栈（html-tailwind / react-nextjs / vue-nuxt / uniapp / react-native / svelte）
4. 加载 references/tokens/ 对应 Token
5. 加载 references/scenarios/<scenario>.md 场景基线
6. 应用设计法则（OKLCH 调色策略、字号阶 ≥1.25、行长 65-75ch、AI slop 黑名单）
7. 输出代码 + Token 文件 + 报告核心资源
设计 Token（6 份）
| 类别 | 文件 |
|---|---|
| 调色板 | tokens/color-palettes.md |
| 字体配对 | tokens/typography.md |
| 间距阶梯 | tokens/spacing-scale.md |
| 圆角阴影 | tokens/radius-elevation.md |
| 动效 | tokens/motion.md |
| 布局栅格 | tokens/layout-grid.md |
场景库（8 个）
| 场景 | 文件 | 典型用途 |
|---|---|---|
| 移动端响应式 | scenarios/mobile-responsive.md | 响应式 Web |
| PC 企业官网 | scenarios/pc-corporate.md | 企业品牌站 |
| 管理端中后台 | scenarios/admin-dashboard.md | SaaS 后台 |
| 营销落地页 | scenarios/landing-marketing.md | 推广页 |
| 文档站点 | scenarios/docs-site.md | 帮助中心 |
| 金融应用 | scenarios/fintech-app.md | 银行/支付 |
| 原生移动 | scenarios/mobile-native.md | iOS/Android |
| 3D 沉浸 | scenarios/threejs-3d.md | WebGL/Three.js |
品牌风格（58 总览 + 10 详细）
brands/index.md 列出 58 个品牌，10 个详细卡见 brands/。
技术栈（6 个）
stacks/ 目录下六栈适配。
AI Slop 黑名单
详见 anti-patterns.md。生成与优化前必读。
关键设计法则（精简版）
完整版见
impeccable设计法则 skill（外部依赖，未纳入本仓库；用户可在 Anthropic / 社区获取），本 SKILL 必读要点：
调色策略
- 使用 OKLCH，减少极亮/极暗的 chroma
- 永不使用
#000或#fff，所有中性色向品牌色相微调（chroma 0.005–0.01） - 四档承诺度：Restrained（点缀 ≤10%）/ Committed（主色占 30–60%）/ Full（3-4 角色明确分工）/ Drenched（整个表面就是色）
主题判断
- 不预设深/浅色。先写一句"谁、哪、什么光、什么心情"的物理场景句，句子里推不出答案就改具体直到能推
字体
- 正文行长 65-75ch
- 字号阶 ≥1.25 比例
- 不用 Inter/Roboto/Arial（AI slop 标志）
布局
- 卡片不是万灵药，嵌套卡片必错
- 不强求包容器，大多数元素不需要
- 间距要有节奏，避免处处相同
动效
- 不动 CSS 布局属性
- ease-out 指数曲线，无 bounce/elastic
- 150-300ms 微交互，复杂 ≤400ms
绝对禁令
- 侧边色条边框（
border-left/right > 1px彩色强调） - 渐变文字（
background-clip: text） - 玻璃拟态作默认
- 大数字+小标签的 hero-metric 模板
- 尺寸一致的卡片网格
- 模态框作为第一反应
AI Slop 测试
如果有人看了这个界面说"AI 做的"而你无法反驳，就是失败。先做品类反思维（不能从品类直接猜出主题+调色板），再做二阶反思维（不能从品类+反参考猜出美学家族）。
验证提醒
修改现有项目时：
- 不破坏业务逻辑：props、event、router、state、API 调用保持不变
- 不破坏可访问性：对比度 ≥4.5:1（AA），触摸目标 ≥44pt
- 不引入 AI slop：对照 anti-patterns.md 自检
- 保留动画意图：
prefers-reduced-motion必须支持 - 提供回滚方案：optimize 模式必须输出 diff + 回滚脚本
默认决策
- 默认调色板：赤琥金（中国科技+文学审美）
- optimize 默认策略：渐进（80% 对齐到匹配品牌）
- 生成语言：中文
- 目标部署位置：
D:\frontend-skills\frontend-ui-foundry\
开始使用
- 想生成页面/项目：
forge <scenario>或forge <scenario> --brand <name> --stack <name> - 想优化现有项目：
optimize或optimize <path> - 想看可用调色板：
tokens color或读 tokens/color-palettes.md - 想套用品牌风格：
brand <name>后跟目标 - 想审查项目：
audit <path> - 没参数：渲染上方子命令菜单，引导用户选择
© jiushiwon, Apache-2.0. 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 55 other files (scripts, references) in vibeCoding/frontend/frontend-ui-foundry of jiushiwon/wg-skills.
- SKILL.md
- README.md
- demo/README.md
- demo/verify.sh
- references/anti-patterns.md
- references/brands/apple.md
- references/brands/claude.md
- references/brands/cursor.md
- references/brands/index.md
- references/brands/linear.md
- references/brands/lovable.md
- references/brands/mintlify.md
- references/brands/revolut.md
- references/brands/stripe.md
- references/brands/supabase.md
- references/brands/vercel.md
- references/commands/audit.md
- … and 39 more
Open the folder on GitHubat commit 3569fb8
Compare with similar skills
Frontend UI Foundry 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 UI Foundry this skilljiushiwon/wg-skills | 114 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Tailwind CSS Patternsever-works/ever-works | 162 | 3 repos | ~1.6k | Automated safety check: Notes | AGPL-3.0 | |
| Bryl Minimal Designbryllim/bryl-minimal-design | 115 | — | ~2.9k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxshobcoder/shob | 576 | — | ~3.7k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| UI UX Pro MaxOhh-889/skyroc | 795 | 26 repos | ~3.6k | Automated safety check: Notes | MIT |
Similar skills
Bryl Minimal Design
bryllim/bryl-minimal-design
Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
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.
UI UX Pro Max
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
More from jiushiwon/wg-skills
All 12 skills in this repoWorkflow Diagram Skill
jiushiwon/wg-skills
A skill your agent uses when 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图。
Uniapp App Generate Skill
jiushiwon/wg-skills
This skill should be used when the user wants to create a standardized uni-app project for WeChat mini-program, H5, and App from scratch.
Fastapi Init Skill
jiushiwon/wg-skills
FastAPI 项目一键初始化技能。面向零基础小白，提供环境探测、自动安装、完整 Web 骨架生成、SSE 流式框架、JWT 鉴权、统一响应封装、文件上传接口、一键启动/重启脚本、Swagger 文档，内置 MySQL（默认）/ PostgreSQL / MongoDB 数据库选择。用户只需说"帮我搭一个 FastAPI 项目"即可一条命令完成从零到跑的完整链路。触发词："FastAPI…
Ffmpeg Skill
jiushiwon/wg-skills
FFmpeg 多媒体处理技能 — 将自然语言描述转为正确的 ffmpeg 命令，覆盖视频剪辑、转码、水印、合成、提取、生成等操作。内置一键安装脚本（Windows/Mac/Linux）。触发词：ffmpeg、视频剪辑、视频裁剪、视频转码、视频压缩、去水印、加水印、视频拼接、视频合成、提取音频、视频转…
Frontend Request Skill
jiushiwon/wg-skills
A skill your agent uses when designing or reviewing the request layer of a frontend project (web / uni-app / mini-program), including request.ts wrappers, interceptors, deduplication, mocks, error…
React Generate Skill
jiushiwon/wg-skills
This skill should be used when the user wants to create a standardized React 18 + TypeScript + Vite + Zustand project from scratch.
Related
Works with
Categories
Questions about Frontend UI Foundry
What does Frontend UI Foundry do?
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…. Frontend UI Foundry is an agent skill from jiushiwon/wg-skills. Use when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting design tokens from code, when applying a brand style, or when auditing a frontend project for design and code quality.
When should I use Frontend UI Foundry?
Frontend UI Foundry fits situations like: generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D); refactoring an existing HTML/Vue/React project to a unified design system; extracting design tokens from code; applying a brand style.
How do I install Frontend UI Foundry in Claude Code?
Run `npx skills add jiushiwon/wg-skills --skill frontend-ui-foundry -a claude-code`. Or copy the skill folder (vibeCoding/frontend/frontend-ui-foundry in jiushiwon/wg-skills) into .claude/skills/frontend-ui-foundry in your project. Claude Code loads it when a task matches its description.
How do I install Frontend UI Foundry in Codex?
Run `npx skills add jiushiwon/wg-skills --skill frontend-ui-foundry -a codex`. Or copy the skill folder (vibeCoding/frontend/frontend-ui-foundry in jiushiwon/wg-skills) into .agents/skills/frontend-ui-foundry in your project. Codex loads it when a task matches its description.
Can I use Frontend UI Foundry 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 jiushiwon/wg-skills --skill frontend-ui-foundry -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-ui-foundry, .gemini/skills/frontend-ui-foundry, .github/skills/frontend-ui-foundry and .opencode/skills/frontend-ui-foundry in your project.
What does Frontend UI Foundry need to run?
Going by SKILL.md and its folder, Frontend UI Foundry needs a shell for the scripts in its folder. Our summary lists: A Bash shell.
Does Frontend UI Foundry 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 UI Foundry 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Frontend UI Foundry use?
Frontend UI Foundry is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend UI Foundry use?
About 1.4k tokens (SKILL.md is roughly 5.5k 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 56k tokens, read only when the agent opens those files.
What are the alternatives to Frontend UI Foundry?
Skills that share tags, products or a category with Frontend UI Foundry: Tailwind CSS Patterns (ever-works/ever-works, 162 stars), Bryl Minimal Design (bryllim/bryl-minimal-design, 115 stars), UI UX Pro Max (shobcoder/shob, 576 stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend UI Foundry?
jiushiwon (a GitHub user) maintains it in jiushiwon/wg-skills, which has 114 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 7, 2026.
Source: jiushiwon/wg-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.