‹ 首页

frontend-dev

@qianleigood · 收录于 昨天 · 上游提交 1 个月前

Use when building or improving browser-facing UI where visual hierarchy, responsive layout, interaction design, motion, media, copy, or product polish is the main challenge.

场景网页构建ui开发

适合你，如果你需要开发或改进浏览器端用户界面

/ 下载安装
https://github.com/qianleigood/crawclaw/tree/main/skills/frontend-dev ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add qianleigood/crawclaw/frontend-dev
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- qianleigood/crawclaw/frontend-dev
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify qianleigood/crawclaw/frontend-dev
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
30GitHub stars
~473最小装载
~4.1K含声明引用
~54.2K文本包总量
索引托管

怎么用

商店整理自技能原文 · 版本 f27e175 · 表述以原文为准
它做什么

Claude 会专注前端 UI 开发，包括视觉层次、响应式布局、交互设计、动画、媒体和文案，并验证空状态、错误状态和减少动效支持。

什么时候触发

当用户要求构建或改进浏览器用户界面，且主要挑战是视觉设计、布局、动画等前端方面时。

装好后可以这样说
触发前端工作流程，设置设计参数。
直接请求组件开发。
技能原文 SKILL.md作者撰写 · MIT · f27e175

Frontend Studio

Use this as the default workflow for premium frontend work.

Use this skill when
  • the job is mainly about what users see and interact with in the browser
  • visual design, motion, copy, and media matter as much as code
  • React or Next.js is only the implementation substrate
  • backend or data work is secondary, absent, or already decided

Do not use this skill for backend-only work, database/service design, or React-internal debugging where hooks, render behavior, or state architecture are the real problem.

Default workflow
  1. Define the page type, audience, conversion goal, and target stack.
  2. Set design dials explicitly:
  3. DESIGN_VARIANCE
  4. MOTION_INTENSITY
  5. VISUAL_DENSITY
  6. Plan the section structure and required media.
  7. Choose motion deliberately and keep reduced-motion support in scope.
  8. Generate or gather real local assets before final build.
  9. Build the UI and verify responsive, empty, error, and reduced-motion states.
Working rules
  • Verify dependencies before importing libraries.
  • Do not ship placeholder media in final output unless the user explicitly wants scaffolding.
  • Prefer CSS Grid over brittle percentage math.
  • Avoid generic AI-looking UI defaults.
  • Use icons instead of emojis in product UI unless the user explicitly wants emojis.
Read references as needed
  • references/frontend-architecture.md For project structure, layout rules, asset paths, and visual direction.
  • references/motion-system.md and references/motion-recipes.md For animation tool choice, performance, and reduced-motion handling.
  • references/content-and-assets.md For media planning, copywriting, and asset workflow sequencing.
  • references/minimax-*.md, references/env-setup.md, references/troubleshooting.md For model-specific generation and environment details.
Handoff

Always report:

  • what was built
  • how to run it
  • which design dials were chosen
  • where the local assets live
  • any reduced-motion handling
  • notable tradeoffs or deferred improvements
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

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