Vibe Building Skills

A comprehensive system of 40 agent skills for building world-class digital products. From product strategy and multi-agent implementation to sprint facilitation, product design review, marketing, creative asset generation, and frontend design excellence--everything you need to create products that are loved.

🎯 What Is This?

Vibe Building Skills is a complete, production-ready system of agent skills built on the philosophy of focus and care--designing and building with deep intention, reducing until it's clear, and refining until it's right.

This repository contains:

4 Product Strategy Skills — Foundation Sprint analysis, implementation-ready engineering planning, multi-agent implementation orchestration, and facilitated sprint workshops for evaluating, differentiating, and pressure-testing product ideas
1 Product Design Skill — Heuristic UI/UX reviews, usability audits, accessibility checks, and prioritized product experience recommendations
12 Marketing Skills — Direct response marketing, SEO, email, content strategy, and X/Twitter writing
10 Creative Skills — AI-powered image generation with nanobanana pro, video planning, Remotion scripts, social graphics
13 Frontend Design Skills — Design systems, responsive layouts, typography, interactions, performance, accessibility
Complete Documentation — Philosophy, research, implementation guides, code examples
Automation Tools — Python CLI for creative asset generation with FAL.ai nanobanana pro

Total: 40 professional skills + comprehensive guidance + automation tools

Maintainer Snapshot

This is an active open-source skill library maintained by Sanket Dongre. As of June 1, 2026, the repository has 22 stars, 4 forks, and recent GitHub traffic of 318 clones from 206 unique cloners over 14 days.

Maintainer priorities:

Keep each skill usable as a standalone SKILL.md
Improve documentation, examples, and installation paths
Review contributions for quality, safety, and practical usefulness
Expand automated validation for skill metadata, structure, and secret-safety checks

📦 What's Included

Skills by Category

Product Strategy Skills (4 skills)

Decide what to build, who it is for, how it wins, and what to test before committing.

foundation-sprint — Evaluate, pressure-test, or sharpen any product, feature, app, startup, or business idea using the Foundation Sprint method from Jake Knapp and John Zeratsky's Click
fable-like-implementation — Turn a non-trivial engineering request into an evidence-backed technical specification and implementation plan before production code is written
sol-orchestrator — Use GPT-5.6 Sol to plan, delegate, integrate, and verify non-trivial implementation across Sol Light/Medium, Terra, Luna, GPT-5.5, and Claude Sonnet 5 specialists
sprint-runner — Run a facilitated Foundation Sprint, Design Sprint, or chained workshop with a virtual team, note-and-vote exercises, Decider calls, and resumable sprint-room artifacts

Path: Start with foundation-sprint for a fast solo product strategy evaluation, fable-like-implementation when you need an Opus-gated plan only, sol-orchestrator when you want planned multi-agent implementation, or sprint-runner when you want to facilitate a full workshop with a virtual team.

Product Design Skills (1 skill)

Review and improve digital product experiences with evidence-backed product design judgment.

product-design-review — Expert product design and UI/UX review for web, mobile, and desktop products, including heuristic evaluation, usability audits, interaction and visual critique, accessibility checks, and prioritized recommendations

Path: Start here when you need to critique a live product, prototype, screenshot set, onboarding flow, dashboard, or core user journey before redesigning or implementing changes.

Marketing Skills (12 skills)

Transform your marketing from generic to direct response, from scattered to strategic.

orchestrator — Diagnose your marketing situation and sequence skills optimally
brand-voice — Define your unique voice and positioning
positioning-angles — Find your differentiation with market-stage analysis, mechanism naming, and 5 proven angles
keyword-research — The 6 Circles Method for keyword strategy
lead-magnet — Create compelling free offers
direct-response-copy — Write copy that converts
seo-content — Create ranking content
newsletter — 6 newsletter formats
email-sequences — Welcome, nurture, conversion, launch sequences
content-atomizer — Repurpose content 15 ways
seo-strategy — Plan complete SEO strategy for your product
tweet-writer — Research viral X/Twitter patterns and write tweets or threads with proven hooks

