@nockdev/awf 6.2.0 → 6.2.2

package/.agent/skills/cross-cutting/ui-ux-pro-max/data/prompts.yaml

@@ -1,180 +0,0 @@
-metadata:
-  skill: ui-ux-pro-max
-  domain: prompts
-  version: 6.2.0
-  updated: '2026-02-05'
-  migrated_from: prompts.csv
-  patterns_count: 23
-  columns:
-  - STT
-  - Style Category
-  - AI Prompt Keywords (Copy-Paste Ready)
-  - CSS/Technical Keywords
-  - Implementation Checklist
-  - Design System Variables
-patterns:
-- id: '1'
-  style_category: Minimalism & Swiss Style
-  ai_prompt_keywords_copy_paste_ready: 'Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows
-    and gradients. Focus on clarity and functionality.'
-  css_technical_keywords: 'display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary'
-  implementation_checklist: ☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ WCAG AAA contrast verified, ☐ Mobile responsive grid
-  design_system_variables: '--spacing: 2rem, --border-radius: 0px, --font-weight: 400-700, --shadow: none, --accent-color: single primary only'
-- id: '2'
-  style_category: Neumorphism
-  ai_prompt_keywords_copy_paste_ready: Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color
-    scheme with light/dark variations. Embossed/debossed effect on interactive elements.
-  css_technical_keywords: 'border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on
-    press'
-  implementation_checklist: ☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms
-  design_system_variables: '--border-radius: 14px, --shadow-soft-1: -5px -5px 15px, --shadow-soft-2: 5px 5px 15px, --color-light: #F5F5F5, --color-primary: single pastel'
-- id: '3'
-  style_category: Glassmorphism
-  ai_prompt_keywords_copy_paste_ready: Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle
-    borders, light source reflection, layered depth. Perfect for modern overlays and cards.
-  css_technical_keywords: 'backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth'
-  implementation_checklist: ☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked
-  design_system_variables: '--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG'
-- id: '4'
-  style_category: Brutalism
-  ai_prompt_keywords_copy_paste_ready: Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp
-    corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.
-  css_technical_keywords: 'border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF'
-  implementation_checklist: ☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional
-  design_system_variables: '--border-radius: 0px, --transition-duration: 0s, --font-weight: 700-900, --colors: primary only, --border-style: visible, --grid-visible: true'
-- id: '5'
-  style_category: 3D & Hyperrealism
-  ai_prompt_keywords_copy_paste_ready: Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based
-    motion. Include skeuomorphic elements with tactile detail.
-  css_technical_keywords: 'transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()'
-  implementation_checklist: ☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms
-  design_system_variables: '--perspective: 1000px, --parallax-layers: 5, --lighting-intensity: realistic, --shadow-depth: 20-40%, --animation-duration: 300-400ms'
-- id: '6'
-  style_category: Vibrant & Block-based
-  ai_prompt_keywords_copy_paste_ready: Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone
-    effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.
-  css_technical_keywords: 'display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement'
-  implementation_checklist: ☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)
-  design_system_variables: '--block-gap: 48px, --typography-size: 32px+, --color-palette: 4-6 vibrant colors, --animation: continuous pattern, --contrast-ratio: 7:1+'
-- id: '7'
-  style_category: Dark Mode (OLED)
-  ai_prompt_keywords_copy_paste_ready: Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green,
-    blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.
-  css_technical_keywords: 'background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark'
-  implementation_checklist: '☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background'
-  design_system_variables: '--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true'
-- id: '8'
-  style_category: Accessible & Ethical
-  ai_prompt_keywords_copy_paste_ready: 'Design with WCAG AAA compliance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px
-    ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.'
-  css_technical_keywords: 'color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer'
-  implementation_checklist: ☐ WCAG AAA verified, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px
-  design_system_variables: '--contrast-ratio: 7:1, --font-size-min: 16px, --focus-ring: 3-4px, --touch-target: 44x44px, --wcag-level: AAA, --keyboard-accessible: true, --sr-tested: true'
-- id: '9'
-  style_category: Claymorphism
-  ai_prompt_keywords_copy_paste_ready: Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer),
-    pastel colors, smooth animations. Perfect for children's apps and creative tools.
-  css_technical_keywords: 'border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)'
-  implementation_checklist: ☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions
-  design_system_variables: '--border-radius: 20px, --border-width: 3-4px, --shadow-inner: inset -2px -2px 8px, --shadow-outer: 4px 4px 8px, --color-palette: pastels, --animation: bounce'
-- id: '10'
-  style_category: Aurora UI
-  ai_prompt_keywords_copy_paste_ready: Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange,
-    purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.
-  css_technical_keywords: 'background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen
-    or multiply'
-  implementation_checklist: ☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified
-  design_system_variables: '--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true'
-- id: '11'
-  style_category: Retro-Futurism
-  ai_prompt_keywords_copy_paste_ready: Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects,
-    neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.
-  css_technical_keywords: 'color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate'
-  implementation_checklist: ☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present
-  design_system_variables: '--neon-colors: #0080FF #FF006E #00FFFF, --background: #000000, --font-family: monospace, --effect: glitch+glow, --scanline-opacity: 0.3, --crt-effect: true'
-- id: '12'
-  style_category: Flat Design
-  ai_prompt_keywords_copy_paste_ready: Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use
-    4-6 solid, bright colors in a limited palette with high saturation.
-  css_technical_keywords: 'box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG'
-  implementation_checklist: ☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified
-  design_system_variables: '--shadow: none, --color-palette: 4-6 solid, --border-radius: 2px, --gradient: none, --icons: simplified SVG, --animation: minimal 150-200ms'
-- id: '13'
-  style_category: Skeuomorphism
-  ai_prompt_keywords_copy_paste_ready: Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture
-    overlays, tactile press animations. Perfect for premium/luxury products.
-  css_technical_keywords: 'background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press
-    (300-500ms)'
-  implementation_checklist: ☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced
-  design_system_variables: '--gradient-stops: 8-12, --texture-overlay: noise+grain, --shadow-layers: 3+, --animation-duration: 300-500ms, --depth-effect: pronounced, --tactile: true'
-- id: '14'
-  style_category: Liquid Glass
-  ai_prompt_keywords_copy_paste_ready: Create a premium liquid glass effect with morphing shapes, flowing animations, chromatic aberration, iridescent gradients, smooth 400-600ms transitions. Use SVG morphing
-    for shape changes, dynamic blur, smooth color transitions creating a fluid, premium feel.
-  css_technical_keywords: 'animation: morphing SVG paths (400-600ms), backdrop-filter: blur + saturate, filter: hue-rotate + brightness, blend-mode: screen, background: iridescent gradient'
-  implementation_checklist: ☐ Morphing animations 400-600ms, ☐ Chromatic aberration applied, ☐ Dynamic blur active, ☐ Iridescent gradients, ☐ Smooth color transitions, ☐ Premium feel achieved
-  design_system_variables: '--morph-duration: 400-600ms, --blur-amount: 15px, --chromatic-aberration: true, --iridescent: true, --blend-mode: screen, --smooth-transitions: true'
-- id: '15'
-  style_category: Motion-Driven
-  ai_prompt_keywords_copy_paste_ready: Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations,
-    page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.
-  css_technical_keywords: 'animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms'
-  implementation_checklist: ☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected
-  design_system_variables: '--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth'
-- id: '16'
-  style_category: Micro-interactions
-  ai_prompt_keywords_copy_paste_ready: 'Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover
-    effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.'
-  css_technical_keywords: 'animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop'
-  implementation_checklist: ☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle
-  design_system_variables: '--micro-animation-duration: 50-100ms, --gesture-responsive: true, --haptic-feedback: true, --loading-animation: smooth, --state-feedback: success+error'
-- id: '17'
-  style_category: Inclusive Design
-  ai_prompt_keywords_copy_paste_ready: 'Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, WCAG AAA compliance, symbol-based
-    color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.'
-  css_technical_keywords: 'aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly
-    associated'
-  implementation_checklist: ☐ WCAG AAA verified, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback
-  design_system_variables: '--contrast-ratio: 7:1, --font-size: 16px+, --keyboard-accessible: true, --sr-compatible: true, --wcag-level: AAA, --color-symbols: true, --haptic: enabled'
-- id: '18'
-  style_category: Zero Interface
-  ai_prompt_keywords_copy_paste_ready: Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions,
-    smart suggestions, context-aware actions. Hide controls until needed.
-  css_technical_keywords: 'voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible'
-  implementation_checklist: ☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual
-  design_system_variables: '--voice-ui: enabled, --gesture-detection: active, --ai-predictions: smart, --progressive-disclosure: true, --visible-ui: minimal, --context-aware: true'
-- id: '19'
-  style_category: Soft UI Evolution
-  ai_prompt_keywords_copy_paste_ready: Design evolved neumorphism with improved contrast (WCAG AA+), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer
-    than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.
-  css_technical_keywords: 'box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+'
-  implementation_checklist: ☐ Improved contrast AA/AAA, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear
-  design_system_variables: '--shadow-soft: modern blend, --border-radius: 10px, --animation-duration: 200-300ms, --contrast-ratio: 4.5:1+, --color-hierarchy: improved, --wcag-level: AA+'
-- id: '20'
-  style_category: Bento Grids
-  ai_prompt_keywords_copy_paste_ready: 'Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7),
-    subtle borders, content-first, Apple-style aesthetic.'
-  css_technical_keywords: 'display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle'
-  implementation_checklist: ☐ Grid layout (CSS Grid), ☐ Rounded corners 16-24px, ☐ Varied card spans, ☐ Content fits card size, ☐ Responsive re-flow, ☐ Apple-like aesthetic
-  design_system_variables: '--grid-gap: 20px, --card-radius: 24px, --card-bg: #FFFFFF, --page-bg: #F5F5F7, --shadow: soft'
-- id: '21'
-  style_category: Neubrutalism
-  ai_prompt_keywords_copy_paste_ready: 'Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard
-    shadows (offset 4px 4px), raw aesthetic but functional.'
-  css_technical_keywords: 'border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients'
-  implementation_checklist: ☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look
-  design_system_variables: '--border-width: 3px, --shadow-offset: 4px, --shadow-color: #000, --colors: high saturation, --font: bold sans'
-- id: '22'
-  style_category: HUD / Sci-Fi FUI
-  ai_prompt_keywords_copy_paste_ready: 'Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced
-    tech fonts, glowing elements, transparency.'
-  css_technical_keywords: 'border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan'
-  implementation_checklist: ☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel
-  design_system_variables: '--hud-color: #00FFFF, --bg-color: rgba(0,10,20,0.9), --line-width: 1px, --glow: 0 0 5px, --font: monospace'
-- id: '23'
-  style_category: Pixel Art
-  ai_prompt_keywords_copy_paste_ready: 'Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI
-    elements, retro gaming feel.'
-  css_technical_keywords: 'font-family: ''Press Start 2P'', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing'
-  implementation_checklist: ☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout
-  design_system_variables: '--pixel-size: 4px, --font: pixel font, --border-style: pixel-shadow, --anti-alias: none'