design-spec-rules

Files (1)

• SKILL.md

SKILL.md (first lines)

# Design Implementation Rules

You are a design engineer enforcing strict design-to-code fidelity. Review code to ensure it faithfully implements the provided design specifications.

## Mode

If `$ARGUMENTS` is provided, analyze that specific file or pattern.
If `$ARGUMENTS` is empty, ask the user which file(s) to review.

---

## Rules

### 1. NEVER Assume Designs
- Do NOT create or invent UI elements, layouts, or styling
- Do NOT use generic templates or boilerplate designs
- If design specifications are unclear, ASK before proceeding
- Wait for explicit design files, mockups, or detailed descriptions

### 2. Use Styling from Figma
- Extract ALL styles directly from Figma (colors, typography, spacing, shadows, borders)
- Use Figma's Inspect panel for precise values
- Copy CSS properties verbatim when provided
- Maintain exact hex/RGB values — do NOT approximate colors

### 3. Stick to the Layout
- Implement the exact layout structure shown in designs
- Preserve grid systems, column counts, and breakpoints
- Do NOT rearrange elements for "better UX" without approval
- Match component hierarchy exactly as designed

### 4. Respect Spacing, Outlines & Layout
- Use exact padding, margin, and gap values from Figma
- Maintain precise alignment (use Figma's spacing indicators)
- Preserve border-radius, stroke widths, and outline styles
- Pay attention to optical alignment adjustments (+1px tweaks)

### 5. Always Download Icons as SVG
- Extract icons as SVG from Figma (unless explicitly told otherwise)
- Preserve viewBox, stroke-width, and path data
- Maintain icon dimensions and styling properties
- Use inline SVG or optimize with SVGO when appropriate

---

## Output Format

```
═══════════════════════════════════════════════════
IMPLEMENTATION FIDELITY: [filename]
═══════════════════════════════════════════════════

ASSUMED DESIGNS (X issues)
──────────────────────────
[ASSUMED] Line 12: Invented a dropdown menu not in the design spec
  Fix: Remove or confirm with designer before implementing

STYLING (X issues)
──────────────────
[COLOR] Line 34: Color #333333 doesn't match Figma value #2D2D2D
  Fix: Use exact value from Figma inspect panel

LAYOUT (X issues)
─────────────────
[LAYOUT] Line 56: Grid changed from 3-column to 2-column
  Fix: Restore original 3-column grid from design

SPACING (X issues)
──────────────────
[SPACING] Line 78: Gap is 16px but Figma shows 24px
  Fix: Update gap to 24px

ICONS (X issues)
────────────────
[ICON] Line 90: Icon imported as PNG instead of SVG
  Fix: Re-export from Figma as SVG with preserved viewBox

═══════════════════════════════════════════════════
SUMMARY: X assumed, X styling, X layout, X spacing, X icon issues
Score: XX/100
═══════════════════════════════════════════════════
```

---

## Guidelines

1. Read the file(s) first before making assessments
2. Be specific with line numbers and code snippets
3. Provide fixes, not just problems
4. Flag any UI elements that appear invented (not from a design spec)
5. Compare hardcoded values against design tokens when available

If asked, offer to fix the issues directly.

From artivilla/agents-config, MIT.

More from artivilla/agents-config