create-claudecraft 1.0.0

package/templates/skills/design/json-ld/SKILL.md

@@ -0,0 +1,125 @@
+# JSON-LD Structured Data
+
+Generate JSON-LD structured data for SEO and rich search results.
+
+## When to Use
+
+- Setting up a new page type
+- Adding product/article/event pages
+- Improving search appearance
+
+## Common Schemas
+
+### Website (add to homepage)
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "Site Name",
+  "url": "https://example.com",
+  "description": "Site description",
+  "potentialAction": {
+    "@type": "SearchAction",
+    "target": "https://example.com/search?q={search_term_string}",
+    "query-input": "required name=search_term_string"
+  }
+}
+</script>
+```
+
+### Organization
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Company Name",
+  "url": "https://example.com",
+  "logo": "https://example.com/logo.png",
+  "sameAs": [
+    "https://twitter.com/handle",
+    "https://github.com/handle"
+  ]
+}
+</script>
+```
+
+### Article/Blog Post
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Article",
+  "headline": "Article Title",
+  "description": "Article description",
+  "image": "https://example.com/image.jpg",
+  "datePublished": "2024-01-01",
+  "dateModified": "2024-01-02",
+  "author": {
+    "@type": "Person",
+    "name": "Author Name"
+  }
+}
+</script>
+```
+
+### Product
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "Product",
+  "name": "Product Name",
+  "description": "Product description",
+  "image": "https://example.com/product.jpg",
+  "offers": {
+    "@type": "Offer",
+    "price": "99.00",
+    "priceCurrency": "USD",
+    "availability": "https://schema.org/InStock"
+  }
+}
+</script>
+```
+
+### BreadcrumbList
+
+```html
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
+    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog" },
+    { "@type": "ListItem", "position": 3, "name": "Post Title" }
+  ]
+}
+</script>
+```
+
+## React Component Pattern
+
+```tsx
+interface JsonLdProps {
+  data: Record<string, unknown>
+}
+
+export function JsonLd({ data }: JsonLdProps) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  )
+}
+```
+
+## Validation
+
+Test at: https://search.google.com/test/rich-results

package/templates/skills/design/microcopy/SKILL.md

