Frontend Implementation Skill

When to Apply

Apply this skill when the request involves:

• UI implementation, design-to-code, Figma to code, component implementation, styling, responsive design, fixing broken UI
• UI実装、デザインから実装、Figmaから実装、コンポーネント実装、スタイル調整、レスポンシブ対応、UIの崩れ修正
• Translating any design tool output (Figma/Pencil/Canva/sketches) to code

Core Principles

• Goal is not pixel-perfect copying, but maintaining ratios, alignment, resilience, and consistency.
• Translate, don't transcribe. Design tool values (px) are references; implementation uses scales, ratios, and structure.
• Fixed values are exceptions. If using fixed values, articulate why (spec requirement, media, tap target, etc.).

Design Philosophy (Decision Rules)