artivilla/design-spec-rules
skills/design-spec-rules/SKILL.md
Enforce design-to-code fidelity rules. Use when implementing UI from Figma, mockups, or design specs to ensure pixel-perfect accuracy.
development
Updated Jun 9, 2026
$ install --global
skillsauthnpx skillsauth add artivilla/agents-config design-spec-rulesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 9, 2026, 3:18 AM35.3s1 file scanned
SKILL.md
- name:
- design-spec-rules
- description:
- Enforce design-to-code fidelity rules. Use when implementing UI from Figma, mockups, or design specs to ensure pixel-perfect accuracy.
- version:
- 1.0.0
- argument-hint:
- <file-or-pattern>
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
- Read the file(s) first before making assessments
- Be specific with line numbers and code snippets
- Provide fixes, not just problems
- Flag any UI elements that appear invented (not from a design spec)
- Compare hardcoded values against design tokens when available
If asked, offer to fix the issues directly.
Related Skills
artivilla/web-interface-guidelines
development
VerifiedTrustedCommunity
Review UI code against Vercel's Web Interface Guidelines. Use when checking interactions, animation, layout, content, accessibility, performance, and design standards with MUST/SHOULD/NEVER rules.
SKILL.mdUpdated Jun 9, 2026
artivilla/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
SKILL.mdUpdated Jun 9, 2026
artivilla/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
SKILL.mdUpdated Jun 9, 2026
artivilla/vercel-composition-patterns
development
VerifiedTrustedCommunity
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
SKILL.mdUpdated Jun 9, 2026