Path: Start with orchestrator to assess your situation, then follow the recommended sequence.

Creative Skills (10 skills + automation)

Generate professional creative assets with AI, powered by FAL.ai nanobanana pro.

orchestrator — Coordinate all creative skills
creative-strategist — Define your visual direction
original-design — Interactive, question-driven workflow to create an original design language (a coherent visual "world") for infographics, video storyboards, websites, or app UI/UX; pulls live visual inspiration from the web
image-generation — Generate images with nanobanana pro
product-photography — Create professional product shots
product-video — Plan animated product videos
social-graphics — Platform-optimized social content
brand-asset — Logos, icons, patterns, brand elements
talking-head — Presenter and UGC-style videos
remotion-script-writer — Generate detailed video scripts for Remotion

Plus: Python automation system for CLI-based and Claude Code asset generation

Path: Start with creative-strategist (or original-design for a full visual identity) to define your visual direction, then use orchestrator to sequence remaining skills.

Frontend Design Skills (13 skills) ✨ ENHANCED

Build design systems and interfaces that feel timeless and loved. Now with 5 additional skills based on research insights.

Foundation Layer (2 skills):

frontend-orchestrator — Assess design maturity and sequence all 13 skills optimally
design-foundation — Design tokens, principles, component structure

Visual Layer (4 skills): 3. layout-system — Responsive layouts, Flexbox, Grid, Container Queries 4. typography-system — Type scales, hierarchy, readability 5. color-system — Color theory, accessibility, theming, dark mode 6. visual-hierarchy-refactoring — NEW! Size, weight, contrast, whitespace, Gestalt principles

Component Layer (1 skill): 7. component-architecture — Reusable components, atomic design

Interaction Layer (4 skills): 8. interaction-physics — Animations, momentum, gesture physics, feedback 9. loading-states — NEW! Skeleton screens, spinners, progress bars, empty states 10. error-handling-recovery — NEW! Error states, recovery workflows, graceful degradation 11. performance-optimization — NEW! Perceived latency, optimistic UI, Core Web Vitals

Quality Layer (2 skills): 12. accessibility-excellence — WCAG compliance, inclusive design 13. design-engineer-mindset — NEW! Bridge design and implementation, code as material

5 Implementation Paths:

Path A — Building from Scratch
Path B — Formalizing Existing Design
Path C — Improving Mature System
Path D — Fixing Performance Issues
Path E — Improving Accessibility

Path: Start with frontend-orchestrator to assess your situation, then follow the recommended sequence.

Documentation

docs/SKILL_SPEC.md — The authoring standard every skill in this repo meets: trigger-contract descriptions, agent-addressed workflows, required output formats, quality bars
docs/PHILOSOPHY.md — The designer's thought process and philosophy of uncommon care
docs/RESEARCH.md — Expert insights, recommended books, design principles
Creative Automation — Python CLI and Claude Code integration for asset generation
skills/frontend-design/README.md — Complete guide to all 13 frontend design skills

🎯 Key Enhancements

Frontend Design Skills Improvements

Based on comprehensive research from Interface Craft, design experts, and industry best practices:

5 New Skills Added:

visual-hierarchy-refactoring — Master visual hierarchy through Gestalt principles, size, weight, contrast, and whitespace
loading-states — Design skeleton screens, spinners, progress bars, and empty states
error-handling-recovery — Design error states and recovery workflows that guide users
performance-optimization — Master perceived latency through optimistic UI and Core Web Vitals
design-engineer-mindset — Bridge the gap between design and implementation, understand code as design material

Skill Renamed:

interaction-design → interaction-physics — More precise naming reflecting momentum, gesture physics, and natural interactions

Enhanced Skills:

frontend-orchestrator — Now coordinates all 13 skills with 5 implementation paths
All visual layer skills — Integrated with visual hierarchy principles
All interaction skills — Integrated with performance considerations

🚀 Quick Start

1. Clone This Repository

git clone https://github.com/sanky369/vibe-building-skills.git
cd vibe-building-skills

2. Install Skills in Claude

Each skill is a standalone .md file in the SKILL.md format that Claude understands.

