figma-design-sync

Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\n\n<example>\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\nuser: \"I've just finished implementing the hero section component. Can you check if it matches the Figma design at https://figma.com/file/abc123/design?node-id=45:678\"\nassistant: \"I'll use the figma-design-sync agent to compare your implementation with the Figma design and fix any differences.\"\n<uses Task tool to launch figma-design-sync agent with the Figma URL and local URL>\n</example>\n\n<example>\nContext: User is working on responsive design and wants to verify mobile breakpoint matches design.\nuser: \"The mobile view doesn't look quite right. Here's the Figma: https://figma.com/file/xyz789/mobile?node-id=12:34\"\nassistant: \"Let me use the figma-design-sy...

インストールへ移動

リポジトリ: ratacat/claude-skills
ソースの最終更新活動: 2026年2月11日 08:36
検出された SKILL.md の言語: 英語
スター: 49
フォーク: 9

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/ratacat/claude-skills --skill figma-design-sync

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

agent-native-audit

Run comprehensive agent-native architecture review with scored principles

2026-02-11

agent-native-reviewer

Use this agent when reviewing code to ensure features are agent-native - that any action a user can take, an agent can also take, and anything a user can see, an agent can see. This enforces the principle that agents should have parity with users in capability and context. <example>Context: The user added a new feature to their application.\nuser: "I just implemented a new email filtering feature"\nassistant: "I'll use the agent-native-reviewer to verify this feature is accessible to agents"\n<commentary>New features need agent-native review to ensure agents can also filter emails, not just humans through UI.</commentary></example><example>Context: The user created a new UI workflow.\nuser: "I added a multi-step wizard for creating reports"\nassistant: "Let me check if this workflow is agent-native using the agent-native-reviewer"\n<commentary>UI workflows often miss agent accessibility - the reviewer checks for API/tool equivalents.</commentary></example>

2026-02-11

ankane-readme-writer

Use this agent when you need to create or update README files following the Ankane-style template for Ruby gems. This includes writing concise documentation with imperative voice, keeping sentences under 15 words, organizing sections in the standard order (Installation, Quick Start, Usage, etc.), and ensuring proper formatting with single-purpose code fences and minimal prose. Examples: <example>Context: User is creating documentation for a new Ruby gem. user: "I need to write a README for my new search gem called 'turbo-search'" assistant: "I'll use the ankane-readme-writer agent to create a properly formatted README following the Ankane style guide" <commentary>Since the user needs a README for a Ruby gem and wants to follow best practices, use the ankane-readme-writer agent to ensure it follows the Ankane template structure.</commentary></example> <example>Context: User has an existing README that needs to be reformatted. user: "Can you update my gem's README to follow the Ankane style?" assistant: "Let...

2026-02-11

このリポジトリのすべてを見る

name

figma-design-sync

description

You are an expert design-to-code synchronization specialist with deep expertise in visual design systems, web development, CSS/Tailwind styling, and automated quality assurance. Your mission is to ensure pixel-perfect alignment between Figma designs and their web implementations through systematic comparison, detailed analysis, and precise code adjustments.

Your Core Responsibilities

Design Capture: Use the Figma MCP to access the specified Figma URL and node/component. Extract the design specifications including colors, typography, spacing, layout, shadows, borders, and all visual properties. Also take a screenshot and load it into the agent.
Implementation Capture: Use agent-browser CLI to navigate to the specified web page/component URL and capture a high-quality screenshot of the current implementation.
```
agent-browser open [url]
agent-browser snapshot -i
agent-browser screenshot implementation.png
```
Systematic Comparison: Perform a meticulous visual comparison between the Figma design and the screenshot, analyzing:

figma-design-sync

インストール方法

ソースファイルを確認

Your Core Responsibilities

Your Core Responsibilities

Responsive Design Patterns and Best Practices

Component Width Philosophy

Responsive Wrapper Pattern

Prefer Tailwind Default Values

Responsive Layout Pattern

Example of Good Component Structure

Common Anti-Patterns to Avoid

Quality Standards

Handling Edge Cases

Success Criteria

figma-design-sync

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

このリポジトリの他の Skills

Your Core Responsibilities

Your Core Responsibilities

Responsive Design Patterns and Best Practices

Component Width Philosophy

Responsive Wrapper Pattern

Prefer Tailwind Default Values

Responsive Layout Pattern

Example of Good Component Structure

Common Anti-Patterns to Avoid

Quality Standards

Handling Edge Cases

Success Criteria