-```
-
-```javascript
-// Announce dynamic content changes
-function showNotification(message, type = 'polite') {
- const container = document.getElementById(`${type}-announcer`);
- container.textContent = ''; // Clear first
- requestAnimationFrame(() => {
- container.textContent = message;
- });
-}
-```
-
----
-
-## Testing checklist
-
-### Automated testing
-```bash
-# Lighthouse accessibility audit
-npx lighthouse https://example.com --only-categories=accessibility
-
-# axe-core
-npm install @axe-core/cli -g
-axe https://example.com
-```
-
-### Manual testing
-
-- [ ] **Keyboard navigation:** Tab through entire page, use Enter/Space to activate
-- [ ] **Screen reader:** Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)
-- [ ] **Zoom:** Content usable at 200% zoom
-- [ ] **High contrast:** Test with Windows High Contrast Mode
-- [ ] **Reduced motion:** Test with `prefers-reduced-motion: reduce`
-- [ ] **Focus order:** Logical and follows visual order
-
-### Screen reader commands
-
-| Action | VoiceOver (Mac) | NVDA (Windows) |
-|--------|-----------------|----------------|
-| Start/Stop | ⌘ + F5 | Ctrl + Alt + N |
-| Next item | VO + → | ↓ |
-| Previous item | VO + ← | ↑ |
-| Activate | VO + Space | Enter |
-| Headings list | VO + U, then arrows | H / Shift + H |
-| Links list | VO + U | K / Shift + K |
-
----
-
-## Common issues by impact
-
-### Critical (fix immediately)
-1. Missing form labels
-2. Missing image alt text
-3. Insufficient color contrast
-4. Keyboard traps
-5. No focus indicators
-
-### Serious (fix before launch)
-1. Missing page language
-2. Missing heading structure
-3. Non-descriptive link text
-4. Auto-playing media
-5. Missing skip links
-
-### Moderate (fix soon)
-1. Missing ARIA labels on icons
-2. Inconsistent navigation
-3. Missing error identification
-4. Timing without controls
-5. Missing landmark regions
-
-## References
-
-- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
-- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
-- [Deque axe Rules](https://dequeuniversity.com/rules/axe/)
-- [Web Quality Audit](../web-quality-audit/SKILL.md)
diff --git a/.agents/skills/accessibility/references/WCAG.md b/.agents/skills/accessibility/references/WCAG.md
deleted file mode 100644
index a2b7c98..0000000
--- a/.agents/skills/accessibility/references/WCAG.md
+++ /dev/null
@@ -1,162 +0,0 @@
-# WCAG 2.1 Quick Reference
-
-## Success criteria by level
-
-### Level A (minimum)
-
-| Criterion | Description |
-|-----------|-------------|
-| **1.1.1** Non-text Content | All images, icons have text alternatives |
-| **1.2.1** Audio-only/Video-only | Provide transcript or audio description |
-| **1.2.2** Captions | Video with audio has captions |
-| **1.2.3** Audio Description | Video has audio description |
-| **1.3.1** Info and Relationships | Information conveyed through presentation is available programmatically |
-| **1.3.2** Meaningful Sequence | Reading order is logical |
-| **1.3.3** Sensory Characteristics | Instructions don't rely solely on shape, color, size, location, orientation, or sound |
-| **1.4.1** Use of Color | Color is not the only visual means of conveying information |
-| **1.4.2** Audio Control | Audio playing automatically can be paused/stopped |
-| **2.1.1** Keyboard | All functionality available via keyboard |
-| **2.1.2** No Keyboard Trap | Keyboard focus can be moved away from any component |
-| **2.1.4** Character Key Shortcuts | Single-key shortcuts can be turned off or remapped |
-| **2.2.1** Timing Adjustable | Time limits can be extended |
-| **2.2.2** Pause, Stop, Hide | Moving/blinking content can be paused |
-| **2.3.1** Three Flashes | Nothing flashes more than 3 times per second |
-| **2.4.1** Bypass Blocks | Skip link or landmark navigation available |
-| **2.4.2** Page Titled | Pages have descriptive titles |
-| **2.4.3** Focus Order | Focus order preserves meaning |
-| **2.4.4** Link Purpose | Link purpose clear from link text or context |
-| **2.5.1** Pointer Gestures | Multi-point gestures have single-pointer alternatives |
-| **2.5.2** Pointer Cancellation | Down-event doesn't trigger action (use up-event or click) |
-| **2.5.3** Label in Name | Accessible name contains visible label text |
-| **2.5.4** Motion Actuation | Motion-triggered functions have alternatives |
-| **3.1.1** Language of Page | Default language specified in HTML |
-| **3.2.1** On Focus | Focus doesn't trigger unexpected changes |
-| **3.2.2** On Input | Input doesn't trigger unexpected changes |
-| **3.3.1** Error Identification | Input errors clearly described |
-| **3.3.2** Labels or Instructions | Form inputs have labels or instructions |
-| **4.1.1** Parsing | HTML is well-formed (no duplicate IDs, proper nesting) |
-| **4.1.2** Name, Role, Value | UI components have accessible names and correct roles |
-
-### Level AA (standard)
-
-| Criterion | Description |
-|-----------|-------------|
-| **1.2.4** Captions (Live) | Live audio has captions |
-| **1.2.5** Audio Description | Pre-recorded video has audio description |
-| **1.3.4** Orientation | Content doesn't restrict orientation |
-| **1.3.5** Identify Input Purpose | Input purpose can be programmatically determined |
-| **1.4.3** Contrast (Minimum) | 4.5:1 for normal text, 3:1 for large text |
-| **1.4.4** Resize Text | Text can be resized to 200% without loss of functionality |
-| **1.4.5** Images of Text | Text used instead of images of text |
-| **1.4.10** Reflow | Content reflows at 320px width without horizontal scroll |
-| **1.4.11** Non-text Contrast | UI components have 3:1 contrast |
-| **1.4.12** Text Spacing | Content adapts to text spacing changes |
-| **1.4.13** Content on Hover/Focus | Additional content is dismissible, hoverable, persistent |
-| **2.4.5** Multiple Ways | Multiple ways to find pages |
-| **2.4.6** Headings and Labels | Headings and labels are descriptive |
-| **2.4.7** Focus Visible | Focus indicator is visible |
-| **3.1.2** Language of Parts | Language changes are marked |
-| **3.2.3** Consistent Navigation | Navigation is consistent across pages |
-| **3.2.4** Consistent Identification | Same functionality uses same labels |
-| **3.3.3** Error Suggestion | Error corrections suggested when known |
-| **3.3.4** Error Prevention (Legal) | Actions can be reversed or confirmed |
-| **4.1.3** Status Messages | Status messages announced to screen readers |
-
-### Level AAA (enhanced)
-
-| Criterion | Description |
-|-----------|-------------|
-| **1.4.6** Contrast (Enhanced) | 7:1 for normal text, 4.5:1 for large text |
-| **1.4.8** Visual Presentation | Foreground/background colors can be selected |
-| **1.4.9** Images of Text (No Exception) | No images of text |
-| **2.1.3** Keyboard (No Exception) | All functionality keyboard accessible |
-| **2.2.3** No Timing | No time limits |
-| **2.2.4** Interruptions | Interruptions can be postponed |
-| **2.2.5** Re-authenticating | Data preserved on re-authentication |
-| **2.2.6** Timeouts | Users warned about data loss from inactivity |
-| **2.3.2** Three Flashes | No content flashes more than 3 times |
-| **2.3.3** Animation from Interactions | Motion animation can be disabled |
-| **2.4.8** Location | User location within site is available |
-| **2.4.9** Link Purpose (Link Only) | Link purpose clear from link text alone |
-| **2.4.10** Section Headings | Sections have headings |
-| **3.1.3** Unusual Words | Definitions available for unusual words |
-| **3.1.4** Abbreviations | Abbreviations expanded |
-| **3.1.5** Reading Level | Alternative content for complex text |
-| **3.1.6** Pronunciation | Pronunciation available where needed |
-| **3.2.5** Change on Request | Changes initiated only by user |
-| **3.3.5** Help | Context-sensitive help available |
-| **3.3.6** Error Prevention (All) | All form submissions can be reviewed |
-
-## Common ARIA patterns
-
-### Buttons
-```html
-
-
-
-```
-
-### Links
-```html
-Descriptive link text
-
-
- External site
- (opens in new tab)
-
-```
-
-### Form fields
-```html
-
-
-
-```
-
-## Testing tools
-
-| Tool | Type | URL |
-|------|------|-----|
-| axe DevTools | Browser extension | [deque.com/axe](https://www.deque.com/axe/) |
-| WAVE | Browser extension | [wave.webaim.org](https://wave.webaim.org/) |
-| Lighthouse | Built into Chrome | DevTools → Lighthouse |
-| NVDA | Screen reader (Windows) | [nvaccess.org](https://www.nvaccess.org/) |
-| VoiceOver | Screen reader (Mac) | Built into macOS |
-| Colour Contrast Analyser | Desktop app | [tpgi.com](https://www.tpgi.com/color-contrast-checker/) |
diff --git a/.agents/skills/application-performance-performance-optimization/SKILL.md b/.agents/skills/application-performance-performance-optimization/SKILL.md
deleted file mode 100644
index 6d10be7..0000000
--- a/.agents/skills/application-performance-performance-optimization/SKILL.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-name: application-performance-performance-optimization
-description: "Optimize end-to-end application performance with profiling, observability, and backend/frontend tuning. Use when coordinating performance optimization across the stack."
-risk: unknown
-source: community
----
-
-Optimize application performance end-to-end using specialized performance and optimization agents:
-
-[Extended thinking: This workflow orchestrates a comprehensive performance optimization process across the entire application stack. Starting with deep profiling and baseline establishment, the workflow progresses through targeted optimizations in each system layer, validates improvements through load testing, and establishes continuous monitoring for sustained performance. Each phase builds on insights from previous phases, creating a data-driven optimization strategy that addresses real bottlenecks rather than theoretical improvements. The workflow emphasizes modern observability practices, user-centric performance metrics, and cost-effective optimization strategies.]
-
-## Use this skill when
-
-- Coordinating performance optimization across backend, frontend, and infrastructure
-- Establishing baselines and profiling to identify bottlenecks
-- Designing load tests, performance budgets, or capacity plans
-- Building observability for performance and reliability targets
-
-## Do not use this skill when
-
-- The task is a small localized fix with no broader performance goals
-- There is no access to metrics, tracing, or profiling data
-- The request is unrelated to performance or scalability
-
-## Instructions
-
-1. Confirm performance goals, constraints, and target metrics.
-2. Establish baselines with profiling, tracing, and real-user data.
-3. Execute phased optimizations across the stack with measurable impact.
-4. Validate improvements and set guardrails to prevent regressions.
-
-## Safety
-
-- Avoid load testing production without approvals and safeguards.
-- Roll out performance changes gradually with rollback plans.
-
-## Phase 1: Performance Profiling & Baseline
-
-### 1. Comprehensive Performance Profiling
-
-- Use Task tool with subagent_type="performance-engineer"
-- Prompt: "Profile application performance comprehensively for: $ARGUMENTS. Generate flame graphs for CPU usage, heap dumps for memory analysis, trace I/O operations, and identify hot paths. Use APM tools like DataDog or New Relic if available. Include database query profiling, API response times, and frontend rendering metrics. Establish performance baselines for all critical user journeys."
-- Context: Initial performance investigation
-- Output: Detailed performance profile with flame graphs, memory analysis, bottleneck identification, baseline metrics
-
-### 2. Observability Stack Assessment
-
-- Use Task tool with subagent_type="observability-engineer"
-- Prompt: "Assess current observability setup for: $ARGUMENTS. Review existing monitoring, distributed tracing with OpenTelemetry, log aggregation, and metrics collection. Identify gaps in visibility, missing metrics, and areas needing better instrumentation. Recommend APM tool integration and custom metrics for business-critical operations."
-- Context: Performance profile from step 1
-- Output: Observability assessment report, instrumentation gaps, monitoring recommendations
-
-### 3. User Experience Analysis
-
-- Use Task tool with subagent_type="performance-engineer"
-- Prompt: "Analyze user experience metrics for: $ARGUMENTS. Measure Core Web Vitals (LCP, FID, CLS), page load times, time to interactive, and perceived performance. Use Real User Monitoring (RUM) data if available. Identify user journeys with poor performance and their business impact."
-- Context: Performance baselines from step 1
-- Output: UX performance report, Core Web Vitals analysis, user impact assessment
-
-## Phase 2: Database & Backend Optimization
-
-### 4. Database Performance Optimization
-
-- Use Task tool with subagent_type="database-cloud-optimization::database-optimizer"
-- Prompt: "Optimize database performance for: $ARGUMENTS based on profiling data: {context_from_phase_1}. Analyze slow query logs, create missing indexes, optimize execution plans, implement query result caching with Redis/Memcached. Review connection pooling, prepared statements, and batch processing opportunities. Consider read replicas and database sharding if needed."
-- Context: Performance bottlenecks from phase 1
-- Output: Optimized queries, new indexes, caching strategy, connection pool configuration
-
-### 5. Backend Code & API Optimization
-
-- Use Task tool with subagent_type="backend-development::backend-architect"
-- Prompt: "Optimize backend services for: $ARGUMENTS targeting bottlenecks: {context_from_phase_1}. Implement efficient algorithms, add application-level caching, optimize N+1 queries, use async/await patterns effectively. Implement pagination, response compression, GraphQL query optimization, and batch API operations. Add circuit breakers and bulkheads for resilience."
-- Context: Database optimizations from step 4, profiling data from phase 1
-- Output: Optimized backend code, caching implementation, API improvements, resilience patterns
-
-### 6. Microservices & Distributed System Optimization
-
-- Use Task tool with subagent_type="performance-engineer"
-- Prompt: "Optimize distributed system performance for: $ARGUMENTS. Analyze service-to-service communication, implement service mesh optimizations, optimize message queue performance (Kafka/RabbitMQ), reduce network hops. Implement distributed caching strategies and optimize serialization/deserialization."
-- Context: Backend optimizations from step 5
-- Output: Service communication improvements, message queue optimization, distributed caching setup
-
-## Phase 3: Frontend & CDN Optimization
-
-### 7. Frontend Bundle & Loading Optimization
-
-- Use Task tool with subagent_type="frontend-developer"
-- Prompt: "Optimize frontend performance for: $ARGUMENTS targeting Core Web Vitals: {context_from_phase_1}. Implement code splitting, tree shaking, lazy loading, and dynamic imports. Optimize bundle sizes with webpack/rollup analysis. Implement resource hints (prefetch, preconnect, preload). Optimize critical rendering path and eliminate render-blocking resources."
-- Context: UX analysis from phase 1, backend optimizations from phase 2
-- Output: Optimized bundles, lazy loading implementation, improved Core Web Vitals
-
-### 8. CDN & Edge Optimization
-
-- Use Task tool with subagent_type="cloud-infrastructure::cloud-architect"
-- Prompt: "Optimize CDN and edge performance for: $ARGUMENTS. Configure CloudFlare/CloudFront for optimal caching, implement edge functions for dynamic content, set up image optimization with responsive images and WebP/AVIF formats. Configure HTTP/2 and HTTP/3, implement Brotli compression. Set up geographic distribution for global users."
-- Context: Frontend optimizations from step 7
-- Output: CDN configuration, edge caching rules, compression setup, geographic optimization
-
-### 9. Mobile & Progressive Web App Optimization
-
-- Use Task tool with subagent_type="frontend-mobile-development::mobile-developer"
-- Prompt: "Optimize mobile experience for: $ARGUMENTS. Implement service workers for offline functionality, optimize for slow networks with adaptive loading. Reduce JavaScript execution time for mobile CPUs. Implement virtual scrolling for long lists. Optimize touch responsiveness and smooth animations. Consider React Native/Flutter specific optimizations if applicable."
-- Context: Frontend optimizations from steps 7-8
-- Output: Mobile-optimized code, PWA implementation, offline functionality
-
-## Phase 4: Load Testing & Validation
-
-### 10. Comprehensive Load Testing
-
-- Use Task tool with subagent_type="performance-engineer"
-- Prompt: "Conduct comprehensive load testing for: $ARGUMENTS using k6/Gatling/Artillery. Design realistic load scenarios based on production traffic patterns. Test normal load, peak load, and stress scenarios. Include API testing, browser-based testing, and WebSocket testing if applicable. Measure response times, throughput, error rates, and resource utilization at various load levels."
-- Context: All optimizations from phases 1-3
-- Output: Load test results, performance under load, breaking points, scalability analysis
-
-### 11. Performance Regression Testing
-
-- Use Task tool with subagent_type="performance-testing-review::test-automator"
-- Prompt: "Create automated performance regression tests for: $ARGUMENTS. Set up performance budgets for key metrics, integrate with CI/CD pipeline using GitHub Actions or similar. Create Lighthouse CI tests for frontend, API performance tests with Artillery, and database performance benchmarks. Implement automatic rollback triggers for performance regressions."
-- Context: Load test results from step 10, baseline metrics from phase 1
-- Output: Performance test suite, CI/CD integration, regression prevention system
-
-## Phase 5: Monitoring & Continuous Optimization
-
-### 12. Production Monitoring Setup
-
-- Use Task tool with subagent_type="observability-engineer"
-- Prompt: "Implement production performance monitoring for: $ARGUMENTS. Set up APM with DataDog/New Relic/Dynatrace, configure distributed tracing with OpenTelemetry, implement custom business metrics. Create Grafana dashboards for key metrics, set up PagerDuty alerts for performance degradation. Define SLIs/SLOs for critical services with error budgets."
-- Context: Performance improvements from all previous phases
-- Output: Monitoring dashboards, alert rules, SLI/SLO definitions, runbooks
-
-### 13. Continuous Performance Optimization
-
-- Use Task tool with subagent_type="performance-engineer"
-- Prompt: "Establish continuous optimization process for: $ARGUMENTS. Create performance budget tracking, implement A/B testing for performance changes, set up continuous profiling in production. Document optimization opportunities backlog, create capacity planning models, and establish regular performance review cycles."
-- Context: Monitoring setup from step 12, all previous optimization work
-- Output: Performance budget tracking, optimization backlog, capacity planning, review process
-
-## Configuration Options
-
-- **performance_focus**: "latency" | "throughput" | "cost" | "balanced" (default: "balanced")
-- **optimization_depth**: "quick-wins" | "comprehensive" | "enterprise" (default: "comprehensive")
-- **tools_available**: ["datadog", "newrelic", "prometheus", "grafana", "k6", "gatling"]
-- **budget_constraints**: Set maximum acceptable costs for infrastructure changes
-- **user_impact_tolerance**: "zero-downtime" | "maintenance-window" | "gradual-rollout"
-
-## Success Criteria
-
-- **Response Time**: P50 < 200ms, P95 < 1s, P99 < 2s for critical endpoints
-- **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1
-- **Throughput**: Support 2x current peak load with <1% error rate
-- **Database Performance**: Query P95 < 100ms, no queries > 1s
-- **Resource Utilization**: CPU < 70%, Memory < 80% under normal load
-- **Cost Efficiency**: Performance per dollar improved by minimum 30%
-- **Monitoring Coverage**: 100% of critical paths instrumented with alerting
-
-Performance optimization target: $ARGUMENTS
diff --git a/.agents/skills/copywriting/SKILL.md b/.agents/skills/copywriting/SKILL.md
deleted file mode 100644
index cbf9adf..0000000
--- a/.agents/skills/copywriting/SKILL.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-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," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see email-sequence. For popup copy, see popup-cro. For editing existing copy, see copy-editing.
-metadata:
- version: 1.1.0
----
-
-# Copywriting
-
-You are an expert conversion copywriter. Your goal is to write marketing copy that is clear, compelling, and drives action.
-
-## Before Writing
-
-**Check for product marketing context first:**
-If `.agents/product-marketing-context.md` exists (or `.claude/product-marketing-context.md` in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.
-
-Gather this context (ask if not provided):
-
-### 1. Page Purpose
-- What type of page? (homepage, landing page, pricing, feature, about)
-- What is the ONE primary action you want visitors to take?
-
-### 2. Audience
-- Who is the ideal customer?
-- What problem are they trying to solve?
-- 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?
-
----
-
-## Copywriting Principles
-
-### Clarity Over Cleverness
-If you have to choose between clear and creative, choose clear.
-
-### Benefits Over Features
-Features: What it does. Benefits: What that means for the customer.
-
-### 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. Mirror voice-of-customer from reviews, interviews, support tickets.
-
-### One Idea Per Section
-Each section should advance one argument. Build a logical flow down the page.
-
----
-
-## Writing Style Rules
-
-### Core Principles
-
-1. **Simple over complex** — "Use" not "utilize," "help" not "facilitate"
-2. **Specific over vague** — Avoid "streamline," "optimize," "innovative"
-3. **Active over passive** — "We generate reports" not "Reports are generated"
-4. **Confident over qualified** — Remove "almost," "very," "really"
-5. **Show over tell** — Describe the outcome instead of using adverbs
-6. **Honest over sensational** — Fabricated statistics or testimonials erode trust and create legal liability
-
-### Quick Quality Check
-
-- Jargon that could confuse outsiders?
-- Sentences trying to do too much?
-- Passive voice constructions?
-- Exclamation points? (remove them)
-- Marketing buzzwords without substance?
-
-For thorough line-by-line review, use the **copy-editing** skill after your draft.
-
----
-
-## 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?"
-- "Tired of chasing approvals?"
-
-### Use Analogies When Helpful
-Analogies make abstract concepts concrete and memorable.
-
-### Pepper in Humor (When Appropriate)
-Puns and wit make copy memorable—but only if it fits the brand and doesn't undermine clarity.
-
----
-
-## Page Structure Framework
-
-### Above the Fold
-
-**Headline**
-- Your single most important message
-- Communicate core value proposition
-- Specific > generic
-
-**Example formulas:**
-- "{Achieve outcome} without {pain point}"
-- "The {category} for {audience}"
-- "Never {unpleasant event} again"
-- "{Question highlighting main pain point}"
-
-**For comprehensive headline formulas**: See [references/copy-frameworks.md](references/copy-frameworks.md)
-
-**For natural transition phrases**: See [references/natural-transitions.md](references/natural-transitions.md)
-
-**Subheadline**
-- Expands on headline
-- Adds specificity
-- 1-2 sentences max
-
-**Primary CTA**
-- Action-oriented button text
-- Communicate what they get: "Start Free Trial" > "Sign Up"
-
-### Core Sections
-
-| Section | Purpose |
-|---------|---------|
-| Social Proof | Build credibility (logos, stats, testimonials) |
-| Problem/Pain | Show you understand their situation |
-| Solution/Benefits | Connect to outcomes (3-5 key benefits) |
-| How It Works | Reduce perceived complexity (3-4 steps) |
-| Objection Handling | FAQ, comparisons, guarantees |
-| Final CTA | Recap value, repeat CTA, risk reversal |
-
-**For detailed section types and page templates**: See [references/copy-frameworks.md](references/copy-frameworks.md)
-
----
-
-## 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]
-- Download the Guide
-
-**Formula:** [Action Verb] + [What They Get] + [Qualifier if needed]
-
-Examples:
-- "Start My Free Trial"
-- "Get the Complete Checklist"
-- "See Pricing for My Team"
-
----
-
-## Page-Specific Guidance
-
-### Homepage
-- Serve multiple audiences without being generic
-- Lead with broadest value proposition
-- Provide clear paths for different visitor intents
-
-### Landing Page
-- Single message, single CTA
-- Match headline to ad/traffic source
-- Complete argument on one page
-
-### Pricing Page
-- Help visitors choose the right plan
-- Address "which is right for me?" anxiety
-- Make recommended plan obvious
-
-### Feature Page
-- Connect feature → benefit → outcome
-- Show use cases and examples
-- Clear path to try or buy
-
-### About Page
-- Tell the story of why you exist
-- Connect mission to customer benefit
-- Still include a CTA
-
----
-
-## Voice and Tone
-
-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, but adjust intensity:
-- Headlines can be bolder
-- Body copy should be clearer
-- CTAs should be action-oriented
-
----
-
-## Output Format
-
-When writing copy, provide:
-
-### Page Copy
-Organized by section:
-- Headline, Subheadline, CTA
-- Section headers and body copy
-- Secondary CTAs
-
-### Annotations
-For key elements, explain:
-- Why you made this choice
-- What principle it applies
-
-### Alternatives
-For headlines and CTAs, provide 2-3 options:
-- Option A: [copy] — [rationale]
-- Option B: [copy] — [rationale]
-
-### Meta Content (if relevant)
-- Page title (for SEO)
-- Meta description
-
----
-
-## Related Skills
-
-- **copy-editing**: For polishing existing copy (use after your draft)
-- **page-cro**: If 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
diff --git a/.agents/skills/copywriting/evals/evals.json b/.agents/skills/copywriting/evals/evals.json
deleted file mode 100644
index 1721cc1..0000000
--- a/.agents/skills/copywriting/evals/evals.json
+++ /dev/null
@@ -1,111 +0,0 @@
-{
- "skill_name": "copywriting",
- "evals": [
- {
- "id": 1,
- "prompt": "Write homepage copy for a SaaS tool that automates employee onboarding. Target audience is HR directors at mid-size companies (200-2000 employees). Main differentiator is that it integrates with all major HRIS systems and cuts onboarding time from 2 weeks to 2 days.",
- "expected_output": "Should check for product-marketing-context.md first. Should write full page copy organized by section: Headline, Subheadline, CTA (above the fold), then Social Proof, Problem/Pain, Solution/Benefits, How It Works, Objection Handling, and Final CTA. Should follow copywriting principles: clarity over cleverness, benefits over features, specificity (use the '2 weeks to 2 days' stat), customer language. Headline should communicate core value proposition. CTAs should be action-oriented ('Start Free Trial' not 'Submit'). Should provide 2-3 headline alternatives with rationale. Should include annotations explaining key copy choices. Should include meta content (SEO page title and meta description).",
- "assertions": [
- "Checks for product-marketing-context.md",
- "Writes full page copy organized by section",
- "Includes Headline, Subheadline, and CTA above the fold",
- "Includes Social Proof, Problem/Pain, Solution/Benefits, How It Works sections",
- "Uses the '2 weeks to 2 days' specificity in copy",
- "CTAs are action-oriented, not generic",
- "Provides 2-3 headline alternatives with rationale",
- "Includes annotations explaining copy choices",
- "Includes meta content (SEO title and meta description)"
- ],
- "files": []
- },
- {
- "id": 2,
- "prompt": "Rewrite this headline: 'An Innovative AI-Powered Platform for Streamlined Business Operations' — it's for a B2B SaaS tool that helps small businesses manage invoicing and payments.",
- "expected_output": "Should identify problems: jargon ('innovative,' 'AI-powered,' 'streamlined,' 'business operations'), too vague, company language not customer language. Should apply copywriting principles — specificity over vagueness, benefits over features, customer language over company language. Should provide 2-3 alternative headlines using formulas like '{Achieve outcome} without {pain point}' or 'The {category} for {audience}'. Each alternative should include rationale. Should also suggest a subheadline that adds specificity.",
- "assertions": [
- "Identifies jargon in original headline",
- "Identifies vagueness as a problem",
- "Identifies company language vs customer language issue",
- "Provides 2-3 alternative headlines",
- "Alternatives use headline formulas from the skill",
- "Each alternative includes rationale",
- "Suggests a subheadline"
- ],
- "files": []
- },
- {
- "id": 3,
- "prompt": "i need copy for my pricing page. we have three plans: starter ($29/mo), pro ($79/mo), business ($199/mo). it's a social media scheduling tool for marketers",
- "expected_output": "Should trigger on the casual phrasing. Should ask or infer audience context. Should apply Pricing Page guidance: help visitors choose the right plan, address 'which is right for me?' anxiety, make recommended plan obvious. Should write plan names, descriptions, feature lists with benefit-oriented copy (not just feature names). Should include a page headline that addresses the pricing decision. CTAs should be specific per plan. Should handle objection handling (FAQ copy). Should provide alternatives for key elements.",
- "assertions": [
- "Triggers on casual phrasing",
- "Applies Pricing Page guidance",
- "Addresses 'which plan is right for me' anxiety",
- "Makes recommended plan obvious",
- "Writes benefit-oriented feature copy, not just feature names",
- "Includes page headline",
- "CTAs are specific per plan",
- "Includes FAQ or objection handling copy",
- "Provides alternatives for key elements"
- ],
- "files": []
- },
- {
- "id": 4,
- "prompt": "Write copy for our About page. We're a 3-person startup that built a developer tool for database migrations. Founded because we kept losing data during migrations at our last jobs. Tone should be professional but human.",
- "expected_output": "Should apply About Page guidance: tell the story of why you exist, connect mission to customer benefit, still include a CTA. Should adapt voice and tone to 'professional but human' as specified. Should tell the founder origin story authentically. Should connect the personal pain to the customer's pain. Should include a CTA even on the About page. Copy should follow style rules: active voice, confident, specific. Should NOT be overly corporate or generic.",
- "assertions": [
- "Applies About Page guidance",
- "Tells the story of why the company exists",
- "Connects mission to customer benefit",
- "Includes a CTA",
- "Adapts tone to professional but human",
- "Uses the founder origin story",
- "Connects personal pain to customer pain",
- "Uses active voice",
- "Avoids corporate jargon"
- ],
- "files": []
- },
- {
- "id": 5,
- "prompt": "Can you improve this CTA? We currently have 'Learn More' on our feature page for our analytics dashboard product.",
- "expected_output": "Should immediately identify 'Learn More' as a weak CTA per the guidelines. Should apply the CTA formula: [Action Verb] + [What They Get] + [Qualifier]. Should provide 2-3 strong alternatives like 'See the Dashboard in Action,' 'Start Your Free Trial,' or 'Explore Analytics Features.' Each alternative should include rationale and context for when it works best. Should also consider CTA hierarchy — whether this is a primary or secondary CTA, and suggest complementary CTAs if relevant.",
- "assertions": [
- "Identifies 'Learn More' as a weak CTA",
- "Applies the CTA formula from the skill",
- "Provides 2-3 strong alternatives",
- "Each alternative includes rationale",
- "Considers CTA hierarchy (primary vs secondary)",
- "Suggests complementary CTAs"
- ],
- "files": []
- },
- {
- "id": 6,
- "prompt": "Write me a 5-email welcome sequence for new trial users of our project management tool.",
- "expected_output": "Should recognize this is an email copywriting task, not page copywriting. Should defer to or cross-reference the email-sequence skill, which specifically handles email sequences, drip campaigns, and lifecycle emails. May provide brief general guidance but should make clear that email-sequence is the right skill for this task.",
- "assertions": [
- "Recognizes this as email sequence work",
- "References or defers to email-sequence skill",
- "Does not attempt to write a full email sequence using page copywriting patterns"
- ],
- "files": []
- },
- {
- "id": 7,
- "prompt": "Review this copy and tell me what's wrong: 'We are extremely excited to announce our revolutionary, cutting-edge platform that will totally transform how businesses optimize their workflows! Sign up now!!'",
- "expected_output": "Should apply the Quick Quality Check. Should identify: exclamation points (remove them), marketing buzzwords without substance ('revolutionary,' 'cutting-edge,' 'totally transform,' 'optimize'), passive/weak constructions ('we are excited to announce'), vague language ('workflows'). Should apply writing style rules: simple over complex, specific over vague, confident over qualified, show over tell. Should rewrite the copy following these principles. Should provide 2-3 alternatives.",
- "assertions": [
- "Identifies exclamation point overuse",
- "Identifies marketing buzzwords without substance",
- "Identifies vague language",
- "Applies writing style rules",
- "Rewrites the copy following principles",
- "Provides alternatives",
- "Result is specific, clear, and jargon-free"
- ],
- "files": []
- }
- ]
-}
diff --git a/.agents/skills/copywriting/references/copy-frameworks.md b/.agents/skills/copywriting/references/copy-frameworks.md
deleted file mode 100644
index 0abc812..0000000
--- a/.agents/skills/copywriting/references/copy-frameworks.md
+++ /dev/null
@@ -1,344 +0,0 @@
-# Copy Frameworks Reference
-
-Headline formulas, page section types, and structural templates.
-
-## Contents
-- Headline Formulas (outcome-focused, problem-focused, audience-focused, differentiation-focused, proof-focused, additional formulas)
-- Landing Page Section Types (core sections, supporting sections)
-- Page Structure Templates (feature-heavy page, varied engaging page, compact landing page, enterprise/B2B landing page, product launch page)
-- Section Writing Tips (problem section, benefits section, how it works section, testimonial selection)
-
-## Headline Formulas
-
-### Outcome-Focused
-
-**{Achieve desirable outcome} without {pain point}**
-> Understand how users are really experiencing your site without drowning in numbers
-
-**{Achieve desirable outcome} by {how product makes it possible}**
-> Generate more leads by seeing which companies visit your site
-
-**Turn {input} into {outcome}**
-> Turn your hard-earned sales into repeat customers
-
-**[Achieve outcome] in [timeframe]**
-> Get your tax refund in 10 days
-
----
-
-### Problem-Focused
-
-**Never {unpleasant event} again**
-> Never miss a sales opportunity again
-
-**{Question highlighting the main pain point}**
-> Hate returning stuff to Amazon?
-
-**Stop [pain]. Start [pleasure].**
-> Stop chasing invoices. Start getting paid on time.
-
----
-
-### Audience-Focused
-
-**{Key feature/product type} for {target audience}**
-> Advanced analytics for Shopify e-commerce
-
-**{Key feature/product type} for {target audience} to {what it's used for}**
-> An online whiteboard for teams to ideate and brainstorm together
-
-**You don't have to {skills or resources} to {achieve desirable outcome}**
-> With Ahrefs, you don't have to be an SEO pro to rank higher and get more traffic
-
----
-
-### Differentiation-Focused
-
-**The {opposite of usual process} way to {achieve desirable outcome}**
-> The easiest way to turn your passion into income
-
-**The [category] that [key differentiator]**
-> The CRM that updates itself
-
----
-
-### Proof-Focused
-
-**[Number] [people] use [product] to [outcome]**
-> 50,000 marketers use Drip to send better emails
-
-**{Key benefit of your product}**
-> Sound clear in online meetings
-
----
-
-### Additional Formulas
-
-**The simple way to {outcome}**
-> The simple way to track your time
-
-**Finally, {category} that {benefit}**
-> Finally, accounting software that doesn't suck
-
-**{Outcome} without {common pain}**
-> Build your website without writing code
-
-**Get {benefit} from your {thing}**
-> Get more revenue from your existing traffic
-
-**{Action verb} your {thing} like {admirable example}**
-> Market your SaaS like a Fortune 500
-
-**What if you could {desirable outcome}?**
-> What if you could close deals 30% faster?
-
-**Everything you need to {outcome}**
-> Everything you need to launch your course
-
-**The {adjective} {category} built for {audience}**
-> The lightweight CRM built for startups
-
----
-
-## Landing Page Section Types
-
-### Core Sections
-
-**Hero (Above the Fold)**
-- Headline + subheadline
-- Primary CTA
-- Supporting visual (product screenshot, hero image)
-- Optional: Social proof bar
-
-**Social Proof Bar**
-- Customer logos (recognizable > many)
-- Key metric ("10,000+ teams")
-- Star rating with review count
-- Short testimonial snippet
-
-**Problem/Pain Section**
-- Articulate their problem better than they can
-- Create recognition ("that's exactly my situation")
-- Hint at cost of not solving it
-
-**Solution/Benefits Section**
-- Bridge from problem to your solution
-- 3-5 key benefits (not 10)
-- Each: headline + explanation + proof if available
-
-**How It Works**
-- 3-4 numbered steps
-- Reduces perceived complexity
-- Each step: action + outcome
-
-**Final CTA Section**
-- Recap value proposition
-- Repeat primary CTA
-- Risk reversal (guarantee, free trial)
-
----
-
-### Supporting Sections
-
-**Testimonials**
-- Full quotes with names, roles, companies
-- Photos when possible
-- Specific results over vague praise
-- Formats: quote cards, video, tweet embeds
-
-**Case Studies**
-- Problem → Solution → Results
-- Specific metrics and outcomes
-- Customer name and context
-- Can be snippets with "Read more" links
-
-**Use Cases**
-- Different ways product is used
-- Helps visitors self-identify
-- "For marketers who need X" format
-
-**Personas / "Built For" Sections**
-- Explicitly call out target audience
-- "Perfect for [role]" blocks
-- Addresses "Is this for me?" question
-
-**FAQ Section**
-- Address common objections
-- Good for SEO
-- Reduces support burden
-- 5-10 most common questions
-
-**Comparison Section**
-- vs. competitors (name them or don't)
-- vs. status quo (spreadsheets, manual processes)
-- Tables or side-by-side format
-
-**Integrations / Partners**
-- Logos of tools you connect with
-- "Works with your stack" messaging
-- Builds credibility
-
-**Founder Story / Manifesto**
-- Why you built this
-- What you believe
-- Emotional connection
-- Differentiates from faceless competitors
-
-**Demo / Product Tour**
-- Interactive demos
-- Video walkthroughs
-- GIF previews
-- Shows product in action
-
-**Pricing Preview**
-- Teaser even on non-pricing pages
-- Starting price or "from $X/mo"
-- Moves decision-makers forward
-
-**Guarantee / Risk Reversal**
-- Money-back guarantee
-- Free trial terms
-- "Cancel anytime"
-- Reduces friction
-
-**Stats Section**
-- Key metrics that build credibility
-- "10,000+ customers"
-- "4.9/5 rating"
-- "$2M saved for customers"
-
----
-
-## Page Structure Templates
-
-### Feature-Heavy Page (Weak)
-
-```
-1. Hero
-2. Feature 1
-3. Feature 2
-4. Feature 3
-5. Feature 4
-6. CTA
-```
-
-This is a list, not a persuasive narrative.
-
----
-
-### 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
-```
-
-This tells a story and addresses objections.
-
----
-
-### Compact Landing Page
-
-```
-1. Hero (headline, subhead, CTA, image)
-2. Social proof bar
-3. 3 key benefits with icons
-4. Testimonial
-5. How it works (3 steps)
-6. Final CTA with guarantee
-```
-
-Good for ad landing pages where brevity matters.
-
----
-
-### Enterprise/B2B Landing Page
-
-```
-1. Hero (outcome-focused headline)
-2. Logo bar (recognizable companies)
-3. Problem section (business pain)
-4. Solution overview
-5. Use cases by role/department
-6. Security/compliance section
-7. Integration logos
-8. Case study with metrics
-9. ROI/value section
-10. Contact/demo CTA
-```
-
-Addresses enterprise buyer concerns.
-
----
-
-### Product Launch Page
-
-```
-1. Hero with launch announcement
-2. Video demo or walkthrough
-3. Feature highlights (3-5)
-4. Before/after comparison
-5. Early testimonials
-6. Launch pricing or early access offer
-7. CTA with urgency
-```
-
-Good for ProductHunt, launches, or announcements.
-
----
-
-## Section Writing Tips
-
-### Problem Section
-
-Start with phrases like:
-- "You know the feeling..."
-- "If you're like most [role]..."
-- "Every day, [audience] struggles with..."
-- "We've all been there..."
-
-Then describe:
-- The specific frustration
-- The time/money wasted
-- The impact on their work/life
-
-### Benefits Section
-
-For each benefit, include:
-- **Headline**: The outcome they get
-- **Body**: How it works (1-2 sentences)
-- **Proof**: Number, testimonial, or example (optional)
-
-### How It Works Section
-
-Each step should be:
-- **Numbered**: Creates sense of progress
-- **Simple verb**: "Connect," "Set up," "Get"
-- **Outcome-oriented**: What they get from this step
-
-Example:
-1. Connect your tools (takes 2 minutes)
-2. Set your preferences
-3. Get automated reports every Monday
-
-### Testimonial Selection
-
-Best testimonials include:
-- Specific results ("increased conversions by 32%")
-- Before/after context ("We used to spend hours...")
-- Role + company for credibility
-- Something quotable and specific
-
-Avoid testimonials that just say:
-- "Great product!"
-- "Love it!"
-- "Easy to use!"
diff --git a/.agents/skills/copywriting/references/natural-transitions.md b/.agents/skills/copywriting/references/natural-transitions.md
deleted file mode 100644
index ee72faa..0000000
--- a/.agents/skills/copywriting/references/natural-transitions.md
+++ /dev/null
@@ -1,272 +0,0 @@
-# Natural Transitions
-
-Transitional phrases to guide readers through your content. Good signposting improves readability, user engagement, and helps search engines understand content structure.
-
-Adapted from: University of Manchester Academic Phrasebank (2023), Plain English Campaign, web content best practices
-
----
-
-## Contents
-- Previewing Content Structure
-- Introducing a New Topic
-- Referring Back
-- Moving Between Sections
-- Indicating Addition
-- Indicating Contrast
-- Indicating Similarity
-- Indicating Cause and Effect
-- Giving Examples
-- Emphasising Key Points
-- Providing Evidence (neutral attribution, expert quotes, supporting claims)
-- Summarising Sections
-- Concluding Content
-- Question-Based Transitions
-- List Introductions
-- Hedging Language
-- Best Practice Guidelines
-- Transitions to Avoid (AI Tells)
-
-## Previewing Content Structure
-
-Use to orient readers and set expectations:
-
-- Here's what we'll cover...
-- This guide walks you through...
-- Below, you'll find...
-- We'll start with X, then move to Y...
-- First, let's look at...
-- Let's break this down step by step.
-- The sections below explain...
-
----
-
-## Introducing a New Topic
-
-- When it comes to X,...
-- Regarding X,...
-- Speaking of X,...
-- Now let's talk about X.
-- Another key factor is...
-- X is worth exploring because...
-
----
-
-## Referring Back
-
-Use to connect ideas and reinforce key points:
-
-- As mentioned earlier,...
-- As we covered above,...
-- Remember when we discussed X?
-- Building on that point,...
-- Going back to X,...
-- Earlier, we explained that...
-
----
-
-## Moving Between Sections
-
-- Now let's look at...
-- Next up:...
-- Moving on to...
-- With that covered, let's turn to...
-- Now that you understand X, here's Y.
-- That brings us to...
-
----
-
-## Indicating Addition
-
-- Also,...
-- Plus,...
-- On top of that,...
-- What's more,...
-- Another benefit is...
-- Beyond that,...
-- In addition,...
-- There's also...
-
-**Note:** Use "moreover" and "furthermore" sparingly. They can sound AI-generated when overused.
-
----
-
-## Indicating Contrast
-
-- However,...
-- But,...
-- That said,...
-- On the flip side,...
-- In contrast,...
-- Unlike X, Y...
-- While X is true, Y...
-- Despite this,...
-
----
-
-## Indicating Similarity
-
-- Similarly,...
-- Likewise,...
-- In the same way,...
-- Just like X, Y also...
-- This mirrors...
-- The same applies to...
-
----
-
-## Indicating Cause and Effect
-
-- So,...
-- This means...
-- As a result,...
-- That's why...
-- Because of this,...
-- This leads to...
-- The outcome?...
-- Here's what happens:...
-
----
-
-## Giving Examples
-
-- For example,...
-- For instance,...
-- Here's an example:...
-- Take X, for instance.
-- Consider this:...
-- A good example is...
-- To illustrate,...
-- Like when...
-- Say you want to...
-
----
-
-## Emphasising Key Points
-
-- Here's the key takeaway:...
-- The important thing is...
-- What matters most is...
-- Don't miss this:...
-- Pay attention to...
-- This is critical:...
-- The bottom line?...
-
----
-
-## Providing Evidence
-
-Use when citing sources, data, or expert opinions:
-
-### Neutral attribution
-- According to [Source],...
-- [Source] reports that...
-- Research shows that...
-- Data from [Source] indicates...
-- A study by [Source] found...
-
-### Expert quotes
-- As [Expert] puts it,...
-- [Expert] explains,...
-- In the words of [Expert],...
-- [Expert] notes that...
-
-### Supporting claims
-- This is backed by...
-- Evidence suggests...
-- The numbers confirm...
-- This aligns with findings from...
-
----
-
-## Summarising Sections
-
-- To recap,...
-- Here's the short version:...
-- In short,...
-- The takeaway?...
-- So what does this mean?...
-- Let's pull this together:...
-- Quick summary:...
-
----
-
-## Concluding Content
-
-- Wrapping up,...
-- The bottom line is...
-- Here's what to do next:...
-- To sum up,...
-- Final thoughts:...
-- Ready to get started?...
-- Now it's your turn.
-
-**Note:** Avoid "In conclusion" at the start of a paragraph. It's overused and signals AI writing.
-
----
-
-## Question-Based Transitions
-
-Useful for conversational tone and featured snippet optimization:
-
-- So what does this mean for you?
-- But why does this matter?
-- How do you actually do this?
-- What's the catch?
-- Sound complicated? It's not.
-- Wondering where to start?
-- Still not sure? Here's the breakdown.
-
----
-
-## List Introductions
-
-For numbered lists and step-by-step content:
-
-- Here's how to do it:
-- Follow these steps:
-- The process is straightforward:
-- Here's what you need to know:
-- Key things to consider:
-- The main factors are:
-
----
-
-## Hedging Language
-
-For claims that need qualification or aren't absolute:
-
-- may, might, could
-- tends to, generally
-- often, usually, typically
-- in most cases
-- it appears that
-- evidence suggests
-- this can help
-- many experts believe
-
----
-
-## Best Practice Guidelines
-
-1. **Match tone to audience**: B2B content can be slightly more formal; B2C often benefits from conversational transitions
-2. **Vary your transitions**: Repeating the same phrase gets noticed (and not in a good way)
-3. **Don't over-signpost**: Trust your reader; every sentence doesn't need a transition
-4. **Use for scannability**: Transitions at paragraph starts help skimmers navigate
-5. **Keep it natural**: Read aloud; if it sounds forced, simplify
-6. **Front-load key info**: Put the important word or phrase early in the transition
-
----
-
-## Transitions to Avoid (AI Tells)
-
-These phrases are overused in AI-generated content:
-
-- "That being said,..."
-- "It's worth noting that..."
-- "At its core,..."
-- "In today's digital landscape,..."
-- "When it comes to the realm of..."
-- "This begs the question..."
-- "Let's delve into..."
-
-See the seo-audit skill's `references/ai-writing-detection.md` for a complete list of AI writing tells.
diff --git a/.agents/skills/database-query-optimization/SKILL.md b/.agents/skills/database-query-optimization/SKILL.md
deleted file mode 100644
index 9d6ed42..0000000
--- a/.agents/skills/database-query-optimization/SKILL.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-name: database-query-optimization
-description: Improve database query performance through indexing, query optimization, and execution plan analysis. Reduce response times and database load.
----
-
-# Database Query Optimization
-
-## Overview
-
-Slow database queries are a common performance bottleneck. Optimization through indexing, efficient queries, and caching dramatically improves application performance.
-
-## When to Use
-
-- Slow response times
-- High database CPU usage
-- Performance regression
-- New feature deployment
-- Regular maintenance
-
-## Instructions
-
-### 1. **Query Analysis**
-
-```sql
--- Analyze query performance
-
-EXPLAIN ANALYZE
-SELECT users.id, users.name, COUNT(orders.id) as order_count
-FROM users
-LEFT JOIN orders ON users.id = orders.user_id
-WHERE users.created_at > '2024-01-01'
-GROUP BY users.id, users.name
-ORDER BY order_count DESC;
-
--- Results show:
--- - Seq Scan (slow) vs Index Scan (fast)
--- - Rows: actual vs planned (high variance = bad)
--- - Execution time (milliseconds)
-
--- Key metrics:
--- - Sequential Scan: Full table read (slow)
--- - Index Scan: Uses index (fast)
--- - Nested Loop: Joins with loops
--- - Sort: In-memory or disk sort
-```
-
-### 2. **Indexing Strategy**
-
-```yaml
-Index Types:
-
-Single Column:
- CREATE INDEX idx_users_email ON users(email);
- Use: WHERE email = ?
- Size: Small, quick to create
-
-Composite Index:
- CREATE INDEX idx_orders_user_date
- ON orders(user_id, created_at);
- Use: WHERE user_id = ? AND created_at > ?
- Order: Most selective first
-
-Covering Index:
- CREATE INDEX idx_orders_covering
- ON orders(user_id) INCLUDE (total_amount);
- Benefit: No table lookup needed
-
-Partial Index:
- CREATE INDEX idx_active_users
- ON users(id) WHERE status = 'active';
- Benefit: Smaller, faster
-
-Full Text:
- CREATE FULLTEXT INDEX idx_search
- ON articles(title, content);
- Use: Text search queries
-
----
-
-Index Rules:
-
-- Create indexes for WHERE conditions
-- Create indexes for JOIN columns
-- Create indexes for ORDER BY
-- Don't over-index (slows writes)
-- Monitor index usage
-- Remove unused indexes
-- Update statistics regularly
-- Partial indexes for filtered queries
-
-Missing Index Query:
-SELECT object_name, equality_columns
-FROM sys.dm_db_missing_index_details
-ORDER BY equality_columns;
-```
-
-### 3. **Query Optimization Techniques**
-
-```python
-# Common optimization patterns
-
-# BEFORE (N+1 queries)
-for user in users:
- orders = db.query("SELECT * FROM orders WHERE user_id = ?", user.id)
- # 1 + N queries
-
-# AFTER (single query with JOIN)
-orders = db.query("""
- SELECT u.*, o.* FROM users u
- LEFT JOIN orders o ON u.id = o.user_id
- WHERE u.created_at > ?
-""", date_threshold)
-
-# BEFORE (inefficient WHERE)
-SELECT * FROM users
-WHERE LOWER(email) = LOWER('Test@Example.com')
-# Can't use index (function used)
-
-# AFTER (index-friendly)
-SELECT * FROM users
-WHERE email = 'test@example.com'
-# Case-insensitive constraint + index
-
-# BEFORE (wildcard at start)
-SELECT * FROM users WHERE email LIKE '%example.com'
-# Can't use index (wildcard at start)
-
-# AFTER (wildcard at end)
-SELECT * FROM users WHERE email LIKE 'user%'
-# Can use index
-
-# BEFORE (slow aggregation)
-SELECT user_id, COUNT(*) as cnt
-FROM orders
-GROUP BY user_id
-ORDER BY cnt DESC
-LIMIT 10
-
-# AFTER (pre-aggregated)
-SELECT user_id, order_count
-FROM user_order_stats
-WHERE order_count IS NOT NULL
-ORDER BY order_count DESC
-LIMIT 10
-```
-
-### 4. **Optimization Checklist**
-
-```yaml
-Analysis:
- [ ] Run EXPLAIN ANALYZE on slow queries
- [ ] Check actual vs estimated rows
- [ ] Look for sequential scans
- [ ] Identify expensive operations
- [ ] Compare execution plans
-
-Indexing:
- [ ] Index WHERE columns
- [ ] Index JOIN columns
- [ ] Index ORDER BY columns
- [ ] Check unused indexes
- [ ] Remove duplicate indexes
- [ ] Create composite indexes strategically
- [ ] Analyze index statistics
-
-Query Optimization:
- [ ] Remove unnecessary columns (SELECT *)
- [ ] Use JOINs instead of subqueries
- [ ] Avoid functions in WHERE
- [ ] Use wildcards carefully (avoid %)
- [ ] Batch operations
- [ ] Use LIMIT for result sets
- [ ] Archive old data
-
-Caching:
- [ ] Implement query caching
- [ ] Cache aggregations
- [ ] Use Redis for hot data
- [ ] Invalidate strategically
-
-Monitoring:
- [ ] Track slow queries
- [ ] Monitor index usage
- [ ] Set up alerts
- [ ] Regular statistics update
- [ ] Measure improvements
-
----
-
-Expected Improvements:
-
-With Proper Indexing:
- - Sequential Scan → Index Scan
- - Response time: 5 seconds → 50ms (100x faster)
- - CPU usage: 80% → 20%
- - Concurrent users: 100 → 1000
-
-Quick Wins:
- - Add index to frequently filtered column
- - Fix N+1 queries
- - Use LIMIT for large results
- - Archive old data
- - Expected: 20-50% improvement
-```
-
-## Key Points
-
-- EXPLAIN ANALYZE shows query execution
-- Indexes must match WHERE/JOIN/ORDER BY
-- Avoid functions in WHERE clauses
-- Fix N+1 queries (join instead of loop)
-- Monitor slow query log regularly
-- Stats updates needed for accuracy
-- Pre-calculate aggregations
-- Archive historical data
-- Use explain plans before/after
-- Measure and monitor continuously
diff --git a/.agents/skills/frontend-design/LICENSE.txt b/.agents/skills/frontend-design/LICENSE.txt
deleted file mode 100644
index f433b1a..0000000
--- a/.agents/skills/frontend-design/LICENSE.txt
+++ /dev/null
@@ -1,177 +0,0 @@
-
- Apache License
- Version 2.0, January 2004
- http://www.apache.org/licenses/
-
- TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
- 1. Definitions.
-
- "License" shall mean the terms and conditions for use, reproduction,
- and distribution as defined by Sections 1 through 9 of this document.
-
- "Licensor" shall mean the copyright owner or entity authorized by
- the copyright owner that is granting the License.
-
- "Legal Entity" shall mean the union of the acting entity and all
- other entities that control, are controlled by, or are under common
- control with that entity. For the purposes of this definition,
- "control" means (i) the power, direct or indirect, to cause the
- direction or management of such entity, whether by contract or
- otherwise, or (ii) ownership of fifty percent (50%) or more of the
- outstanding shares, or (iii) beneficial ownership of such entity.
-
- "You" (or "Your") shall mean an individual or Legal Entity
- exercising permissions granted by this License.
-
- "Source" form shall mean the preferred form for making modifications,
- including but not limited to software source code, documentation
- source, and configuration files.
-
- "Object" form shall mean any form resulting from mechanical
- transformation or translation of a Source form, including but
- not limited to compiled object code, generated documentation,
- and conversions to other media types.
-
- "Work" shall mean the work of authorship, whether in Source or
- Object form, made available under the License, as indicated by a
- copyright notice that is included in or attached to the work
- (an example is provided in the Appendix below).
-
- "Derivative Works" shall mean any work, whether in Source or Object
- form, that is based on (or derived from) the Work and for which the
- editorial revisions, annotations, elaborations, or other modifications
- represent, as a whole, an original work of authorship. For the purposes
- of this License, Derivative Works shall not include works that remain
- separable from, or merely link (or bind by name) to the interfaces of,
- the Work and Derivative Works thereof.
-
- "Contribution" shall mean any work of authorship, including
- the original version of the Work and any modifications or additions
- to that Work or Derivative Works thereof, that is intentionally
- submitted to Licensor for inclusion in the Work by the copyright owner
- or by an individual or Legal Entity authorized to submit on behalf of
- the copyright owner. For the purposes of this definition, "submitted"
- means any form of electronic, verbal, or written communication sent
- to the Licensor or its representatives, including but not limited to
- communication on electronic mailing lists, source code control systems,
- and issue tracking systems that are managed by, or on behalf of, the
- Licensor for the purpose of discussing and improving the Work, but
- excluding communication that is conspicuously marked or otherwise
- designated in writing by the copyright owner as "Not a Contribution."
-
- "Contributor" shall mean Licensor and any individual or Legal Entity
- on behalf of whom a Contribution has been received by Licensor and
- subsequently incorporated within the Work.
-
- 2. Grant of Copyright License. Subject to the terms and conditions of
- this License, each Contributor hereby grants to You a perpetual,
- worldwide, non-exclusive, no-charge, royalty-free, irrevocable
- copyright license to reproduce, prepare Derivative Works of,
- publicly display, publicly perform, sublicense, and distribute the
- Work and such Derivative Works in Source or Object form.
-
- 3. Grant of Patent License. Subject to the terms and conditions of
- this License, each Contributor hereby grants to You a perpetual,
- worldwide, non-exclusive, no-charge, royalty-free, irrevocable
- (except as stated in this section) patent license to make, have made,
- use, offer to sell, sell, import, and otherwise transfer the Work,
- where such license applies only to those patent claims licensable
- by such Contributor that are necessarily infringed by their
- Contribution(s) alone or by combination of their Contribution(s)
- with the Work to which such Contribution(s) was submitted. If You
- institute patent litigation against any entity (including a
- cross-claim or counterclaim in a lawsuit) alleging that the Work
- or a Contribution incorporated within the Work constitutes direct
- or contributory patent infringement, then any patent licenses
- granted to You under this License for that Work shall terminate
- as of the date such litigation is filed.
-
- 4. Redistribution. You may reproduce and distribute copies of the
- Work or Derivative Works thereof in any medium, with or without
- modifications, and in Source or Object form, provided that You
- meet the following conditions:
-
- (a) You must give any other recipients of the Work or
- Derivative Works a copy of this License; and
-
- (b) You must cause any modified files to carry prominent notices
- stating that You changed the files; and
-
- (c) You must retain, in the Source form of any Derivative Works
- that You distribute, all copyright, patent, trademark, and
- attribution notices from the Source form of the Work,
- excluding those notices that do not pertain to any part of
- the Derivative Works; and
-
- (d) If the Work includes a "NOTICE" text file as part of its
- distribution, then any Derivative Works that You distribute must
- include a readable copy of the attribution notices contained
- within such NOTICE file, excluding those notices that do not
- pertain to any part of the Derivative Works, in at least one
- of the following places: within a NOTICE text file distributed
- as part of the Derivative Works; within the Source form or
- documentation, if provided along with the Derivative Works; or,
- within a display generated by the Derivative Works, if and
- wherever such third-party notices normally appear. The contents
- of the NOTICE file are for informational purposes only and
- do not modify the License. You may add Your own attribution
- notices within Derivative Works that You distribute, alongside
- or as an addendum to the NOTICE text from the Work, provided
- that such additional attribution notices cannot be construed
- as modifying the License.
-
- You may add Your own copyright statement to Your modifications and
- may provide additional or different license terms and conditions
- for use, reproduction, or distribution of Your modifications, or
- for any such Derivative Works as a whole, provided Your use,
- reproduction, and distribution of the Work otherwise complies with
- the conditions stated in this License.
-
- 5. Submission of Contributions. Unless You explicitly state otherwise,
- any Contribution intentionally submitted for inclusion in the Work
- by You to the Licensor shall be under the terms and conditions of
- this License, without any additional terms or conditions.
- Notwithstanding the above, nothing herein shall supersede or modify
- the terms of any separate license agreement you may have executed
- with Licensor regarding such Contributions.
-
- 6. Trademarks. This License does not grant permission to use the trade
- names, trademarks, service marks, or product names of the Licensor,
- except as required for reasonable and customary use in describing the
- origin of the Work and reproducing the content of the NOTICE file.
-
- 7. Disclaimer of Warranty. Unless required by applicable law or
- agreed to in writing, Licensor provides the Work (and each
- Contributor provides its Contributions) on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
- implied, including, without limitation, any warranties or conditions
- of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
- PARTICULAR PURPOSE. You are solely responsible for determining the
- appropriateness of using or redistributing the Work and assume any
- risks associated with Your exercise of permissions under this License.
-
- 8. Limitation of Liability. In no event and under no legal theory,
- whether in tort (including negligence), contract, or otherwise,
- unless required by applicable law (such as deliberate and grossly
- negligent acts) or agreed to in writing, shall any Contributor be
- liable to You for damages, including any direct, indirect, special,
- incidental, or consequential damages of any character arising as a
- result of this License or out of the use or inability to use the
- Work (including but not limited to damages for loss of goodwill,
- work stoppage, computer failure or malfunction, or any and all
- other commercial damages or losses), even if such Contributor
- has been advised of the possibility of such damages.
-
- 9. Accepting Warranty or Additional Liability. While redistributing
- the Work or Derivative Works thereof, You may choose to offer,
- and charge a fee for, acceptance of support, warranty, indemnity,
- or other liability obligations and/or rights consistent with this
- License. However, in accepting such obligations, You may act only
- on Your own behalf and on Your sole responsibility, not on behalf
- of any other Contributor, and only if You agree to indemnify,
- defend, and hold each Contributor harmless for any liability
- incurred by, or claims asserted against, such Contributor by reason
- of your accepting any such warranty or additional liability.
-
- END OF TERMS AND CONDITIONS
diff --git a/.agents/skills/frontend-design/SKILL.md b/.agents/skills/frontend-design/SKILL.md
deleted file mode 100644
index 5be498e..0000000
--- a/.agents/skills/frontend-design/SKILL.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-name: frontend-design
-description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-license: Complete terms in LICENSE.txt
----
-
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
-
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
-
-## Design Thinking
-
-Before coding, understand the context and commit to a BOLD aesthetic direction:
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
-
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
-
-## Frontend Aesthetics Guidelines
-
-Focus on:
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
-
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
-
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
-
-Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
diff --git a/.agents/skills/interface-design/SKILL.md b/.agents/skills/interface-design/SKILL.md
deleted file mode 100644
index 9fe89c2..0000000
--- a/.agents/skills/interface-design/SKILL.md
+++ /dev/null
@@ -1,391 +0,0 @@
----
-name: interface-design
-description: This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).
----
-
-# Interface Design
-
-Build interface design with craft and consistency.
-
-## Scope
-
-**Use for:** Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.
-
-**Not for:** Landing pages, marketing sites, campaigns. Redirect those to `/frontend-design`.
-
----
-
-# The Problem
-
-You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.
-
-You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts. "Kitchen feel" that looks like every other app.
-
-This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.
-
-The process below helps. But process alone doesn't guarantee craft. You have to catch yourself.
-
----
-
-# Where Defaults Hide
-
-Defaults don't announce themselves. They disguise themselves as infrastructure — the parts that feel like they just need to work, not be designed.
-
-**Typography feels like a container.** Pick something readable, move on. But typography isn't holding your design — it IS your design. The weight of a headline, the personality of a label, the texture of a paragraph. These shape how the product feels before anyone reads a word. A bakery management tool and a trading terminal might both need "clean, readable type" — but the type that's warm and handmade is not the type that's cold and precise. If you're reaching for your usual font, you're not designing.
-
-**Navigation feels like scaffolding.** Build the sidebar, add the links, get to the real work. But navigation isn't around your product — it IS your product. Where you are, where you can go, what matters most. A page floating in space is a component demo, not software. The navigation teaches people how to think about the space they're in.
-
-**Data feels like presentation.** You have numbers, show numbers. But a number on screen is not design. The question is: what does this number mean to the person looking at it? What will they do with it? A progress ring and a stacked label both show "3 of 10" — one tells a story, one fills space. If you're reaching for number-on-label, you're not designing.
-
-**Token names feel like implementation detail.** But your CSS variables are design decisions. `--ink` and `--parchment` evoke a world. `--gray-700` and `--surface-2` evoke a template. Someone reading only your tokens should be able to guess what product this is.
-
-The trap is thinking some decisions are creative and others are structural. There are no structural decisions. Everything is design. The moment you stop asking "why this?" is the moment defaults take over.
-
----
-
-# Intent First
-
-Before touching code, answer these. Not in your head — out loud, to yourself or the user.
-
-**Who is this human?**
-Not "users." The actual person. Where are they when they open this? What's on their mind? What did they do 5 minutes ago, what will they do 5 minutes after? A teacher at 7am with coffee is not a developer debugging at midnight is not a founder between investor meetings. Their world shapes the interface.
-
-**What must they accomplish?**
-Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment. Approve the payment. The answer determines what leads, what follows, what hides.
-
-**What should this feel like?**
-Say it in words that mean something. "Clean and modern" means nothing — every AI says that. Warm like a notebook? Cold like a terminal? Dense like a trading floor? Calm like a reading app? The answer shapes color, type, spacing, density — everything.
-
-If you cannot answer these with specifics, stop. Ask the user. Do not guess. Do not default.
-
-## Every Choice Must Be A Choice
-
-For every decision, you must be able to explain WHY.
-
-- Why this layout and not another?
-- Why this color temperature?
-- Why this typeface?
-- Why this spacing scale?
-- Why this information hierarchy?
-
-If your answer is "it's common" or "it's clean" or "it works" — you haven't chosen. You've defaulted. Defaults are invisible. Invisible choices compound into generic output.
-
-**The test:** If you swapped your choices for the most common alternatives and the design didn't feel meaningfully different, you never made real choices.
-
-## Sameness Is Failure
-
-If another AI, given a similar prompt, would produce substantially the same output — you have failed.
-
-This is not about being different for its own sake. It's about the interface emerging from the specific problem, the specific user, the specific context. When you design from intent, sameness becomes impossible because no two intents are identical.
-
-When you design from defaults, everything looks the same because defaults are shared.
-
-## Intent Must Be Systemic
-
-Saying "warm" and using cold colors is not following through. Intent is not a label — it's a constraint that shapes every decision.
-
-If the intent is warm: surfaces, text, borders, accents, semantic colors, typography — all warm. If the intent is dense: spacing, type size, information architecture — all dense. If the intent is calm: motion, contrast, color saturation — all calm.
-
-Check your output against your stated intent. Does every token reinforce it? Or did you state an intent and then default anyway?
-
----
-
-# Product Domain Exploration
-
-This is where defaults get caught — or don't.
-
-Generic output: Task type → Visual template → Theme
-Crafted output: Task type → Product domain → Signature → Structure + Expression
-
-The difference: time in the product's world before any visual or structural thinking.
-
-## Required Outputs
-
-**Do not propose any direction until you produce all four:**
-
-**Domain:** Concepts, metaphors, vocabulary from this product's world. Not features — territory. Minimum 5.
-
-**Color world:** What colors exist naturally in this product's domain? Not "warm" or "cool" — go to the actual world. If this product were a physical space, what would you see? What colors belong there that don't belong elsewhere? List 5+.
-
-**Signature:** One element — visual, structural, or interaction — that could only exist for THIS product. If you can't name one, keep exploring.
-
-**Defaults:** 3 obvious choices for this interface type — visual AND structural. You can't avoid patterns you haven't named.
-
-## Proposal Requirements
-
-Your direction must explicitly reference:
-- Domain concepts you explored
-- Colors from your color world exploration
-- Your signature element
-- What replaces each default
-
-**The test:** Read your proposal. Remove the product name. Could someone identify what this is for? If not, it's generic. Explore deeper.
-
----
-
-# The Mandate
-
-**Before showing the user, look at what you made.**
-
-Ask yourself: "If they said this lacks craft, what would they mean?"
-
-That thing you just thought of — fix it first.
-
-Your first output is probably generic. That's normal. The work is catching it before the user has to.
-
-## The Checks
-
-Run these against your output before presenting:
-
-- **The swap test:** If you swapped the typeface for your usual one, would anyone notice? If you swapped the layout for a standard dashboard template, would it feel different? The places where swapping wouldn't matter are the places you defaulted.
-
-- **The squint test:** Blur your eyes. Can you still perceive hierarchy? Is anything jumping out harshly? Craft whispers.
-
-- **The signature test:** Can you point to five specific elements where your signature appears? Not "the overall feel" — actual components. A signature you can't locate doesn't exist.
-
-- **The token test:** Read your CSS variables out loud. Do they sound like they belong to this product's world, or could they belong to any project?
-
-If any check fails, iterate before showing.
-
----
-
-# Craft Foundations
-
-## Subtle Layering
-
-This is the backbone of craft. Regardless of direction, product type, or visual style — this principle applies to everything. You should barely notice the system working. When you look at Vercel's dashboard, you don't think "nice borders." You just understand the structure. The craft is invisible — that's how you know it's working.
-
-### Surface Elevation
-
-Surfaces stack. A dropdown sits above a card which sits above the page. Build a numbered system — base, then increasing elevation levels. In dark mode, higher elevation = slightly lighter. In light mode, higher elevation = slightly lighter or uses shadow.
-
-Each jump should be only a few percentage points of lightness. You can barely see the difference in isolation. But when surfaces stack, the hierarchy emerges. Whisper-quiet shifts that you feel rather than see.
-
-**Key decisions:**
-- **Sidebars:** Same background as canvas, not different. Different colors fragment the visual space into "sidebar world" and "content world." A subtle border is enough separation.
-- **Dropdowns:** One level above their parent surface. If both share the same level, the dropdown blends into the card and layering is lost.
-- **Inputs:** Slightly darker than their surroundings, not lighter. Inputs are "inset" — they receive content. A darker background signals "type here" without heavy borders.
-
-### Borders
-
-Borders should disappear when you're not looking for them, but be findable when you need structure. Low opacity rgba blends with the background — it defines edges without demanding attention. Solid hex borders look harsh in comparison.
-
-Build a progression — not all borders are equal. Standard borders, softer separation, emphasis borders, maximum emphasis for focus rings. Match intensity to the importance of the boundary.
-
-**The squint test:** Blur your eyes at the interface. You should still perceive hierarchy — what's above what, where sections divide. But nothing should jump out. No harsh lines. No jarring color shifts. Just quiet structure.
-
-This separates professional interfaces from amateur ones. Get this wrong and nothing else matters.
-
-## Infinite Expression
-
-Every pattern has infinite expressions. **No interface should look the same.**
-
-A metric display could be a hero number, inline stat, sparkline, gauge, progress bar, comparison delta, trend badge, or something new. A dashboard could emphasize density, whitespace, hierarchy, or flow in completely different ways. Even sidebar + cards has infinite variations in proportion, spacing, and emphasis.
-
-**Before building, ask:**
-- What's the ONE thing users do most here?
-- What products solve similar problems brilliantly? Study them.
-- Why would this interface feel designed for its purpose, not templated?
-
-**NEVER produce identical output.** Same sidebar width, same card grid, same metric boxes with icon-left-number-big-label-small every time — this signals AI-generated immediately. It's forgettable.
-
-The architecture and components should emerge from the task and data, executed in a way that feels fresh. Linear's cards don't look like Notion's. Vercel's metrics don't look like Stripe's. Same concepts, infinite expressions.
-
-## Color Lives Somewhere
-
-Every product exists in a world. That world has colors.
-
-Before you reach for a palette, spend time in the product's world. What would you see if you walked into the physical version of this space? What materials? What light? What objects?
-
-Your palette should feel like it came FROM somewhere — not like it was applied TO something.
-
-**Beyond Warm and Cold:** Temperature is one axis. Is this quiet or loud? Dense or spacious? Serious or playful? Geometric or organic? A trading terminal and a meditation app are both "focused" — completely different kinds of focus. Find the specific quality, not the generic label.
-
-**Color Carries Meaning:** Gray builds structure. Color communicates — status, action, emphasis, identity. Unmotivated color is noise. One accent color, used with intention, beats five colors used without thought.
-
----
-
-# Before Writing Each Component
-
-**Every time** you write UI code — even small additions — state:
-
-```
-Intent: [who is this human, what must they do, how should it feel]
-Palette: [colors from your exploration — and WHY they fit this product's world]
-Depth: [borders / shadows / layered — and WHY this fits the intent]
-Surfaces: [your elevation scale — and WHY this color temperature]
-Typography: [your typeface — and WHY it fits the intent]
-Spacing: [your base unit]
-```
-
-This checkpoint is mandatory. It forces you to connect every technical choice back to intent.
-
-If you can't explain WHY for each choice, you're defaulting. Stop and think.
-
----
-
-# Design Principles
-
-## Token Architecture
-
-Every color in your interface should trace back to a small set of primitives: foreground (text hierarchy), background (surface elevation), border (separation hierarchy), brand, and semantic (destructive, warning, success). No random hex values — everything maps to primitives.
-
-### Text Hierarchy
-
-Don't just have "text" and "gray text." Build four levels — primary, secondary, tertiary, muted. Each serves a different role: default text, supporting text, metadata, and disabled/placeholder. Use all four consistently. If you're only using two, your hierarchy is too flat.
-
-### Border Progression
-
-Borders aren't binary. Build a scale that matches intensity to importance — standard separation, softer separation, emphasis, maximum emphasis. Not every boundary deserves the same weight.
-
-### Control Tokens
-
-Form controls have specific needs. Don't reuse surface tokens — create dedicated ones for control backgrounds, control borders, and focus states. This lets you tune interactive elements independently from layout surfaces.
-
-## Spacing
-
-Pick a base unit and stick to multiples. Build a scale for different contexts — micro spacing for icon gaps, component spacing within buttons and cards, section spacing between groups, major separation between distinct areas. Random values signal no system.
-
-## Padding
-
-Keep it symmetrical. If one side has a value, others should match unless content naturally requires asymmetry.
-
-## Depth
-
-Choose ONE approach and commit:
-- **Borders-only** — Clean, technical. For dense tools.
-- **Subtle shadows** — Soft lift. For approachable products.
-- **Layered shadows** — Premium, dimensional. For cards that need presence.
-- **Surface color shifts** — Background tints establish hierarchy without shadows.
-
-Don't mix approaches.
-
-## Border Radius
-
-Sharper feels technical. Rounder feels friendly. Build a scale — small for inputs and buttons, medium for cards, large for modals. Don't mix sharp and soft randomly.
-
-## Typography
-
-Build distinct levels distinguishable at a glance. Headlines need weight and tight tracking for presence. Body needs comfortable weight for readability. Labels need medium weight that works at smaller sizes. Data needs monospace with tabular number spacing for alignment. Don't rely on size alone — combine size, weight, and letter-spacing.
-
-## Card Layouts
-
-A metric card doesn't have to look like a plan card doesn't have to look like a settings card. Design each card's internal structure for its specific content — but keep the surface treatment consistent: same border weight, shadow depth, corner radius, padding scale.
-
-## Controls
-
-Native `