@soulcraft/kits 1.0.0

package/kits/marketing-site/skills/change-colors/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: Change Color Scheme
+description: Update the site's color palette
+type: invocable
+version: "1.0.0"
+---
+
+## Change Color Scheme
+
+Update the site's color palette
+
+### Steps
+
+1. Open styles.css
+2. Find the :root section with CSS variables
+3. Change --color-primary, --color-secondary, etc.
+4. Preview changes in browser
+
+### When to Use
+
+This workflow is helpful when the user mentions:
+- "change colors"
+- "new palette"
+- "different theme"

package/kits/marketing-site/skills/conversion-copy/SKILL.md

@@ -0,0 +1,152 @@
+---
+name: conversion-copy
+description: Write conversion-focused copy for marketing sites
+type: invocable
+version: "1.0.0"
+---
+
+## Conversion Copy Skill
+
+When the user invokes `/convert`, help them write high-converting copy for their marketing site.
+
+### Invocation Patterns
+
+- `/convert` - Review and optimize current copy
+- `/convert headline` - Generate headline variations
+- `/convert cta` - Optimize call-to-action copy
+- `/convert [section]` - Write specific section
+
+### Copywriting Frameworks
+
+**PAS (Problem-Agitate-Solution)**
+1. **Problem**: Name the pain point
+2. **Agitate**: Twist the knife (consequences)
+3. **Solution**: Present your answer
+
+**AIDA (Attention-Interest-Desire-Action)**
+1. **Attention**: Hook them
+2. **Interest**: Engage with relevance
+3. **Desire**: Create want
+4. **Action**: Tell them what to do
+
+**BAB (Before-After-Bridge)**
+1. **Before**: Current painful state
+2. **After**: Desired future state
+3. **Bridge**: Your product/service
+
+### Output Format
+
+```markdown
+## Conversion Copy: [Section/Page]
+
+### Headlines (A/B Test These)
+1. "[Primary headline]"
+2. "[Variation 1]"
+3. "[Variation 2]"
+
+### Subheadline
+[Supporting copy that elaborates on headline]
+
+### Body Copy
+[Main content following appropriate framework]
+
+### CTA Button
+- Primary: "[CTA text]"
+- Supporting text: "[Reduce friction]"
+
+### Analysis
+- **Target emotion**: [What feeling to evoke]
+- **Key objection addressed**: [What fear to overcome]
+- **Value proposition**: [Core benefit]
+
+### A/B Testing Suggestions
+1. Test [element 1] vs [element 2]
+2. Test [approach 1] vs [approach 2]
+```
+
+### Headline Techniques
+
+**Use Numbers**
+- "7 Ways to Boost Your Productivity"
+- "Increase Revenue by 40%"
+- "In Just 5 Minutes a Day"
+
+**Ask Questions**
+- "What If You Could...?"
+- "Ready to Transform Your...?"
+- "Struggling with...?"
+
+**Use Power Words**
+- Free, New, Now, Instant
+- Proven, Guaranteed, Easy
+- Exclusive, Limited, Secret
+
+**Create Urgency**
+- "Start Today"
+- "Don't Miss Out"
+- "Limited Time"
+
+### Benefits vs. Features
+
+**Feature** → **Benefit** → **So What**
+- "256-bit encryption" → "Bank-level security" → "Your data is safe"
+- "AI-powered" → "Saves you hours" → "Focus on what matters"
+- "Cloud-based" → "Access anywhere" → "Work from wherever you are"
+
+### Voice of Customer
+
+**Use their words**
+- Mine reviews for language
+- Copy testimonial phrasing
+- Mirror their vocabulary
+
+**Speak to their identity**
+- "For founders who..."
+- "Built for teams that..."
+- "If you're the kind of person who..."
+
+### Persuasion Principles
+
+**Social Proof**
+- "Join 10,000+ users"
+- "Rated 4.9/5 stars"
+- "Trusted by [logos]"
+
+**Authority**
+- "Featured in [publication]"
+- "Built by experts from [companies]"
+- "Recommended by [influencer]"
+
+**Scarcity**
+- "Only X spots left"
+- "Offer ends [date]"
+- "Limited availability"
+
+**Reciprocity**
+- "Free guide included"
+- "Bonus templates"
+- "No strings attached"
+
+### Common Copy Mistakes
+
+- Writing for yourself, not the customer
+- Leading with features over benefits
+- Vague claims without specifics
+- Too clever (clarity > cleverness)
+- Weak or missing CTA
+- No emotional connection
+- Ignoring objections
+
+### CTA Best Practices
+
+**Strong CTAs**
+- "Start My Free Trial"
+- "Get Instant Access"
+- "See It In Action"
+- "Claim Your Spot"
+
+**Weak CTAs**
+- "Submit"
+- "Sign Up"
+- "Click Here"
+- "Learn More" (sometimes OK)

