一键导入
code-edit-quality
SEARCH/REPLACE block patterns for precise code edits. Based on Cline's edit methodology for accurate file modifications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
SEARCH/REPLACE block patterns for precise code edits. Based on Cline's edit methodology for accurate file modifications.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | code-edit-quality |
| description | SEARCH/REPLACE block patterns for precise code edits. Based on Cline's edit methodology for accurate file modifications. |
| tier | essential |
| tags | ["editing","code-quality","search-replace","refactoring"] |
Master the art of precise code modifications using SEARCH/REPLACE blocks.
Only include changing lines plus 2-3 context lines for uniqueness.
# Wrong - Too much unchanged code
<<<<<<< SEARCH
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
function formatCurrency(amount) {
return `$${amount.toFixed(2)}`;
}
=======
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
function formatCurrency(amount) {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
}
>>>>>>> REPLACE
# Right - Minimal SEARCH block
<<<<<<< SEARCH
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price;
}
return total;
}
=======
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
>>>>>>> REPLACE
Confirm SEARCH matches exactly one location before applying.
# Verify uniqueness with grep first
grep -n "function calculateTotal" src/
# Then use unique SEARCH block
<<<<<<< SEARCH
function calculateTotal(items) {
let total = 0;
=======
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
>>>>>>> REPLACE
List SEARCH/REPLACE blocks in file order for sequential changes.
# File order: top to bottom
<<<<<<< SEARCH
const API_URL = 'http://localhost:3000';
=======
const API_URL = process.env.API_URL || 'http://localhost:3000';
>>>>>>> REPLACE
<<<<<<< SEARCH
function fetchUser(id) {
return fetch(`/api/users/${id}`);
}
=======
async function fetchUser(id) {
const response = await fetch(`/api/users/${id}`);
return response.json();
}
>>>>>>> REPLACE
Preserve exact indentation - spaces and tabs matter.
# Wrong - Wrong indentation
<<<<<<< SEARCH
function hello() {
console.log('hello');
}
=======
function hello() {
console.log('hello');
}
>>>>>>> REPLACE
# Right - Exact whitespace match
<<<<<<< SEARCH
function hello() {
console.log('hello');
}
=======
function hello() {
console.log('hello');
}
>>>>>>> REPLACE
Never truncate lines mid-way - include complete line content.
# Wrong - Truncated line
<<<<<<< SEARCH
const users = await db.query('SELECT * FROM users WHERE
=======
const users = await db.query('SELECT * FROM users WHERE active = true');
>>>>>>> REPLACE
# Right - Complete lines
<<<<<<< SEARCH
const users = await db.query('SELECT * FROM users WHERE active = true');
=======
const users = await db.query('SELECT * FROM users WHERE active = $1', [true]);
>>>>>>> REPLACE
Keep existing comments in replacements - they're part of the code's context.
# Wrong - Removed comment
<<<<<<< SEARCH
// Calculate total price
function calculateTotal(items) {
=======
function calculateTotal(items) {
>>>>>>> REPLACE
# Right - Preserve comments
<<<<<<< SEARCH
// Calculate total price including tax
function calculateTotal(items) {
=======
// Calculate total price including tax
function calculateTotal(items) {
>>>>>>> REPLACE
Use two SEARCH/REPLACE blocks for moving code - delete then insert.
# Step 1: Delete from original location
<<<<<<< SEARCH
function oldUtility() {
// deprecated
}
=======
>>>>>>> REPLACE
# Step 2: Insert at new location
<<<<<<< SEARCH
function processData() {
=======
function processData() {
function oldUtility() {
// deprecated
}
>>>>>>> REPLACE
Use empty REPLACE section to remove code.
# Delete unused import
<<<<<<< SEARCH
import { unusedFunction } from './utils';
=======
>>>>>>> REPLACE
# Delete entire function
<<<<<<< SEARCH
function unusedHelper() {
return 'not used';
}
=======
>>>>>>> REPLACE
For overlapping edits, refactor into non-overlapping blocks.
# Problem: Two edits overlap
# Edit 1 changes lines 5-10
# Edit 2 changes lines 8-15 (overlaps!)
# Solution: Consolidate into single SEARCH/REPLACE
<<<<<<< SEARCH
function processUser(input) {
const name = input.name;
const email = input.email;
return { name, email };
}
function validateEmail(email) {
return email.includes('@');
}
=======
async function processUser(input) {
const name = input.name?.trim();
const email = input.email?.trim().toLowerCase();
if (!validateEmail(email)) {
throw new Error('Invalid email');
}
return { name, email };
}
function validateEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
>>>>>>> REPLACE
Verify changes match expected pattern before committing.
# Before applying, verify:
# 1. SEARCH matches exactly one location
grep -c "exact search string" file.ts
# Should return 1
# 2. Read the file to confirm context
read -l 10:20 file.ts
# 3. Compare SEARCH content matches file exactly
# Then apply SEARCH/REPLACE
| Operation | Pattern |
|---|---|
| Replace | SEARCH + REPLACE |
| Delete | SEARCH + empty REPLACE |
| Move | Delete + Insert (two blocks) |
| Multiple | Multiple SEARCH/REPLACE blocks in file order |
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Use when context window is filling up, when agent responses degrade in quality over a long session, when deciding what to load into an agent's context vs keep in files, or when designing multi-agent systems where subagents need isolated contexts. Triggers on: context full, context rot, compaction, session degradation, token limit.
Comprehensive Docker best practices for images, containers, and production deployments
Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.
Use when building or refactoring Next.js 14+ App Router applications — Server Components, TypeScript patterns, Supabase integration, and performance optimization
Use when reviewing a Next.js marketing site or app for production readiness, before go-live, or when users report visual or functional bugs. Covers 26-point checklist across CRITICAL, HIGH, MEDIUM, LOW severity.