skills.rest
bbbang105
bbbang105COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-workflow-design-import

Load and validate Claude Design handoff bundles in ZIP or HTML formats.

Updated Aug 27, 2026
Search Tags:#components#design tokens#design import#handoff bundle#claude design
One-click install
npx skills add https://github.com/bbbang105/flowershop-admin --skill moai-workflow-design-import-bbbang105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-workflow-design-import
Source: https://github.com/bbbang105/flowershop-admin/tree/main/.claude/skills/moai-workflow-design-import
Command: npx skills add https://github.com/bbbang105/flowershop-admin --skill moai-workflow-design-import-bbbang105

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the ingestion and validation of Claude Design handoff bundles, enabling seamless extraction of design tokens, component manifests, and assets for frontend development workflows.

Core Features & Use Cases

  • Validates bundle formats (ZIP or HTML) and version compatibility to ensure reliable processing.
  • Extracts and normalizes design tokens, component information, and static assets from design exports.
  • Supports error handling with structured error codes and fallback guidance for unsupported formats or versions.
  • Facilitates integration into frontend pipeline workflows to accelerate design-to-code handoff.

Quick Start

Provide the local path to a Claude Design bundle ZIP or HTML file to extract structured design data with this skill.

Frequently Asked Questions about moai-workflow-design-import

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

FAQPage Schema
How do I import Claude Design handoff bundles for frontend development?▼

You can import Claude Design handoff bundles by providing the local path to a ZIP or HTML file. The skill automates loading, extracts design tokens and components, and validates version compatibility for frontend workflows.

What is a Claude Design handoff bundle and when do I need to process it?▼

A Claude Design handoff bundle is a ZIP or HTML export containing design tokens, component manifests, and static assets. You need to process it when ingesting structured design data into a frontend development pipeline.

Can I extract design tokens and component information from an HTML export file?▼

Yes, you can extract design tokens and component information from HTML export files. The skill processes both ZIP and HTML formats, normalizing the extracted design data for reliable frontend integration.

How do I validate design bundle formats and version compatibility before extraction?▼

The skill automatically validates bundle formats and version compatibility during ingestion. It checks the provided ZIP or HTML file structure and ensures the design export meets required security and version standards.

What happens if a design artifact ingestion fails due to unsupported formats?▼

When design artifact ingestion encounters unsupported formats or versions, the skill provides structured error codes and fallback guidance. This error handling ensures reliable processing within design system pipelines.

Does this skill work with ZIP files for extracting static design assets?▼

Yes, the skill works with ZIP files to extract and normalize static design assets. It automates the loading process, ensuring both ZIP and HTML bundle formats are parsed correctly for frontend development.

Related Skills

Explore More Design & Creative Skills→
gkswls5006-webgkswls5006-web

moai-workflow-design-import

Convert Claude Design bundles into MoAI tokens, manifests, and assets.

Community
Advanced
petbrainspetbrains
13

frontend-shadcn

Provide copy-paste React/Next.js UI components built on Radix UI and Tailwind CSS.

Official
Intermediate
hi-yuki-922hi-yuki-922
1

i-extract

Extract reusable UI components and design tokens into a centralized design system.

Community
Intermediate
skkeoriwskkeoriw

design-md

Manage, validate, and convert Google DESIGN.md design tokens to Tailwind CSS and W3C formats.

Community
Advanced