skills.rest
Automattic
AutomatticOFFICIAL
Explore all skills by this author →
Website𝕏@automatticengGitHub

design-foundations

Extracts design foundations from site HTML/CSS for WordPress theme generation.

31|3|Updated Mar 31, 2026
Search Tags:#theme generation#WordPress theme#design foundation#HTML/CSS analysis#site liberation
One-click install
npx skills add https://github.com/Automattic/data-liberation-agent --skill design-foundations-automattic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-foundations
Source: https://github.com/Automattic/data-liberation-agent/tree/main/skills/design-foundations
Command: npx skills add https://github.com/Automattic/data-liberation-agent --skill design-foundations-automattic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the extraction of design foundations from liberated sites, providing a semantic, reviewable intermediate between raw observations and WordPress theme generation.

Core Features & Use Cases

  • Design Foundation Extraction: Build a coherent design-foundation JSON from a liberated site, including semantic color, typography, and spacing roles with evidence trails.
  • Input Contract: Consumes the partial scaffold produced by liberate_design_foundation_scaffold, aggregate HTML/CSS analysis, and representative rendered HTML.
  • Output Contract: Produces a complete design-foundation matching the schema, ready for theme generation.
  • Use Case: After liberation, use this Skill to generate a complete design-foundation for a site, which can then be used to create a WordPress block theme.

Quick Start

Use the design-foundations skill to generate a design foundation for the site after liberation.

Frequently Asked Questions about design-foundations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a design foundation from a liberated site?▼

You need design foundation extraction to create a semantic, reviewable intermediate layer between raw site observations and WordPress theme generation. It captures color, typography, and spacing details with evidence trails, ensuring accurate theme styling.

How does HTML/CSS analysis generate a WordPress theme foundation?▼

HTML/CSS analysis generates a WordPress theme foundation by evaluating aggregate styles and rendered HTML to map visual elements to semantic roles. The resulting design-foundation JSON is structured specifically for use in WordPress block theme generation.

Do I need a partial scaffold to extract design foundations?▼

This approach is best for WordPress theme generation because it produces a complete design-foundation matching a specific schema, ready for theme creation. Unlike manual extraction, it provides evidence trails and applies deterministic rules to ensure coherent design details.

What happens if my liberated site is missing rendered HTML for analysis?▼

The Skill requires representative rendered HTML as part of its input contract to accurately extract design foundations. Without it, the aggregate HTML/CSS analysis and partial scaffold may lack the necessary context to determine spacing, typography, and color roles.

Related Skills

Explore More Design & Creative Skills→
Mo7amed-MahmoudMo7amed-Mahmoud

website-cloning

Clones websites into React+Vite apps using Playwright-extracted HTML and assets.

Community
Advanced
AutomatticAutomattic
31

replicate-with-blocks

Convert a website's design into a WordPress block theme.

Official
Advanced
tamnguyentommy-rgbtamnguyentommy-rgb
2

recreate-screenshot

Convert reference images into pixel-perfect HTML/CSS/React frontend implementations.

Community
Advanced
therealityreporttherealityreport

extract-css-tokens

Extract design tokens from CSS sources into a normalized CSSTokenMap JSON.

Community
Intermediate