skills.rest
PiyushMalik01
PiyushMalik01COMMUNITY
Explore all skills by this author →
GitHub

moodforge

Coordinate a seven-step visual design pipeline for Claude Code.

Updated Feb 8, 2026
Search Tags:#branding#ui/ux#visual design#animation#design pipeline
One-click install
npx skills add https://github.com/PiyushMalik01/North --skill moodforge-piyushmalik01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moodforge
Source: https://github.com/PiyushMalik01/North/tree/main/.claude/skills/moodforge
Command: npx skills add https://github.com/PiyushMalik01/North --skill moodforge-piyushmalik01

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pbakaus/impeccable, emilkowalski/skill, greensock/gsap-skills, shadcn/ui, design-stack-coordinator, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Moodforge provides a comprehensive visual design pipeline for Claude Code, allowing users to explore, validate, and implement design ideas efficiently.

Core Features & Use Cases

  • Structured Design Pipeline: Offers a 7-step process for design discovery, screen preview, brand kit creation, animation review, and final production output.
  • AI-Assisted Design: Uses AI to suggest design directions, validate screens, and create brand kits.
  • Real-Time Feedback: Provides real-time feedback on design decisions through interactive demos and visual companions.

Quick Start

To start the design pipeline, use the moodforge skill with the command 'npx moodforge'.

Frequently Asked Questions about moodforge

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

FAQPage Schema
How do I build a visual design pipeline in Claude Code for UI/UX workflows?▼

To build a visual design pipeline in Claude Code, run the 'npx moodforge' command to start a 7-step process covering design discovery, screen preview, brand kit creation, animation review, and final production output.

What is the process for validating UI/UX design elements before production?▼

Validating UI/UX design elements involves using AI-assisted discovery and real-time feedback through interactive demos. This pipeline validates screens and suggests design directions before moving to final production output.

Does the visual design pipeline work with GSAP and shadcn/ui components?▼

Yes, the visual design pipeline coordinates with various design and animation skills, explicitly requiring dependencies like greensock/gsap-skills for animation and shadcn/ui for UI components to generate production-grade outputs.

Can I use this design pipeline to generate a complete brand kit?▼

Yes, you can use this design pipeline to generate a complete brand kit. The structured 7-step workflow includes a specific AI-assisted phase for brand kit creation alongside design discovery and animation review.

What are the limitations of using an AI-assisted design pipeline for interactive outputs?▼

The pipeline requires multiple external dependencies including design-stack-coordinator and specific animation skills, meaning interactive and production-grade visual design outputs are limited by the availability and compatibility of these integrated tools.

Related Skills

Explore More Design & Creative Skills→
PiyushMalik01PiyushMalik01

design-stack-coordinator

Coordinate loading of Claude Code design skills by moodforge workflow step.

Community
Advanced
yasim-doneryasim-doner

impeccable

Coordinate frontend UI design workflows with DESIGN.md and product tokens.

Community
Advanced
woxiangyangzhimaowoxiangyangzhimao
3

gsap-timeline

Sequences multiple animations in a single GSAP timeline with position parameters and labels.

Community
Intermediate
jorgeasaurusjorgeasaurus
12

ckm:design

Design logos, UI components, and visual content with Gemini AI.

Community
Advanced