namnam-skills 1.0.2 → 1.0.4

package/src/templates/antigravity-skills/copywriting/SKILL.md

@@ -0,0 +1,455 @@
+---
+name: copywriting
+description: When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," or "CTA copy." For email copy, see email-sequence. For popup copy, see popup-cro.
+---
+
+# Copywriting
+
+You are an expert conversion copywriter. Your goal is to write marketing copy that is clear, compelling, and drives action.
+
+## Before Writing
+
+Gather this context (ask if not provided):
+
+### 1. Page Purpose
+- What type of page is this? (homepage, landing page, pricing, feature, about)
+- What is the ONE primary action you want visitors to take?
+- What's the secondary action (if any)?
+
+### 2. Audience
+- Who is the ideal customer for this page?
+- What problem are they trying to solve?
+- What have they already tried?
+- What objections or hesitations do they have?
+- What language do they use to describe their problem?
+
+### 3. Product/Offer
+- What are you selling or offering?
+- What makes it different from alternatives?
+- What's the key transformation or outcome?
+- Any proof points (numbers, testimonials, case studies)?
+
+### 4. Context
+- Where is traffic coming from? (ads, organic, email)
+- What do visitors already know before arriving?
+- What messaging are they seeing before this page?
+
+---
+
+## Copywriting Principles
+
+### Clarity Over Cleverness
+- If you have to choose between clear and creative, choose clear
+- Every sentence should have one job
+- Remove words that don't add meaning
+
+### Benefits Over Features
+- Features: What it does
+- Benefits: What that means for the customer
+- Always connect features to outcomes
+
+### Specificity Over Vagueness
+- Vague: "Save time on your workflow"
+- Specific: "Cut your weekly reporting from 4 hours to 15 minutes"
+
+### Customer Language Over Company Language
+- Use words your customers use
+- Avoid jargon unless your audience uses it
+- Mirror voice-of-customer from reviews, interviews, support tickets
+
+### One Idea Per Section
+- Don't try to say everything everywhere
+- Each section should advance one argument
+- Build a logical flow down the page
+
+---
+
+## Writing Style Rules
+
+Follow these core principles. For detailed editing checks and word-by-word polish, use the **copy-editing** skill after your initial draft.
+
+### Core Style Principles
+
+1. **Simple over complex** — Use everyday words. "Use" instead of "utilize," "help" instead of "facilitate."
+
+2. **Specific over vague** — Avoid words like "streamline," "optimize," "innovative" that sound good but mean nothing.
+
+3. **Active over passive** — "We generate reports" not "Reports are generated."
+
+4. **Confident over qualified** — Remove hedging words like "almost," "very," "really."
+
+5. **Show over tell** — Describe the outcome instead of using adverbs like "instantly" or "easily."
+
+6. **Honest over sensational** — Never fabricate statistics, claims, or testimonials.
+
+### Quick Quality Check
+
+Before finalizing, scan for:
+- Jargon that could confuse outsiders
+- Sentences trying to do too much (max 3 conjunctions)
+- Passive voice constructions
+- Exclamation points (remove them)
+- Marketing buzzwords without substance
+
+For a thorough line-by-line review, run the copy through the **copy-editing** skill's Seven Sweeps framework.
+
+---
+
+## Best Practices
+
+### Be Direct
+Get to the point. Don't bury the value in qualifications.
+
+❌ Slack lets you share files instantly, from documents to images, directly in your conversations
+
+✅ Need to share a screenshot? Send as many documents, images, and audio files as your heart desires.
+
+### Use Rhetorical Questions
+Questions engage readers and make them think about their own situation.
+
+✅ Hate returning stuff to Amazon?
+
+✅ Need to share a screenshot?
+
+✅ Tired of chasing approvals?
+
+### Use Analogies and Metaphors
+When appropriate, analogies make abstract concepts concrete and memorable.
+
+❌ Slack lets you share files instantly, from documents to images, directly in your conversations
+
+✅ Imagine Slack's file-sharing as a digital whiteboard where everyone can post files, images, and updates in real time.
+
+### Pepper in Humor (When Appropriate)
+Puns, wit, and humor make copy memorable—but only if it fits the brand and doesn't undermine clarity.
+
+---
+
+## Page Structure Framework
+
+### Above the Fold (First Screen)
+
+**Headline**
+- Your single most important message
+- Should communicate core value proposition
+- Specific > generic
+
+**Headline Formulas:**
+
+**{Achieve desirable outcome} without {pain point}**
+*Example: Understand how users are really experiencing your site without drowning in numbers*
+
+**The {opposite of usual process} way to {achieve desirable outcome}**
+*Example: The easiest way to turn your passion into income*
+
+**Never {unpleasant event} again**
+*Example: Never miss a sales opportunity again*
+
+**{Key feature/product type} for {target audience}**
+*Example: Advanced analytics for Shopify e-commerce*
+
+**{Key feature/product type} for {target audience} to {what it's used for}**
+*Example: An online whiteboard for teams to ideate and brainstorm together*
+
+**You don't have to {skills or resources} to {achieve desirable outcome}**
+*Example: With Ahrefs, you don't have to be an SEO pro to rank higher and get more traffic*
+
+**{Achieve desirable outcome} by {how product makes it possible}**
+*Example: Generate more leads by seeing which companies visit your site*
+
+**{Key benefit of your product}**
+*Example: Sound clear in online meetings*
+
+**{Question highlighting the main pain point}**
+*Example: Hate returning stuff to Amazon?*
+
+**Turn {input} into {outcome}**
+*Example: Turn your hard-earned sales into repeat customers*
+
+**Additional formulas:**
+- "[Achieve outcome] in [timeframe]"
+- "The [category] that [key differentiator]"
+- "Stop [pain]. Start [pleasure]."
+- "[Number] [people] use [product] to [outcome]"
+
+**Subheadline**
+- Expands on the headline
+- Adds specificity or addresses secondary concern
+- 1-2 sentences max
+
+**Primary CTA**
+- Action-oriented button text
+- Communicate what they get, not what they do
+- "Start Free Trial" > "Sign Up"
+- "Get Your Report" > "Submit"
+
+**Supporting Visual**
+- Product screenshot, demo, or hero image
+- Should reinforce the message, not distract
+
+### Social Proof Section
+
+Options (use 1-2):
+- Customer logos (recognizable > many)
+- Key metric ("10,000+ teams")
+- Short testimonial with attribution
+- Star rating with review count
+
+### Problem/Pain Section
+
+- Articulate the problem better than they can
+- Show you understand their situation
+- Create recognition ("that's exactly my problem")
+
+Structure:
+- "You know the feeling..." or "If you're like most [role]..."
+- Describe the specific frustrations
+- Hint at the cost of not solving it
+
+### Solution/Benefits Section
+
+- Bridge from problem to your solution
+- Focus on 3-5 key benefits (not 10)
+- Each benefit: headline + short explanation + proof point if available
+
+Format options:
+- Benefit blocks with icons
+- Before/after comparison
+- Feature → Benefit → Proof structure
+
+### How It Works Section
+
+- Reduce perceived complexity
+- 3-4 step process
+- Each step: simple action + outcome
+
+Example:
+1. "Connect your tools (2 minutes)"
+2. "Set your preferences"
+3. "Get automated reports every Monday"
+
+### Social Proof (Detailed)
+
+- Full testimonials with:
+  - Specific results
+  - Customer name, role, company
+  - Photo if possible
+- Case study snippets
+- Logos section (if not above)
+
+### Objection Handling
+
+Common objections to address:
+- "Is this right for my situation?"
+- "What if it doesn't work?"
+- "Is it hard to set up?"
+- "How is this different from X?"
+
+Formats:
+- FAQ section
+- Comparison table
+- Guarantee/promise section
+- "Built for [specific audience]" section
+
+### Final CTA Section
+
+- Recap the value proposition
+- Repeat the primary CTA
+- Add urgency if genuine (deadline, limited availability)
+- Risk reversal (guarantee, free trial, no credit card)
+
+---
+
+## Landing Page Section Variety
+
+A great landing page isn't just a list of features. Use a variety of section types to create an engaging, persuasive narrative. Mix and match from these:
+
+### Section Types to Include
+
+**How It Works (Numbered Steps)**
+Walk users through the process in 3-4 clear steps. Reduces perceived complexity and shows the path to value.
+
+**Alternative/Competitor Comparison**
+Show how you stack up against the status quo or competitors. Tables, side-by-side comparisons, or "Unlike X, we..." sections.
+
+**Founder Manifesto / Our Story**
+Share why you built this and what you believe. Creates emotional connection and differentiates from faceless competitors.
+
+**Testimonials**
+Customer quotes with names, photos, and specific results. Multiple formats: quote cards, video testimonials, tweet embeds.
+
+**Case Studies**
+Deeper stories of customer success. Problem → Solution → Results format with specific metrics.
+
+**Use Cases**
+Show different ways the product is used. Helps visitors self-identify: "This is for people like me."
+
+**Personas / "Built For" Sections**
+Explicitly call out who the product is for: "Perfect for marketers," "Built for agencies," etc.
+
+**Stats and Social Proof**
+Key metrics that build credibility: "10,000+ customers," "4.9/5 rating," "$2M saved for customers."
+
+**Demo / Product Tour**
+Interactive demos, video walkthroughs, or GIF previews showing the product in action.
+
+**FAQ Section**
+Address common objections and questions. Good for SEO and reducing support burden.
+
+**Integrations / Partners**
+Show what tools you connect with. Logos build credibility and answer "Will this work with my stack?"
+
+**Pricing Preview**
+Even on non-pricing pages, a pricing teaser can move decision-makers forward.
+
+**Guarantee / Risk Reversal**
+Money-back guarantee, free trial terms, or "cancel anytime" messaging reduces friction.
+
+### Recommended Section Mix
+
+For a landing page, aim for variety. Don't just stack features:
+
+**Typical Feature-Heavy Page (Weak):**
+1. Hero
+2. Feature 1
+3. Feature 2
+4. Feature 3
+5. Feature 4
+6. CTA
+
+**Varied, Engaging Page (Strong):**
+1. Hero with clear value prop
+2. Social proof bar (logos or stats)
+3. Problem/pain section
+4. How it works (3 steps)
+5. Key benefits (2-3, not 10)
+6. Testimonial
+7. Use cases or personas
+8. Comparison to alternatives
+9. Case study snippet
+10. FAQ
+11. Final CTA with guarantee
+
+---
+
+## CTA Copy Guidelines
+
+**Weak CTAs (avoid):**
+- Submit
+- Sign Up
+- Learn More
+- Click Here
+- Get Started
+
+**Strong CTAs (use):**
+- Start Free Trial
+- Get [Specific Thing]
+- See [Product] in Action
+- Create Your First [Thing]
+- Book My Demo
+- Download the Guide
+- Try It Free
+
+**CTA formula:**
+[Action Verb] + [What They Get] + [Qualifier if needed]
+
+Examples:
+- "Start My Free Trial"
+- "Get the Complete Checklist"
+- "See Pricing for My Team"
+
+---
+
+## Output Format
+
+When writing copy, provide:
+
+### Page Copy
+Organized by section with clear labels:
+- Headline
+- Subheadline
+- CTA
+- Section headers
+- Body copy
+- Secondary CTAs
+
+### Annotations
+For key elements, explain:
+- Why you made this choice
+- What principle it applies
+- Alternatives considered
+
+### Alternatives
+For headlines and CTAs, provide 2-3 options:
+- Option A: [copy] — [rationale]
+- Option B: [copy] — [rationale]
+- Option C: [copy] — [rationale]
+
+### Meta Content (if relevant)
+- Page title (for SEO)
+- Meta description
+
+---
+
+## Page-Specific Guidance
+
+### Homepage Copy
+- Serve multiple audiences without being generic
+- Lead with broadest value proposition
+- Provide clear paths for different visitor intents
+- Balance "ready to buy" and "still researching"
+
+### Landing Page Copy
+- Single message, single CTA
+- Match headline to ad/traffic source
+- Complete argument on one page
+- Remove distractions (often no nav)
+
+### Pricing Page Copy
+- Help visitors choose the right plan
+- Clarify what's included at each level
+- Address "which is right for me?" anxiety
+- Make recommended plan obvious
+
+### Feature Page Copy
+- Connect feature to benefit to outcome
+- Show use cases and examples
+- Differentiate from competitors' versions
+- Clear path to try or buy
+
+### About Page Copy
+- Tell the story of why you exist
+- Connect company mission to customer benefit
+- Build trust through transparency
+- Still include a CTA (it's still a marketing page)
+
+---
+
+## Voice and Tone Considerations
+
+Before writing, establish:
+
+**Formality level:**
+- Casual/conversational
+- Professional but friendly
+- Formal/enterprise
+
+**Brand personality:**
+- Playful or serious?
+- Bold or understated?
+- Technical or accessible?
+
+Maintain consistency throughout, but adjust intensity:
+- Headlines can be bolder
+- Body copy should be clearer
+- CTAs should be action-oriented
+
+---
+
+## Related Skills
+
+- **copy-editing**: For polishing and improving existing copy (use after writing your first draft)
+- **page-cro**: If the page structure/strategy needs work, not just copy
+- **email-sequence**: For email copywriting
+- **popup-cro**: For popup and modal copy
+- **ab-test-setup**: To test copy variations properly

package/src/templates/antigravity-skills/core-components/SKILL.md

@@ -0,0 +1,264 @@
+---
+name: core-components
+description: Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
+---
+
+# Core Components
+
+## Design System Overview
+
+Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.
+
+## Design Tokens
+
+**NEVER hard-code values. Always use design tokens.**
+
+### Spacing Tokens
+
+```tsx
+// CORRECT - Use tokens
+<Box padding="$4" marginBottom="$2" />
+
+// WRONG - Hard-coded values
+<Box padding={16} marginBottom={8} />
+```
+
+| Token | Value |
+|-------|-------|
+| `$1` | 4px |
+| `$2` | 8px |
+| `$3` | 12px |
+| `$4` | 16px |
+| `$6` | 24px |
+| `$8` | 32px |
+
+### Color Tokens
+
+```tsx
+// CORRECT - Semantic tokens
+<Text color="$textPrimary" />
+<Box backgroundColor="$backgroundSecondary" />
+
+// WRONG - Hard-coded colors
+<Text color="#333333" />
+<Box backgroundColor="rgb(245, 245, 245)" />
+```
+
+| Semantic Token | Use For |
+|----------------|---------|
+| `$textPrimary` | Main text |
+| `$textSecondary` | Supporting text |
+| `$textTertiary` | Disabled/hint text |
+| `$primary500` | Brand/accent color |
+| `$statusError` | Error states |
+| `$statusSuccess` | Success states |
+
+### Typography Tokens
+
+```tsx
+<Text fontSize="$lg" fontWeight="$semibold" />
+```
+
+| Token | Size |
+|-------|------|
+| `$xs` | 12px |
+| `$sm` | 14px |
+| `$md` | 16px |
+| `$lg` | 18px |
+| `$xl` | 20px |
+| `$2xl` | 24px |
+
+## Core Components
+
+### Box
+
+Base layout component with token support:
+
+```tsx
+<Box
+  padding="$4"
+  backgroundColor="$backgroundPrimary"
+  borderRadius="$lg"
+>
+  {children}
+</Box>
+```
+
+### HStack / VStack
+
+Horizontal and vertical flex layouts:
+
+```tsx
+<HStack gap="$3" alignItems="center">
+  <Icon name="user" />
+  <Text>Username</Text>
+</HStack>
+
+<VStack gap="$4" padding="$4">
+  <Heading>Title</Heading>
+  <Text>Content</Text>
+</VStack>
+```
+
+### Text
+
+Typography with token support:
+
+```tsx
+<Text
+  fontSize="$lg"
+  fontWeight="$semibold"
+  color="$textPrimary"
+>
+  Hello World
+</Text>
+```
+
+### Button
+
+Interactive button with variants:
+
+```tsx
+<Button
+  onPress={handlePress}
+  variant="solid"
+  size="md"
+  isLoading={loading}
+  isDisabled={disabled}
+>
+  Click Me
+</Button>
+```
+
+| Variant | Use For |
+|---------|---------|
+| `solid` | Primary actions |
+| `outline` | Secondary actions |
+| `ghost` | Tertiary/subtle actions |
+| `link` | Inline actions |
+
+### Input
+
+Form input with validation:
+
+```tsx
+<Input
+  value={value}
+  onChangeText={setValue}
+  placeholder="Enter text"
+  error={touched ? errors.field : undefined}
+  label="Field Name"
+/>
+```
+
+### Card
+
+Content container:
+
+```tsx
+<Card padding="$4" gap="$3">
+  <CardHeader>
+    <Heading size="sm">Card Title</Heading>
+  </CardHeader>
+  <CardBody>
+    <Text>Card content</Text>
+  </CardBody>
+</Card>
+```
+
+## Layout Patterns
+
+### Screen Layout
+
+```tsx
+const MyScreen = () => (
+  <Screen>
+    <ScreenHeader title="Page Title" />
+    <ScreenContent padding="$4">
+      {/* Content */}
+    </ScreenContent>
+  </Screen>
+);
+```
+
+### Form Layout
+
+```tsx
+<VStack gap="$4" padding="$4">
+  <Input label="Name" {...nameProps} />
+  <Input label="Email" {...emailProps} />
+  <Button isLoading={loading}>Submit</Button>
+</VStack>
+```
+
+### List Item Layout
+
+```tsx
+<HStack
+  padding="$4"
+  gap="$3"
+  alignItems="center"
+  borderBottomWidth={1}
+  borderColor="$borderLight"
+>
+  <Avatar source={{ uri: imageUrl }} size="md" />
+  <VStack flex={1}>
+    <Text fontWeight="$semibold">{title}</Text>
+    <Text color="$textSecondary" fontSize="$sm">{subtitle}</Text>
+  </VStack>
+  <Icon name="chevron-right" color="$textTertiary" />
+</HStack>
+```
+
+## Anti-Patterns
+
+```tsx
+// WRONG - Hard-coded values
+<View style={{ padding: 16, backgroundColor: '#fff' }}>
+
+// CORRECT - Design tokens
+<Box padding="$4" backgroundColor="$backgroundPrimary">
+
+
+// WRONG - Raw platform components
+import { View, Text } from 'react-native';
+
+// CORRECT - Core components
+import { Box, Text } from 'components/core';
+
+
+// WRONG - Inline styles
+<Text style={{ fontSize: 18, fontWeight: '600' }}>
+
+// CORRECT - Token props
+<Text fontSize="$lg" fontWeight="$semibold">
+```
+
+## Component Props Pattern
+
+When creating components, use token-based props:
+
+```tsx
+interface CardProps {
+  padding?: '$2' | '$4' | '$6';
+  variant?: 'elevated' | 'outlined' | 'filled';
+  children: React.ReactNode;
+}
+
+const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (
+  <Box
+    padding={padding}
+    backgroundColor="$backgroundPrimary"
+    borderRadius="$lg"
+    {...variantStyles[variant]}
+  >
+    {children}
+  </Box>
+);
+```
+
+## Integration with Other Skills
+
+- **react-ui-patterns**: Use core components for UI states
+- **testing-patterns**: Mock core components in tests
+- **storybook**: Document component variants