frontend

@code-yeongyu · 收录于 1 周前 · 上游提交今天

MUST USE for frontend/web UI/UX/visual work: building, styling, redesigning pages/components, React setup, performance audits, visual QA, taste, and polish. Routes four rulesets: design taste router and brand references; perfection for Playwright/Chromium Lighthouse/Core Web Vitals; ui-ux-db palettes/fonts/guidelines; designpowers personas/accessibility/critique/handoff; plus curl-only lazyweb real-app-screen research for design direction. Triggers: frontend, UI, UX, design, redesign, styling, layout, animation, motion, premium, luxury, minimal, brutalist, Awwwards, DESIGN.md, mockup, React, Lighthouse, accessibility, WCAG, Core Web Vitals, looks generic, make it pretty, like X brand, lazyweb, design research.

场景页面开发 ui调整性能调优

适合你，如果你需要开发或改进网页的用户界面和体验

/ 下载安装

https://github.com/code-yeongyu/oh-my-openagent/tree/dev/packages/omo-opencode/src/features/builtin-skills/frontend ↗

/ 通过 npx 安装 校验哈希

npx oh-my-skill add code-yeongyu/oh-my-openagent/frontend

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- code-yeongyu/oh-my-openagent/frontend

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify code-yeongyu/oh-my-openagent/frontend

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

65921GitHub stars

~3.8K上下文体积 · 单文件

索引托管

怎么用

商店整理自技能原文 · 版本 3ec4afb · 表述以原文为准

它做什么

Claude 会先加载设计规则集，然后根据你的要求构建或修改前端界面。它会创建一份 DESIGN.md 文件作为设计合同，并确保代码在视觉和性能上都达到专业水准。

什么时候触发

当你提到前端、UI、UX、设计、重新设计、样式、布局、动画、React、Lighthouse、可访问性等关键词，或要求“让它好看”、“像某品牌”时触发。

装好后可以这样说

Claude 会加载 Stripe 的设计系统并生成页面。

Claude 会运行 Playwright 审计并给出报告。

Claude 会参考设计规则集添加合适的动画。

技能原文在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…