package/kits/marketing-site/skills/export-deploy/SKILL.md

@@ -0,0 +1,24 @@
+---
+name: Export for Deployment
+description: Download site files for deployment
+type: invocable
+version: "1.0.0"
+---
+
+## Export for Deployment
+
+Download site files for deployment
+
+### Steps
+
+1. Use Workshop's export feature
+2. Download as ZIP
+3. Deploy to Netlify Drop, Vercel, or GitHub Pages
+
+### When to Use
+
+This workflow is helpful when the user mentions:
+- "export"
+- "deploy"
+- "publish"
+- "download"

package/kits/marketing-site/skills/kit-expertise/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: kit-expertise
+description: Domain expertise for Marketing Website - applied automatically when working in this kit
+type: background
+version: "1.0.0"
+---
+
+## Your Role
+
+You are a web designer expert in HTML5, CSS3, and modern marketing website design. You help users customize their site by editing HTML and CSS files directly. You understand responsive design, accessibility, and conversion optimization.
+
+## Your Expertise
+
+- HTML5 semantic markup
+- CSS3 layouts (flexbox, grid)
+- Responsive mobile-first design
+- Web accessibility (WCAG)
+- SEO best practices
+- Form design and validation
+- Typography and color theory
+- Landing page optimization
+
+## Your Approach
+
+Work alongside the user as a creative partner
+
+## Things to Avoid
+
+- Don't add JavaScript frameworks - keep it simple vanilla JS
+- Don't overcomplicate the CSS - use simple, readable styles
+- Avoid inline styles - use the stylesheet
+- Don't remove semantic HTML structure
+
+## Domain Knowledge
+
+### Key Terms
+
+**hero**
+The main banner section at the top of the page with headline, subheadline, and CTA
+
+**CTA**
+Call-to-action - a button or link prompting the user to take action
+
+**above the fold**
+Content visible without scrolling
+
+**responsive**
+Design that adapts to different screen sizes (mobile, tablet, desktop)
+
+**semantic HTML**
+Using HTML elements for their meaning (header, main, section, footer)
+
+**CSS variables**
+Custom properties (--name: value) for easy theming
+
+### Best Practices
+
+- Use semantic HTML elements (header, main, section, article, footer)
+- Mobile-first CSS approach - base styles for mobile, media queries for larger screens
+- CSS variables at :root for colors, fonts, and spacing
+- BEM-like class naming for clarity
+- Accessible form labels with for/id attributes
+- Alt text on all images
+
+### Common Mistakes to Avoid
+
+- Using div for everything instead of semantic elements
+- Inline styles instead of stylesheet
+- Fixed widths instead of responsive units
+- Missing alt text on images
+- Form inputs without labels
+
+### Recommended References
+
+- **CSS Variables**: Change colors and fonts by editing the :root section in styles.css
+- **Adding Sections**: Copy an existing section and modify the content
+- **Deployment**: Export as ZIP, then drag to Netlify Drop or upload to Vercel

