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 converting Figma designs to web code.
Browse published AI skills maintained by farmanlab. Compare skill descriptions and follow each source repository for setup instructions.
Indexed skills
16Repository stars across indexed skills
16Repository forks
0Average repository stars per indexed skill
1Repository stars may repeat across skills from the same repository.
Provides expertise in converting Figma designs to HTML/CSS using Figma MCP tools, with data attributes for content tracking and comprehensive analysis. Use when converting Figma designs to web code.
Validates prompt files against best practices. Use after creating or editing rules, skills, agents, commands in .agents/ for quality review.
Extracts interaction specifications from Figma designs (hover states, transitions, animations, triggers). Updates the "インタラクション" section in screen spec.md.
Initializes and updates screen specification documents. Use as a foundation skill for all screen documentation workflows.
Compares Figma screenshots with HTML screenshots using pixel-level analysis. Use when verifying visual accuracy of Figma-to-HTML conversion.
Provides code review expertise with constructive feedback. Use when conducting self-reviews before PR creation, quality checks, or best practice validation.
Maps HTML content elements to API response fields and generates data binding specifications. Updates the "APIマッピング" section in screen spec.md.
Generates TDD-ready acceptance criteria from screen spec.md. Extracts requirements from features, interactions, flows, and API mappings in Given-When-Then format. Use when creating implementation task specifica...
Documents screen-to-screen navigation flows, user journeys, and state transitions across multiple screens. Updates the "画面フロー" section in screen spec.md.
Refines screen spec.md by incorporating details from specification documents. Use when enhancing existing screen specifications with business logic, component details, and validation results.
Extracts and documents design tokens (colors, typography, spacing, shadows, etc.) from Figma designs. Updates the "デザイントークン" section in screen spec.md.
Downloads images, icons, and SVGs from Figma designs. Use when extracting visual assets from Figma for implementation.
Documents all UI state variations (default, empty, error, loading, success) from Figma designs. Use when defining complete UI specifications before implementation.
Orchestrates the complete Figma-to-specification workflow by coordinating multiple specialized agents. Use when converting Figma designs into comprehensive screen specifications.
Defines form field specifications including validation rules, error states, and submission behavior. Updates the "フォーム仕様" section in screen spec.md.
Defines accessibility requirements for UI elements including semantic markup, ARIA attributes, focus management, and screen reader support. Updates the "アクセシビリティ" section in screen spec.md.
The default order uses GitHub repository stars from our indexed data. Stars belong to the source repository and may be shared by multiple skills. They indicate repository interest, not skill installs or an independent quality score.