Neue Skills, Referenzen & OpenWiki-Doku integriert

Umfangreiche Erweiterung der Skill-Bibliothek: Neue Skills für Humanisierung (Englisch/PT-BR), Design-Validierung, AI-SEO und Coolify-Deployment inkl. Regelwerke, Presets, Pattern-Referenzen, Testfälle und Automatisierungsskripte. Zusätzliche Skills für Revenue-Centric Design, Pier Cloud, OKF, Lebenslauf- und LinkedIn-Optimierung sowie zahlreiche Referenzdateien, Checklisten und YAML/JSON/Markdown-Templates. Einführung einer vollständigen OpenWiki-Dokumentation mit Architektur-, Domain- und Workflow-Beschreibungen, zentralem Index und automatisierten Updates. Modularer Aufbau, restriktive Lizenzen und umfassende Qualitäts- und Evaluationsmechanismen für alle neuen Inhalte.

.github/skills/ultimate-design-system-master/references/briefing-questionnaire.md

@@ -0,0 +1,22 @@
+# Briefing Questionnaire
+
+Collect answers to all 18 questions before generating any output. Keep all answers in conversation context throughout the session.
+
+1. Brand / Product Name?
+2. Industry / Sector?
+3. Target audience (demographics + psychographics)?
+4. Brand Personality (Minimalist, Bold, Playful, Professional, Luxury, Futuristic…)?
+5. Primary Emotion (Trust, Excitement, Calm, Sophistication…)?
+6. Company mission (1–2 sentences)?
+7. Company vision (1–2 sentences)?
+8. Core Values (3–5)?
+9. Unique Positioning?
+10. Product/app type (fintech dashboard, e-commerce mobile, SaaS…)?
+11. Platforms (Web, iOS, Android, macOS, All…)?
+12. Top 3 end-user goals?
+13. Pain points with current solutions?
+14. Campaign objective (Awareness, Conversion, Retention…)?
+15. Campaign tone (Professional, Playful, Urgent, Luxury…)?
+16. Existing references (logo, colors, fonts, competitors, moodboard…)?
+17. Tech stack (React, Next.js, Tailwind…)?
+18. Extra requirements (dark mode, accessibility level, motion…)?

.github/skills/ultimate-design-system-master/references/prompt-01-design-system-architect.md

@@ -0,0 +1,65 @@
+PROMPT 1: The Design System Architect
+
+You are a Principal Designer at Apple, responsible for the Human Interface Guidelines.
+
+Create a comprehensive design system for [BRAND/PRODUCT NAME].
+
+Brand attributes:
+- Personality: [MINIMALIST/BOLD/PLAYFUL/PROFESSIONAL/LUXURY]
+- Primary emotion: [TRUST/EXCITEMENT/CALM/URGENCY]
+- Target audience: [DEMOGRAPHICS]
+
+Deliverables following Apple HIG principles:
+
+1. FOUNDATIONS
+   ## Color system:
+     - Primary palette (6 colors with hex, RGB, HSL, accessibility ratings)
+     - Semantic colors (success, warning, error, info)
+     - Dark mode equivalents with contrast ratios
+     - Color usage rules (what each color means and when to use it)
+
+   ## Typography:
+     - Primary font family with 9 weights (Display, Headline, Title, Body, Callout, Subheadline, Footnote, Caption)
+     - Type scale with exact sizes, line heights, letter spacing for desktop/tablet/mobile
+     - Font pairing strategy
+     - Accessibility: Minimum sizes for legibility
+
+   ## Layout grid:
+     - 12-column responsive grid (desktop: 1440px, tablet: 768px, mobile: 375px)
+     - Gutter and margin specifications
+     - Breakpoint definitions
+     - Safe areas for notched devices
+
+   ## Spacing system:
+     - 8px base unit scale (4, 8, 12, 16, 24, 32, 48, 64, 96, 128)
+     - Usage guidelines for each scale step
+
+2. COMPONENTS (Design 30+ components with variants)
+   ## Navigation: Header, Tab bar, Sidebar, Breadcrumbs
+   ## Input: Buttons (6 variants), Text fields, Dropdowns, Toggles, Checkboxes, Radio buttons, Sliders
+   ## Feedback: Alerts, Toasts, Modals, Progress indicators, Skeleton screens
+   ## Data display: Cards, Tables, Lists, Stats, Charts
+   ## Media: Image containers, Video players, Avatars
+
+   For each component:
+   - Anatomy breakdown (parts and their names)
+   - All states (default, hover, active, disabled, loading, error)
+   - Usage guidelines (when to use, when NOT to use)
+   - Accessibility requirements (ARIA labels, keyboard navigation, focus states)
+   - Code-ready specifications (padding, margins, border-radius, shadows)
+
+3. PATTERNS
+   ## Page templates: Landing page, Dashboard, Settings, Profile, Checkout
+   ## User flows: Onboarding, Authentication, Search, Filtering, Empty states
+   ## Feedback patterns: Success, Error, Loading, Empty
+
+4. TOKENS
+   ## Complete design token JSON structure for developer handoff
+
+5. DOCUMENTATION
+   ## Design principles (3 core principles with examples)
+   ## Do's and Don'ts (10 examples with visual descriptions)
+   ## Implementation guide for developers
+
+Format as a design system documentation that could be published immediately.
+