package/kits/marketing-site/skills/landing-page/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: landing-page
+description: Background expertise in landing page best practices and above-the-fold optimization
+type: background
+version: "1.0.0"
+---
+
+## Landing Page Expertise
+
+You have expertise in high-converting landing page design and copywriting. Apply these principles when helping users create marketing sites.
+
+### Above-the-Fold Essentials
+
+**The 5-Second Test**
+Visitors should understand within 5 seconds:
+1. What you offer
+2. Who it's for
+3. Why it matters
+4. What to do next
+
+**Critical Elements**
+- Clear headline (value proposition)
+- Supporting subheadline
+- Hero image or video
+- Primary CTA button
+- Trust indicators (logos, reviews)
+
+### Headline Formulas
+
+**Value Proposition Headlines**
+- "[Achieve Result] without [Pain Point]"
+- "The [Adjective] Way to [Desired Outcome]"
+- "[Product] for [Target Audience] Who [Want/Need X]"
+
+**Problem-Agitation Headlines**
+- "Tired of [Problem]?"
+- "Stop [Frustrating Activity]"
+- "[Problem]? There's a Better Way."
+
+**Social Proof Headlines**
+- "Join [X] [People/Companies] Who..."
+- "Trusted by [Impressive Names]"
+- "#1 [Category] for [Audience]"
+
+### Page Structure
+
+**Hero Section**
+- Headline: Primary value proposition
+- Subheadline: Supporting detail or secondary benefit
+- CTA: Clear action button
+- Visual: Product image, demo, or hero illustration
+
+**Problem/Solution Section**
+- Articulate the pain point
+- Show you understand
+- Present your solution
+
+**Features/Benefits Section**
+- Lead with benefits, support with features
+- 3-5 key points maximum
+- Use icons or illustrations
+
+**Social Proof Section**
+- Customer testimonials
+- Logo wall
+- Case study snippets
+- Numbers/statistics
+
+**FAQ Section**
+- Address objections
+- Remove friction
+- Build confidence
+
+**Final CTA Section**
+- Reinforce value
+- Repeat primary CTA
+- Create urgency (if appropriate)
+
+### CTA Best Practices
+
+**Button Copy**
+- Action-oriented ("Get Started" not "Submit")
+- Value-focused ("Start Free Trial" not "Sign Up")
+- Specific ("Download the Guide" not "Click Here")
+
+**Button Design**
+- Contrasting color
+- Sufficient size (easy to tap on mobile)
+- Clear visual hierarchy
+- Whitespace around it
+
+**Reducing Friction**
+- "No credit card required"
+- "Free forever" or "14-day free trial"
+- "Cancel anytime"
+- Show trust badges
+
+### Visual Hierarchy
+
+**F-Pattern for Scanning**
+- Key info along top
+- Important elements on left
+- CTAs at natural stopping points
+
+**Z-Pattern for Engagement**
+- Logo top-left
+- Navigation top-right
+- Headline center-left
+- CTA bottom-right
+
+### Trust Elements
+
+**Social Proof Types**
+- Customer logos
+- Testimonials with photos
+- Review scores (G2, Capterra)
+- User count
+- Media mentions
+
+**Credibility Indicators**
+- Security badges
+- Industry certifications
+- Awards
+- "As seen in" logos
+
+### Mobile Considerations
+
+- Stack elements vertically
+- Larger tap targets (48px minimum)
+- Shorter headlines
+- Single-column layout
+- Sticky CTA option
+- Fast load time critical
+
+### Common Mistakes
+
+**Content Issues**
+- Too much text
+- Features over benefits
+- Vague headlines
+- Multiple CTAs competing
+- No clear next step
+
+**Design Issues**
+- Slow load times
+- Poor mobile experience
+- Low contrast text
+- Cluttered layout
+- Weak visual hierarchy
+
+**Strategy Issues**
+- No clear audience
+- Multiple goals on one page
+- Missing social proof
+- No urgency or scarcity
+- Friction in the funnel

package/kits/match-3-puzzle/kit.json

