AgentSkillsCN

dcyfr-quick-fix

快速修复设计令牌、导入语句以及常见违规问题。

SKILL.md
--- frontmatter
name: dcyfr-quick-fix
description: Fast compliance fixes for design tokens, imports, and common violations
compatibility: opencode
metadata:
  audience: developers
  workflow: quick-fixes
  category: compliance

What I do

I provide fast, focused fixes for common DCYFR compliance violations:

  • •Design token violations - Replace hardcoded values
  • •Import violations - Convert to barrel exports
  • •Emoji violations - Replace with React icons from lucide-react
  • •Test data violations - Add environment checks

I'm optimized for speed with focused, surgical changes using existing patterns.

When to use me

✅ Use this skill when:

  • •Fixing ESLint violations before commit
  • •Quick pattern compliance fixes
  • •Converting legacy code to DCYFR patterns
  • •Addressing PR review comments

❌ Don't use this skill for:

  • •New feature implementation (use dcyfr-component-patterns)
  • •Complex refactoring (use general mode)
  • •Architecture decisions (use Claude General)

Quick Fix Categories

1. Design Tokens

Problem: Hardcoded Tailwind values

typescript
// ❌ BEFORE
<div className="gap-8 mt-16 max-w-4xl">
  <h1 className="text-3xl">Title</h1>
</div>

Fix:

typescript
// ✅ AFTER
import { SPACING, TYPOGRAPHY, CONTAINER_WIDTHS } from "@/lib/design-tokens";

<div className={`gap-${SPACING.content} mt-${SPACING.section} ${CONTAINER_WIDTHS.standard}`}>
  <h1 className={TYPOGRAPHY.h1.standard}>Title</h1>
</div>

2. Barrel Imports

Problem: Direct file imports

typescript
// ❌ BEFORE
import { PostCard } from "@/components/blog/post-card";
import { CategoryBadge } from "@/components/blog/category-badge";

Fix:

typescript
// ✅ AFTER
import { PostCard, CategoryBadge } from "@/components/blog";

3. Emoji Usage

Problem: Emojis in public content

typescript
// ❌ BEFORE
<p>🚀 Launch successful!</p>

Fix:

typescript
// ✅ AFTER
import { Rocket } from "lucide-react";

<p><Rocket className="inline-block w-5 h-5" /> Launch successful!</p>

Common emoji mappings:

  • •🚀 → <Rocket />
  • •✅ → <Check />
  • •❌ → <X />
  • •🔥 → <Flame />
  • •📝 → <FileText />

4. Test Data Protection

Problem: Test data without environment checks

typescript
// ❌ BEFORE
await redis.set("user:123", { name: "Test User" });

Fix:

typescript
// ✅ AFTER
if (process.env.NODE_ENV !== "production" && process.env.VERCEL_ENV !== "production") {
  await redis.set("user:123", { name: "Test User" });
}

Common Violations & Fixes

ViolationESLint RuleFix Command
Hardcoded spacing@dcyfr/design-tokens/no-hardcoded-spacingReplace with SPACING.*
Hardcoded typography@dcyfr/design-tokens/no-hardcoded-typographyReplace with TYPOGRAPHY.*
Direct importsimport/no-restricted-pathsUse barrel exports
Emoji in contentManual reviewReplace with lucide-react icons
Test dataManual reviewAdd environment checks

Validation Workflow

bash
# 1. Check violations
npm run lint

# 2. Auto-fix what's possible
npm run lint -- --fix

# 3. Manual fixes for remaining violations
# (Use this skill for guidance)

# 4. Verify all fixed
npm run check:opencode

Speed Optimizations

I'm designed for fast iteration using:

  • •✅ Existing patterns - No architectural decisions
  • •✅ Surgical changes - Minimal code diff
  • •✅ Auto-fix first - ESLint handles what it can
  • •✅ Manual guidance - Only for non-automatable fixes

Related Skills

  • •dcyfr-design-tokens - Deep dive on design token patterns
  • •dcyfr-component-patterns - Component architecture guidance
  • •dcyfr-testing - Test compliance and coverage

Related Documentation

  • •Enforcement rules: .github/agents/enforcement/HYBRID_ENFORCEMENT.md
  • •Quick reference: docs/ai/quick-reference.md
  • •Validation checklist: .github/agents/enforcement/VALIDATION_CHECKLIST.md

Approval Gates

Quick fixes must pass:

  • •✅ TypeScript - 0 compilation errors
  • •✅ ESLint - 0 errors (warnings OK)
  • •✅ Tests - ≥99% pass rate maintained
  • •✅ Design tokens - ≥90% compliance

Use npm run check:opencode to validate all gates.