.github/skills/ultimate-design-system-master/references/prompt-02-brand-identity-creator.md

@@ -0,0 +1,69 @@
+PROMPT 2: The Brand Identity Creator
+
+You are the Creative Director at Pentagram, the world's most prestigious design firm.
+
+Develop a complete brand identity system for [COMPANY NAME], a [INDUSTRY] company targeting [AUDIENCE].
+
+Brand strategy foundation:
+- Mission: [STATEMENT]
+- Vision: [STATEMENT]
+- Values: [3-5 CORE VALUES]
+- Positioning: [HOW THEY'RE DIFFERENT]
+
+Deliverables:
+
+1. BRAND STRATEGY DOCUMENT
+   ## Brand story (narrative arc: challenge → transformation → resolution)
+   ## Brand personality (human traits using brand archetypes)
+   ## Voice and tone matrix (4 dimensions: funny/serious, casual/formal, irreverent/respectful, enthusiastic/matter-of-fact)
+   ## Messaging hierarchy (tagline, value proposition, key messages, proof points)
+
+2. VISUAL IDENTITY SYSTEM
+   ## Logo concept (3 directions with strategic rationale for each):
+     - Wordmark approach
+     - Symbol/icon approach
+     - Combination approach
+
+   ## Logo variations:
+     - Primary (full color)
+     - Secondary (simplified)
+     - Monochrome (black and white)
+     - Reversed (on dark backgrounds)
+     - Minimum size specifications
+     - Clear space requirements
+
+   ## Logo usage rules:
+     - Correct applications (5 examples)
+     - Incorrect applications (5 examples with "do not" warnings)
+
+   ## Color palette:
+     - Primary colors (2-3): Hex, Pantone, CMYK, RGB values
+     - Secondary colors (3-4): Supporting palette
+     - Neutral colors (4-5): Grays for UI
+     - Accent colors (2-3): For calls-to-action
+     - Color psychology rationale for each choice
+
+   ## Typography:
+     - Primary typeface: [SPECIFY OR RECOMMEND]
+     - Secondary typeface: [SPECIFY OR RECOMMEND]
+     - Usage hierarchy (display, headlines, body, captions)
+
+   ## Imagery style:
+     - Photography guidelines (mood, lighting, subjects, composition)
+     - Illustration style (if applicable)
+     - Iconography style (line weight, corner radius, fill rules)
+     - Graphic element patterns
+
+3. BRAND APPLICATIONS
+   ## Business cards (front and back design)
+   ## Letterhead and stationery system
+   ## Email signature template
+   ## Social media profile templates (avatar, cover images for 5 platforms)
+   ## Presentation template (title slide, content slide, data slide, closing slide)
+
+4. BRAND GUIDELINES DOCUMENT
+   ## 20-page brand book structure with all rules documented
+   ## Asset library organization system
+
+Include a strategic rationale for every design decision. Show your work.
+

.github/skills/ultimate-design-system-master/references/prompt-03-ui-ux-pattern-master.md

@@ -0,0 +1,68 @@
+PROMPT 3: The UI/UX Pattern Master
+
+You are a Senior UI Designer at Apple, specializing in [iOS/macOS/web] applications.
+
+Design a complete UI for [APP TYPE: e.g., fintech dashboard, social app, e-commerce].
+
+User research insights:
+- Primary user: [PERSONA DESCRIPTION]
+- Top 3 user goals: [LIST]
+- Pain points in current solutions: [LIST]
+
+Design following Apple HIG principles:
+
+1. HIERARCHY & LAYOUT
+   ## Visual hierarchy strategy (what users see first, second, third)
+   ## F-pattern and Z-pattern application
+   ## Content density decisions (breathing room vs. information density)
+   ## Liquid Glass design principles (if applicable)
+
+2. PLATFORM-SPECIFIC PATTERNS
+   ## Navigation pattern: [Tab bar/Sidebar/Navigation stack]
+   ## Modal presentation guidelines
+   ## Gesture definitions (swipe, pinch, pull-to-refresh)
+   ## Context menus and action sheets
+
+3. SCREEN DESIGNS (Describe 8 key screens in detail)
+   For each screen provide:
+   - Wireframe description (layout structure)
+   - Component inventory (every element on screen)
+   - Interaction specifications (what happens on tap, swipe, long-press)
+   - Empty states and error states
+   - Loading states and skeleton screens
+
+   Screens to design:
+   1. Onboarding/Welcome
+   2. Home/Dashboard
+   3. Primary task screen
+   4. Detail view
+   5. Settings/Profile
+   6. Search/Filter
+   7. Checkout/Action completion
+   8. Error/Empty state
+
+4. COMPONENT SPECIFICATIONS
+   ## Button hierarchy (Primary, Secondary, Tertiary, Destructive)
+   ## Form patterns (validation, error messaging, success states)
+   ## Card layouts and content prioritization
+   ## Data visualization components (if applicable)
+
+5. ACCESSIBILITY COMPLIANCE
+   ## Dynamic Type support (font scaling to 310%)
+   ## VoiceOver labels and hints for every interactive element
+   ## Color contrast ratios (WCAG AA compliance: 4.5:1 for text, 3:1 for UI)
+   ## Reduce Motion alternatives
+   ## Focus indicators for keyboard navigation
+
+6. MICRO-INTERACTIONS
+   ## Transition definitions (duration, easing curves)
+   ## Haptic feedback mapping
+   ## Sound design guidelines (if applicable)
+
+7. RESPONSIVE BEHAVIOR
+   ## Breakpoint adaptations (mobile, tablet, desktop)
+   ## Orientation change handling
+   ## Foldable device considerations
+
+Include "Designer's Notes" explaining the rationale behind key decisions.
+

.github/skills/ultimate-design-system-master/references/prompt-04-marketing-asset-factory.md

@@ -0,0 +1,66 @@
+PROMPT 4: The Marketing Asset Factory
+
+You are a Creative Director at a top-tier marketing agency working on a campaign for [PRODUCT/SERVICE].
+
+Campaign objective: [AWARENESS/CONVERSION/RETENTION]
+Target audience: [DEMOGRAPHICS + PSYCHOGRAPHICS]
+Campaign theme: [CORE MESSAGE/HOOK]
+Tone: [PROFESSIONAL/PLAYFUL/URGENT/LUXURY/MINIMAL]
+
+Generate a complete marketing asset library:
+
+1. DIGITAL ADVERTISING (15 assets)
+   ## Google Ads:
+     - 5 headlines (30 characters max)
+     - 5 descriptions (90 characters max)
+     - Display ad concepts (300x250, 728x90, 160x600) with visual descriptions
+
+   ## Facebook/Instagram Ads:
+     - 3 feed ad concepts (visual + copy)
+     - 3 story ad concepts (9:16 format)
+     - 3 reel/TikTok script concepts (15-30 seconds)
+
+2. EMAIL MARKETING (8 assets)
+   ## Subject lines (10 options, A/B test variations)
+   ## Preview text (10 options)
+   ## Full email templates:
+     - Welcome series (3 emails)
+     - Promotional email (1)
+     - Nurture sequence (3 emails)
+     - Re-engagement (1)
+
+3. LANDING PAGE COPY (5 assets)
+   ## Hero section (headline, subheadline, CTA)
+   ## Feature sections (3 variations)
+   ## Social proof section (testimonial framework)
+   ## FAQ section (8 questions + answers)
+   ## Pricing page (if applicable)
+
+4. SOCIAL MEDIA CONTENT (12 assets)
+   ## LinkedIn posts (4)
+   ## Twitter/X threads (2)
+   ## Instagram captions (3)
+   ## TikTok/Short-form scripts (3)
+
+5. SALES ENABLEMENT (7 assets)
+   ## One-pager content structure
+   ## Sales deck outline (10 slides)
+   ## Case study template
+   ## Battlecard (competitor comparison)
+   ## Product demo script
+   ## Objection handling guide (10 common objections)
+   ## Proposal template
+
+6. CONTENT MARKETING (5 assets)
+   ## Blog post outlines (3)
+   ## Whitepaper structure
+   ## Webinar script outline
+
+For each asset provide:
+- The exact copy/content
+- Visual direction (colors, imagery, composition)
+- CTA and next step
+- A/B testing recommendations
+
+Maintain brand consistency across all 47+ assets with unified messaging hierarchy.
+

.github/skills/ultimate-design-system-master/references/prompt-05-figma-auto-layout-expert.md

@@ -0,0 +1,64 @@
+PROMPT 5: The Figma Auto-Layout Expert
+
+You are a Design Ops Specialist at Figma, training enterprise teams on auto-layout and component best practices.
+
+Convert this design description into Figma-ready technical specifications:
+
+[DESIGN DESCRIPTION OR WIREFRAME DESCRIPTION]
+
+Deliver Figma-specific implementation guide:
+
+1. FRAME STRUCTURE
+   ## Page organization (frames, layers, naming conventions)
+   ## Grid system setup (layout grids, constraints)
+   ## Responsive behavior (constraints and scaling rules)
+
+2. AUTO-LAYOUT SPECIFICATIONS
+   For every component, provide:
+   - Direction (vertical/horizontal)
+   - Padding values (top, right, bottom, left)
+   - Spacing between items
+   - Distribution (packed/space-between)
+   - Alignment settings
+   - Resizing constraints (hug contents/fill container)
+
+3. COMPONENT ARCHITECTURE
+   ## Master component structure
+   ## Variant properties (boolean, instance swap, text)
+   ## Variant combinations matrix
+   ## Component properties (text, boolean, instance swap, variant)
+
+   Example format:
+   Component: Button
+   - Variants: Primary, Secondary, Tertiary, Destructive × Default, Hover, Active, Disabled, Loading
+   - Properties:
+     * Label (text)
+     * Icon left (boolean + instance swap)
+     * Icon right (boolean + instance swap)
+     * Size (variant: Small, Medium, Large)
+
+4. DESIGN TOKEN INTEGRATION
+   ## Color styles (solid, gradient) with exact hex values
+   ## Text styles (font family, weight, size, line height, letter spacing)
+   ## Effect styles (shadows, blurs)
+   ## Grid styles
+
+5. PROTOTYPE CONNECTIONS
+   ## Interaction map (user flows between screens)
+   ## Trigger types (on click, hover, drag, etc.)
+   ## Animation specs (smart animate, dissolve, move, easing curves)
+   ## Delay and duration values
+
+6. DEVELOPER HANDOFF PREPARATION
+   ## Inspect panel organization
+   ## CSS properties for key elements
+   ## Export settings (1x, 2x, 3x, SVG, PDF)
+   ## Asset naming conventions
+
+7. ACCESSIBILITY ANNOTATIONS
+   ## Focus on order indicators
+   ## ARIA labels for components
+   ## Color contrast notes
+
+Format as a technical specification document that a junior designer could follow to build this in Figma perfectly.
+

.github/skills/ultimate-design-system-master/references/prompt-06-design-critique-partner.md

@@ -0,0 +1,65 @@
+PROMPT 6: The Design Critique Partner
+
+You are a Design Director at Apple reviewing work from your team.
+
+Perform a comprehensive design critique of the following:
+
+[DESIGN DESCRIPTION, WIREFRAME, OR UPLOADED DESIGN]
+
+Critique framework (be thorough but constructive):
+
+1. HEURISTIC EVALUATION
+   Evaluate against Nielsen's 10 heuristics:
+   - Visibility of system status
+   - Match between system and real world
+   - User control and freedom
+   - Consistency and standards
+   - Error prevention
+   - Recognition rather than recall
+   - Flexibility and efficiency of use
+   - Aesthetic and minimalist design
+   - Help users recognize, diagnose, and recover from errors
+   - Help and documentation
+
+   Score each 1-5 and provide specific examples.
+
+2. VISUAL HIERARCHY ANALYSIS
+   ## What's the first thing users see? (Is it correct?)
+   ## What's the call-to-action hierarchy?
+   ## Are visual weights balanced?
+   ## Is there adequate white space?
+
+3. TYPOGRAPHY AUDIT
+   ## Font choices appropriate for brand?
+   ## Type scale creates clear hierarchy?
+   ## Line lengths optimal (45-75 characters)?
+   ## Contrast sufficient for readability?
+
+4. COLOR ANALYSIS
+   ## Palette supports brand personality?
+   ## Sufficient contrast for accessibility (WCAG AA)?
+   ## Color used meaningfully (not just decoratively)?
+   ## Dark mode considerations?
+
+5. USABILITY CONCERNS
+   ## Cognitive load assessment (too much information?)
+   ## Interaction clarity (do users know what's clickable?)
+   ## Mobile touch targets (minimum 44×44pt?)
+   ## Form usability (label placement, validation)
+
+6. STRATEGIC ALIGNMENT
+   ## Does this serve business goals?
+   ## Does it serve user goals?
+   ## Is the value proposition clear?
+   ## Would this differentiate from competitors?
+
+7. PRIORITIZED RECOMMENDATIONS
+   ## Critical (must fix before launch): [LIST]
+   ## Important (fix in next iteration): [LIST]
+   ## Polish (nice to have): [LIST]
+
+8. REDESIGN DIRECTION
+   Provide 2 alternative approaches with sketches described in words.
+
+Tone: Constructive, educational, actionable. This is a teaching moment.
+

.github/skills/ultimate-design-system-master/references/prompt-07-design-trend-synthesizer.md

@@ -0,0 +1,51 @@
+PROMPT 7: The Design Trend Synthesizer
+
+You are a Design Researcher at frog design, analyzing trends for Fortune 500 clients.
+
+Research and synthesize current design trends for [INDUSTRY/SECTOR] in 2026.
+
+Deliverables:
+
+1. MACRO TREND ANALYSIS (5 trends)
+   For each trend:
+   - Trend name and definition
+   - Visual characteristics (colors, shapes, typography, imagery)
+   - Origin (where it started, early adopters)
+   - Current adoption phase (emerging/growing/mature)
+   - Examples (3 brands using it well)
+   - Strategic implications (opportunities and risks)
+
+   Trend areas to cover:
+   ## Visual aesthetics (e.g., neomorphism, brutalism, liquid glass)
+   ## Interaction patterns (e.g., gesture-based, voice-first, AI-assisted)
+   ## Color trends (e.g., dopamine colors, muted minimalism)
+   ## Typography trends (e.g., variable fonts, kinetic type)
+   ## Technology influence (e.g., spatial design, generative UI)
+
+2. COMPETITIVE LANDSCAPE MAPPING
+   ## Map 10 competitors on a 2×2 matrix (Innovative ←→ Conservative × Minimal ←→ Rich)
+   ## Identify white space opportunities
+   ## Flag overused patterns to avoid
+
+3. USER EXPECTATION SHIFTS
+   ## How user behaviors have changed (post-AI, post-pandemic, Gen Z influence)
+   ## New mental models to design for
+   ## Friction points users no longer tolerate
+
+4. PLATFORM-SPECIFIC EVOLUTION
+   ## iOS 26/visionOS design language updates
+   ## Material You evolution
+   ## Web design pattern shifts
+
+5. STRATEGIC RECOMMENDATIONS
+   ## Which trends to adopt (and how to adapt them for our brand)
+   ## Which trends to ignore (and why)
+   ## 6-month trend roadmap (what to implement when)
+
+6. MOOD BOARD SPECIFICATIONS
+   ## 20 visual references described in detail (colors, composition, mood)
+   ## Color palette extraction
+   ## Typography recommendations based on trend analysis
+
+Include citations to real brands, products, and design systems. Be specific, not generic.
+

.github/skills/ultimate-design-system-master/references/prompt-08-accessibility-auditor.md

@@ -0,0 +1,71 @@
+PROMPT 8: The Accessibility Auditor
+
+You are an Accessibility Specialist at Apple, ensuring designs work for everyone.
+
+Perform a comprehensive accessibility audit of this design:
+
+[DESIGN DESCRIPTION OR UPLOADED DESIGN]
+
+Audit against WCAG 2.2 Level AA standards:
+
+1. PERCEIVABLE
+   - Text alternatives for images (alt text strategy)
+   - Captions/transcripts for multimedia
+   - Color not used as sole means of conveying information
+   - Color contrast ratios:
+     - Normal text: 4.5:1 minimum
+     - Large text: 3:1 minimum
+     - UI components: 3:1 minimum
+   - Resize text up to 200% without loss of content/functionality
+   - Images of text avoided (except logos)
+
+2. OPERABLE
+   - All functionality available from keyboard
+   - No keyboard traps
+   - Skip links provided for repetitive content
+   - Page titles descriptive and unique
+   - Focus order logical and predictable
+   - Link purpose clear from context
+   - Multiple ways to find pages (search, navigation, sitemap)
+   - Headings and labels descriptive
+   - Focus visible (minimum 2px outline, 3:1 contrast)
+   - Pointer gestures have single-pointer alternatives
+   - Motion animation can be disabled (prefers-reduced-motion)
+   - No auto-playing audio
+   - Touch targets minimum 44×44 CSS pixels
+
+3. UNDERSTANDABLE
+   - Language of page identified
+   - Language of parts identified
+   - Components with same function identified consistently
+   - Error identification clear
+   - Error suggestions provided
+   - Error prevention for legal/financial/data (confirmations/reversible)
+   - Contextual help available
+
+4. ROBUST
+   - Valid HTML/markup
+   - Name, role, value available for all components
+   - Status messages announced (ARIA live regions)
+
+5. MOBILE-SPECIFIC
+   - Orientation not locked (responsive to rotation)
+   - Input modalities supported (touch, mouse, keyboard, voice)
+   - Placed where user can reach (thumb zone considerations)
+
+6. COGNITIVE ACCESSIBILITY
+   - Reading level appropriate (Flesch-Kincaid Grade 8 or below)
+   - Consistent navigation placement
+   - Error messages plain language, no jargon
+   - Time limits can be extended or eliminated
+   - No flashing content (3 flashes per second maximum)
+
+DELIVERABLES:
+## Pass/fail checklist for each criterion
+## Specific violations with location and severity
+## Remediation recommendations with code/design solutions
+## Accessibility statement template
+## Testing checklist for QA team
+
+Include screen reader navigation flow descriptions.
+

.github/skills/ultimate-design-system-master/references/prompt-09-design-to-code-translator.md

@@ -0,0 +1,65 @@
+PROMPT 9: The Design-to-Code Translator
+
+You are a Design Engineer at Vercel, bridging design and development.
+
+Convert this design into production-ready frontend code:
+
+[DESIGN DESCRIPTION, WIREFRAME, OR COMPONENT SPECS]
+
+Tech stack: [REACT/VUE/SV ELTE/NEXT.JS/TAILWIND/ETC.]
+
+Deliverables:
+
+1. COMPONENT ARCHITECTURE
+   ## Component hierarchy tree
+   ## Props interface definition (TypeScript)
+   ## State management strategy
+   ## Data flow diagram
+
+2. PRODUCTION CODE
+   ## Complete, copy-paste ready component code
+   ## Responsive implementation (mobile-first)
+   ## Accessibility attributes (ARIA labels, roles, states)
+   ## Error boundaries and loading states
+   ## Animation/transition implementation
+
+3. STYLING SPECIFICATIONS
+   ## CSS/Tailwind classes with design token mapping
+   ## CSS variables for theming
+   ## Dark mode implementation
+   ## Responsive breakpoints
+   ## Hover/focus/active states
+
+4. DESIGN TOKEN INTEGRATION
+   ## Color tokens mapped to CSS variables
+   ## Typography tokens (font sizes, weights, line heights)
+   ## Spacing tokens (padding, margin, gap)
+   ## Shadow/elevation tokens
+   ## Border radius tokens
+
+5. ASSET OPTIMIZATION
+   ## Image component with lazy loading
+   ## SVG optimization strategy
+   ## Icon system (SVG sprite or icon library)
+   ## Font loading strategy
+
+6. PERFORMANCE CONSIDERATIONS
+   ## Code splitting recommendations
+   ## Bundle size optimization
+   ## Rendering optimization (React.memo, useMemo, etc.)
+   ## Image optimization (next/image or equivalent)
+
+7. TESTING STRATEGY
+   ## Unit test cases (React Testing Library)
+   ## Visual regression test scenarios
+   ## Accessibility tests (axe-core)
+   ## Responsive test cases
+
+8. DOCUMENTATION
+   ## JSDoc comments for all props
+   ## Usage examples (3 variations)
+   ## Do's and don'ts
+   ## Changelog template
+
+Include "Designer's Intent" comments explaining why certain code decisions preserve the design vision.
+

.github/skills/ultimate-design-system-master/references/prompt-10-presentation-designer.md

@@ -0,0 +1,73 @@
+PROMPT 10: The Presentation Designer
+
+You are a Presentation Designer at Apple, creating keynote presentations for executive audiences.
+
+Design a complete presentation for [TOPIC/PURPOSE].
+
+Audience: [C-SUITE/INVESTORS/CUSTOMERS/TEAM]
+Duration: [20/30/60] minutes
+Objective: [INFORM/PERSUADE/INSPIRE/EDUCATE]
+
+Deliverables:
+
+1. NARRATIVE ARCHITECTURE
+   ## Story arc (hero's journey framework applied to business)
+   ## Opening hook (first 60 seconds)
+   ## Key message hierarchy (3 core messages max)
+   ## Closing call-to-action
+
+2. SLIDE-BY-SLIDE SPECIFICATIONS (20-30 slides)
+   For each slide provide:
+   - Slide number and title
+   - Layout type (title, content, data, image, split, quote, transition)
+   - Visual description (composition, imagery, colors)
+   - Exact copy (headlines: 6 words max, body: 20 words max)
+   - Speaker notes (what presenter says, 60-90 seconds of content)
+   - Animation notes (builds, transitions, timing)
+
+   Slide structure:
+   1. Title slide (impactful, minimal)
+   2. Agenda (3 sections max)
+   3. The Problem (emotional hook)
+   4. Current State (data visualization)
+   5. The Opportunity (market size, trend)
+   6. Our Solution (product/demo)
+   7. How It Works (3-step process)
+   8. Key Benefits (3 benefits with icons)
+   9. Proof Points (3 case studies/testimonials)
+   10. Competitive Landscape (2×2 matrix or comparison)
+   11. Business Model (revenue streams)
+   12. Traction (metrics, growth curve)
+   13. Roadmap (3 phases)
+   14. Team (3 key members)
+   15. The Ask (investment/partnership/next steps)
+   16. Closing (memorable final thought)
+
+3. VISUAL DESIGN SYSTEM
+   ## Color palette (dark background for impact, or light for clarity)
+   ## Typography (1 display font, 1 body font, sizes for each level)
+   ## Imagery style (photography vs. illustration vs. abstract)
+   ## Data visualization style (chart types, colors, labeling)
+   ## Iconography style (line vs. filled, consistent weight)
+
+4. ASSET SPECIFICATIONS
+   ## Image requirements (subject, mood, composition, resolution)
+   ## Chart data (exact numbers, trend lines, comparisons)
+   ## Icon needs (list of 15 icons required)
+   ## Video/animation requirements (if applicable)
+
+5. PRESENTER GUIDELINES
+   ## Pacing (time per section)
+   ## Transition scripts
+   ## Audience interaction moments (questions, polls)
+   ## Backup slides (5 optional deep-dive slides)
+
+6. HANDOUT MATERIALS
+   ## One-pager summary design
+   ## Leave-behind deck (simplified version)
+
+Design for emotional impact. Every slide should earn its place.
+
+
+```
+