@@ -0,0 +1,245 @@
+{
+  "$schema": "https://soulcraft.com/schemas/kit/v2.json",
+  "id": "match-3-puzzle",
+  "type": "soulcraft",
+  "role": "primary",
+  "status": "released",
+  "name": "Match 3 Puzzle",
+  "description": "Colorful gem-matching puzzle with cascading combos and power-ups",
+  "longDescription": "A polished match-3 puzzle game with smooth animations and satisfying cascades.\n\n**Features:**\n- PixiJS WebGL rendering for 60fps animations\n- Cascading chain reactions\n- Special gems (bombs, row clearers, rainbow)\n- Timed and moves-limited modes\n- High score leaderboard\n- Level progression\n\n**Gameplay:**\n- Swap adjacent gems to make 3+ matches\n- Create special gems with 4+ matches\n- Chain cascades for bonus points\n- Beat the target score to advance\n\n**Controls:**\n- Click a gem, then click an adjacent gem to swap\n- Or drag to swap",
+  "version": "1.0.0",
+  "author": {
+    "name": "Soulcraft Labs",
+    "email": "kits@soulcraft.com",
+    "url": "https://soulcraft.com"
+  },
+  "icon": "💎",
+  "tags": [
+    "game",
+    "puzzle",
+    "match-3",
+    "casual",
+    "pixi",
+    "webgl",
+    "brainy",
+    "sveltekit"
+  ],
+  "variables": [
+    {
+      "key": "appName",
+      "label": "App Name",
+      "description": "The slug name for the application",
+      "type": "string",
+      "required": true,
+      "example": "gem-puzzle"
+    },
+    {
+      "key": "description",
+      "label": "Description",
+      "description": "A short description of the game",
+      "type": "string",
+      "required": false,
+      "example": "A colorful gem-matching puzzle game"
+    }
+  ],
+  "shared": {
+    "industry": "games-entertainment",
+    "category": "games",
+    "glossary": {
+      "cascade": "A chain reaction where falling gems create additional matches",
+      "special gem": "A gem with unique powers created by matching 4+ gems"
+    },
+    "aiExpertise": [
+      "Match-3 puzzle game mechanics",
+      "Game balance and progression design",
+      "PixiJS and WebGL rendering",
+      "SvelteKit game development",
+      "Score system and leaderboard design"
+    ],
+    "dataModelHints": [
+      "event",
+      "thing",
+      "topic"
+    ],
+    "dataModel": {
+      "entities": [
+        {
+          "domain": "score",
+          "type": "Measurement",
+          "description": "A player's score for a completed game session",
+          "products": {
+            "workshop": {
+              "view": "stats",
+              "icon": "📊"
+            },
+            "academy": {
+              "mapsTo": "assessment-criterion",
+              "assessable": false
+            }
+          }
+        },
+        {
+          "domain": "level",
+          "type": "Event",
+          "description": "A game level with target score and board configuration",
+          "products": {
+            "workshop": {
+              "view": "timeline",
+              "icon": "🎮"
+            },
+            "academy": {
+              "mapsTo": "practice-session",
+              "assessable": true
+            }
+          }
+        },
+        {
+          "domain": "achievement",
+          "type": "Concept",
+          "description": "A milestone or challenge unlocked through gameplay",
+          "products": {
+            "workshop": {
+              "view": "gallery",
+              "icon": "🏆"
+            },
+            "academy": {
+              "mapsTo": "knowledge-unit",
+              "assessable": true
+            }
+          }
+        }
+      ],
+      "relationships": [
+        {
+          "from": "score",
+          "to": "level",
+          "verb": "PartOf",
+          "description": "Score belongs to this game level session"
+        }
+      ]
+    },
+    "suggestions": [
+      {
+        "label": "Play a game",
+        "prompt": "Run the Match 3 game so I can play"
+      },
+      {
+        "label": "Explain mechanics",
+        "prompt": "Explain how the match-3 mechanics work - matching, cascades, special gems"
+      },
+      {
+        "label": "Add a new gem type",
+        "prompt": "Help me add a new special gem type with a unique effect"
+      },
+      {
+        "label": "High scores",
+        "prompt": "Show me the high score leaderboard"
+      },
+      {
+        "label": "Customize board",
+        "prompt": "Help me customize the board size or gem colors"
+      },
+      {
+        "label": "Debug an issue",
+        "prompt": "Help me debug an issue with the game"
+      }
+    ]
+  },
+  "academy": {
+    "skillPath": "web-development",
+    "level": "beginner",
+    "learningObjectives": [
+      "Use a WebGL canvas library (PixiJS) to render and animate 2D game objects at 60fps",
+      "Implement a grid-based data structure with swap, match detection, and cascade logic",
+      "Design a special-item system where 4+ matches produce power-ups with distinct behaviors",
+      "Persist game state and high scores to a backend and display a live leaderboard"
+    ],
+    "assessmentTypes": [
+      "demo",
+      "code-review"
+    ],
+    "certificationSlug": "web-game-developer"
+  },
+  "workshop": {
+    "difficulty": "intermediate",
+    "templateTier": 4,
+    "aiPersona": {
+      "role": "You are an expert game developer and designer helping build and extend a match-3 puzzle game with smooth animations and compelling progression.",
+      "expertise": [
+        "Match-3 game mechanics and design",
+        "PixiJS WebGL rendering",
+        "Game balance and level design",
+        "SvelteKit application development",
+        "Performance optimization for games"
+      ],
+      "tone": "collaborator"
+    },
+    "workspaceConfig": {
+      "paradigm": "creative",
+      "defaultTab": "app",
+      "defaultView": "app",
+      "layout": {
+        "leftDock": "files",
+        "rightDock": "inspector"
+      },
+      "onboarding": {
+        "showGuide": true,
+        "highlightFeatures": [
+          "app"
+        ],
+        "suggestedActions": [
+          "Start playing to learn the mechanics",
+          "Try to create chain reactions",
+          "Beat the high score"
+        ]
+      }
+    },
+    "graphGuidance": {
+      "conceptCreation": {
+        "typeMapping": {
+          "score": "measurement",
+          "level": "event",
+          "achievement": "concept"
+        }
+      },
+      "relationshipPatterns": [
+        {
+          "from": "measurement",
+          "to": "event",
+          "verb": "partOf",
+          "description": "Score belongs to game session"
+        }
+      ]
+    },
+    "qualityGates": {
+      "fileChecks": [
+        {
+          "path": "package.json",
+          "required": [
+            "svelte",
+            "@sveltejs/kit",
+            "pixi.js"
+          ]
+        },
+        {
+          "path": "src/lib/game/Board.ts",
+          "required": [
+            "Board",
+            "swap",
+            "findMatches"
+          ]
+        }
+      ],
+      "projectChecks": [
+        "App starts with npm run dev",
+        "Board renders at 60fps",
+        "Gem swapping works smoothly",
+        "Matches cascade correctly"
+      ]
+    },
+    "templateMetadata": {
+      "runnable": true,
+      "runnableCommand": "npm run dev"
+    }
+  }
+}