Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis.
EnglishDefines accessibility requirements for UI elements including semantic markup, ARIA attributes, focus management, and screen reader support. Updates the "アクセシビリティ" section in screen spec.md.
EnglishDefines form field specifications including validation rules, error states, and submission behavior. Updates the "フォーム仕様" section in screen spec.md.
EnglishDocuments screen-to-screen navigation flows, user journeys, and state transitions across multiple screens. Updates the "画面フロー" section in screen spec.md.
EnglishDocuments all UI state variations (default, empty, error, loading, success) from Figma designs. Use when defining complete UI specifications before implementation.
EnglishDownloads images, icons, and SVGs from Figma designs. Use when extracting visual assets from Figma for implementation.
EnglishValidates prompt files against best practices. Use after creating or editing rules, skills, agents, commands in .agents/ for quality review.
EnglishExtracts and documents design tokens (colors, typography, spacing, shadows, etc.) from Figma designs. Updates the "デザイントークン" section in screen spec.md.
EnglishExtracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md.
EnglishOrchestrates the complete Figma-to-specification workflow by coordinating multiple specialized agents. Use when converting Figma designs into comprehensive screen specifications.
English
AGENT SKILLS ATLASIncludes Converting Figma to HTML, Defining Accessibility Requirements, Defining Form Specs, and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Converting Figma to HTML
Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis. Use when convertin
Defining Accessibility Requirements
Defines accessibility requirements for UI elements including semantic markup, ARIA attributes, focus management, and screen reader support. Updates the "アクセシビリティ" section in screen spec.md.
Defining Form Specs
Defines form field specifications including validation rules, error states, and submission behavior. Updates the "フォーム仕様" section in screen spec.md.
Documenting Screen Flows
Documents screen-to-screen navigation flows, user journeys, and state transitions across multiple screens. Updates the "画面フロー" section in screen spec.md.
Documenting UI States
Documents all UI state variations (default, empty, error, loading, success) from Figma designs. Use when defining complete UI specifications before implementation.
Downloading Figma Assets
Downloads images, icons, and SVGs from Figma designs. Use when extracting visual assets from Figma for implementation.
Ensuring Prompt Quality
Validates prompt files against best practices. Use after creating or editing rules, skills, agents, commands in .agents/ for quality review.
Extracting Design Tokens
Extracts and documents design tokens (colors, typography, spacing, shadows, etc.) from Figma designs. Updates the "デザイントークン" section in screen spec.md.
Extracting Interactions
Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md.
Orchestrating Figma to Spec
Orchestrates the complete Figma-to-specification workflow by coordinating multiple specialized agents. Use when converting Figma designs into comprehensive screen specifications.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Converting Figma to HTML skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- License details are not provided in these listings. Check the author’s terms before using the skills.