skills.rest
lenadlm
lenadlmCOMMUNITY
Explore all skills by this author →
𝕏@lenadlmGitHub

design-md

Validate and export Google DESIGN.md files to Tailwind CSS or W3C DTCG JSON.

Updated Oct 23, 2024
Search Tags:#ui#accessibility#tokens#google#design-system#design-specs
One-click install
npx skills add https://github.com/lenadlm/docker --skill design-md-lenadlm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/lenadlm/docker/tree/main/hermes-skills/skills/creative/design-md
Command: npx skills add https://github.com/lenadlm/docker --skill design-md-lenadlm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of authoring, validating, and exporting Google's DESIGN.md token spec files, enhancing design consistency and accessibility.

Core Features & Use Cases

  • Token Specification: Author and maintain visual identity tokens.
  • Validation: Ensure spec files adhere to structure, WCAG standards, and consistency.
  • Exporting: Convert design specs to Tailwind CSS or W3C DTCG JSON formats.
  • Use Case: When you need to create a new DESIGN.md file for a project, validate an existing one, or convert it to a different format for integration with other tools.

Quick Start

Use the design-md skill to lint the DESIGN.md file for your project.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I validate a DESIGN.md token spec file for WCAG compliance?▼

You can validate a DESIGN.md file by linting it to ensure its YAML front matter and Markdown body adhere to structural and WCAG standards. This verifies that your visual identity tokens maintain accessibility and consistency.

Can I export design tokens from DESIGN.md to Tailwind CSS or W3C DTCG JSON?▼

Yes, you can export design tokens from DESIGN.md directly to Tailwind CSS or W3C DTCG JSON formats. This allows seamless integration of your validated design specs into your development workflow.

Do I need Node.js and npm to manage Google design.md files?▼

Yes, managing and validating Google's DESIGN.md files requires Node.js and npm to run the @google/design.md CLI. This environment is necessary to execute the scripts for token spec processing and validation.

What is the best way to automate design token spec management for a design system?▼

Automating design token spec management is best handled by authoring DESIGN.md files with YAML front matter and Markdown body processing. This approach streamlines maintaining visual identity tokens while ensuring accessibility and consistency.

Why does my design spec validation fail when processing YAML front matter?▼

Design spec validation may fail during YAML front matter processing if the token definitions do not adhere to the required structure or WCAG standards. Linting the DESIGN.md file helps identify and correct these structural inconsistencies.

Related Skills

Explore More Design & Creative Skills→
LuminaVaultLuminaVault

design-md

Generate and validate Google DESIGN.md files with YAML front matter and Markdown body.

Official
Intermediate
GDSDNGDSDN
3

extract-tokens

Extract design tokens from consolidated patterns into W3C DTCG-compliant JSON.

Community
Advanced
benciumbencium
383

UX Designer

Provide UI/UX design guidance with WCAG 2.1 AA compliance.

Community
Basic
x-TheFoxx-TheFox

design-md

Lint and validate DESIGN.md token structures and references.

Community
Advanced