-
-
- '''
-
-
-# Slide type mapping
-SLIDE_GENERATORS = {
- 'title': generate_title_slide,
- 'problem': generate_problem_slide,
- 'solution': generate_solution_slide,
- 'metrics': generate_metrics_slide,
- 'traction': generate_metrics_slide,
- 'chart': generate_chart_slide,
- 'testimonial': generate_testimonial_slide,
- 'cta': generate_cta_slide,
- 'closing': generate_cta_slide
-}
-
-
-def generate_deck(slides_data, title="Pitch Deck"):
- """Generate complete deck from slide data list"""
- slides_html = ""
- for slide in slides_data:
- slide_type = slide.get('type', 'title')
- generator = SLIDE_GENERATORS.get(slide_type)
- if generator:
- slides_html += generator(slide)
- else:
- print(f"Warning: Unknown slide type '{slide_type}'")
-
- # Calculate relative path to tokens CSS
- tokens_rel_path = "../../../assets/design-tokens.css"
-
- return SLIDE_TEMPLATE.format(
- title=title,
- tokens_css_path=tokens_rel_path,
- slides_content=slides_html
- )
-
-
-def main():
- parser = argparse.ArgumentParser(description="Generate brand-compliant slides")
- parser.add_argument("--json", "-j", help="JSON file with slide data")
- parser.add_argument("--output", "-o", help="Output HTML file path")
- parser.add_argument("--demo", action="store_true", help="Generate demo deck")
-
- args = parser.parse_args()
-
- if args.demo:
- # Demo deck showcasing all slide types
- demo_slides = [
- {
- 'type': 'title',
- 'badge': 'Investor Deck 2024',
- 'title': 'ClaudeKit Marketing',
- 'subtitle': 'Your AI marketing team. Always on.',
- 'cta': 'Join Waitlist',
- 'secondary_cta': 'See Demo',
- 'company': 'ClaudeKit',
- 'date': 'December 2024'
- },
- {
- 'type': 'problem',
- 'headline': 'Marketing teams are drowning',
- 'pain_1_title': 'Content Overload',
- 'pain_1_desc': 'Need to produce 10x content with same headcount',
- 'pain_2_title': 'Tool Fatigue',
- 'pain_2_desc': '15+ tools that don\'t talk to each other',
- 'pain_3_title': 'No Time to Think',
- 'pain_3_desc': 'Strategy suffers when execution consumes all hours',
- 'company': 'ClaudeKit',
- 'page': '2'
- },
- {
- 'type': 'solution',
- 'headline': 'AI agents that actually get marketing',
- 'feature_1_title': 'Content Creation',
- 'feature_1_desc': 'Blog posts, social, email - all on brand, all on time',
- 'feature_2_title': 'Campaign Management',
- 'feature_2_desc': 'Multi-channel orchestration with one command',
- 'feature_3_title': 'Analytics & Insights',
- 'feature_3_desc': 'Real-time optimization without the spreadsheets',
- 'company': 'ClaudeKit',
- 'page': '3'
- },
- {
- 'type': 'metrics',
- 'headline': 'Early traction speaks volumes',
- 'metrics': [
- {'value': '500+', 'label': 'Beta Users'},
- {'value': '85%', 'label': 'Weekly Active'},
- {'value': '4.9', 'label': 'NPS Score'},
- {'value': '50hrs', 'label': 'Saved/Week'}
- ],
- 'company': 'ClaudeKit',
- 'page': '4'
- },
- {
- 'type': 'chart',
- 'badge': 'Revenue',
- 'headline': 'Growing month over month',
- 'chart_title': 'MRR Growth ($K)',
- 'bars': [
- {'label': 'Sep', 'value': 20, 'display': '$5K'},
- {'label': 'Oct', 'value': 40, 'display': '$12K'},
- {'label': 'Nov', 'value': 70, 'display': '$28K'},
- {'label': 'Dec', 'value': 100, 'display': '$45K'}
- ],
- 'company': 'ClaudeKit',
- 'page': '5'
- },
- {
- 'type': 'testimonial',
- 'quote': 'ClaudeKit replaced 3 tools and 2 contractors. Our content output tripled while costs dropped 60%.',
- 'author': 'Sarah Chen',
- 'role': 'Head of Marketing, TechStartup',
- 'company': 'ClaudeKit',
- 'page': '6'
- },
- {
- 'type': 'cta',
- 'headline': 'Ship campaigns while you sleep',
- 'subheadline': 'Early access available. Limited spots.',
- 'cta': 'Join the Waitlist',
- 'contact': 'hello@claudekit.ai',
- 'website': 'claudekit.ai'
- }
- ]
-
- html = generate_deck(demo_slides, "ClaudeKit Marketing - Pitch Deck")
-
- OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
- output_path = OUTPUT_DIR / f"demo-pitch-{datetime.now().strftime('%y%m%d')}.html"
- output_path.write_text(html, encoding='utf-8')
- print(f"Demo deck generated: {output_path}")
-
- elif args.json:
- with open(args.json, 'r') as f:
- data = json.load(f)
-
- html = generate_deck(data.get('slides', []), data.get('title', 'Presentation'))
-
- output_path = Path(args.output) if args.output else OUTPUT_DIR / f"deck-{datetime.now().strftime('%y%m%d-%H%M')}.html"
- output_path.parent.mkdir(parents=True, exist_ok=True)
- output_path.write_text(html, encoding='utf-8')
- print(f"Deck generated: {output_path}")
-
- else:
- parser.print_help()
-
-
-if __name__ == "__main__":
- main()
diff --git a/.agents/skills/ckm-design-system/scripts/generate-tokens.cjs b/.agents/skills/ckm-design-system/scripts/generate-tokens.cjs
deleted file mode 100644
index 73cc7d7..0000000
--- a/.agents/skills/ckm-design-system/scripts/generate-tokens.cjs
+++ /dev/null
@@ -1,205 +0,0 @@
-#!/usr/bin/env node
-/**
- * Generate CSS variables from design tokens JSON
- *
- * Usage:
- * node generate-tokens.cjs --config tokens.json -o tokens.css
- * node generate-tokens.cjs --config tokens.json --format tailwind
- */
-
-const fs = require('fs');
-const path = require('path');
-
-/**
- * Parse command line arguments
- */
-function parseArgs() {
- const args = process.argv.slice(2);
- const options = {
- config: null,
- output: null,
- format: 'css' // css | tailwind
- };
-
- for (let i = 0; i < args.length; i++) {
- if (args[i] === '--config' || args[i] === '-c') {
- options.config = args[++i];
- } else if (args[i] === '--output' || args[i] === '-o') {
- options.output = args[++i];
- } else if (args[i] === '--format' || args[i] === '-f') {
- options.format = args[++i];
- } else if (args[i] === '--help' || args[i] === '-h') {
- console.log(`
-Usage: node generate-tokens.cjs [options]
-
-Options:
- -c, --config Input JSON token file (required)
- -o, --output Output file (default: stdout)
- -f, --format Output format: css | tailwind (default: css)
- -h, --help Show this help
- `);
- process.exit(0);
- }
- }
-
- return options;
-}
-
-/**
- * Resolve token references like {primitive.color.blue.600}
- */
-function resolveReference(value, tokens) {
- if (typeof value !== 'string' || !value.startsWith('{')) {
- return value;
- }
-
- const path = value.slice(1, -1).split('.');
- let result = tokens;
-
- for (const key of path) {
- result = result?.[key];
- }
-
- if (result?.$value) {
- return resolveReference(result.$value, tokens);
- }
-
- return result || value;
-}
-
-/**
- * Convert token name to CSS variable name
- */
-function toCssVarName(path) {
- return '--' + path.join('-').replace(/\./g, '-');
-}
-
-/**
- * Flatten tokens into CSS variables
- */
-function flattenTokens(obj, tokens, prefix = [], result = {}) {
- for (const [key, value] of Object.entries(obj)) {
- const currentPath = [...prefix, key];
-
- if (value && typeof value === 'object') {
- if (value.$value !== undefined) {
- // This is a token
- const cssVar = toCssVarName(currentPath);
- const resolvedValue = resolveReference(value.$value, tokens);
- result[cssVar] = resolvedValue;
- } else {
- // Recurse into nested object
- flattenTokens(value, tokens, currentPath, result);
- }
- }
- }
-
- return result;
-}
-
-/**
- * Generate CSS output
- */
-function generateCSS(tokens) {
- const primitive = flattenTokens(tokens.primitive || {}, tokens, ['primitive']);
- const semantic = flattenTokens(tokens.semantic || {}, tokens, []);
- const component = flattenTokens(tokens.component || {}, tokens, []);
- const darkSemantic = flattenTokens(tokens.dark?.semantic || {}, tokens, []);
-
- let css = `/* Design Tokens - Auto-generated */
-/* Do not edit directly - modify tokens.json instead */
-
-/* === PRIMITIVES === */
-:root {
-${Object.entries(primitive).map(([k, v]) => ` ${k}: ${v};`).join('\n')}
-}
-
-/* === SEMANTIC === */
-:root {
-${Object.entries(semantic).map(([k, v]) => ` ${k}: ${v};`).join('\n')}
-}
-
-/* === COMPONENTS === */
-:root {
-${Object.entries(component).map(([k, v]) => ` ${k}: ${v};`).join('\n')}
-}
-`;
-
- if (Object.keys(darkSemantic).length > 0) {
- css += `
-/* === DARK MODE === */
-.dark {
-${Object.entries(darkSemantic).map(([k, v]) => ` ${k}: ${v};`).join('\n')}
-}
-`;
- }
-
- return css;
-}
-
-/**
- * Generate Tailwind config output
- */
-function generateTailwind(tokens) {
- const semantic = flattenTokens(tokens.semantic || {}, tokens, []);
-
- // Extract colors for Tailwind
- const colors = {};
- for (const [key, value] of Object.entries(semantic)) {
- if (key.includes('color')) {
- const name = key.replace('--color-', '').replace(/-/g, '.');
- colors[name] = `var(${key})`;
- }
- }
-
- return `// Tailwind color config - Auto-generated
-// Add to tailwind.config.ts theme.extend.colors
-
-module.exports = {
- colors: ${JSON.stringify(colors, null, 2).replace(/"/g, "'")}
-};
-`;
-}
-
-/**
- * Main
- */
-function main() {
- const options = parseArgs();
-
- if (!options.config) {
- console.error('Error: --config is required');
- process.exit(1);
- }
-
- // Resolve config path
- const configPath = path.resolve(process.cwd(), options.config);
-
- if (!fs.existsSync(configPath)) {
- console.error(`Error: Config file not found: ${configPath}`);
- process.exit(1);
- }
-
- // Read and parse tokens
- const tokens = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
-
- // Generate output
- let output;
- if (options.format === 'tailwind') {
- output = generateTailwind(tokens);
- } else {
- output = generateCSS(tokens);
- }
-
- // Write output
- if (options.output) {
- const outputPath = path.resolve(process.cwd(), options.output);
- fs.mkdirSync(path.dirname(outputPath), { recursive: true });
- fs.writeFileSync(outputPath, output);
- console.log(`Generated: ${outputPath}`);
- } else {
- console.log(output);
- }
-}
-
-main();
diff --git a/.agents/skills/ckm-design-system/scripts/html-token-validator.py b/.agents/skills/ckm-design-system/scripts/html-token-validator.py
deleted file mode 100644
index a722498..0000000
--- a/.agents/skills/ckm-design-system/scripts/html-token-validator.py
+++ /dev/null
@@ -1,327 +0,0 @@
-#!/usr/bin/env python3
-"""
-HTML Design Token Validator
-Ensures all HTML assets (slides, infographics, etc.) use design tokens.
-Source of truth: assets/design-tokens.css
-
-Usage:
- python html-token-validator.py # Validate all HTML assets
- python html-token-validator.py --type slides # Validate only slides
- python html-token-validator.py --type infographics # Validate only infographics
- python html-token-validator.py path/to/file.html # Validate specific file
- python html-token-validator.py --fix # Auto-fix issues (WIP)
-"""
-
-import re
-import json
-import sys
-from pathlib import Path
-from typing import Dict, List, Tuple, Optional
-
-# Project root relative to this script
-PROJECT_ROOT = Path(__file__).parent.parent.parent.parent.parent
-TOKENS_JSON_PATH = PROJECT_ROOT / 'assets' / 'design-tokens.json'
-TOKENS_CSS_PATH = PROJECT_ROOT / 'assets' / 'design-tokens.css'
-
-# Asset directories to validate
-ASSET_DIRS = {
- 'slides': PROJECT_ROOT / 'assets' / 'designs' / 'slides',
- 'infographics': PROJECT_ROOT / 'assets' / 'infographics',
-}
-
-# Patterns that indicate hardcoded values (should use tokens)
-FORBIDDEN_PATTERNS = [
- (r'#[0-9A-Fa-f]{3,8}\b', 'hex color'),
- (r'rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)', 'rgb color'),
- (r'rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)', 'rgba color'),
- (r'hsl\([^)]+\)', 'hsl color'),
- (r"font-family:\s*'[^v][^a][^r][^']*',", 'hardcoded font'), # Exclude var()
- (r'font-family:\s*"[^v][^a][^r][^"]*",', 'hardcoded font'),
-]
-
-# Allowed rgba patterns (brand colors with transparency - CSS limitation)
-# These are derived from brand tokens but need rgba for transparency
-ALLOWED_RGBA_PATTERNS = [
- r'rgba\(\s*59\s*,\s*130\s*,\s*246', # --color-primary (#3B82F6)
- r'rgba\(\s*245\s*,\s*158\s*,\s*11', # --color-secondary (#F59E0B)
- r'rgba\(\s*16\s*,\s*185\s*,\s*129', # --color-accent (#10B981)
- r'rgba\(\s*20\s*,\s*184\s*,\s*166', # --color-accent alt (#14B8A6)
- r'rgba\(\s*0\s*,\s*0\s*,\s*0', # black transparency (common)
- r'rgba\(\s*255\s*,\s*255\s*,\s*255', # white transparency (common)
- r'rgba\(\s*15\s*,\s*23\s*,\s*42', # --color-surface (#0F172A)
- r'rgba\(\s*7\s*,\s*11\s*,\s*20', # --color-background (#070B14)
-]
-
-# Allowed exceptions (external images, etc.)
-ALLOWED_EXCEPTIONS = [
- 'pexels.com', 'unsplash.com', 'youtube.com', 'ytimg.com',
- 'googlefonts', 'fonts.googleapis.com', 'fonts.gstatic.com',
-]
-
-
-class ValidationResult:
- """Validation result for a single file."""
- def __init__(self, file_path: Path):
- self.file_path = file_path
- self.errors: List[str] = []
- self.warnings: List[str] = []
- self.passed = True
-
- def add_error(self, msg: str):
- self.errors.append(msg)
- self.passed = False
-
- def add_warning(self, msg: str):
- self.warnings.append(msg)
-
-
-def load_css_variables() -> Dict[str, str]:
- """Load CSS variables from design-tokens.css."""
- variables = {}
- if TOKENS_CSS_PATH.exists():
- content = TOKENS_CSS_PATH.read_text()
- # Extract --var-name: value patterns
- for match in re.finditer(r'(--[\w-]+):\s*([^;]+);', content):
- variables[match.group(1)] = match.group(2).strip()
- return variables
-
-
-def is_inside_block(content: str, match_pos: int, open_tag: str, close_tag: str) -> bool:
- """Check if position is inside a specific HTML block."""
- pre = content[:match_pos]
- tag_open = pre.rfind(open_tag)
- tag_close = pre.rfind(close_tag)
- return tag_open > tag_close
-
-
-def is_allowed_exception(context: str) -> bool:
- """Check if the hardcoded value is in an allowed exception context."""
- context_lower = context.lower()
- return any(exc in context_lower for exc in ALLOWED_EXCEPTIONS)
-
-
-def is_allowed_rgba(match_text: str) -> bool:
- """Check if rgba pattern uses brand colors (allowed for transparency)."""
- return any(re.match(pattern, match_text) for pattern in ALLOWED_RGBA_PATTERNS)
-
-
-def get_context(content: str, pos: int, chars: int = 100) -> str:
- """Get surrounding context for a match position."""
- start = max(0, pos - chars)
- end = min(len(content), pos + chars)
- return content[start:end]
-
-
-def validate_html(content: str, file_path: Path, verbose: bool = False) -> ValidationResult:
- """
- Validate HTML content for design token compliance.
-
- Checks:
- 1. design-tokens.css import present
- 2. No hardcoded colors in CSS (except in '):
- if verbose:
- result.add_warning(f"Allowed in ",High,https://nuxt.com/docs/guide/concepts/nuxt-lifecycle
-18,Lifecycle,Use onMounted for DOM access,Access DOM only after component is mounted,onMounted for DOM manipulation,Direct DOM access in setup,"onMounted(() => { document.getElementById('el') })","",High,https://nuxt.com/docs/api/composables/on-mounted
-19,Lifecycle,Use nextTick for post-render access,Wait for DOM updates before accessing elements,await nextTick() after state changes,Immediate DOM access after state change,"count.value++; await nextTick(); el.value.focus()","count.value++; el.value.focus()",Medium,https://nuxt.com/docs/api/utils/next-tick
-20,Lifecycle,Use onPrehydrate for pre-hydration logic,Run code before Nuxt hydrates the page,onPrehydrate for client setup,onMounted for hydration-critical code,"onPrehydrate(() => { console.log(window) })",onMounted for pre-hydration needs,Low,https://nuxt.com/docs/api/composables/on-prehydrate
-21,Server,Use server/api for API routes,Create API endpoints in server/api directory,server/api/users.ts for /api/users,Manual Express setup,server/api/hello.ts -> /api/hello,app.get('/api/hello'),High,https://nuxt.com/docs/guide/directory-structure/server
-22,Server,Use defineEventHandler for handlers,Define server route handlers,defineEventHandler for all handlers,export default function,"export default defineEventHandler((event) => { return { hello: 'world' } })","export default function(req, res) {}",High,https://nuxt.com/docs/guide/directory-structure/server
-23,Server,Use server/routes for non-api routes,Routes without /api prefix,server/routes for custom paths,server/api for non-api routes,server/routes/sitemap.xml.ts,server/api/sitemap.xml.ts,Medium,https://nuxt.com/docs/guide/directory-structure/server
-24,Server,Use getQuery and readBody for input,Access query params and request body,getQuery(event) readBody(event),Direct event access,"const { id } = getQuery(event)",event.node.req.query,Medium,https://nuxt.com/docs/guide/directory-structure/server
-25,Server,Validate server input,Always validate input in server handlers,Zod or similar for validation,Trust client input,"const body = await readBody(event); schema.parse(body)",const body = await readBody(event),High,https://nuxt.com/docs/guide/directory-structure/server
-26,State,Use useState for shared reactive state,SSR-friendly shared state across components,useState for cross-component state,ref for shared state,"const count = useState('count', () => 0)",const count = ref(0) in composable,High,https://nuxt.com/docs/api/composables/use-state
-27,State,Use unique keys for useState,Prevent state conflicts with unique keys,Descriptive unique keys for each state,Generic or duplicate keys,"useState('user-preferences', () => ({}))",useState('data') in multiple places,Medium,https://nuxt.com/docs/api/composables/use-state
-28,State,Use Pinia for complex state,Pinia for advanced state management,@pinia/nuxt for complex apps,Custom state management,useMainStore() with Pinia,Custom reactive store implementation,Medium,https://nuxt.com/docs/getting-started/state-management
-29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,"await callOnce(store.fetch)",await store.fetch() on every render,Medium,https://nuxt.com/docs/api/utils/call-once
-30,SEO,Use useSeoMeta for SEO tags,Type-safe SEO meta tag management,useSeoMeta for meta tags,useHead for simple meta,"useSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' })","useHead({ meta: [{ name: 'description', content: '...' }] })",High,https://nuxt.com/docs/api/composables/use-seo-meta
-31,SEO,Use reactive values in useSeoMeta,Dynamic SEO tags with refs or getters,Computed getters for dynamic values,Static values for dynamic content,"useSeoMeta({ title: () => post.value.title })","useSeoMeta({ title: post.value.title })",Medium,https://nuxt.com/docs/api/composables/use-seo-meta
-32,SEO,Use useHead for non-meta head elements,Scripts styles links in head,useHead for scripts and links,useSeoMeta for scripts,"useHead({ script: [{ src: '/analytics.js' }] })","useSeoMeta({ script: '...' })",Medium,https://nuxt.com/docs/api/composables/use-head
-33,SEO,Include OpenGraph tags,Add OG tags for social sharing,ogTitle ogDescription ogImage,Missing social preview,"useSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' })",No OG configuration,Medium,https://nuxt.com/docs/api/composables/use-seo-meta
-34,Middleware,Use defineNuxtRouteMiddleware,Define route middleware properly,defineNuxtRouteMiddleware wrapper,export default function,"export default defineNuxtRouteMiddleware((to, from) => {})","export default function(to, from) {}",High,https://nuxt.com/docs/guide/directory-structure/middleware
-35,Middleware,Use navigateTo for redirects,Redirect in middleware with navigateTo,return navigateTo('/login'),router.push in middleware,"if (!auth) return navigateTo('/login')","if (!auth) router.push('/login')",High,https://nuxt.com/docs/api/utils/navigate-to
-36,Middleware,Reference middleware in definePageMeta,Apply middleware to specific pages,middleware array in definePageMeta,Global middleware for page-specific,definePageMeta({ middleware: ['auth'] }),Global auth check for one page,Medium,https://nuxt.com/docs/guide/directory-structure/middleware
-37,Middleware,Use .global suffix for global middleware,Apply middleware to all routes,auth.global.ts for app-wide auth,Manual middleware on every page,middleware/auth.global.ts,middleware: ['auth'] on every page,Medium,https://nuxt.com/docs/guide/directory-structure/middleware
-38,ErrorHandling,Use createError for errors,Create errors with proper status codes,createError with statusCode,throw new Error,"throw createError({ statusCode: 404, statusMessage: 'Not Found' })",throw new Error('Not Found'),High,https://nuxt.com/docs/api/utils/create-error
-39,ErrorHandling,Use NuxtErrorBoundary for local errors,Handle errors within component subtree,NuxtErrorBoundary for component errors,Global error page for local errors,"",error.vue for component errors,Medium,https://nuxt.com/docs/getting-started/error-handling
-40,ErrorHandling,Use clearError to recover from errors,Clear error state and optionally redirect,clearError({ redirect: '/' }),Manual error state reset,clearError({ redirect: '/home' }),error.value = null,Medium,https://nuxt.com/docs/api/utils/clear-error
-41,ErrorHandling,Use short statusMessage,Keep statusMessage brief for security,Short generic messages,Detailed error info in statusMessage,"createError({ statusCode: 400, statusMessage: 'Bad Request' })","createError({ statusMessage: 'Invalid user ID: 123' })",High,https://nuxt.com/docs/getting-started/error-handling
-42,Link,Use NuxtLink for internal navigation,Client-side navigation with prefetching, for internal links, for internal links,About,About,High,https://nuxt.com/docs/api/components/nuxt-link
-43,Link,Configure prefetch behavior,Control when prefetching occurs,prefetchOn for interaction-based,Default prefetch for low-priority,"",Always default prefetch,Low,https://nuxt.com/docs/api/components/nuxt-link
-44,Link,Use useRouter for programmatic navigation,Navigate programmatically,useRouter().push() for navigation,Direct window.location,"const router = useRouter(); router.push('/dashboard')",window.location.href = '/dashboard',Medium,https://nuxt.com/docs/api/composables/use-router
-45,Link,Use navigateTo in composables,Navigate outside components,navigateTo() in middleware or plugins,useRouter in non-component code,return navigateTo('/login'),router.push in middleware,Medium,https://nuxt.com/docs/api/utils/navigate-to
-46,AutoImports,Leverage auto-imports,Use auto-imported composables directly,Direct use of ref computed useFetch,Manual imports for Nuxt composables,"const count = ref(0)","import { ref } from 'vue'; const count = ref(0)",Medium,https://nuxt.com/docs/guide/concepts/auto-imports
-47,AutoImports,Use #imports for explicit imports,Explicit imports when needed,#imports for clarity or disabled auto-imports,"import from 'vue' when auto-import enabled","import { ref } from '#imports'","import { ref } from 'vue'",Low,https://nuxt.com/docs/guide/concepts/auto-imports
-48,AutoImports,Configure third-party auto-imports,Add external package auto-imports,imports.presets in nuxt.config,Manual imports everywhere,"imports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] }",import { useI18n } everywhere,Low,https://nuxt.com/docs/guide/concepts/auto-imports
-49,Plugins,Use defineNuxtPlugin,Define plugins properly,defineNuxtPlugin wrapper,export default function,"export default defineNuxtPlugin((nuxtApp) => {})","export default function(ctx) {}",High,https://nuxt.com/docs/guide/directory-structure/plugins
-50,Plugins,Use provide for injection,Provide helpers across app,return { provide: {} } for type safety,nuxtApp.provide without types,"return { provide: { hello: (name) => `Hello ${name}!` } }","nuxtApp.provide('hello', fn)",Medium,https://nuxt.com/docs/guide/directory-structure/plugins
-51,Plugins,Use .client or .server suffix,Control plugin execution environment,plugin.client.ts for client-only,if (process.client) checks,analytics.client.ts,"if (process.client) { // analytics }",Medium,https://nuxt.com/docs/guide/directory-structure/plugins
-52,Environment,Use runtimeConfig for env vars,Access environment variables safely,runtimeConfig in nuxt.config,process.env directly,"runtimeConfig: { apiSecret: '', public: { apiBase: '' } }",process.env.API_SECRET in components,High,https://nuxt.com/docs/guide/going-further/runtime-config
-53,Environment,Use NUXT_ prefix for env override,Override config with environment variables,NUXT_API_SECRET NUXT_PUBLIC_API_BASE,Custom env var names,NUXT_PUBLIC_API_BASE=https://api.example.com,API_BASE=https://api.example.com,High,https://nuxt.com/docs/guide/going-further/runtime-config
-54,Environment,Access public config with useRuntimeConfig,Get public config in components,useRuntimeConfig().public,Direct process.env access,const config = useRuntimeConfig(); config.public.apiBase,process.env.NUXT_PUBLIC_API_BASE,High,https://nuxt.com/docs/api/composables/use-runtime-config
-55,Environment,Keep secrets in private config,Server-only secrets in runtimeConfig root,runtimeConfig.apiSecret (server only),Secrets in public config,runtimeConfig: { dbPassword: '' },runtimeConfig: { public: { dbPassword: '' } },High,https://nuxt.com/docs/guide/going-further/runtime-config
-56,Performance,Use Lazy prefix for code splitting,Lazy load components with Lazy prefix, for below-fold,Eager load all components,, for hidden content,Medium,https://nuxt.com/docs/guide/directory-structure/components
-57,Performance,Use useLazyFetch for non-blocking data,Alias for useFetch with lazy: true,useLazyFetch for secondary data,useFetch for all requests,"const { data } = useLazyFetch('/api/comments')",await useFetch for comments section,Medium,https://nuxt.com/docs/api/composables/use-lazy-fetch
-58,Performance,Use lazy hydration for interactivity,Delay component hydration until needed,LazyComponent with hydration strategy,Immediate hydration for all,, in footer,Low,https://nuxt.com/docs/guide/going-further/experimental-features
diff --git a/.agents/skills/ui-ux-pro-max/data/stacks/react-native.csv b/.agents/skills/ui-ux-pro-max/data/stacks/react-native.csv
deleted file mode 100644
index 209e893..0000000
--- a/.agents/skills/ui-ux-pro-max/data/stacks/react-native.csv
+++ /dev/null
@@ -1,52 +0,0 @@
-No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
-1,Components,Use functional components,Hooks-based components are standard,Functional components with hooks,Class components,const App = () => { },class App extends Component,Medium,https://reactnative.dev/docs/intro-react
-2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,,500+ line component,Medium,
-3,Components,Use TypeScript,Type safety for props and state,TypeScript for new projects,JavaScript without types,const Button: FC = () => { },const Button = (props) => { },Medium,
-4,Components,Colocate component files,Keep related files together,Component folder with styles,Flat structure,components/Button/index.tsx styles.ts,components/Button.tsx styles/button.ts,Low,
-5,Styling,Use StyleSheet.create,Optimized style objects,StyleSheet for all styles,Inline style objects,StyleSheet.create({ container: {} }),style={{ margin: 10 }},High,https://reactnative.dev/docs/stylesheet
-6,Styling,Avoid inline styles,Prevent object recreation,Styles in StyleSheet,Inline style objects in render,style={styles.container},"style={{ margin: 10, padding: 5 }}",Medium,
-7,Styling,Use flexbox for layout,React Native uses flexbox,flexDirection alignItems justifyContent,Absolute positioning everywhere,flexDirection: 'row',position: 'absolute' everywhere,Medium,https://reactnative.dev/docs/flexbox
-8,Styling,Handle platform differences,Platform-specific styles,Platform.select or .ios/.android files,Same styles for both platforms,"Platform.select({ ios: {}, android: {} })",Hardcoded iOS values,Medium,https://reactnative.dev/docs/platform-specific-code
-9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,
-10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/
-11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate('Home', { id })","navigation.navigate('Home', { id })",Medium,
-12,Navigation,Use deep linking,Support URL-based navigation,Configure linking prop,No deep link support,linking: { prefixes: [] },No linking configuration,Medium,https://reactnavigation.org/docs/deep-linking/
-13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,
-14,State,Use useState for local state,Simple component state,useState for UI state,Class component state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,
-15,State,Use useReducer for complex state,Complex state logic,useReducer for related state,Multiple useState for related values,useReducer(reducer initialState),5+ useState calls,Medium,
-16,State,Use context sparingly,Context for global state,Context for theme auth locale,Context for frequently changing data,ThemeContext for app theme,Context for list item data,Medium,
-17,State,Consider Zustand or Redux,External state management,Zustand for simple Redux for complex,useState for global state,create((set) => ({ })),Prop drilling global state,Medium,
-18,Lists,Use FlatList for long lists,Virtualized list rendering,FlatList for 50+ items,ScrollView with map,,{items.map()},High,https://reactnative.dev/docs/flatlist
-19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,
-20,Lists,Optimize renderItem,Memoize list item components,React.memo for list items,Inline render function,renderItem={({ item }) => },renderItem={({ item }) => ...},High,
-21,Lists,Use getItemLayout for fixed height,Skip measurement for performance,getItemLayout when height known,Dynamic measurement for fixed items,"getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",No getItemLayout for fixed height,Medium,
-22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,
-23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,
-24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,
-25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,
-26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,
-27,Performance,Use Hermes engine,Improved startup and memory,Enable Hermes in build,JavaScriptCore for new projects,hermes_enabled: true,hermes_enabled: false,Medium,https://reactnative.dev/docs/hermes
-28,Images,Use expo-image,Modern performant image component for React Native,"Use expo-image for caching, blurring, and performance",Use default Image for heavy lists or unmaintained libraries, (expo-image),,Medium,https://docs.expo.dev/versions/latest/sdk/image/
-29,Images,Specify image dimensions,Prevent layout shifts,width and height for remote images,No dimensions for network images,, no size,High,
-30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,
-31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,,,Medium,
-32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview
-33,Forms,Use proper keyboard types,Appropriate keyboard for input,keyboardType for input type,Default keyboard for all,"keyboardType=""email-address""","keyboardType=""default"" for email",Low,
-34,Touch,Use Pressable,Modern touch handling,Pressable for touch interactions,TouchableOpacity for new code,,,Low,https://reactnative.dev/docs/pressable
-35,Touch,Provide touch feedback,Visual feedback on press,Ripple or opacity change,No feedback on press,android_ripple={{ color: 'gray' }},No press feedback,Medium,
-36,Touch,Set hitSlop for small targets,Increase touch area,hitSlop for icons and small buttons,Tiny touch targets,hitSlop={{ top: 10 bottom: 10 }},44x44 with no hitSlop,Medium,
-37,Animation,Use Reanimated,High-performance animations,react-native-reanimated,Animated API for complex,useSharedValue useAnimatedStyle,Animated.timing for gesture,Medium,https://docs.swmansion.com/react-native-reanimated/
-38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,
-39,Animation,Use gesture handler,Native gesture recognition,react-native-gesture-handler,JS-based gesture handling,,,Medium,https://docs.swmansion.com/react-native-gesture-handler/
-40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? : },No loading state,Medium,
-41,Async,Handle errors gracefully,Error boundaries and fallbacks,Error UI for failed requests,Crash on error,{error ? : },No error handling,High,
-42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,
-43,Accessibility,Add accessibility labels,Describe UI elements,accessibilityLabel for all interactive,Missing labels,"accessibilityLabel=""Submit form""", without label,High,https://reactnative.dev/docs/accessibility
-44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,
-45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
-46,Testing,Use React Native Testing Library,Component testing,render and fireEvent,Enzyme or manual testing,render(),shallow(),Medium,https://callstack.github.io/react-native-testing-library/
-47,Testing,Test on real devices,Real device behavior,Test on iOS and Android devices,Simulator only,Device testing in CI,Simulator only testing,High,
-48,Testing,Use Detox for E2E,End-to-end testing,Detox for critical flows,Manual E2E testing,detox test,Manual testing only,Medium,https://wix.github.io/Detox/
-49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,
-50,Native,Use Expo when possible,Simplified development,Expo for standard features,Bare RN for simple apps,expo install package,react-native link package,Low,https://docs.expo.dev/
-51,Native,Handle permissions,Request permissions properly,Check and request permissions,Assume permissions granted,PermissionsAndroid.request(),Access without permission check,High,https://reactnative.dev/docs/permissionsandroid
diff --git a/.agents/skills/ui-ux-pro-max/data/stacks/react.csv b/.agents/skills/ui-ux-pro-max/data/stacks/react.csv
deleted file mode 100644
index 9f891f4..0000000
--- a/.agents/skills/ui-ux-pro-max/data/stacks/react.csv
+++ /dev/null
@@ -1,54 +0,0 @@
-No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
-1,State,Use useState for local state,Simple component state should use useState hook,useState for form inputs toggles counters,Class components this.state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,https://react.dev/reference/react/useState
-2,State,Lift state up when needed,Share state between siblings by lifting to parent,Lift shared state to common ancestor,Prop drilling through many levels,Parent holds state passes down,Deep prop chains,Medium,https://react.dev/learn/sharing-state-between-components
-3,State,Use useReducer for complex state,Complex state logic benefits from reducer pattern,useReducer for state with multiple sub-values,Multiple useState for related values,useReducer with action types,5+ useState calls that update together,Medium,https://react.dev/reference/react/useReducer
-4,State,Avoid unnecessary state,Derive values from existing state when possible,Compute derived values in render,Store derivable values in state,const total = items.reduce(...),"const [total, setTotal] = useState(0)",High,https://react.dev/learn/choosing-the-state-structure
-5,State,Initialize state lazily,Use function form for expensive initial state,useState(() => computeExpensive()),useState(computeExpensive()),useState(() => JSON.parse(data)),useState(JSON.parse(data)),Medium,https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
-6,Effects,Clean up effects,Return cleanup function for subscriptions timers,Return cleanup function in useEffect,No cleanup for subscriptions,useEffect(() => { sub(); return unsub; }),useEffect(() => { subscribe(); }),High,https://react.dev/reference/react/useEffect#connecting-to-an-external-system
-7,Effects,Specify dependencies correctly,Include all values used inside effect in deps array,All referenced values in dependency array,Empty deps with external references,[value] when using value in effect,[] when using props/state in effect,High,https://react.dev/reference/react/useEffect#specifying-reactive-dependencies
-8,Effects,Avoid unnecessary effects,Don't use effects for transforming data or events,Transform data during render handle events directly,useEffect for derived state or event handling,const filtered = items.filter(...),useEffect(() => setFiltered(items.filter(...))),High,https://react.dev/learn/you-might-not-need-an-effect
-9,Effects,Use refs for non-reactive values,Store values that don't trigger re-renders in refs,useRef for interval IDs DOM elements,useState for values that don't need render,const intervalRef = useRef(null),"const [intervalId, setIntervalId] = useState()",Medium,https://react.dev/reference/react/useRef
-10,Rendering,Use keys properly,Stable unique keys for list items,Use stable IDs as keys,Array index as key for dynamic lists,key={item.id},key={index},High,https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
-11,Rendering,Memoize expensive calculations,Use useMemo for costly computations,useMemo for expensive filtering/sorting,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo
-12,Rendering,Memoize callbacks passed to children,Use useCallback for functions passed as props,useCallback for handlers passed to memoized children,New function reference every render,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback
-13,Rendering,Use React.memo wisely,Wrap components that render often with same props,memo for pure components with stable props,memo everything or nothing,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo
-14,Rendering,Avoid inline object/array creation in JSX,Create objects outside render or memoize,Define style objects outside component,Inline objects in props,
,
,Medium,
-15,Components,Keep components small and focused,Single responsibility for each component,One concern per component,Large multi-purpose components,, with 500 lines,Medium,
-16,Components,Use composition over inheritance,Compose components using children and props,Use children prop for flexibility,Inheritance hierarchies,{content},class SpecialCard extends Card,Medium,https://react.dev/learn/thinking-in-react
-17,Components,Colocate related code,Keep related components and hooks together,Related files in same directory,Flat structure with many files,components/User/UserCard.tsx,components/UserCard.tsx + hooks/useUser.ts,Low,
-18,Components,Use fragments to avoid extra DOM,Fragment or <> for multiple elements without wrapper,<> for grouping without DOM node,Extra div wrappers,<>{items.map(...)},