@@ -0,0 +1,197 @@
+# Microcopy
+
+Write clear, helpful interface text.
+
+## Principles
+
+1. **Be concise** — Every word earns its place
+2. **Be specific** — "Save changes" not "Submit"
+3. **Be human** — Write how people talk
+4. **Be helpful** — Guide, don't blame
+
+## Patterns
+
+### Buttons
+
+| Instead of | Write |
+|------------|-------|
+| Submit | Save changes |
+| Click here | View details |
+| OK | Got it |
+| Cancel | Never mind |
+| Delete | Remove |
+| Yes/No | Specific actions |
+
+```tsx
+// ✗ Vague
+<button>Submit</button>
+
+// ✓ Specific
+<button>Create account</button>
+<button>Save draft</button>
+<button>Send message</button>
+```
+
+### Empty States
+
+Structure: **What** + **Why** + **Action**
+
+```tsx
+// ✗ Bad
+<p>No items</p>
+
+// ✓ Good
+<div>
+  <h3>No projects yet</h3>
+  <p>Create your first project to get started.</p>
+  <button>Create project</button>
+</div>
+```
+
+### Error Messages
+
+Structure: **What happened** + **How to fix**
+
+```tsx
+// ✗ Bad
+"Error: Invalid input"
+"Something went wrong"
+"Error 500"
+
+// ✓ Good
+"Enter a valid email address, like name@example.com"
+"We couldn't save your changes. Check your connection and try again."
+"This page isn't available. It may have been moved or deleted."
+```
+
+### Form Labels & Hints
+
+```tsx
+// ✗ Bad
+<label>Password</label>
+<input type="password" />
+
+// ✓ Good
+<label>Password</label>
+<span className="hint">At least 8 characters</span>
+<input type="password" />
+
+// ✓ Better with examples
+<label>Username</label>
+<span className="hint">Letters and numbers only, like alex_123</span>
+```
+
+### Confirmations
+
+Be specific about what will happen:
+
+```tsx
+// ✗ Bad
+"Are you sure?"
+
+// ✓ Good
+<Dialog>
+  <h3>Delete "Project Alpha"?</h3>
+  <p>This will permanently delete all files and cannot be undone.</p>
+  <button>Cancel</button>
+  <button>Delete project</button>
+</Dialog>
+```
+
+### Loading States
+
+```tsx
+// Simple
+"Loading..."
+
+// With context
+"Loading your projects..."
+"Saving changes..."
+"Sending message..."
+
+// With progress
+"Uploading... 3 of 12 files"
+"Processing... This may take a minute"
+```
+
+### Success Messages
+
+Be brief, confirm what happened:
+
+```tsx
+// ✗ Too much
+"Congratulations! Your account has been successfully created!"
+
+// ✓ Just right
+"Account created"
+"Changes saved"
+"Message sent"
+
+// ✓ With next step
+"Account created. Check your email to verify."
+```
+
+### Placeholder Text
+
+Help users understand the expected format:
+
+```tsx
+// ✗ Bad
+placeholder="Enter text here"
+placeholder="Name"
+
+// ✓ Good
+placeholder="Search projects..."
+placeholder="Jane Smith"
+placeholder="https://example.com"
+placeholder="Add a comment..."
+```
+
+### Tooltips & Hints
+
+Keep under 10 words if possible:
+
+```tsx
+// ✗ Too long
+"Click this button to save all your changes to the database"
+
+// ✓ Concise
+"Save changes"
+"Copy to clipboard"
+"Opens in new tab"
+```
+
+## Voice & Tone
+
+### Do
+- Use contractions (you're, we'll, isn't)
+- Use "you" and "your"
+- Use active voice
+- Start with verbs for actions
+
+### Don't
+- Use jargon or technical terms
+- Blame the user ("You entered wrong...")
+- Use ALL CAPS (except logos)
+- End button text with punctuation
+
+## Common Rewrites
+
+| Original | Rewrite |
+|----------|---------|
+| Invalid credentials | Email or password is incorrect |
+| Field required | Enter your email |
+| Max 100 characters | 100 characters max |
+| Operation successful | Done |
+| Click here to learn more | Learn more |
+| Please wait... | Loading... |
+| N/A | — (em dash) or leave empty |
+| TBD | Coming soon |
+
+## Checklist
+
+- [ ] Can a 12-year-old understand it?
+- [ ] Is every word necessary?
+- [ ] Does it say what will happen?
+- [ ] Is it consistent with other UI text?
+- [ ] Does it help the user succeed?

package/templates/skills/design/og-image/SKILL.md

@@ -0,0 +1,157 @@
+# OG Image Generator
+
+Create Open Graph images for social sharing.
+
+## Specifications
+
+| Platform | Size | Aspect Ratio |
+|----------|------|--------------|
+| Open Graph | 1200×630 | 1.91:1 |
+| Twitter | 1200×628 | 1.91:1 |
+| LinkedIn | 1200×627 | 1.91:1 |
+| Facebook | 1200×630 | 1.91:1 |
+
+**Safe zone:** Keep text within 1080×560 centered area.
+
+## Template Structure
+
+```
+┌─────────────────────────────────────────┐
+│                                         │
+│  LOGO (optional, top-left)              │
+│                                         │
+│                                         │
+│     HEADLINE                            │
+│     Large, bold, max 2 lines            │
+│                                         │
+│     Subheadline (optional)              │
+│     Smaller, max 1 line                 │
+│                                         │
+│                                         │
+│  DOMAIN (bottom-left)   VISUAL (right)  │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+## Design Guidelines
+
+### Typography
+- Headline: 48-72px, bold
+- Subheadline: 24-32px, regular
+- Domain: 18-24px, medium
+- Max 50 characters per line
+
+### Colors
+- High contrast (4.5:1 minimum)
+- Match brand colors
+- Solid backgrounds work best (gradients can compress poorly)
+
+### Content
+- One clear message
+- No small text (unreadable in previews)
+- Avoid busy backgrounds
+- Include brand element (logo, color, pattern)
+
+## HTML/CSS Template
+
+```html
+<div style="
+  width: 1200px;
+  height: 630px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 60px 80px;
+  background: #1a1a2e;
+  color: white;
+  font-family: system-ui, sans-serif;
+">
+  <h1 style="
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1.1;
+    margin: 0 0 20px;
+  ">
+    Your Headline Here
+  </h1>
+  <p style="
+    font-size: 28px;
+    opacity: 0.8;
+    margin: 0;
+  ">
+    Your subheadline or description
+  </p>
+  <div style="
+    margin-top: auto;
+    font-size: 20px;
+    opacity: 0.6;
+  ">
+    example.com
+  </div>
+</div>
+```
+
+## React Component
+
+```tsx
+interface OgImageProps {
+  title: string
+  subtitle?: string
+  domain?: string
+}
+
+export function OgImage({ title, subtitle, domain }: OgImageProps) {
+  return (
+    <div className="w-[1200px] h-[630px] flex flex-col justify-center p-16 bg-base-300">
+      <h1 className="text-6xl font-bold leading-tight mb-4">
+        {title}
+      </h1>
+      {subtitle && (
+        <p className="text-2xl text-base-content/70">
+          {subtitle}
+        </p>
+      )}
+      {domain && (
+        <p className="mt-auto text-xl text-base-content/50">
+          {domain}
+        </p>
+      )}
+    </div>
+  )
+}
+```
+
+## Generation Options
+
+### 1. Static (recommended for simple sites)
+- Create in Figma/design tool
+- Export as PNG
+- Place in `public/og-image.png`
+
+### 2. Dynamic (for blogs/products)
+- Use @vercel/og or Satori
+- Generate at build time or on-demand
+- Create API route: `/api/og?title=...`
+
+### 3. Screenshot service
+- Use Puppeteer/Playwright
+- Render HTML template
+- Screenshot at 1200×630
+
+## Meta Tags
+
+```html
+<meta property="og:image" content="https://example.com/og-image.png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:alt" content="Description of image" />
+<meta name="twitter:image" content="https://example.com/og-image.png" />
+<meta name="twitter:card" content="summary_large_image" />
+```
+
+## Testing
+
+- Facebook: https://developers.facebook.com/tools/debug/
+- Twitter: https://cards-dev.twitter.com/validator
+- LinkedIn: https://www.linkedin.com/post-inspector/
+- General: https://www.opengraph.xyz/