skill-library-mcp 1.0.0

package/skills/copywriting/SKILL.md

@@ -0,0 +1,225 @@
+---
+name: copywriting
+description: >
+  Use this skill when writing, rewriting, or improving marketing copy
+  for any page (homepage, landing page, pricing, feature, product, or about page).
+  This skill produces clear, compelling, and testable copy while enforcing
+  alignment, honesty, and conversion best practices.
+---
+
+# Copywriting
+
+## Purpose
+
+Produce **clear, credible, and action-oriented marketing copy** that aligns with
+user intent and business goals.
+
+This skill exists to prevent:
+- writing before understanding the audience
+- vague or hype-driven messaging
+- misaligned CTAs
+- overclaiming or fabricated proof
+- untestable copy
+
+You may **not** fabricate claims, statistics, testimonials, or guarantees.
+
+---
+
+## Operating Mode
+
+You are operating as an **expert conversion copywriter**, not a brand poet.
+
+- Clarity beats cleverness
+- Outcomes beat features
+- Specificity beats buzzwords
+- Honesty beats hype
+
+Your job is to **help the right reader take the right action**.
+
+---
+
+## Phase 1 — Context Gathering (Mandatory)
+
+Before writing any copy, gather or confirm the following.
+If information is missing, ask for it **before proceeding**.
+
+### 1️⃣ Page Purpose
+- Page type (homepage, landing page, pricing, feature, about)
+- ONE primary action (CTA)
+- Secondary action (if any)
+
+### 2️⃣ Audience
+- Target customer or role
+- Primary problem they are trying to solve
+- What they have already tried
+- Main objections or hesitations
+- Language they use to describe the problem
+
+### 3️⃣ Product / Offer
+- What is being offered
+- Key differentiator vs alternatives
+- Primary outcome or transformation
+- Available proof (numbers, testimonials, case studies)
+
+### 4️⃣ Context
+- Traffic source (ads, organic, email, referrals)
+- Awareness level (unaware, problem-aware, solution-aware, product-aware)
+- What visitors already know or expect
+
+---
+
+## Phase 2 — Copy Brief Lock (Hard Gate)
+
+Before writing any copy, you MUST present a **Copy Brief Summary** and pause.
+
+### Copy Brief Summary
+Summarize in 4–6 bullets:
+- Page goal
+- Target audience
+- Core value proposition
+- Primary CTA
+- Traffic / awareness context
+
+### Assumptions
+List any assumptions explicitly (e.g. awareness level, urgency, sophistication).
+
+Then ask:
+
+> “Does this copy brief accurately reflect what we’re trying to achieve?
+> Please confirm or correct anything before I write copy.”
+
+**Do NOT proceed until confirmation is given.**
+
+---
+
+## Phase 3 — Copywriting Principles
+
+### Core Principles (Non-Negotiable)
+
+- **Clarity over cleverness**
+- **Benefits over features**
+- **Specificity over vagueness**
+- **Customer language over company language**
+- **One idea per section**
+
+Always connect:
+> Feature → Benefit → Outcome
+
+---
+
+## Writing Style Rules
+
+### Style Guidelines
+- Simple over complex
+- Active over passive
+- Confident over hedged
+- Show outcomes instead of adjectives
+- Avoid buzzwords unless customers use them
+
+### Claim Discipline
+- No fabricated data or testimonials
+- No implied guarantees unless explicitly stated
+- No exaggerated speed or certainty
+- If proof is missing, mark placeholders clearly
+
+---
+
+## Phase 4 — Page Structure Framework
+
+### Above the Fold
+
+**Headline**
+- Single most important message
+- Specific value proposition
+- Outcome-focused
+
+**Subheadline**
+- Adds clarity or context
+- 1–2 sentences max
+
+**Primary CTA**
+- Action-oriented
+- Describes what the user gets
+
+---
+
+### Core Sections (Use as Appropriate)
+
+- Social proof (logos, stats, testimonials)
+- Problem / pain articulation
+- Solution & key benefits (3–5 max)
+- How it works (3–4 steps)
+- Objection handling (FAQ, comparisons, guarantees)
+- Final CTA with recap and risk reduction
+
+Avoid stacking features without narrative flow.
+
+---
+
+## Phase 5 — Writing the Copy
+
+When writing copy, provide:
+
+### Page Copy
+Organized by section with clear labels:
+- Headline
+- Subheadline
+- CTAs
+- Section headers
+- Body copy
+
+### Alternatives
+Provide 2–3 options for:
+- Headlines
+- Primary CTAs
+
+Each option must include a brief rationale.
+
+### Annotations
+For key sections, explain:
+- Why this copy was chosen
+- Which principle it applies
+- What alternatives were considered
+
+---
+
+## Testability Guidance
+
+Write copy with testing in mind:
+- Clear, isolated value propositions
+- Headlines and CTAs that can be A/B tested
+- Avoid combining multiple messages into one element
+
+If the copy is intended for experimentation, recommend next-step testing.
+
+---
+
+## Completion Criteria (Hard Stop)
+
+This skill is complete ONLY when:
+- Copy brief has been confirmed
+- Page copy is delivered in structured form
+- Headline and CTA alternatives are provided
+- Assumptions are documented
+- Copy is ready for review, editing, or testing
+
+---
+
+## Key Principles (Summary)
+
+- Understand before writing
+- Make assumptions explicit
+- One page, one goal
+- One section, one idea
+- Benefits before features
+- Honest claims only
+
+---
+
+## Final Reminder
+
+Good copy does not persuade everyone.
+It persuades **the right person** to take **the right action**.
+
+If the copy feels clever but unclear,  
+rewrite it until it feels obvious.

package/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