Option A: Install Individual Skills

Go to Claude Settings > Capabilities > Skills
Click "Add Skill"
Upload the SKILL.md file from each skill directory

Option B: Install All Skills at Once

Download the entire repository
Create a ZIP file of the skills directory
Upload to Claude

Option C: Install by Category

Install Product Strategy Skills: skills/product-strategy/*/SKILL.md
Install Product Design Skills: skills/product-design/*/SKILL.md
Install Marketing Skills: skills/marketing/*/SKILL.md
Install Creative Skills: skills/creative/*/SKILL.md
Install Frontend Design Skills: skills/frontend-design/*/SKILL.md

3. Start with the Right Entry Point

Begin with Foundation Sprint if you are still deciding what to build. If the direction is already clear, start with the orchestrator skill for your category:

"I'm using the [marketing/creative/frontend-design]-orchestrator skill.
Here's my situation: [describe your current state]
Can you assess my maturity level and recommend a skill sequence?"

4. Follow the Recommended Path

Work through skills in the sequence recommended by the orchestrator. Each skill builds on previous ones.

5. Use Claude Code for Implementation

Each skill includes guidance for Claude Code:

"I'm using the [skill-name] skill. Can you help me:
- [Specific task]
- [Implementation details]
- [Integration with other skills]"

📊 Repository Structure

vibe-building-skills/
├── README.md (this file)
├── LICENSE
├── CONTRIBUTING.md
├── SECURITY.md
├── docs/
│   ├── PHILOSOPHY.md
│   ├── RESEARCH.md
│   ├── DESIGN-PHILOSOPHY-RESEARCH.md
│   ├── fal_api.py (Creative automation)
│   ├── creative_cli.py
│   ├── claude_integration.py
│   ├── requirements.txt
│   └── examples.py
└── skills/
    ├── product-strategy/
    │   ├── foundation-sprint/
    │   │   ├── SKILL.md
    │   │   └── references/
    │   │       ├── examples.md
    │   │       └── method.md
    │   ├── fable-like-implementation/
    │   │   ├── SKILL.md
    │   │   └── references/
    │   │       ├── model-selection.md
    │   │       ├── operating-manual.md
    │   │       ├── plan-template.md
    │   │       └── spec-template.md
    │   ├── sol-orchestrator/
    │   │   ├── SKILL.md
    │   │   ├── agents/
    │   │   │   └── openai.yaml
    │   │   ├── assets/
    │   │   │   └── codex-agents/
    │   │   └── references/
    │   ├── sprint-runner/
    │   │   ├── SKILL.md
    │   │   ├── docs/
    │   │   │   └── design.md
    │   │   └── references/
    │   │       ├── casting.md
    │   │       ├── design-sprint-method.md
    │   │       ├── foundation-sprint-method.md
    │   │       └── templates.md
    │   └── README.md
    ├── product-design/
    │   ├── product-design-review/
    │   │   ├── SKILL.md
    │   │   └── references/
    │   │       ├── heuristics-and-checklists.md
    │   │       └── review-output-template.md
    │   └── README.md
    ├── marketing/
    │   ├── orchestrator/SKILL.md
    │   ├── brand-voice/SKILL.md
    │   ├── positioning-angles/SKILL.md
    │   ├── keyword-research/SKILL.md
    │   ├── lead-magnet/SKILL.md
    │   ├── direct-response-copy/SKILL.md
    │   ├── seo-content/SKILL.md
    │   ├── newsletter/SKILL.md
    │   ├── email-sequences/SKILL.md
    │   ├── content-atomizer/SKILL.md
    │   ├── seo-strategy/SKILL.md
    │   ├── tweet-writer/SKILL.md
    │   └── README.md
    ├── creative/
    │   ├── orchestrator/SKILL.md
    │   ├── creative-strategist/SKILL.md
    │   ├── original-design/SKILL.md
    │   ├── image-generation/SKILL.md
    │   ├── product-photography/SKILL.md
    │   ├── product-video/SKILL.md
    │   ├── social-graphics/SKILL.md
    │   ├── brand-asset/SKILL.md
    │   ├── talking-head/SKILL.md
    │   ├── remotion-script-writer/SKILL.md
    │   └── README.md
    └── frontend-design/
        ├── frontend-orchestrator/SKILL.md
        ├── design-foundation/SKILL.md
        ├── layout-system/SKILL.md
        ├── typography-system/SKILL.md
        ├── color-system/SKILL.md
        ├── component-architecture/SKILL.md
        ├── interaction-physics/SKILL.md
        ├── accessibility-excellence/SKILL.md
        ├── visual-hierarchy-refactoring/SKILL.md
        ├── loading-states/SKILL.md
        ├── error-handling-recovery/SKILL.md
        ├── performance-optimization/SKILL.md
        ├── design-engineer-mindset/SKILL.md
        └── README.md

🎓 Implementation Workflows

Product Strategy Workflow

1. Start: foundation-sprint for solo evaluation, or sprint-runner for a facilitated workshop
   ↓
2. Lock the customer, problem, advantage, and competitors
   ↓
3. Choose the differentiators you can own
   ↓
4. Compare approaches with Magic Lenses
   ↓
5. Write the Founding Hypothesis
   ↓
6. Test the riskiest assumption before building

Sprint Runner Workflow

1. Start: sprint-runner
   ↓
2. Choose Foundation Sprint, Design Sprint, or chained mode
   ↓
3. Cast a virtual sprint team with explicit roles and biases
   ↓
4. Run note-and-vote, sketching, critique, and Decider-call exercises
   ↓
5. Save sprint-room artifacts, decisions, outputs, and resume state

Product Design Review Workflow

1. Start: product-design-review
   ↓
2. Define product goals, user segments, and review scope
   ↓
3. Evaluate representative tasks with heuristics and accessibility checks
   ↓
4. Prioritize findings by severity, effort, and confidence
   ↓
5. Turn recommendations into quick wins, experiments, and strategic design work

Marketing Workflow

1. Start: marketing-orchestrator
   ↓
2. Choose path based on situation
   ↓
3. Follow skill sequence
   ↓
4. Implement each skill with Claude Code
   ↓
5. Iterate and refine

Creative Workflow

1. Start: creative-orchestrator
   ↓
2. Define visual direction with creative-strategist
   ↓
3. Generate assets with image-generation + automation
   ↓
4. Adapt for specific platforms (social-graphics, product-photography)
   ↓
5. Repurpose and scale

Frontend Design Workflow

1. Start: frontend-orchestrator
   ↓
2. Assess design maturity (5 levels)
   ↓
3. Choose implementation path (5 options)
   ↓
4. Follow skill sequence
   ↓
5. Implement with Claude Code
   ↓
6. Iterate and refine

💡 Philosophy

These skills embody the principle of "uncommon care" from Interface Craft:

"Design with uncommon care. Reduce until it's clear. Refine until it's right. Create products that are loved. Interfaces that feel timeless. Experiences that welcome you in and anticipate your needs. Software that feels right. Like it was made by someone who took the time to apply an almost unreasonable level of consideration."

This is not about trends or speed. This is about craft. This is about respect for the user. This is about creating something that endures.

🔧 Creative Asset Generation

The creative skills include a complete Python automation system for generating assets with FAL.ai nanobanana pro.

Setup

cd docs
pip install -r requirements.txt
export FAL_API_KEY="your_api_key_here"

Usage

Command Line:

python creative_cli.py generate-product-photo "Blue wireless headphones"

Python:

from fal_api import CreativeAssetGenerator

generator = CreativeAssetGenerator(api_key="your_key")
image = generator.generate_product_photo("Blue wireless headphones")

Claude Code:

"Can you generate 5 product photos for my new headphones?
Use the image-generation skill and the automation system."

📚 Research & Philosophy

This system is built on research and wisdom from:

Interface Craft — Philosophy of uncommon care
Refactoring UI — Systematic design decisions
Don Norman — Design principles and affordances
Steve Krug — Usability and accessibility
Rauno Freiberg — Interaction physics and invisible details
Linear Method — Speed as a feature
WCAG Standards — Inclusive design
Core Web Vitals — Performance metrics

See docs/PHILOSOPHY.md and docs/RESEARCH.md for detailed insights.

🎯 What You'll Achieve

Product Strategy

✅ Sharper product hypothesis before launch
✅ Clear target customer and painful problem
✅ Defensible differentiation against competitors
✅ A first experiment that tests the riskiest assumption

Product Design

✅ Prioritized UI/UX review findings
✅ Clear usability, IA, content, interaction, and accessibility recommendations
✅ Severity and effort ratings for product decisions
✅ Concrete next steps for redesign, testing, or implementation

Marketing

✅ Direct response marketing system
✅ SEO strategy and content
✅ Email sequences that convert
✅ Lead magnets that work
✅ Content strategy and atomization

Creative

✅ Professional image generation
✅ Product photography
✅ Social media graphics
✅ Brand assets
✅ Video planning and concepts

Frontend Design

✅ Consistent design system
✅ Responsive layouts
✅ Beautiful typography
✅ Harmonious colors
✅ Reusable components
✅ Delightful interactions
✅ Accessible to all
✅ Optimized performance
✅ Clear error handling
✅ Confident loading states
✅ Timeless design

🚀 Getting Started

Clone the repository
Choose your starting skill (foundation-sprint for product direction, product-design-review for experience critique, or an orchestrator for an execution category)
Install skills in Claude
Follow the recommended path
Use Claude Code for implementation
Iterate and refine

📝 Contributing

This is a living system. Feel free to:

Fork and customize for your needs
Submit improvements and enhancements
Share your implementations
Suggest new skills or improvements

See CONTRIBUTING.md for contribution guidelines.

📄 License

MIT. See LICENSE.

🙏 Acknowledgments

Built with research and insights from:

Interface Craft (interfacecraft.dev)
Nielsen Norman Group
Interaction Design Foundation
Web Content Accessibility Guidelines
The design and development community

Special thanks for inspiration:

@boringmarketer — Marketing skills inspiration
@joshpuckett — Design and creative inspiration

🎉 Ready to Begin?

Start your journey to world-class products today:

Product Strategy: skills/product-strategy/foundation-sprint/SKILL.md
Multi-Agent Implementation: skills/product-strategy/sol-orchestrator/SKILL.md
Sprint Workshop: skills/product-strategy/sprint-runner/SKILL.md
Product Design: skills/product-design/product-design-review/SKILL.md
Marketing: skills/marketing/orchestrator/SKILL.md
Creative: skills/creative/orchestrator/SKILL.md
Frontend Design: skills/frontend-design/frontend-orchestrator/SKILL.md

Choose one, install it in Claude, and ask for help with your specific situation.

Remember: Great products are not built in a day. They're built with care, intention, and respect for the user. Start today, iterate continuously, and watch your product transform.

Good luck! 🚀

Vibe Building Skills

README

Vibe Building Skills

🎯 What Is This?

Maintainer Snapshot

📦 What's Included

Skills by Category

Product Strategy Skills (4 skills)

Product Design Skills (1 skill)

Marketing Skills (12 skills)

Creative Skills (10 skills + automation)

Frontend Design Skills (13 skills) ✨ ENHANCED

Documentation

🎯 Key Enhancements

Frontend Design Skills Improvements

🚀 Quick Start

1. Clone This Repository

2. Install Skills in Claude

3. Start with the Right Entry Point

4. Follow the Recommended Path

5. Use Claude Code for Implementation

📊 Repository Structure

🎓 Implementation Workflows

Product Strategy Workflow

Sprint Runner Workflow

Product Design Review Workflow

Marketing Workflow

Creative Workflow

Frontend Design Workflow

💡 Philosophy

🔧 Creative Asset Generation

Setup

Usage

📚 Research & Philosophy

🎯 What You'll Achieve

Product Strategy

Product Design

Marketing

Creative

Frontend Design

🚀 Getting Started

📝 Contributing

📄 License

🙏 Acknowledgments

🎉 Ready to Begin?

Comments (0)