360 Secure SkillHub
360 安全技能中心

Code & Design Review

核心功能:基于杰夫·迪恩的架构可维护性原则、Luke W/Ryan Singer的UX原则,针对不同任务类型开展精准评审。支持编码任务后自动触发,也可通过命令手动执行。典型场景:代码变更后架构评审、UI调整后UX优化、设计文档审核。输入为代码、UI组件、设计描述等,输出专业评审意见及改进建议,还提供集成配置与评审checklist。

h-mascot
h-mascot
热度 26.19
最近更新 2026-06-30 04:32:41
分类:开发依赖:代码执行 / 读写文件 / 内部调用大模型应用场景:代码审查 / 自动化脚本 / UI 原型

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add ec-code-design-review
Metadata
name
code-design-review
description
Auto-review code and designs using Jeff Dean (architecture) and Luke W / Ryan Singer (UX) principles. Runs automatically after coding events.

Code & Design Review Skill

Automatic code and design reviews using world-class principles:

  • Jeff Dean - Architecture, scalability, maintainability
  • Luke W + Ryan Singer - UX, jobs-to-be-done, friction removal

Auto-Trigger Rule

After ANY coding task, automatically run the appropriate review:

Task Type Review to Run
Code changes (*.js, *.ts, *.py, etc.) Jeff Dean Code Review
UI/UX changes (*.tsx, *.vue, *.css, etc.) Both reviews
Design files, wireframes Luke W / Ryan Singer Review
Architecture docs, system design Jeff Dean Review

Jeff Dean Code Review Prompt

Use after code/architecture changes:

## CHANNEL JEFF "GLOBAL SCALE" DEAN

Thoroughly and thoughtfully review the following code/system:

{paste code or describe system}

Consider how following Jeff Dean's principles would improve this to make it best in class.

### Jeff Dean's Principles:

1. **Focus on Design and Architecture**
   - Evaluate overall system design
   - How does new code integrate with existing systems?
   - Does logic belong here or in a library?
   - Does it align with broader architecture?

2. **Prioritize Functionality over Style**
   - Focus on functionality, logic, maintainability
   - Let linters handle style
   - Human review = critical design aspects

3. **Learning and Collaboration**
   - Collaborative process
   - Comfortable asking questions
   - Improve code AND team understanding

4. **Encourage Discussion**
   - Diverse perspectives enhance quality

5. **Build Incrementally, Test Continuously**
   - Small, focused changes
   - Easier to review and test
   - Keeps system stable

6. **Automate Where Possible**
   - Catch common errors with tools
   - Free humans for architecture discussions

7. **Optimize for Clarity and Maintainability**
   - Code maintained by others
   - Clear, well-documented, modular
   - Small functions, easy to debug

Luke W / Ryan Singer UX Review Prompt

Use after UI/UX or design changes:

## CHANNEL LUKE W AND RYAN SINGER

Thoroughly and thoughtfully review the following:

{paste UI code, screenshot, or describe interface}

Consider how they would audit and improve this to make it best in class.

### LukeW's UX Principles:
- **Mobile First** - Responsive design
- **Progressive Disclosure** - Hide complexity until needed
- **Obvious Next Actions** - Clear CTAs
- **Reduce Cognitive Load** - Less is more
- **Visual Hierarchy** - Guide the eye

### Ryan Singer / Jobs To Be Done:
- What's the job?
- What's the outcome?
- Remove friction - make the happy path obvious
- Everything else is secondary

Quick Commands

Review code changes

# Get recent changes and review
git diff HEAD~1 | ~/clawd/skills/code-design-review/scripts/review-code.sh

Review a file

~/clawd/skills/code-design-review/scripts/review-code.sh path/to/file.ts

Review UI component

~/clawd/skills/code-design-review/scripts/review-ux.sh path/to/Component.tsx

Integration

For Codex CLI

Add to ~/.codex/instructions.md:

After completing any code changes, automatically run a Jeff Dean style review on the changes.
After completing any UI/UX changes, also run a Luke W / Ryan Singer review.

For Claude Code

Add to CLAUDE.md:

## Post-Coding Review (MANDATORY)

After ANY coding task, before reporting completion:
1. Review your changes using Jeff Dean principles (architecture, clarity, maintainability)
2. For UI changes, also apply Luke W / Ryan Singer principles (UX, friction, JTBD)
3. Self-correct any issues found before marking complete

Auto-Review Checklist

After coding, ask yourself:

Jeff Dean Checklist

  • Does the design make sense architecturally?
  • Is it integrated properly with existing systems?
  • Is the logic in the right place?
  • Is it clear and maintainable?
  • Could someone else understand and debug this?
  • Are functions small and focused?
  • Is it well-documented?

Luke W / Ryan Singer Checklist (for UI)

  • Does it work mobile-first?
  • Is complexity hidden until needed?
  • Are next actions obvious?
  • Is cognitive load minimized?
  • Is there clear visual hierarchy?
  • What job is the user trying to do?
  • Is the happy path frictionless?