Werkwijze voor het omzetten van een Figma JSON-dump (input.json met node-tree, fills, text styles, auto-layout) naar een standalone HTML-bestand met Tailwind v4 via CDN. Activeer deze skill samen met de tailwind-v4 skill bij elke Figma → HTML conversie.
DutchVolledige workflow om een Figma-design om te zetten naar een geverifieerd Blade-blok in dit Radicle WordPress project. Haalt context op via Figma MCP, genereert een Blade-template volgens de project-conventies (Tailwind v4 @theme tokens, ACF flex blocks, () vertaling, currentColor SVG's), en verifieert het resultaat via Playwright MCP op de lokale dev-URL (uit .env WPHOME) met zowel screenshot-vergelijking als computed-style checks. Gebruik deze skill wanneer de gebruiker een Figma-URL aanlevert en die wil omzetten naar een Blade-blok in dit project. Activeer altijd samen met de skills figma-tailwind-html, tailwind-v4 en acf.
Dutch
AGENT SKILLS ATLASIncludes Figma Tailwind HTML and Figma to Blade.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Figma Tailwind HTML
Werkwijze voor het omzetten van een Figma JSON-dump (input.json met node-tree, fills, text styles, auto-layout) naar een standalone HTML-bestand met Tailwind v4 via CDN. Activeer deze skill samen met de tailwind-v4 skill bij elke Figma → HTML conversie.
Figma to Blade
Volledige workflow om een Figma-design om te zetten naar een geverifieerd Blade-blok in dit Radicle WordPress project. Haalt context op via Figma MCP, genereert een Blade-template volgens de project-conventies (Tailwind v4 @theme tokens, ACF flex blocks, () vertaling, currentColor SVG's), en verifieert het resultaat via Playwright MCP op de lokale dev-URL (uit .env WPHOME) met zowel screenshot-vergelijking als computed-style checks. Gebruik deze skill wanneer de gebruiker een Figma-URL aanlevert en die wil omzetten naar een Blade-blok in dit project. Activeer altijd samen met de skills figma-tailwind-html, tailwind-v4 en acf.
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 Figma Tailwind 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.
- Reported license for the skills shown: MIT. The author’s terms apply.