diff --git a/bun.lock b/bun.lock index 210065ea3..d7218b068 100644 --- a/bun.lock +++ b/bun.lock @@ -5,6 +5,8 @@ "": { "name": "vibe-design-plugins", "dependencies": { + "lenis": "^1.3.16", + "motion": "^12.23.26", "tailwindcss": "^4.1.18", }, "devDependencies": { @@ -39,6 +41,18 @@ "bun-plugin-tailwind": ["bun-plugin-tailwind@0.1.2", "", { "peerDependencies": { "bun": ">=1.0.0" } }, "sha512-41jNC1tZRSK3s1o7pTNrLuQG8kL/0vR/JgiTmZAJ1eHwe0w5j6HFPKeqEk0WAD13jfrUC7+ULuewFBBCoADPpg=="], + "framer-motion": ["framer-motion@12.23.26", "", { "dependencies": { "motion-dom": "^12.23.23", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA=="], + + "lenis": ["lenis@1.3.16", "", { "peerDependencies": { "@nuxt/kit": ">=3.0.0", "react": ">=17.0.0", "vue": ">=3.0.0" }, "optionalPeers": ["@nuxt/kit", "react", "vue"] }, "sha512-KULpna+5TgRCDMSPx4SzJwtsjlz7EeoFCp4IDCXrlM73rLBAj34Egcl7GCLz/6+hXFOYt3DTBeTtJvTu45dJNA=="], + + "motion": ["motion@12.23.26", "", { "dependencies": { "framer-motion": "^12.23.26", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ=="], + + "motion-dom": ["motion-dom@12.23.23", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA=="], + + "motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="], + "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="], + + "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="], } } diff --git a/dist/claude-code/.claude/skills/color-and-contrast/SKILL.md b/dist/claude-code/.claude/skills/color-and-contrast/SKILL.md deleted file mode 100644 index f4450382f..000000000 --- a/dist/claude-code/.claude/skills/color-and-contrast/SKILL.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -name: color-and-contrast -description: Build sophisticated color systems balancing aesthetics with accessibility and function. Use this skill when establishing brand palettes, implementing theming, or ensuring WCAG compliance. Produces beautiful, accessible color implementations with systematic coherence across all theme variants. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. - -The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints. - -## Color System Thinking - -Before choosing colors, understand the strategic requirements: - -- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral. -- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text? -- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation. -- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast). - -**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable. - -Then build a color system that is: -- Accessible and WCAG compliant -- Systematically organized with clear roles -- Flexible enough for theming and variations -- Aesthetically cohesive and on-brand - -## Color Theory Fundamentals - -### Color Harmony & Relationships - -[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation] - -### Color Psychology & Meaning - -[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices] - -### Color Properties - -[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity] - -## Building Functional Palettes - -### Palette Structure - -[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors] - -### Generating Color Scales - -[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation] - -### The Dominant Color Principle - -[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit] - -## Contrast & Accessibility - -### WCAG Compliance - -[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions] - -### Testing & Tools - -[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification] - -### Accessible Color Combinations - -[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices] - -## Theming Architecture - -### Light & Dark Mode - -[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling] - -### CSS Custom Properties - -[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching] - -### Multi-Theme Systems - -[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance] - -## Advanced Color Techniques - -### Gradients & Effects - -[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques] - -### Transparency & Alpha - -[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects] - -### Dynamic Color - -[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback] - ---- - -**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes. - -**NEVER**: -- Rely on color alone to convey information -- Use color combinations that fail WCAG contrast requirements -- Create palettes with arbitrary color choices (every color needs a purpose) -- Ignore color blindness (8% of men, 0.5% of women) -- Use pure black (#000) or pure white (#fff) for large areas -- Create theme systems without testing all combinations - -Remember: Color is powerful. Use it deliberately, systematically, and inclusively. \ No newline at end of file diff --git a/dist/claude-code/.claude/skills/frontend-design/SKILL.md b/dist/claude-code/.claude/skills/frontend-design/SKILL.md index 600b6db41..7a0e469be 100644 --- a/dist/claude-code/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code/.claude/skills/frontend-design/SKILL.md @@ -1,6 +1,6 @@ --- 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, or applications. Generates creative, polished code that avoids generic AI aesthetics. +description: Create distinctive, production-grade frontend interfaces with comprehensive expertise in typography, color systems, spatial design, responsive layouts, interaction patterns, motion, and UX writing. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. license: Complete terms in LICENSE.txt --- @@ -39,4 +39,83 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo **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. \ No newline at end of file +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. + + + +## Design Patterns Reference + +This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. + +### What TO Do (Patterns) + +Focus on intentional, distinctive design choices: + +**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. + +**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. + +**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. + +**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity. Stagger reveals for orchestrated page loads. + +**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. + +**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. + +### What NOT to Do (Anti-Patterns) + +These patterns create generic "AI slop" aesthetics: + +**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, wrapping everything in rounded cards, decorative shadows without purpose. + +**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards. + +**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors. + +**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. + +These anti-patterns are baked into training data from countless generic templates. Without explicit guidance, AI reproduces them. This skill ensures your AI knows both what to do AND what to avoid. + +--- + +## Domain Reference Files + +For deeper expertise in specific design domains, consult these reference files: + +### Typography +For type systems, font selection, readability, and typographic hierarchy. +**See**: [reference/typography.md](reference/typography.md) + +### Color & Contrast +For color systems, palettes, accessibility, theming, and WCAG compliance. +**See**: [reference/color-and-contrast.md](reference/color-and-contrast.md) + +### Spatial Design +For spacing systems, grids, visual hierarchy, and composition. +**See**: [reference/spatial-design.md](reference/spatial-design.md) + +### Responsive Design +For mobile-first layouts, breakpoints, fluid design, and cross-device adaptation. +**See**: [reference/responsive-design.md](reference/responsive-design.md) + +### Interaction Design +For forms, states, feedback patterns, keyboard navigation, and touch optimization. +**See**: [reference/interaction-design.md](reference/interaction-design.md) + +### Motion Design +For animations, micro-interactions, transitions, and performance optimization. +**See**: [reference/motion-design.md](reference/motion-design.md) + +### UX Writing +For interface copy, error messages, microcopy, and voice/tone guidelines. +**See**: [reference/ux-writing.md](reference/ux-writing.md) + +--- + +## When to Use Reference Files + +- **Quick builds**: Use this main skill file for most frontend work +- **Deep dives**: Consult specific reference files when facing complex challenges in that domain +- **Systematic work**: When building design systems or establishing patterns, reference multiple domain files +- **Troubleshooting**: When something feels "off", check the relevant domain reference for best practices \ No newline at end of file diff --git a/dist/cursor/.cursor/rules/color-and-contrast.md b/dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md similarity index 95% rename from dist/cursor/.cursor/rules/color-and-contrast.md rename to dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md index 8dca853a4..736740d7d 100644 --- a/dist/cursor/.cursor/rules/color-and-contrast.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md @@ -1,4 +1,6 @@ -This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. +# Color & Contrast + +This reference guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints. @@ -101,4 +103,4 @@ Then build a color system that is: - Use pure black (#000) or pure white (#fff) for large areas - Create theme systems without testing all combinations -Remember: Color is powerful. Use it deliberately, systematically, and inclusively. \ No newline at end of file +Remember: Color is powerful. Use it deliberately, systematically, and inclusively. diff --git a/dist/cursor/.cursor/rules/interaction-design.md b/dist/claude-code/.claude/skills/frontend-design/reference/interaction-design.md similarity index 96% rename from dist/cursor/.cursor/rules/interaction-design.md rename to dist/claude-code/.claude/skills/frontend-design/reference/interaction-design.md index 93e76b717..da67ab32d 100644 --- a/dist/cursor/.cursor/rules/interaction-design.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/interaction-design.md @@ -1,4 +1,6 @@ -This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. +# Interaction Design + +This reference guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve. @@ -143,4 +145,4 @@ Then implement interactions that are: - Design only for mouse/pointer (test with keyboard and touch) - Use custom controls without proper ARIA and keyboard support -Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. \ No newline at end of file +Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. diff --git a/dist/cursor/.cursor/rules/motion-design.md b/dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md similarity index 95% rename from dist/cursor/.cursor/rules/motion-design.md rename to dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md index 9a602ac0d..be3683c03 100644 --- a/dist/cursor/.cursor/rules/motion-design.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md @@ -1,4 +1,6 @@ -This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. +# Motion Design + +This reference guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve. @@ -102,4 +104,4 @@ Then implement motion that is: - Animate without purpose (every animation should answer "why?") - Create animations that obscure content or block interaction -Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. \ No newline at end of file +Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. diff --git a/dist/cursor/.cursor/rules/responsive-design.md b/dist/claude-code/.claude/skills/frontend-design/reference/responsive-design.md similarity index 95% rename from dist/cursor/.cursor/rules/responsive-design.md rename to dist/claude-code/.claude/skills/frontend-design/reference/responsive-design.md index 9583133de..0a4515829 100644 --- a/dist/cursor/.cursor/rules/responsive-design.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/responsive-design.md @@ -1,4 +1,6 @@ -This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. +# Responsive Design + +This reference guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges. @@ -149,4 +151,4 @@ Then build responsive systems that are: - Forget about tablet (it's not just big phone or small desktop) - Assume all mobile devices are powerful (many users have older devices) -Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. \ No newline at end of file +Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. diff --git a/dist/cursor/.cursor/rules/spatial-design.md b/dist/claude-code/.claude/skills/frontend-design/reference/spatial-design.md similarity index 95% rename from dist/cursor/.cursor/rules/spatial-design.md rename to dist/claude-code/.claude/skills/frontend-design/reference/spatial-design.md index 95fdf046b..a8745966c 100644 --- a/dist/cursor/.cursor/rules/spatial-design.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/spatial-design.md @@ -1,4 +1,6 @@ -This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. +# Spatial Design + +This reference guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve. @@ -119,4 +121,4 @@ Then build layout systems that are: - Build responsive layouts that only work at breakpoint edges - Create hierarchy through size alone (combine multiple tools) -Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. \ No newline at end of file +Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. diff --git a/dist/cursor/.cursor/rules/typography.md b/dist/claude-code/.claude/skills/frontend-design/reference/typography.md similarity index 95% rename from dist/cursor/.cursor/rules/typography.md rename to dist/claude-code/.claude/skills/frontend-design/reference/typography.md index ba04728aa..eefffc474 100644 --- a/dist/cursor/.cursor/rules/typography.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/typography.md @@ -1,4 +1,6 @@ -This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. +# Typography + +This reference guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve. @@ -87,4 +89,4 @@ Then build or refine a typography system that is: - Use decorative fonts for body text - Implement arbitrary font sizes without a systematic scale -Remember: Typography is 95% of design. Master it, and everything else becomes easier. \ No newline at end of file +Remember: Typography is 95% of design. Master it, and everything else becomes easier. diff --git a/dist/cursor/.cursor/rules/ux-writing.md b/dist/claude-code/.claude/skills/frontend-design/reference/ux-writing.md similarity index 96% rename from dist/cursor/.cursor/rules/ux-writing.md rename to dist/claude-code/.claude/skills/frontend-design/reference/ux-writing.md index 51e4970ba..0966e455c 100644 --- a/dist/cursor/.cursor/rules/ux-writing.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/ux-writing.md @@ -1,4 +1,6 @@ -This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. +# UX Writing + +This reference guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve. @@ -194,4 +196,4 @@ Then write copy that is: - Use all caps (except acronyms) - End questions with periods (use question marks) -Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. diff --git a/dist/claude-code/.claude/skills/interaction-design/SKILL.md b/dist/claude-code/.claude/skills/interaction-design/SKILL.md deleted file mode 100644 index a680b12f8..000000000 --- a/dist/claude-code/.claude/skills/interaction-design/SKILL.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -name: interaction-design -description: Design intuitive interaction patterns that feel natural and provide clear feedback. Use this skill when building interactive components, designing forms, or establishing interaction standards. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. - -The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve. - -## Interaction Design Thinking - -Before designing interactions, understand the user's mental model and context: - -- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)? -- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances. -- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards. -- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation? - -**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface. - -Then implement interactions that are: -- Intuitive with clear affordances and feedback -- Accessible to all users and input methods -- Forgiving with error prevention and recovery -- Responsive with immediate feedback and state changes - -## Interaction States - -### Core States - -[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each] - -### State Transitions - -[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent] - -### Loading & Progress States - -[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting] - -## Affordances & Feedback - -### Visual Affordances - -[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting] - -### Immediate Feedback - -[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals] - -### Haptic & Sound Feedback - -[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback] - -## Form Design & Input Patterns - -### Form Layout & Structure - -[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms] - -### Input Field Design - -[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking] - -### Validation Patterns - -[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication] - -### Complex Input Types - -[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search] - -### Progressive Disclosure in Forms - -[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually] - -### Form Error Handling - -[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors] - -## Touch & Pointer Interactions - -### Touch Targets - -[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile] - -### Touch vs Pointer Patterns - -[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom] - -### Gesture Design - -[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability] - -## Keyboard Navigation - -### Focus Management - -[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals] - -### Keyboard Shortcuts - -[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows] - -### Accessible Interaction Patterns - -[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements] - -## Navigation Patterns - -### Menu & Navigation Design - -[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more] - -### Modal & Dialog Patterns - -[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns] - -### Command & Context Menus - -[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets] - -## Error Prevention & Recovery - -### Constraints & Guards - -[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms] - -### Error Messages - -[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors] - -### Undo & Redo - -[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save] - ---- - -**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard. - -**NEVER**: -- Remove focus indicators without providing visible alternatives (accessibility violation) -- Use placeholder text as labels (disappears on input, hard to remember) -- Make touch targets smaller than 44x44px -- Validate in real-time for long inputs (wait for blur) -- Show generic error messages ("Error occurred") - be specific and helpful -- Block user interaction without clear loading states -- Design only for mouse/pointer (test with keyboard and touch) -- Use custom controls without proper ARIA and keyboard support - -Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. \ No newline at end of file diff --git a/dist/claude-code/.claude/skills/motion-design/SKILL.md b/dist/claude-code/.claude/skills/motion-design/SKILL.md deleted file mode 100644 index 8df3ac09b..000000000 --- a/dist/claude-code/.claude/skills/motion-design/SKILL.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -name: motion-design -description: Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Use this skill when adding animations, building micro-interactions, or establishing motion systems. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. - -The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve. - -## Motion Design Thinking - -Before animating anything, understand the purpose and context: - -- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool." -- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined? -- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations? -- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation. - -**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation. - -Then implement motion that is: -- Purposeful with clear functional or emotional goals -- Performant with smooth 60fps execution -- Accessible with reduced motion alternatives -- Choreographed with thoughtful timing and sequencing - -## Classic Animation Principles - -### Disney's 12 Principles (Web Context) - -[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI] - -### Timing & Duration - -[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed] - -### Easing & Curves - -[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics] - -## Types of UI Animation - -### Micro-interactions - -[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators] - -### Page Transitions - -[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns] - -### State Transitions - -[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes] - -### Scrolling & Parallax - -[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer] - -## Choreography & Sequencing - -### Staggered Animations - -[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering] - -### Orchestrated Page Loads - -[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management] - -### Exit Choreography - -[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit] - -## Technical Implementation - -### CSS-Only Animation - -[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration] - -### JavaScript Animation - -[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)] - -### Performance Optimization - -[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring] - -## Motion Design Systems - -### Motion Tokens - -[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary] - -### Reduced Motion - -[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives] - ---- - -**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments. - -**NEVER**: -- Animate everything (animation fatigue is real) -- Use long durations (>500ms) for UI feedback (users will perceive lag) -- Animate layout properties (width, height, top, left) - use transform instead -- Ignore prefers-reduced-motion (accessibility requirement) -- Use animation to hide slow loading (fix the loading time) -- Animate without purpose (every animation should answer "why?") -- Create animations that obscure content or block interaction - -Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. \ No newline at end of file diff --git a/dist/claude-code/.claude/skills/responsive-design/SKILL.md b/dist/claude-code/.claude/skills/responsive-design/SKILL.md deleted file mode 100644 index 30e2da466..000000000 --- a/dist/claude-code/.claude/skills/responsive-design/SKILL.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -name: responsive-design -description: Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Use this skill when building mobile-first layouts, defining breakpoint strategies, or optimizing for touch. Produces fluid, performant experiences that feel native to each device while maintaining consistency. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. - -The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges. - -## Responsive Design Thinking - -Before implementing, understand the multi-device context: - -- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device? -- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work) -- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support? -- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions? -- **Content Priority**: What's essential on all devices vs optional on larger screens? - -**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context. - -Then build responsive systems that are: -- Mobile-first with progressive enhancement -- Fluid and adaptable across viewport sizes -- Optimized for different input methods -- Performant on constrained devices -- Contextually appropriate - -## Mobile-First Methodology - -### Why Mobile-First - -[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance] - -### Mobile-First Implementation - -[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach] - -## Breakpoint Strategies - -### Choosing Breakpoints - -[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints] - -### Breakpoint Architecture - -[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase] - -## Fluid & Adaptive Design - -### Fluid Typography - -[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability] - -### Fluid Spacing - -[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding] - -### Fluid Layouts - -[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers] - -### Container Queries - -[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills] - -## Layout Adaptation Patterns - -### Navigation Patterns - -[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars] - -### Content Reflow - -[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first] - -### Component Adaptation - -[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure] - -## Touch vs Pointer Optimization - -### Touch Target Sizing - -[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases] - -### Touch-Specific Interactions - -[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns] - -### Hybrid Devices - -[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces] - -## Viewport & Screen Considerations - -### Viewport Meta Tag - -[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale] - -### Safe Areas - -[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas] - -### Orientation Handling - -[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations] - -### High-DPI Screens - -[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images] - -## Responsive Images & Media - -### Responsive Images - -[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading] - -### Video Adaptation - -[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images] - -## Performance on Mobile - -### Mobile Performance Budget - -[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns] - -### Loading Strategies - -[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile] - -## Testing Strategies - -### Device Testing - -[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing] - -### Testing Checklist - -[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds] - ---- - -**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints. - -**NEVER**: -- Design desktop-first and try to cram into mobile -- Hide critical functionality on mobile -- Use device detection instead of feature detection -- Create separate mobile/desktop codebases (maintain one responsive codebase) -- Ignore landscape orientation -- Use fixed pixel values without considering smaller/larger screens -- Forget about tablet (it's not just big phone or small desktop) -- Assume all mobile devices are powerful (many users have older devices) - -Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. \ No newline at end of file diff --git a/dist/claude-code/.claude/skills/spatial-design/SKILL.md b/dist/claude-code/.claude/skills/spatial-design/SKILL.md deleted file mode 100644 index d2d8c0ccf..000000000 --- a/dist/claude-code/.claude/skills/spatial-design/SKILL.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -name: spatial-design -description: Master spatial design balancing systematic precision with artistic composition. Use this skill when building spacing systems, establishing grids, or improving visual hierarchy. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. - -The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve. - -## Spatial Design Thinking - -Before arranging elements, understand the compositional strategy: - -- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here. -- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric? -- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience. -- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)? - -**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning. - -Then build layout systems that are: -- Systematically consistent with clear spacing rules -- Visually balanced with intentional hierarchy -- Responsive and adaptive across viewports -- Compositionally strong with clear focal points - -## Classic Composition Principles - -### Visual Hierarchy Fundamentals - -[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)] - -### Balance & Symmetry - -[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution] - -### The Rule of Thirds & Golden Ratio - -[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules] - -### Focal Points & Eye Movement - -[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption] - -## Spacing Systems - -### Spacing Scales - -[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)] - -### Vertical Rhythm - -[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components] - -### Micro vs Macro Space - -[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room] - -### Spacing Token Architecture - -[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing] - -## Grid Systems & Layout Patterns - -### Grid Fundamentals - -[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)] - -### Classic Layout Patterns - -[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts] - -### Modern CSS Layout - -[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries] - -## Creating Visual Hierarchy - -### Hierarchy Through Scale - -[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression] - -### Hierarchy Through Weight & Color - -[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools] - -### Hierarchy Through Position - -[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis] - -## Responsive Spatial Design - -### Breakpoint Strategy - -[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints] - -### Layout Adaptation - -[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure] - -### Fluid Spacing & Layout - -[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing] - -## Depth & Layering - -### Creating Depth - -[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects] - -### Overlap & Intersection - -[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries] - ---- - -**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact. - -**NEVER**: -- Use arbitrary spacing values outside your scale (unless intentionally breaking the system) -- Create layouts that ignore natural reading patterns without good reason -- Forget that white space is a design element, not wasted space -- Make all spacing equal (variety creates hierarchy) -- Build responsive layouts that only work at breakpoint edges -- Create hierarchy through size alone (combine multiple tools) - -Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. \ No newline at end of file diff --git a/dist/claude-code/.claude/skills/typography/SKILL.md b/dist/claude-code/.claude/skills/typography/SKILL.md deleted file mode 100644 index e29ade268..000000000 --- a/dist/claude-code/.claude/skills/typography/SKILL.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -name: typography -description: Master typography systems that balance timeless principles with modern web capabilities. Use this skill when building type systems, improving readability, or establishing typographic hierarchy. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. - -The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve. - -## Typography Thinking - -Before implementing, understand the context and establish a clear typographic voice: - -- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages. -- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this. -- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements. -- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage. - -**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen. - -Then build or refine a typography system that is: -- Readable and accessible across devices and contexts -- Systematically coherent with clear hierarchy -- Performant and technically sound -- Aesthetically distinctive and appropriate for the brand - -## Classic Typography Principles - -### Vertical Rhythm & Baseline Grids - -[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components] - -### Modular Scale & Hierarchy - -[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance] - -### Readability & Measure - -[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions] - -## Font Selection & Pairing - -### Choosing Distinctive Fonts - -[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives] - -### Pairing Principles - -[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts] - -### Web Font Loading - -[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading] - -## Modern Web Typography - -### Fluid & Responsive Type - -[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales] - -### Advanced Features - -[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles] - -### Performance Optimization - -[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions] - -## Typography System Architecture - -### Token Structure - -[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing] - -### Implementation - -[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens] - -## Accessibility Considerations - -[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices] - ---- - -**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it. - -**NEVER**: -- Use more than 2-3 font families in a single project -- Sacrifice readability for aesthetic novelty -- Ignore font loading performance -- Skip fallback font definitions -- Use decorative fonts for body text -- Implement arbitrary font sizes without a systematic scale - -Remember: Typography is 95% of design. Master it, and everything else becomes easier. \ No newline at end of file diff --git a/dist/claude-code/.claude/skills/ux-writing/SKILL.md b/dist/claude-code/.claude/skills/ux-writing/SKILL.md deleted file mode 100644 index 42714b7bc..000000000 --- a/dist/claude-code/.claude/skills/ux-writing/SKILL.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -name: ux-writing -description: Write clear, helpful, and human interface copy that users understand immediately. Use this skill when crafting microcopy, improving error messages, or establishing voice and tone. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration. -license: Complete terms in LICENSE.txt ---- - -This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. - -The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve. - -## UX Writing Thinking - -Before writing, understand the context and user needs: - -- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know? -- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches. -- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience. -- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements. - -**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration. - -Then write copy that is: -- Clear and immediately understandable -- Concise without sacrificing clarity -- Helpful and action-oriented -- Human and empathetic -- Consistent in terminology and tone - -## Fundamental Principles - -### Clarity Over Cleverness - -[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"] - -### Concise But Complete - -[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity] - -### Active Voice - -[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language] - -### User-Focused Language - -[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model] - -### Consistency - -[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary] - -## Voice & Tone - -### Establishing Brand Voice - -[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction] - -### Adapting Tone to Context - -[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment] - -### Voice Across Cultures - -[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations] - -## Microcopy Excellence - -### Button & CTA Copy - -[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented] - -### Labels & Instructions - -[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples] - -### Placeholder Text - -[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions] - -### Tooltips & Help Text - -[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details] - -## Error Messages & Validation - -### Error Message Principles - -[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help] - -### Validation Feedback - -[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements] - -### Error Message Patterns - -[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s] - -## Forms & Inputs - -### Form Labels - -[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)] - -### Help Text - -[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints] - -### Confirmation Dialogs - -[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse] - -## System Messages - -### Success Messages - -[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief] - -### Loading States - -[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting] - -### Empty States - -[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end] - -## Navigation & Wayfinding - -### Navigation Labels - -[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent] - -### Breadcrumbs & Headers - -[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile] - -### Search & Filters - -[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging] - -## Content Hierarchy & Structure - -### Scannable Writing - -[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info] - -### Progressive Disclosure - -[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links] - -## Writing for Accessibility - -### Screen Reader Considerations - -[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels] - -### Plain Language - -[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms] - -### Text Alternatives - -[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI] - -## Internationalization (i18n) - -### Writing for Translation - -[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space] - -### Cultural Adaptation - -[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats] - -## Content Patterns by Type - -### Onboarding Copy - -[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition] - -### Settings & Preferences - -[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication] - -### Notifications - -[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention] - ---- - -**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human. - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" - explain what!) -- Use passive voice unnecessarily -- Vary terminology for variety (consistency matters) -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic) -- Assume technical knowledge -- Use all caps (except acronyms) -- End questions with periods (use question marks) - -Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/dist/codex/AGENTS.color-and-contrast.md b/dist/codex/AGENTS.color-and-contrast.md deleted file mode 100644 index 8dca853a4..000000000 --- a/dist/codex/AGENTS.color-and-contrast.md +++ /dev/null @@ -1,104 +0,0 @@ -This skill guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. - -The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints. - -## Color System Thinking - -Before choosing colors, understand the strategic requirements: - -- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral. -- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text? -- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation. -- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast). - -**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable. - -Then build a color system that is: -- Accessible and WCAG compliant -- Systematically organized with clear roles -- Flexible enough for theming and variations -- Aesthetically cohesive and on-brand - -## Color Theory Fundamentals - -### Color Harmony & Relationships - -[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation] - -### Color Psychology & Meaning - -[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices] - -### Color Properties - -[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity] - -## Building Functional Palettes - -### Palette Structure - -[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors] - -### Generating Color Scales - -[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation] - -### The Dominant Color Principle - -[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit] - -## Contrast & Accessibility - -### WCAG Compliance - -[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions] - -### Testing & Tools - -[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification] - -### Accessible Color Combinations - -[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices] - -## Theming Architecture - -### Light & Dark Mode - -[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling] - -### CSS Custom Properties - -[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching] - -### Multi-Theme Systems - -[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance] - -## Advanced Color Techniques - -### Gradients & Effects - -[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques] - -### Transparency & Alpha - -[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects] - -### Dynamic Color - -[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback] - ---- - -**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes. - -**NEVER**: -- Rely on color alone to convey information -- Use color combinations that fail WCAG contrast requirements -- Create palettes with arbitrary color choices (every color needs a purpose) -- Ignore color blindness (8% of men, 0.5% of women) -- Use pure black (#000) or pure white (#fff) for large areas -- Create theme systems without testing all combinations - -Remember: Color is powerful. Use it deliberately, systematically, and inclusively. \ No newline at end of file diff --git a/dist/codex/AGENTS.frontend-design.md b/dist/codex/AGENTS.frontend-design.md index cb330f33b..e07e95864 100644 --- a/dist/codex/AGENTS.frontend-design.md +++ b/dist/codex/AGENTS.frontend-design.md @@ -33,4 +33,1054 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo **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. \ No newline at end of file +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. + + + +## Design Patterns Reference + +This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. + +### What TO Do (Patterns) + +Focus on intentional, distinctive design choices: + +**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. + +**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. + +**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. + +**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity. Stagger reveals for orchestrated page loads. + +**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. + +**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. + +### What NOT to Do (Anti-Patterns) + +These patterns create generic "AI slop" aesthetics: + +**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, wrapping everything in rounded cards, decorative shadows without purpose. + +**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards. + +**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors. + +**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. + +These anti-patterns are baked into training data from countless generic templates. Without explicit guidance, AI reproduces them. This skill ensures your AI knows both what to do AND what to avoid. + +--- + +## Domain Reference Files + +For deeper expertise in specific design domains, consult these reference files: + +### Typography +For type systems, font selection, readability, and typographic hierarchy. +**See**: [reference/typography.md](reference/typography.md) + +### Color & Contrast +For color systems, palettes, accessibility, theming, and WCAG compliance. +**See**: [reference/color-and-contrast.md](reference/color-and-contrast.md) + +### Spatial Design +For spacing systems, grids, visual hierarchy, and composition. +**See**: [reference/spatial-design.md](reference/spatial-design.md) + +### Responsive Design +For mobile-first layouts, breakpoints, fluid design, and cross-device adaptation. +**See**: [reference/responsive-design.md](reference/responsive-design.md) + +### Interaction Design +For forms, states, feedback patterns, keyboard navigation, and touch optimization. +**See**: [reference/interaction-design.md](reference/interaction-design.md) + +### Motion Design +For animations, micro-interactions, transitions, and performance optimization. +**See**: [reference/motion-design.md](reference/motion-design.md) + +### UX Writing +For interface copy, error messages, microcopy, and voice/tone guidelines. +**See**: [reference/ux-writing.md](reference/ux-writing.md) + +--- + +## When to Use Reference Files + +- **Quick builds**: Use this main skill file for most frontend work +- **Deep dives**: Consult specific reference files when facing complex challenges in that domain +- **Systematic work**: When building design systems or establishing patterns, reference multiple domain files +- **Troubleshooting**: When something feels "off", check the relevant domain reference for best practices + +--- + +## Reference: ux-writing + +# UX Writing + +This reference guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. + +The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve. + +## UX Writing Thinking + +Before writing, understand the context and user needs: + +- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know? +- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches. +- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience. +- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements. + +**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration. + +Then write copy that is: +- Clear and immediately understandable +- Concise without sacrificing clarity +- Helpful and action-oriented +- Human and empathetic +- Consistent in terminology and tone + +## Fundamental Principles + +### Clarity Over Cleverness + +[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"] + +### Concise But Complete + +[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity] + +### Active Voice + +[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language] + +### User-Focused Language + +[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model] + +### Consistency + +[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary] + +## Voice & Tone + +### Establishing Brand Voice + +[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction] + +### Adapting Tone to Context + +[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment] + +### Voice Across Cultures + +[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations] + +## Microcopy Excellence + +### Button & CTA Copy + +[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented] + +### Labels & Instructions + +[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples] + +### Placeholder Text + +[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions] + +### Tooltips & Help Text + +[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details] + +## Error Messages & Validation + +### Error Message Principles + +[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help] + +### Validation Feedback + +[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements] + +### Error Message Patterns + +[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s] + +## Forms & Inputs + +### Form Labels + +[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)] + +### Help Text + +[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints] + +### Confirmation Dialogs + +[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse] + +## System Messages + +### Success Messages + +[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief] + +### Loading States + +[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting] + +### Empty States + +[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end] + +## Navigation & Wayfinding + +### Navigation Labels + +[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent] + +### Breadcrumbs & Headers + +[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile] + +### Search & Filters + +[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging] + +## Content Hierarchy & Structure + +### Scannable Writing + +[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info] + +### Progressive Disclosure + +[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links] + +## Writing for Accessibility + +### Screen Reader Considerations + +[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels] + +### Plain Language + +[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms] + +### Text Alternatives + +[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI] + +## Internationalization (i18n) + +### Writing for Translation + +[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space] + +### Cultural Adaptation + +[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats] + +## Content Patterns by Type + +### Onboarding Copy + +[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition] + +### Settings & Preferences + +[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication] + +### Notifications + +[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention] + +--- + +**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human. + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" - explain what!) +- Use passive voice unnecessarily +- Vary terminology for variety (consistency matters) +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic) +- Assume technical knowledge +- Use all caps (except acronyms) +- End questions with periods (use question marks) + +Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. + + +--- + +## Reference: spatial-design + +# Spatial Design + +This reference guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. + +The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve. + +## Spatial Design Thinking + +Before arranging elements, understand the compositional strategy: + +- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here. +- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric? +- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience. +- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)? + +**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning. + +Then build layout systems that are: +- Systematically consistent with clear spacing rules +- Visually balanced with intentional hierarchy +- Responsive and adaptive across viewports +- Compositionally strong with clear focal points + +## Classic Composition Principles + +### Visual Hierarchy Fundamentals + +[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)] + +### Balance & Symmetry + +[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution] + +### The Rule of Thirds & Golden Ratio + +[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules] + +### Focal Points & Eye Movement + +[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption] + +## Spacing Systems + +### Spacing Scales + +[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)] + +### Vertical Rhythm + +[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components] + +### Micro vs Macro Space + +[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room] + +### Spacing Token Architecture + +[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing] + +## Grid Systems & Layout Patterns + +### Grid Fundamentals + +[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)] + +### Classic Layout Patterns + +[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts] + +### Modern CSS Layout + +[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries] + +## Creating Visual Hierarchy + +### Hierarchy Through Scale + +[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression] + +### Hierarchy Through Weight & Color + +[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools] + +### Hierarchy Through Position + +[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis] + +## Responsive Spatial Design + +### Breakpoint Strategy + +[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints] + +### Layout Adaptation + +[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure] + +### Fluid Spacing & Layout + +[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing] + +## Depth & Layering + +### Creating Depth + +[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects] + +### Overlap & Intersection + +[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries] + +--- + +**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact. + +**NEVER**: +- Use arbitrary spacing values outside your scale (unless intentionally breaking the system) +- Create layouts that ignore natural reading patterns without good reason +- Forget that white space is a design element, not wasted space +- Make all spacing equal (variety creates hierarchy) +- Build responsive layouts that only work at breakpoint edges +- Create hierarchy through size alone (combine multiple tools) + +Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. + + +--- + +## Reference: motion-design + +# Motion Design + +This reference guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. + +The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve. + +## Motion Design Thinking + +Before animating anything, understand the purpose and context: + +- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool." +- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined? +- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations? +- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation. + +**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation. + +Then implement motion that is: +- Purposeful with clear functional or emotional goals +- Performant with smooth 60fps execution +- Accessible with reduced motion alternatives +- Choreographed with thoughtful timing and sequencing + +## Classic Animation Principles + +### Disney's 12 Principles (Web Context) + +[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI] + +### Timing & Duration + +[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed] + +### Easing & Curves + +[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics] + +## Types of UI Animation + +### Micro-interactions + +[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators] + +### Page Transitions + +[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns] + +### State Transitions + +[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes] + +### Scrolling & Parallax + +[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer] + +## Choreography & Sequencing + +### Staggered Animations + +[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering] + +### Orchestrated Page Loads + +[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management] + +### Exit Choreography + +[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit] + +## Technical Implementation + +### CSS-Only Animation + +[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration] + +### JavaScript Animation + +[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)] + +### Performance Optimization + +[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring] + +## Motion Design Systems + +### Motion Tokens + +[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary] + +### Reduced Motion + +[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives] + +--- + +**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments. + +**NEVER**: +- Animate everything (animation fatigue is real) +- Use long durations (>500ms) for UI feedback (users will perceive lag) +- Animate layout properties (width, height, top, left) - use transform instead +- Ignore prefers-reduced-motion (accessibility requirement) +- Use animation to hide slow loading (fix the loading time) +- Animate without purpose (every animation should answer "why?") +- Create animations that obscure content or block interaction + +Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. + + +--- + +## Reference: typography + +# Typography + +This reference guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. + +The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve. + +## Typography Thinking + +Before implementing, understand the context and establish a clear typographic voice: + +- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages. +- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this. +- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements. +- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage. + +**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen. + +Then build or refine a typography system that is: +- Readable and accessible across devices and contexts +- Systematically coherent with clear hierarchy +- Performant and technically sound +- Aesthetically distinctive and appropriate for the brand + +## Classic Typography Principles + +### Vertical Rhythm & Baseline Grids + +[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components] + +### Modular Scale & Hierarchy + +[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance] + +### Readability & Measure + +[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions] + +## Font Selection & Pairing + +### Choosing Distinctive Fonts + +[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives] + +### Pairing Principles + +[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts] + +### Web Font Loading + +[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading] + +## Modern Web Typography + +### Fluid & Responsive Type + +[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales] + +### Advanced Features + +[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles] + +### Performance Optimization + +[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions] + +## Typography System Architecture + +### Token Structure + +[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing] + +### Implementation + +[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens] + +## Accessibility Considerations + +[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices] + +--- + +**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it. + +**NEVER**: +- Use more than 2-3 font families in a single project +- Sacrifice readability for aesthetic novelty +- Ignore font loading performance +- Skip fallback font definitions +- Use decorative fonts for body text +- Implement arbitrary font sizes without a systematic scale + +Remember: Typography is 95% of design. Master it, and everything else becomes easier. + + +--- + +## Reference: interaction-design + +# Interaction Design + +This reference guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. + +The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve. + +## Interaction Design Thinking + +Before designing interactions, understand the user's mental model and context: + +- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)? +- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances. +- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards. +- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation? + +**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface. + +Then implement interactions that are: +- Intuitive with clear affordances and feedback +- Accessible to all users and input methods +- Forgiving with error prevention and recovery +- Responsive with immediate feedback and state changes + +## Interaction States + +### Core States + +[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each] + +### State Transitions + +[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent] + +### Loading & Progress States + +[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting] + +## Affordances & Feedback + +### Visual Affordances + +[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting] + +### Immediate Feedback + +[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals] + +### Haptic & Sound Feedback + +[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback] + +## Form Design & Input Patterns + +### Form Layout & Structure + +[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms] + +### Input Field Design + +[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking] + +### Validation Patterns + +[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication] + +### Complex Input Types + +[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search] + +### Progressive Disclosure in Forms + +[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually] + +### Form Error Handling + +[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors] + +## Touch & Pointer Interactions + +### Touch Targets + +[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile] + +### Touch vs Pointer Patterns + +[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom] + +### Gesture Design + +[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability] + +## Keyboard Navigation + +### Focus Management + +[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals] + +### Keyboard Shortcuts + +[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows] + +### Accessible Interaction Patterns + +[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements] + +## Navigation Patterns + +### Menu & Navigation Design + +[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more] + +### Modal & Dialog Patterns + +[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns] + +### Command & Context Menus + +[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets] + +## Error Prevention & Recovery + +### Constraints & Guards + +[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms] + +### Error Messages + +[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors] + +### Undo & Redo + +[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save] + +--- + +**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard. + +**NEVER**: +- Remove focus indicators without providing visible alternatives (accessibility violation) +- Use placeholder text as labels (disappears on input, hard to remember) +- Make touch targets smaller than 44x44px +- Validate in real-time for long inputs (wait for blur) +- Show generic error messages ("Error occurred") - be specific and helpful +- Block user interaction without clear loading states +- Design only for mouse/pointer (test with keyboard and touch) +- Use custom controls without proper ARIA and keyboard support + +Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. + + +--- + +## Reference: color-and-contrast + +# Color & Contrast + +This reference guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. + +The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints. + +## Color System Thinking + +Before choosing colors, understand the strategic requirements: + +- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral. +- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text? +- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation. +- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast). + +**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable. + +Then build a color system that is: +- Accessible and WCAG compliant +- Systematically organized with clear roles +- Flexible enough for theming and variations +- Aesthetically cohesive and on-brand + +## Color Theory Fundamentals + +### Color Harmony & Relationships + +[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation] + +### Color Psychology & Meaning + +[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices] + +### Color Properties + +[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity] + +## Building Functional Palettes + +### Palette Structure + +[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors] + +### Generating Color Scales + +[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation] + +### The Dominant Color Principle + +[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit] + +## Contrast & Accessibility + +### WCAG Compliance + +[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions] + +### Testing & Tools + +[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification] + +### Accessible Color Combinations + +[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices] + +## Theming Architecture + +### Light & Dark Mode + +[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling] + +### CSS Custom Properties + +[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching] + +### Multi-Theme Systems + +[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance] + +## Advanced Color Techniques + +### Gradients & Effects + +[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques] + +### Transparency & Alpha + +[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects] + +### Dynamic Color + +[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback] + +--- + +**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes. + +**NEVER**: +- Rely on color alone to convey information +- Use color combinations that fail WCAG contrast requirements +- Create palettes with arbitrary color choices (every color needs a purpose) +- Ignore color blindness (8% of men, 0.5% of women) +- Use pure black (#000) or pure white (#fff) for large areas +- Create theme systems without testing all combinations + +Remember: Color is powerful. Use it deliberately, systematically, and inclusively. + + +--- + +## Reference: responsive-design + +# Responsive Design + +This reference guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. + +The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges. + +## Responsive Design Thinking + +Before implementing, understand the multi-device context: + +- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device? +- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work) +- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support? +- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions? +- **Content Priority**: What's essential on all devices vs optional on larger screens? + +**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context. + +Then build responsive systems that are: +- Mobile-first with progressive enhancement +- Fluid and adaptable across viewport sizes +- Optimized for different input methods +- Performant on constrained devices +- Contextually appropriate + +## Mobile-First Methodology + +### Why Mobile-First + +[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance] + +### Mobile-First Implementation + +[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach] + +## Breakpoint Strategies + +### Choosing Breakpoints + +[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints] + +### Breakpoint Architecture + +[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase] + +## Fluid & Adaptive Design + +### Fluid Typography + +[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability] + +### Fluid Spacing + +[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding] + +### Fluid Layouts + +[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers] + +### Container Queries + +[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills] + +## Layout Adaptation Patterns + +### Navigation Patterns + +[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars] + +### Content Reflow + +[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first] + +### Component Adaptation + +[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure] + +## Touch vs Pointer Optimization + +### Touch Target Sizing + +[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases] + +### Touch-Specific Interactions + +[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns] + +### Hybrid Devices + +[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces] + +## Viewport & Screen Considerations + +### Viewport Meta Tag + +[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale] + +### Safe Areas + +[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas] + +### Orientation Handling + +[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations] + +### High-DPI Screens + +[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images] + +## Responsive Images & Media + +### Responsive Images + +[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading] + +### Video Adaptation + +[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images] + +## Performance on Mobile + +### Mobile Performance Budget + +[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns] + +### Loading Strategies + +[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile] + +## Testing Strategies + +### Device Testing + +[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing] + +### Testing Checklist + +[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds] + +--- + +**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints. + +**NEVER**: +- Design desktop-first and try to cram into mobile +- Hide critical functionality on mobile +- Use device detection instead of feature detection +- Create separate mobile/desktop codebases (maintain one responsive codebase) +- Ignore landscape orientation +- Use fixed pixel values without considering smaller/larger screens +- Forget about tablet (it's not just big phone or small desktop) +- Assume all mobile devices are powerful (many users have older devices) + +Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. diff --git a/dist/codex/AGENTS.md b/dist/codex/AGENTS.md index 7fcfef465..526517693 100644 --- a/dist/codex/AGENTS.md +++ b/dist/codex/AGENTS.md @@ -6,54 +6,12 @@ This repository contains specialized skills for different tasks. When the user r Each skill provides deep expertise in its domain. Use the descriptions below to decide which skill file to read: -### ux-writing - -**When to use**: Write clear, helpful, and human interface copy that users understand immediately. Use this skill when crafting microcopy, improving error messages, or establishing voice and tone. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration. - -**Read**: `AGENTS.ux-writing.md` for complete instructions. - -### spatial-design - -**When to use**: Master spatial design balancing systematic precision with artistic composition. Use this skill when building spacing systems, establishing grids, or improving visual hierarchy. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships. - -**Read**: `AGENTS.spatial-design.md` for complete instructions. - -### motion-design - -**When to use**: Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Use this skill when adding animations, building micro-interactions, or establishing motion systems. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance. - -**Read**: `AGENTS.motion-design.md` for complete instructions. - -### typography - -**When to use**: Master typography systems that balance timeless principles with modern web capabilities. Use this skill when building type systems, improving readability, or establishing typographic hierarchy. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive. - -**Read**: `AGENTS.typography.md` for complete instructions. - ### frontend-design -**When to use**: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. +**When to use**: Create distinctive, production-grade frontend interfaces with comprehensive expertise in typography, color systems, spatial design, responsive layouts, interaction patterns, motion, and UX writing. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. **Read**: `AGENTS.frontend-design.md` for complete instructions. -### interaction-design - -**When to use**: Design intuitive interaction patterns that feel natural and provide clear feedback. Use this skill when building interactive components, designing forms, or establishing interaction standards. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback. - -**Read**: `AGENTS.interaction-design.md` for complete instructions. - -### color-and-contrast - -**When to use**: Build sophisticated color systems balancing aesthetics with accessibility and function. Use this skill when establishing brand palettes, implementing theming, or ensuring WCAG compliance. Produces beautiful, accessible color implementations with systematic coherence across all theme variants. - -**Read**: `AGENTS.color-and-contrast.md` for complete instructions. - -### responsive-design - -**When to use**: Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Use this skill when building mobile-first layouts, defining breakpoint strategies, or optimizing for touch. Produces fluid, performant experiences that feel native to each device while maintaining consistency. - -**Read**: `AGENTS.responsive-design.md` for complete instructions. - ## How to Use Skills diff --git a/dist/codex/AGENTS.ux-writing.md b/dist/codex/AGENTS.ux-writing.md deleted file mode 100644 index 51e4970ba..000000000 --- a/dist/codex/AGENTS.ux-writing.md +++ /dev/null @@ -1,197 +0,0 @@ -This skill guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. - -The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve. - -## UX Writing Thinking - -Before writing, understand the context and user needs: - -- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know? -- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches. -- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience. -- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements. - -**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration. - -Then write copy that is: -- Clear and immediately understandable -- Concise without sacrificing clarity -- Helpful and action-oriented -- Human and empathetic -- Consistent in terminology and tone - -## Fundamental Principles - -### Clarity Over Cleverness - -[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"] - -### Concise But Complete - -[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity] - -### Active Voice - -[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language] - -### User-Focused Language - -[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model] - -### Consistency - -[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary] - -## Voice & Tone - -### Establishing Brand Voice - -[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction] - -### Adapting Tone to Context - -[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment] - -### Voice Across Cultures - -[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations] - -## Microcopy Excellence - -### Button & CTA Copy - -[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented] - -### Labels & Instructions - -[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples] - -### Placeholder Text - -[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions] - -### Tooltips & Help Text - -[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details] - -## Error Messages & Validation - -### Error Message Principles - -[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help] - -### Validation Feedback - -[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements] - -### Error Message Patterns - -[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s] - -## Forms & Inputs - -### Form Labels - -[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)] - -### Help Text - -[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints] - -### Confirmation Dialogs - -[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse] - -## System Messages - -### Success Messages - -[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief] - -### Loading States - -[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting] - -### Empty States - -[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end] - -## Navigation & Wayfinding - -### Navigation Labels - -[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent] - -### Breadcrumbs & Headers - -[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile] - -### Search & Filters - -[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging] - -## Content Hierarchy & Structure - -### Scannable Writing - -[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info] - -### Progressive Disclosure - -[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links] - -## Writing for Accessibility - -### Screen Reader Considerations - -[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels] - -### Plain Language - -[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms] - -### Text Alternatives - -[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI] - -## Internationalization (i18n) - -### Writing for Translation - -[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space] - -### Cultural Adaptation - -[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats] - -## Content Patterns by Type - -### Onboarding Copy - -[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition] - -### Settings & Preferences - -[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication] - -### Notifications - -[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention] - ---- - -**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human. - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" - explain what!) -- Use passive voice unnecessarily -- Vary terminology for variety (consistency matters) -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic) -- Assume technical knowledge -- Use all caps (except acronyms) -- End questions with periods (use question marks) - -Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/dist/cursor/.cursor/rules/frontend-design.md b/dist/cursor/.cursor/rules/frontend-design.md index cb330f33b..e07e95864 100644 --- a/dist/cursor/.cursor/rules/frontend-design.md +++ b/dist/cursor/.cursor/rules/frontend-design.md @@ -33,4 +33,1054 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo **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. \ No newline at end of file +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. + + + +## Design Patterns Reference + +This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. + +### What TO Do (Patterns) + +Focus on intentional, distinctive design choices: + +**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. + +**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. + +**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. + +**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity. Stagger reveals for orchestrated page loads. + +**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. + +**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. + +### What NOT to Do (Anti-Patterns) + +These patterns create generic "AI slop" aesthetics: + +**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, wrapping everything in rounded cards, decorative shadows without purpose. + +**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards. + +**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors. + +**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. + +These anti-patterns are baked into training data from countless generic templates. Without explicit guidance, AI reproduces them. This skill ensures your AI knows both what to do AND what to avoid. + +--- + +## Domain Reference Files + +For deeper expertise in specific design domains, consult these reference files: + +### Typography +For type systems, font selection, readability, and typographic hierarchy. +**See**: [reference/typography.md](reference/typography.md) + +### Color & Contrast +For color systems, palettes, accessibility, theming, and WCAG compliance. +**See**: [reference/color-and-contrast.md](reference/color-and-contrast.md) + +### Spatial Design +For spacing systems, grids, visual hierarchy, and composition. +**See**: [reference/spatial-design.md](reference/spatial-design.md) + +### Responsive Design +For mobile-first layouts, breakpoints, fluid design, and cross-device adaptation. +**See**: [reference/responsive-design.md](reference/responsive-design.md) + +### Interaction Design +For forms, states, feedback patterns, keyboard navigation, and touch optimization. +**See**: [reference/interaction-design.md](reference/interaction-design.md) + +### Motion Design +For animations, micro-interactions, transitions, and performance optimization. +**See**: [reference/motion-design.md](reference/motion-design.md) + +### UX Writing +For interface copy, error messages, microcopy, and voice/tone guidelines. +**See**: [reference/ux-writing.md](reference/ux-writing.md) + +--- + +## When to Use Reference Files + +- **Quick builds**: Use this main skill file for most frontend work +- **Deep dives**: Consult specific reference files when facing complex challenges in that domain +- **Systematic work**: When building design systems or establishing patterns, reference multiple domain files +- **Troubleshooting**: When something feels "off", check the relevant domain reference for best practices + +--- + +## Reference: ux-writing + +# UX Writing + +This reference guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. + +The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve. + +## UX Writing Thinking + +Before writing, understand the context and user needs: + +- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know? +- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches. +- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience. +- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements. + +**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration. + +Then write copy that is: +- Clear and immediately understandable +- Concise without sacrificing clarity +- Helpful and action-oriented +- Human and empathetic +- Consistent in terminology and tone + +## Fundamental Principles + +### Clarity Over Cleverness + +[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"] + +### Concise But Complete + +[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity] + +### Active Voice + +[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language] + +### User-Focused Language + +[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model] + +### Consistency + +[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary] + +## Voice & Tone + +### Establishing Brand Voice + +[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction] + +### Adapting Tone to Context + +[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment] + +### Voice Across Cultures + +[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations] + +## Microcopy Excellence + +### Button & CTA Copy + +[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented] + +### Labels & Instructions + +[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples] + +### Placeholder Text + +[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions] + +### Tooltips & Help Text + +[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details] + +## Error Messages & Validation + +### Error Message Principles + +[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help] + +### Validation Feedback + +[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements] + +### Error Message Patterns + +[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s] + +## Forms & Inputs + +### Form Labels + +[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)] + +### Help Text + +[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints] + +### Confirmation Dialogs + +[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse] + +## System Messages + +### Success Messages + +[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief] + +### Loading States + +[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting] + +### Empty States + +[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end] + +## Navigation & Wayfinding + +### Navigation Labels + +[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent] + +### Breadcrumbs & Headers + +[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile] + +### Search & Filters + +[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging] + +## Content Hierarchy & Structure + +### Scannable Writing + +[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info] + +### Progressive Disclosure + +[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links] + +## Writing for Accessibility + +### Screen Reader Considerations + +[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels] + +### Plain Language + +[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms] + +### Text Alternatives + +[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI] + +## Internationalization (i18n) + +### Writing for Translation + +[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space] + +### Cultural Adaptation + +[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats] + +## Content Patterns by Type + +### Onboarding Copy + +[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition] + +### Settings & Preferences + +[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication] + +### Notifications + +[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention] + +--- + +**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human. + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" - explain what!) +- Use passive voice unnecessarily +- Vary terminology for variety (consistency matters) +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic) +- Assume technical knowledge +- Use all caps (except acronyms) +- End questions with periods (use question marks) + +Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. + + +--- + +## Reference: spatial-design + +# Spatial Design + +This reference guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. + +The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve. + +## Spatial Design Thinking + +Before arranging elements, understand the compositional strategy: + +- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here. +- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric? +- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience. +- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)? + +**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning. + +Then build layout systems that are: +- Systematically consistent with clear spacing rules +- Visually balanced with intentional hierarchy +- Responsive and adaptive across viewports +- Compositionally strong with clear focal points + +## Classic Composition Principles + +### Visual Hierarchy Fundamentals + +[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)] + +### Balance & Symmetry + +[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution] + +### The Rule of Thirds & Golden Ratio + +[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules] + +### Focal Points & Eye Movement + +[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption] + +## Spacing Systems + +### Spacing Scales + +[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)] + +### Vertical Rhythm + +[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components] + +### Micro vs Macro Space + +[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room] + +### Spacing Token Architecture + +[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing] + +## Grid Systems & Layout Patterns + +### Grid Fundamentals + +[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)] + +### Classic Layout Patterns + +[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts] + +### Modern CSS Layout + +[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries] + +## Creating Visual Hierarchy + +### Hierarchy Through Scale + +[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression] + +### Hierarchy Through Weight & Color + +[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools] + +### Hierarchy Through Position + +[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis] + +## Responsive Spatial Design + +### Breakpoint Strategy + +[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints] + +### Layout Adaptation + +[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure] + +### Fluid Spacing & Layout + +[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing] + +## Depth & Layering + +### Creating Depth + +[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects] + +### Overlap & Intersection + +[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries] + +--- + +**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact. + +**NEVER**: +- Use arbitrary spacing values outside your scale (unless intentionally breaking the system) +- Create layouts that ignore natural reading patterns without good reason +- Forget that white space is a design element, not wasted space +- Make all spacing equal (variety creates hierarchy) +- Build responsive layouts that only work at breakpoint edges +- Create hierarchy through size alone (combine multiple tools) + +Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. + + +--- + +## Reference: motion-design + +# Motion Design + +This reference guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. + +The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve. + +## Motion Design Thinking + +Before animating anything, understand the purpose and context: + +- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool." +- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined? +- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations? +- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation. + +**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation. + +Then implement motion that is: +- Purposeful with clear functional or emotional goals +- Performant with smooth 60fps execution +- Accessible with reduced motion alternatives +- Choreographed with thoughtful timing and sequencing + +## Classic Animation Principles + +### Disney's 12 Principles (Web Context) + +[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI] + +### Timing & Duration + +[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed] + +### Easing & Curves + +[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics] + +## Types of UI Animation + +### Micro-interactions + +[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators] + +### Page Transitions + +[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns] + +### State Transitions + +[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes] + +### Scrolling & Parallax + +[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer] + +## Choreography & Sequencing + +### Staggered Animations + +[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering] + +### Orchestrated Page Loads + +[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management] + +### Exit Choreography + +[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit] + +## Technical Implementation + +### CSS-Only Animation + +[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration] + +### JavaScript Animation + +[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)] + +### Performance Optimization + +[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring] + +## Motion Design Systems + +### Motion Tokens + +[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary] + +### Reduced Motion + +[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives] + +--- + +**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments. + +**NEVER**: +- Animate everything (animation fatigue is real) +- Use long durations (>500ms) for UI feedback (users will perceive lag) +- Animate layout properties (width, height, top, left) - use transform instead +- Ignore prefers-reduced-motion (accessibility requirement) +- Use animation to hide slow loading (fix the loading time) +- Animate without purpose (every animation should answer "why?") +- Create animations that obscure content or block interaction + +Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. + + +--- + +## Reference: typography + +# Typography + +This reference guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. + +The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve. + +## Typography Thinking + +Before implementing, understand the context and establish a clear typographic voice: + +- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages. +- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this. +- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements. +- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage. + +**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen. + +Then build or refine a typography system that is: +- Readable and accessible across devices and contexts +- Systematically coherent with clear hierarchy +- Performant and technically sound +- Aesthetically distinctive and appropriate for the brand + +## Classic Typography Principles + +### Vertical Rhythm & Baseline Grids + +[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components] + +### Modular Scale & Hierarchy + +[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance] + +### Readability & Measure + +[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions] + +## Font Selection & Pairing + +### Choosing Distinctive Fonts + +[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives] + +### Pairing Principles + +[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts] + +### Web Font Loading + +[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading] + +## Modern Web Typography + +### Fluid & Responsive Type + +[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales] + +### Advanced Features + +[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles] + +### Performance Optimization + +[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions] + +## Typography System Architecture + +### Token Structure + +[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing] + +### Implementation + +[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens] + +## Accessibility Considerations + +[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices] + +--- + +**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it. + +**NEVER**: +- Use more than 2-3 font families in a single project +- Sacrifice readability for aesthetic novelty +- Ignore font loading performance +- Skip fallback font definitions +- Use decorative fonts for body text +- Implement arbitrary font sizes without a systematic scale + +Remember: Typography is 95% of design. Master it, and everything else becomes easier. + + +--- + +## Reference: interaction-design + +# Interaction Design + +This reference guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. + +The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve. + +## Interaction Design Thinking + +Before designing interactions, understand the user's mental model and context: + +- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)? +- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances. +- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards. +- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation? + +**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface. + +Then implement interactions that are: +- Intuitive with clear affordances and feedback +- Accessible to all users and input methods +- Forgiving with error prevention and recovery +- Responsive with immediate feedback and state changes + +## Interaction States + +### Core States + +[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each] + +### State Transitions + +[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent] + +### Loading & Progress States + +[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting] + +## Affordances & Feedback + +### Visual Affordances + +[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting] + +### Immediate Feedback + +[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals] + +### Haptic & Sound Feedback + +[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback] + +## Form Design & Input Patterns + +### Form Layout & Structure + +[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms] + +### Input Field Design + +[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking] + +### Validation Patterns + +[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication] + +### Complex Input Types + +[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search] + +### Progressive Disclosure in Forms + +[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually] + +### Form Error Handling + +[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors] + +## Touch & Pointer Interactions + +### Touch Targets + +[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile] + +### Touch vs Pointer Patterns + +[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom] + +### Gesture Design + +[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability] + +## Keyboard Navigation + +### Focus Management + +[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals] + +### Keyboard Shortcuts + +[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows] + +### Accessible Interaction Patterns + +[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements] + +## Navigation Patterns + +### Menu & Navigation Design + +[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more] + +### Modal & Dialog Patterns + +[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns] + +### Command & Context Menus + +[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets] + +## Error Prevention & Recovery + +### Constraints & Guards + +[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms] + +### Error Messages + +[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors] + +### Undo & Redo + +[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save] + +--- + +**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard. + +**NEVER**: +- Remove focus indicators without providing visible alternatives (accessibility violation) +- Use placeholder text as labels (disappears on input, hard to remember) +- Make touch targets smaller than 44x44px +- Validate in real-time for long inputs (wait for blur) +- Show generic error messages ("Error occurred") - be specific and helpful +- Block user interaction without clear loading states +- Design only for mouse/pointer (test with keyboard and touch) +- Use custom controls without proper ARIA and keyboard support + +Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. + + +--- + +## Reference: color-and-contrast + +# Color & Contrast + +This reference guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. + +The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints. + +## Color System Thinking + +Before choosing colors, understand the strategic requirements: + +- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral. +- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text? +- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation. +- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast). + +**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable. + +Then build a color system that is: +- Accessible and WCAG compliant +- Systematically organized with clear roles +- Flexible enough for theming and variations +- Aesthetically cohesive and on-brand + +## Color Theory Fundamentals + +### Color Harmony & Relationships + +[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation] + +### Color Psychology & Meaning + +[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices] + +### Color Properties + +[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity] + +## Building Functional Palettes + +### Palette Structure + +[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors] + +### Generating Color Scales + +[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation] + +### The Dominant Color Principle + +[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit] + +## Contrast & Accessibility + +### WCAG Compliance + +[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions] + +### Testing & Tools + +[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification] + +### Accessible Color Combinations + +[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices] + +## Theming Architecture + +### Light & Dark Mode + +[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling] + +### CSS Custom Properties + +[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching] + +### Multi-Theme Systems + +[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance] + +## Advanced Color Techniques + +### Gradients & Effects + +[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques] + +### Transparency & Alpha + +[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects] + +### Dynamic Color + +[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback] + +--- + +**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes. + +**NEVER**: +- Rely on color alone to convey information +- Use color combinations that fail WCAG contrast requirements +- Create palettes with arbitrary color choices (every color needs a purpose) +- Ignore color blindness (8% of men, 0.5% of women) +- Use pure black (#000) or pure white (#fff) for large areas +- Create theme systems without testing all combinations + +Remember: Color is powerful. Use it deliberately, systematically, and inclusively. + + +--- + +## Reference: responsive-design + +# Responsive Design + +This reference guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. + +The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges. + +## Responsive Design Thinking + +Before implementing, understand the multi-device context: + +- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device? +- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work) +- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support? +- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions? +- **Content Priority**: What's essential on all devices vs optional on larger screens? + +**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context. + +Then build responsive systems that are: +- Mobile-first with progressive enhancement +- Fluid and adaptable across viewport sizes +- Optimized for different input methods +- Performant on constrained devices +- Contextually appropriate + +## Mobile-First Methodology + +### Why Mobile-First + +[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance] + +### Mobile-First Implementation + +[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach] + +## Breakpoint Strategies + +### Choosing Breakpoints + +[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints] + +### Breakpoint Architecture + +[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase] + +## Fluid & Adaptive Design + +### Fluid Typography + +[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability] + +### Fluid Spacing + +[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding] + +### Fluid Layouts + +[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers] + +### Container Queries + +[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills] + +## Layout Adaptation Patterns + +### Navigation Patterns + +[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars] + +### Content Reflow + +[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first] + +### Component Adaptation + +[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure] + +## Touch vs Pointer Optimization + +### Touch Target Sizing + +[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases] + +### Touch-Specific Interactions + +[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns] + +### Hybrid Devices + +[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces] + +## Viewport & Screen Considerations + +### Viewport Meta Tag + +[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale] + +### Safe Areas + +[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas] + +### Orientation Handling + +[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations] + +### High-DPI Screens + +[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images] + +## Responsive Images & Media + +### Responsive Images + +[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading] + +### Video Adaptation + +[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images] + +## Performance on Mobile + +### Mobile Performance Budget + +[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns] + +### Loading Strategies + +[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile] + +## Testing Strategies + +### Device Testing + +[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing] + +### Testing Checklist + +[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds] + +--- + +**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints. + +**NEVER**: +- Design desktop-first and try to cram into mobile +- Hide critical functionality on mobile +- Use device detection instead of feature detection +- Create separate mobile/desktop codebases (maintain one responsive codebase) +- Ignore landscape orientation +- Use fixed pixel values without considering smaller/larger screens +- Forget about tablet (it's not just big phone or small desktop) +- Assume all mobile devices are powerful (many users have older devices) + +Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. diff --git a/dist/gemini/GEMINI.frontend-design.md b/dist/gemini/GEMINI.frontend-design.md index cb330f33b..e07e95864 100644 --- a/dist/gemini/GEMINI.frontend-design.md +++ b/dist/gemini/GEMINI.frontend-design.md @@ -33,4 +33,1054 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo **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. \ No newline at end of file +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. + + + +## Design Patterns Reference + +This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. + +### What TO Do (Patterns) + +Focus on intentional, distinctive design choices: + +**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. + +**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. + +**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. + +**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity. Stagger reveals for orchestrated page loads. + +**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. + +**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. + +### What NOT to Do (Anti-Patterns) + +These patterns create generic "AI slop" aesthetics: + +**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, wrapping everything in rounded cards, decorative shadows without purpose. + +**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards. + +**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors. + +**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. + +These anti-patterns are baked into training data from countless generic templates. Without explicit guidance, AI reproduces them. This skill ensures your AI knows both what to do AND what to avoid. + +--- + +## Domain Reference Files + +For deeper expertise in specific design domains, consult these reference files: + +### Typography +For type systems, font selection, readability, and typographic hierarchy. +**See**: [reference/typography.md](reference/typography.md) + +### Color & Contrast +For color systems, palettes, accessibility, theming, and WCAG compliance. +**See**: [reference/color-and-contrast.md](reference/color-and-contrast.md) + +### Spatial Design +For spacing systems, grids, visual hierarchy, and composition. +**See**: [reference/spatial-design.md](reference/spatial-design.md) + +### Responsive Design +For mobile-first layouts, breakpoints, fluid design, and cross-device adaptation. +**See**: [reference/responsive-design.md](reference/responsive-design.md) + +### Interaction Design +For forms, states, feedback patterns, keyboard navigation, and touch optimization. +**See**: [reference/interaction-design.md](reference/interaction-design.md) + +### Motion Design +For animations, micro-interactions, transitions, and performance optimization. +**See**: [reference/motion-design.md](reference/motion-design.md) + +### UX Writing +For interface copy, error messages, microcopy, and voice/tone guidelines. +**See**: [reference/ux-writing.md](reference/ux-writing.md) + +--- + +## When to Use Reference Files + +- **Quick builds**: Use this main skill file for most frontend work +- **Deep dives**: Consult specific reference files when facing complex challenges in that domain +- **Systematic work**: When building design systems or establishing patterns, reference multiple domain files +- **Troubleshooting**: When something feels "off", check the relevant domain reference for best practices + +--- + +## Reference: ux-writing + +# UX Writing + +This reference guides the creation of interface copy that is clear, concise, helpful, and human - the words that make products understandable and usable. + +The user provides a UX writing challenge: writing microcopy, improving error messages, crafting instructions, establishing voice and tone, or fixing unclear interface text. They may include brand guidelines, audience context, or specific copy problems to solve. + +## UX Writing Thinking + +Before writing, understand the context and user needs: + +- **User Context**: What are users trying to accomplish? What's their emotional state? What do they already know? +- **Content Purpose**: Inform? Guide? Reassure? Warn? Celebrate? Different moments need different approaches. +- **Brand Voice**: Professional? Casual? Playful? Technical? Voice should match brand and audience. +- **Constraints**: Character limits, space limitations, translation considerations, accessibility requirements. + +**CRITICAL**: Good UX writing is invisible - users understand immediately without noticing the words. Bad UX writing creates confusion and frustration. + +Then write copy that is: +- Clear and immediately understandable +- Concise without sacrificing clarity +- Helpful and action-oriented +- Human and empathetic +- Consistent in terminology and tone + +## Fundamental Principles + +### Clarity Over Cleverness + +[TO BE DEVELOPED: Plain language, avoid jargon, specific over vague, "Save changes" not "OK"] + +### Concise But Complete + +[TO BE DEVELOPED: Remove unnecessary words, but include essential information, balance brevity with clarity] + +### Active Voice + +[TO BE DEVELOPED: "We saved your changes" not "Your changes have been saved", action-oriented language] + +### User-Focused Language + +[TO BE DEVELOPED: "Your" not "The", focus on user benefits, user's mental model] + +### Consistency + +[TO BE DEVELOPED: Use same terms throughout, don't vary for variety, build terminology glossary] + +## Voice & Tone + +### Establishing Brand Voice + +[TO BE DEVELOPED: Personality dimensions, voice guidelines, voice vs tone distinction] + +### Adapting Tone to Context + +[TO BE DEVELOPED: Success = celebratory, Error = empathetic, Loading = reassuring, matching emotional moment] + +### Voice Across Cultures + +[TO BE DEVELOPED: Cultural sensitivity, humor translation, formality levels, global considerations] + +## Microcopy Excellence + +### Button & CTA Copy + +[TO BE DEVELOPED: Specific actions ("Create account" not "Submit"), verb + noun structure, outcome-oriented] + +### Labels & Instructions + +[TO BE DEVELOPED: Clear, specific labels, instructions before fields, showing format with examples] + +### Placeholder Text + +[TO BE DEVELOPED: When to use (rarely), never as labels, examples not instructions] + +### Tooltips & Help Text + +[TO BE DEVELOPED: Adding value beyond label, answering implicit questions, brevity with links to details] + +## Error Messages & Validation + +### Error Message Principles + +[TO BE DEVELOPED: Explain what happened, suggest fix, don't blame user, provide examples, link to help] + +### Validation Feedback + +[TO BE DEVELOPED: Inline validation, timing (on blur vs on submit), success states, clear requirements] + +### Error Message Patterns + +[TO BE DEVELOPED: Format errors, permission errors, network errors, system errors, 404s] + +## Forms & Inputs + +### Form Labels + +[TO BE DEVELOPED: Descriptive labels, required field indication, why you're asking (when not obvious)] + +### Help Text + +[TO BE DEVELOPED: Format guidance, why you need this information, examples, constraints] + +### Confirmation Dialogs + +[TO BE DEVELOPED: Specific about action, explain consequences, clear button labels, don't overuse] + +## System Messages + +### Success Messages + +[TO BE DEVELOPED: Confirm what happened, what happens next, celebrate appropriately, be brief] + +### Loading States + +[TO BE DEVELOPED: What's happening, time expectations, progress indication, personality in waiting] + +### Empty States + +[TO BE DEVELOPED: Explain why empty, value of filling it, clear CTA, welcoming not dead-end] + +## Navigation & Wayfinding + +### Navigation Labels + +[TO BE DEVELOPED: Specific and descriptive, user language not internal terms, clear information scent] + +### Breadcrumbs & Headers + +[TO BE DEVELOPED: Clear location indication, hierarchical clarity, shortened for mobile] + +### Search & Filters + +[TO BE DEVELOPED: Clear search placeholders, filter labels, no results messaging] + +## Content Hierarchy & Structure + +### Scannable Writing + +[TO BE DEVELOPED: Short paragraphs, bullet points, clear headings, front-load important info] + +### Progressive Disclosure + +[TO BE DEVELOPED: Essential info first, details on demand, expandable sections, learn more links] + +## Writing for Accessibility + +### Screen Reader Considerations + +[TO BE DEVELOPED: ARIA labels, alt text writing, link text clarity, button labels] + +### Plain Language + +[TO BE DEVELOPED: Reading level considerations, avoid jargon, explain technical terms] + +### Text Alternatives + +[TO BE DEVELOPED: Transcripts for audio/video, alt text for images, descriptions for complex UI] + +## Internationalization (i18n) + +### Writing for Translation + +[TO BE DEVELOPED: Avoid idioms, complete sentences, context for translators, text expansion space] + +### Cultural Adaptation + +[TO BE DEVELOPED: Cultural sensitivity, date/time formats, address formats, name formats] + +## Content Patterns by Type + +### Onboarding Copy + +[TO BE DEVELOPED: Welcome messages, getting started, first-time guidance, value proposition] + +### Settings & Preferences + +[TO BE DEVELOPED: Clear option descriptions, impact explanation, defaults indication] + +### Notifications + +[TO BE DEVELOPED: Scannable, actionable, appropriate urgency, notification fatigue prevention] + +--- + +**IMPORTANT**: Read your copy out loud. If it sounds awkward or robotic, rewrite until it sounds human. + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" - explain what!) +- Use passive voice unnecessarily +- Vary terminology for variety (consistency matters) +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic) +- Assume technical knowledge +- Use all caps (except acronyms) +- End questions with periods (use question marks) + +Remember: You're a clarity expert and empathetic communicator. Write like you're helping a friend who's smart but unfamiliar with your product. Be clear, be helpful, be human. + + +--- + +## Reference: spatial-design + +# Spatial Design + +This reference guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. + +The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve. + +## Spatial Design Thinking + +Before arranging elements, understand the compositional strategy: + +- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here. +- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric? +- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience. +- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)? + +**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning. + +Then build layout systems that are: +- Systematically consistent with clear spacing rules +- Visually balanced with intentional hierarchy +- Responsive and adaptive across viewports +- Compositionally strong with clear focal points + +## Classic Composition Principles + +### Visual Hierarchy Fundamentals + +[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)] + +### Balance & Symmetry + +[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution] + +### The Rule of Thirds & Golden Ratio + +[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules] + +### Focal Points & Eye Movement + +[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption] + +## Spacing Systems + +### Spacing Scales + +[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)] + +### Vertical Rhythm + +[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components] + +### Micro vs Macro Space + +[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room] + +### Spacing Token Architecture + +[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing] + +## Grid Systems & Layout Patterns + +### Grid Fundamentals + +[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)] + +### Classic Layout Patterns + +[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts] + +### Modern CSS Layout + +[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries] + +## Creating Visual Hierarchy + +### Hierarchy Through Scale + +[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression] + +### Hierarchy Through Weight & Color + +[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools] + +### Hierarchy Through Position + +[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis] + +## Responsive Spatial Design + +### Breakpoint Strategy + +[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints] + +### Layout Adaptation + +[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure] + +### Fluid Spacing & Layout + +[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing] + +## Depth & Layering + +### Creating Depth + +[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects] + +### Overlap & Intersection + +[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries] + +--- + +**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact. + +**NEVER**: +- Use arbitrary spacing values outside your scale (unless intentionally breaking the system) +- Create layouts that ignore natural reading patterns without good reason +- Forget that white space is a design element, not wasted space +- Make all spacing equal (variety creates hierarchy) +- Build responsive layouts that only work at breakpoint edges +- Create hierarchy through size alone (combine multiple tools) + +Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. + + +--- + +## Reference: motion-design + +# Motion Design + +This reference guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. + +The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve. + +## Motion Design Thinking + +Before animating anything, understand the purpose and context: + +- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool." +- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined? +- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations? +- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation. + +**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation. + +Then implement motion that is: +- Purposeful with clear functional or emotional goals +- Performant with smooth 60fps execution +- Accessible with reduced motion alternatives +- Choreographed with thoughtful timing and sequencing + +## Classic Animation Principles + +### Disney's 12 Principles (Web Context) + +[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI] + +### Timing & Duration + +[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed] + +### Easing & Curves + +[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics] + +## Types of UI Animation + +### Micro-interactions + +[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators] + +### Page Transitions + +[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns] + +### State Transitions + +[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes] + +### Scrolling & Parallax + +[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer] + +## Choreography & Sequencing + +### Staggered Animations + +[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering] + +### Orchestrated Page Loads + +[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management] + +### Exit Choreography + +[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit] + +## Technical Implementation + +### CSS-Only Animation + +[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration] + +### JavaScript Animation + +[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)] + +### Performance Optimization + +[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring] + +## Motion Design Systems + +### Motion Tokens + +[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary] + +### Reduced Motion + +[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives] + +--- + +**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments. + +**NEVER**: +- Animate everything (animation fatigue is real) +- Use long durations (>500ms) for UI feedback (users will perceive lag) +- Animate layout properties (width, height, top, left) - use transform instead +- Ignore prefers-reduced-motion (accessibility requirement) +- Use animation to hide slow loading (fix the loading time) +- Animate without purpose (every animation should answer "why?") +- Create animations that obscure content or block interaction + +Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. + + +--- + +## Reference: typography + +# Typography + +This reference guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. + +The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve. + +## Typography Thinking + +Before implementing, understand the context and establish a clear typographic voice: + +- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages. +- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this. +- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements. +- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage. + +**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen. + +Then build or refine a typography system that is: +- Readable and accessible across devices and contexts +- Systematically coherent with clear hierarchy +- Performant and technically sound +- Aesthetically distinctive and appropriate for the brand + +## Classic Typography Principles + +### Vertical Rhythm & Baseline Grids + +[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components] + +### Modular Scale & Hierarchy + +[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance] + +### Readability & Measure + +[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions] + +## Font Selection & Pairing + +### Choosing Distinctive Fonts + +[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives] + +### Pairing Principles + +[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts] + +### Web Font Loading + +[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading] + +## Modern Web Typography + +### Fluid & Responsive Type + +[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales] + +### Advanced Features + +[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles] + +### Performance Optimization + +[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions] + +## Typography System Architecture + +### Token Structure + +[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing] + +### Implementation + +[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens] + +## Accessibility Considerations + +[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices] + +--- + +**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it. + +**NEVER**: +- Use more than 2-3 font families in a single project +- Sacrifice readability for aesthetic novelty +- Ignore font loading performance +- Skip fallback font definitions +- Use decorative fonts for body text +- Implement arbitrary font sizes without a systematic scale + +Remember: Typography is 95% of design. Master it, and everything else becomes easier. + + +--- + +## Reference: interaction-design + +# Interaction Design + +This reference guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. + +The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve. + +## Interaction Design Thinking + +Before designing interactions, understand the user's mental model and context: + +- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)? +- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances. +- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards. +- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation? + +**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface. + +Then implement interactions that are: +- Intuitive with clear affordances and feedback +- Accessible to all users and input methods +- Forgiving with error prevention and recovery +- Responsive with immediate feedback and state changes + +## Interaction States + +### Core States + +[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each] + +### State Transitions + +[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent] + +### Loading & Progress States + +[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting] + +## Affordances & Feedback + +### Visual Affordances + +[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting] + +### Immediate Feedback + +[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals] + +### Haptic & Sound Feedback + +[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback] + +## Form Design & Input Patterns + +### Form Layout & Structure + +[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms] + +### Input Field Design + +[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking] + +### Validation Patterns + +[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication] + +### Complex Input Types + +[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search] + +### Progressive Disclosure in Forms + +[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually] + +### Form Error Handling + +[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors] + +## Touch & Pointer Interactions + +### Touch Targets + +[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile] + +### Touch vs Pointer Patterns + +[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom] + +### Gesture Design + +[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability] + +## Keyboard Navigation + +### Focus Management + +[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals] + +### Keyboard Shortcuts + +[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows] + +### Accessible Interaction Patterns + +[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements] + +## Navigation Patterns + +### Menu & Navigation Design + +[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more] + +### Modal & Dialog Patterns + +[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns] + +### Command & Context Menus + +[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets] + +## Error Prevention & Recovery + +### Constraints & Guards + +[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms] + +### Error Messages + +[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors] + +### Undo & Redo + +[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save] + +--- + +**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard. + +**NEVER**: +- Remove focus indicators without providing visible alternatives (accessibility violation) +- Use placeholder text as labels (disappears on input, hard to remember) +- Make touch targets smaller than 44x44px +- Validate in real-time for long inputs (wait for blur) +- Show generic error messages ("Error occurred") - be specific and helpful +- Block user interaction without clear loading states +- Design only for mouse/pointer (test with keyboard and touch) +- Use custom controls without proper ARIA and keyboard support + +Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. + + +--- + +## Reference: color-and-contrast + +# Color & Contrast + +This reference guides the creation of color systems that are both beautiful and functional, balancing creative expression with accessibility and systematic coherence. + +The user provides a color challenge: building a color palette, implementing theming, fixing contrast issues, establishing brand colors, or creating dark mode variants. They may include brand guidelines, accessibility requirements, or existing design constraints. + +## Color System Thinking + +Before choosing colors, understand the strategic requirements: + +- **Brand & Emotion**: What feelings should the colors evoke? Trust (blues)? Energy (reds/oranges)? Growth (greens)? Luxury (purples/golds)? Colors are never neutral. +- **Functional Requirements**: How many semantic states needed? Success, error, warning, info? How many UI layers? Background, surface, border, text? +- **Context**: Industry conventions (avoid red for finance), cultural considerations, competitor differentiation. +- **Accessibility Goals**: WCAG level (A/AA/AAA), audience considerations (aging users need higher contrast). + +**CRITICAL**: Color is both an art and a science. Aesthetics matter, but accessibility is non-negotiable. + +Then build a color system that is: +- Accessible and WCAG compliant +- Systematically organized with clear roles +- Flexible enough for theming and variations +- Aesthetically cohesive and on-brand + +## Color Theory Fundamentals + +### Color Harmony & Relationships + +[TO BE DEVELOPED: Complementary, analogous, triadic, split-complementary, monochromatic schemes, color wheel navigation] + +### Color Psychology & Meaning + +[TO BE DEVELOPED: Emotional associations, cultural considerations, industry conventions, semantic color choices] + +### Color Properties + +[TO BE DEVELOPED: Hue, saturation, lightness/brightness, HSL vs RGB vs LCH, perceptual uniformity] + +## Building Functional Palettes + +### Palette Structure + +[TO BE DEVELOPED: Primary/secondary/tertiary, neutral scales (9-11 steps), semantic colors, state colors] + +### Generating Color Scales + +[TO BE DEVELOPED: Lightness curves, saturation shifts, hue rotation, perceptual uniformity, algorithmic generation] + +### The Dominant Color Principle + +[TO BE DEVELOPED: 60-30-10 rule, accent color strategy, visual weight distribution, avoiding rainbow vomit] + +## Contrast & Accessibility + +### WCAG Compliance + +[TO BE DEVELOPED: AA vs AAA standards, text contrast ratios (4.5:1 / 7:1), UI component contrast (3:1), large text exceptions] + +### Testing & Tools + +[TO BE DEVELOPED: Contrast checkers, automated testing, color blindness simulation, tools for verification] + +### Accessible Color Combinations + +[TO BE DEVELOPED: Which combinations work, which don't, safe pairings, dangerous pairings, contrast matrices] + +## Theming Architecture + +### Light & Dark Mode + +[TO BE DEVELOPED: Independent palettes vs inverted, neutral strategies, shadows in dark mode, image handling] + +### CSS Custom Properties + +[TO BE DEVELOPED: Token hierarchy (primitive → semantic → component), naming conventions, theme switching] + +### Multi-Theme Systems + +[TO BE DEVELOPED: Brand themes, user preference themes, contextual themes, theme inheritance] + +## Advanced Color Techniques + +### Gradients & Effects + +[TO BE DEVELOPED: Mesh gradients, color stops, blend modes, gradient generation, overlay techniques] + +### Transparency & Alpha + +[TO BE DEVELOPED: Alpha channels, overlay strategies, transparency scales, backdrop effects] + +### Dynamic Color + +[TO BE DEVELOPED: State-based color changes, hover darkening/lightening, interactive color feedback] + +--- + +**IMPORTANT**: Test color combinations in context, not in isolation. Colors behave differently on different backgrounds and at different sizes. + +**NEVER**: +- Rely on color alone to convey information +- Use color combinations that fail WCAG contrast requirements +- Create palettes with arbitrary color choices (every color needs a purpose) +- Ignore color blindness (8% of men, 0.5% of women) +- Use pure black (#000) or pure white (#fff) for large areas +- Create theme systems without testing all combinations + +Remember: Color is powerful. Use it deliberately, systematically, and inclusively. + + +--- + +## Reference: responsive-design + +# Responsive Design + +This reference guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. + +The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges. + +## Responsive Design Thinking + +Before implementing, understand the multi-device context: + +- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device? +- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work) +- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support? +- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions? +- **Content Priority**: What's essential on all devices vs optional on larger screens? + +**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context. + +Then build responsive systems that are: +- Mobile-first with progressive enhancement +- Fluid and adaptable across viewport sizes +- Optimized for different input methods +- Performant on constrained devices +- Contextually appropriate + +## Mobile-First Methodology + +### Why Mobile-First + +[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance] + +### Mobile-First Implementation + +[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach] + +## Breakpoint Strategies + +### Choosing Breakpoints + +[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints] + +### Breakpoint Architecture + +[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase] + +## Fluid & Adaptive Design + +### Fluid Typography + +[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability] + +### Fluid Spacing + +[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding] + +### Fluid Layouts + +[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers] + +### Container Queries + +[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills] + +## Layout Adaptation Patterns + +### Navigation Patterns + +[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars] + +### Content Reflow + +[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first] + +### Component Adaptation + +[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure] + +## Touch vs Pointer Optimization + +### Touch Target Sizing + +[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases] + +### Touch-Specific Interactions + +[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns] + +### Hybrid Devices + +[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces] + +## Viewport & Screen Considerations + +### Viewport Meta Tag + +[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale] + +### Safe Areas + +[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas] + +### Orientation Handling + +[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations] + +### High-DPI Screens + +[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images] + +## Responsive Images & Media + +### Responsive Images + +[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading] + +### Video Adaptation + +[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images] + +## Performance on Mobile + +### Mobile Performance Budget + +[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns] + +### Loading Strategies + +[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile] + +## Testing Strategies + +### Device Testing + +[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing] + +### Testing Checklist + +[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds] + +--- + +**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints. + +**NEVER**: +- Design desktop-first and try to cram into mobile +- Hide critical functionality on mobile +- Use device detection instead of feature detection +- Create separate mobile/desktop codebases (maintain one responsive codebase) +- Ignore landscape orientation +- Use fixed pixel values without considering smaller/larger screens +- Forget about tablet (it's not just big phone or small desktop) +- Assume all mobile devices are powerful (many users have older devices) + +Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. diff --git a/dist/gemini/GEMINI.interaction-design.md b/dist/gemini/GEMINI.interaction-design.md deleted file mode 100644 index 93e76b717..000000000 --- a/dist/gemini/GEMINI.interaction-design.md +++ /dev/null @@ -1,146 +0,0 @@ -This skill guides the creation of interaction patterns that are intuitive, accessible, and delightful - the conversation between user and interface. - -The user provides an interaction challenge: designing forms, improving button states, fixing navigation patterns, optimizing input UX, implementing keyboard navigation, or creating feedback mechanisms. They may include accessibility requirements, device constraints, or specific interaction problems to solve. - -## Interaction Design Thinking - -Before designing interactions, understand the user's mental model and context: - -- **User Context**: What are users trying to accomplish? What's their experience level? What's their emotional state (stressed during checkout vs relaxed browsing)? -- **Device & Input**: Touch vs pointer? Keyboard navigation? Voice input? Gamepad? Different inputs need different affordances. -- **Error Tolerance**: High-stakes actions (delete, purchase) vs low-stakes (filter, sort)? Design appropriate safeguards. -- **Speed vs Accuracy**: Quick scanning vs careful reading? Simple taps vs precise manipulation? - -**CRITICAL**: Good interaction design is invisible. Users should complete tasks without thinking about the interface. - -Then implement interactions that are: -- Intuitive with clear affordances and feedback -- Accessible to all users and input methods -- Forgiving with error prevention and recovery -- Responsive with immediate feedback and state changes - -## Interaction States - -### Core States - -[TO BE DEVELOPED: Default, hover, focus, active, disabled, loading, error, success - visual treatment for each] - -### State Transitions - -[TO BE DEVELOPED: Smooth state changes, animation between states, maintaining context, preserving user intent] - -### Loading & Progress States - -[TO BE DEVELOPED: Skeleton screens, spinners, progress bars, optimistic updates, what to show while waiting] - -## Affordances & Feedback - -### Visual Affordances - -[TO BE DEVELOPED: Signaling interactivity, button appearance, link styling, cursor changes, touch target highlighting] - -### Immediate Feedback - -[TO BE DEVELOPED: Click/tap acknowledgment, hover feedback, focus indication, "something is happening" signals] - -### Haptic & Sound Feedback - -[TO BE DEVELOPED: Vibration patterns, sound cues, cross-modal feedback, when to use non-visual feedback] - -## Form Design & Input Patterns - -### Form Layout & Structure - -[TO BE DEVELOPED: Single column vs multi-column, label placement, field grouping, visual hierarchy in forms] - -### Input Field Design - -[TO BE DEVELOPED: Field sizing, placeholder usage (anti-pattern), helper text, character limits, input masking] - -### Validation Patterns - -[TO BE DEVELOPED: Inline vs on-submit, real-time validation, error message writing, success confirmation, required field indication] - -### Complex Input Types - -[TO BE DEVELOPED: File upload UX, date pickers, time selection, rich text editing, multi-select, autocomplete, search] - -### Progressive Disclosure in Forms - -[TO BE DEVELOPED: Conditional fields, wizards/multi-step forms, accordions, showing complexity gradually] - -### Form Error Handling - -[TO BE DEVELOPED: Error prevention (constraints, masks), clear error messages, error recovery, field-level vs form-level errors] - -## Touch & Pointer Interactions - -### Touch Targets - -[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge reach areas on mobile] - -### Touch vs Pointer Patterns - -[TO BE DEVELOPED: Hover states on touch (problems), tap feedback, long press, swipe gestures, pinch-to-zoom] - -### Gesture Design - -[TO BE DEVELOPED: Swipe to delete, pull to refresh, drag to reorder, custom gestures, gesture discoverability] - -## Keyboard Navigation - -### Focus Management - -[TO BE DEVELOPED: Focus rings (never remove without replacement), logical tab order, skip links, focus trapping in modals] - -### Keyboard Shortcuts - -[TO BE DEVELOPED: Common shortcuts, discoverability, avoiding conflicts, command palettes, keyboard-first workflows] - -### Accessible Interaction Patterns - -[TO BE DEVELOPED: ARIA roles for custom controls, managing focus in dynamic content, screen reader announcements] - -## Navigation Patterns - -### Menu & Navigation Design - -[TO BE DEVELOPED: Mega menus, hamburger menus, breadcrumbs, tabs, pagination, infinite scroll vs load more] - -### Modal & Dialog Patterns - -[TO BE DEVELOPED: Modal entry/exit, focus management, escape to close, backdrop click behavior, sheet patterns] - -### Command & Context Menus - -[TO BE DEVELOPED: Right-click menus, command palettes, dropdown menus, action sheets] - -## Error Prevention & Recovery - -### Constraints & Guards - -[TO BE DEVELOPED: Input constraints, disabled states, confirmation dialogs for destructive actions, undo mechanisms] - -### Error Messages - -[TO BE DEVELOPED: Clear language, actionable guidance, positive framing, where to show errors, when to show errors] - -### Undo & Redo - -[TO BE DEVELOPED: Undo patterns, toast notifications with undo, versioning, draft auto-save] - ---- - -**IMPORTANT**: Test interactions with actual users and diverse input methods. What works with a mouse might fail with touch or keyboard. - -**NEVER**: -- Remove focus indicators without providing visible alternatives (accessibility violation) -- Use placeholder text as labels (disappears on input, hard to remember) -- Make touch targets smaller than 44x44px -- Validate in real-time for long inputs (wait for blur) -- Show generic error messages ("Error occurred") - be specific and helpful -- Block user interaction without clear loading states -- Design only for mouse/pointer (test with keyboard and touch) -- Use custom controls without proper ARIA and keyboard support - -Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place. \ No newline at end of file diff --git a/dist/gemini/GEMINI.md b/dist/gemini/GEMINI.md index 9e1d272e4..21d698030 100644 --- a/dist/gemini/GEMINI.md +++ b/dist/gemini/GEMINI.md @@ -6,54 +6,12 @@ This repository contains specialized skills for different tasks. When you detect Each skill provides deep expertise in its domain. The skills below are automatically imported and will guide your responses: -### ux-writing - -**When to use**: Write clear, helpful, and human interface copy that users understand immediately. Use this skill when crafting microcopy, improving error messages, or establishing voice and tone. Produces concise, empathetic copy that guides users confidently through tasks without confusion or frustration. - -@./GEMINI.ux-writing.md - -### spatial-design - -**When to use**: Master spatial design balancing systematic precision with artistic composition. Use this skill when building spacing systems, establishing grids, or improving visual hierarchy. Creates systematically organized layouts with compelling visual hierarchy and intentional spatial relationships. - -@./GEMINI.spatial-design.md - -### motion-design - -**When to use**: Create purposeful motion that enhances usability and provides feedback without sacrificing performance. Use this skill when adding animations, building micro-interactions, or establishing motion systems. Produces smooth, delightful animations that guide attention and reinforce interactions while maintaining 60fps performance. - -@./GEMINI.motion-design.md - -### typography - -**When to use**: Master typography systems that balance timeless principles with modern web capabilities. Use this skill when building type systems, improving readability, or establishing typographic hierarchy. Creates readable, systematically coherent typography that is both performant and aesthetically distinctive. - -@./GEMINI.typography.md - ### frontend-design -**When to use**: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. +**When to use**: Create distinctive, production-grade frontend interfaces with comprehensive expertise in typography, color systems, spatial design, responsive layouts, interaction patterns, motion, and UX writing. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. @./GEMINI.frontend-design.md -### interaction-design - -**When to use**: Design intuitive interaction patterns that feel natural and provide clear feedback. Use this skill when building interactive components, designing forms, or establishing interaction standards. Creates accessible, forgiving interfaces where every state is clear and every action provides immediate feedback. - -@./GEMINI.interaction-design.md - -### color-and-contrast - -**When to use**: Build sophisticated color systems balancing aesthetics with accessibility and function. Use this skill when establishing brand palettes, implementing theming, or ensuring WCAG compliance. Produces beautiful, accessible color implementations with systematic coherence across all theme variants. - -@./GEMINI.color-and-contrast.md - -### responsive-design - -**When to use**: Create responsive interfaces that adapt beautifully across devices, screen sizes, and input methods. Use this skill when building mobile-first layouts, defining breakpoint strategies, or optimizing for touch. Produces fluid, performant experiences that feel native to each device while maintaining consistency. - -@./GEMINI.responsive-design.md - ## How Skills Work diff --git a/dist/gemini/GEMINI.motion-design.md b/dist/gemini/GEMINI.motion-design.md deleted file mode 100644 index 9a602ac0d..000000000 --- a/dist/gemini/GEMINI.motion-design.md +++ /dev/null @@ -1,105 +0,0 @@ -This skill guides the creation of motion design that enhances usability, provides feedback, and creates delight - without sacrificing performance or accessibility. - -The user provides a motion challenge: adding animations to components, improving interaction feedback, building page transitions, creating micro-interactions, or establishing motion design systems. They may include performance constraints, aesthetic goals, or specific interaction problems to solve. - -## Motion Design Thinking - -Before animating anything, understand the purpose and context: - -- **Purpose**: Why animate? Feedback? Delight? Guidance? Branding? Every animation needs a reason beyond "it looks cool." -- **Personality**: What character should motion convey? Snappy and energetic? Smooth and luxurious? Playful and bouncy? Subtle and refined? -- **Performance Budget**: Mobile devices? Complex pages? Can we afford GPU-intensive animations? -- **Accessibility**: Motion sensitivity, vestibular disorders, reduced motion preferences - some users need minimal animation. - -**CRITICAL**: Animation should enhance understanding and usability, not obscure it. When in doubt, be subtle. Users notice janky animation more than no animation. - -Then implement motion that is: -- Purposeful with clear functional or emotional goals -- Performant with smooth 60fps execution -- Accessible with reduced motion alternatives -- Choreographed with thoughtful timing and sequencing - -## Classic Animation Principles - -### Disney's 12 Principles (Web Context) - -[TO BE DEVELOPED: Squash and stretch, anticipation, staging, follow-through, ease-in/ease-out, arcs, secondary action, timing, exaggeration, solid drawing, appeal - adapted for UI] - -### Timing & Duration - -[TO BE DEVELOPED: Micro-interactions (100-300ms), transitions (300-500ms), complex animations (500-1000ms), duration by distance, perceived speed] - -### Easing & Curves - -[TO BE DEVELOPED: Linear vs eased, ease-out (enter), ease-in (exit), ease-in-out (full cycle), custom cubic-bezier, spring physics] - -## Types of UI Animation - -### Micro-interactions - -[TO BE DEVELOPED: Button feedback, hover states, toggle switches, like buttons, form validation feedback, loading indicators] - -### Page Transitions - -[TO BE DEVELOPED: Route transitions, modal entry/exit, drawer animations, cross-fade, slide, zoom patterns] - -### State Transitions - -[TO BE DEVELOPED: Loading → success → error flows, expand/collapse, show/hide, enable/disable state changes] - -### Scrolling & Parallax - -[TO BE DEVELOPED: Scroll-triggered animations, reveal on scroll, parallax layers, scroll-linked effects, intersection observer] - -## Choreography & Sequencing - -### Staggered Animations - -[TO BE DEVELOPED: animation-delay patterns, sequential reveals, cascade effects, list item staggering] - -### Orchestrated Page Loads - -[TO BE DEVELOPED: Entry choreography, hero → content → details, creating narrative through sequence, attention management] - -### Exit Choreography - -[TO BE DEVELOPED: Reverse sequences, intentional exit timing, maintaining spatial relationships during exit] - -## Technical Implementation - -### CSS-Only Animation - -[TO BE DEVELOPED: @keyframes, animation properties, transitions, transform, pseudo-element animations, hardware acceleration] - -### JavaScript Animation - -[TO BE DEVELOPED: Web Animations API, requestAnimationFrame, animation libraries (GSAP, Framer Motion, Motion One)] - -### Performance Optimization - -[TO BE DEVELOPED: GPU acceleration (transform, opacity only), will-change, avoiding layout thrashing, reducing paint, FPS monitoring] - -## Motion Design Systems - -### Motion Tokens - -[TO BE DEVELOPED: Duration scales, easing tokens, named animations, consistent motion vocabulary] - -### Reduced Motion - -[TO BE DEVELOPED: prefers-reduced-motion, graceful degradation, essential vs decorative animation, crossfade alternatives] - ---- - -**IMPORTANT**: One well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions everywhere. Focus on high-impact moments. - -**NEVER**: -- Animate everything (animation fatigue is real) -- Use long durations (>500ms) for UI feedback (users will perceive lag) -- Animate layout properties (width, height, top, left) - use transform instead -- Ignore prefers-reduced-motion (accessibility requirement) -- Use animation to hide slow loading (fix the loading time) -- Animate without purpose (every animation should answer "why?") -- Create animations that obscure content or block interaction - -Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively. \ No newline at end of file diff --git a/dist/gemini/GEMINI.responsive-design.md b/dist/gemini/GEMINI.responsive-design.md deleted file mode 100644 index 9583133de..000000000 --- a/dist/gemini/GEMINI.responsive-design.md +++ /dev/null @@ -1,152 +0,0 @@ -This skill guides the creation of responsive interfaces that adapt beautifully across devices, screen sizes, input methods, and usage contexts. - -The user provides a responsive design challenge: building mobile-first layouts, defining breakpoint strategies, optimizing for touch vs pointer, creating fluid designs, or solving specific cross-device problems. They may include device requirements, constraints, or specific adaptation challenges. - -## Responsive Design Thinking - -Before implementing, understand the multi-device context: - -- **Device Landscape**: Which devices matter? (Mobile, tablet, desktop, TV, watch?) What's the primary device? -- **Usage Context**: How do usage patterns differ by device? (On-the-go mobile vs focused desktop work) -- **Input Methods**: Touch, pointer, keyboard, voice, gamepad - what input methods need support? -- **Network Conditions**: Fast wifi vs slow 3G - how does this impact design decisions? -- **Content Priority**: What's essential on all devices vs optional on larger screens? - -**CRITICAL**: Responsive design is not just about scaling - it's about adapting the experience appropriately for each context. - -Then build responsive systems that are: -- Mobile-first with progressive enhancement -- Fluid and adaptable across viewport sizes -- Optimized for different input methods -- Performant on constrained devices -- Contextually appropriate - -## Mobile-First Methodology - -### Why Mobile-First - -[TO BE DEVELOPED: Progressive enhancement, performance benefits, forces priority decisions, mobile usage dominance] - -### Mobile-First Implementation - -[TO BE DEVELOPED: Start with mobile styles, add complexity with min-width media queries, content-first approach] - -## Breakpoint Strategies - -### Choosing Breakpoints - -[TO BE DEVELOPED: Content-driven vs device-driven, common breakpoint values, in-between states, avoiding too many breakpoints] - -### Breakpoint Architecture - -[TO BE DEVELOPED: Named breakpoints, breakpoint tokens, consistent usage across codebase] - -## Fluid & Adaptive Design - -### Fluid Typography - -[TO BE DEVELOPED: clamp(), viewport units, fluid type scales, maintaining readability] - -### Fluid Spacing - -[TO BE DEVELOPED: Responsive spacing scales, container-relative spacing, clamp() for margins/padding] - -### Fluid Layouts - -[TO BE DEVELOPED: CSS Grid auto-fit/auto-fill, flexible columns, aspect-ratio, fluid containers] - -### Container Queries - -[TO BE DEVELOPED: Component-level responsiveness, when to use vs media queries, polyfills] - -## Layout Adaptation Patterns - -### Navigation Patterns - -[TO BE DEVELOPED: Mobile hamburger/drawer, tablet side panel, desktop persistent nav, bottom nav bars] - -### Content Reflow - -[TO BE DEVELOPED: Single column → multi-column, stacking orders, priority content first] - -### Component Adaptation - -[TO BE DEVELOPED: Tabs → accordion, horizontal → vertical, show/hide patterns, progressive disclosure] - -## Touch vs Pointer Optimization - -### Touch Target Sizing - -[TO BE DEVELOPED: 44x44px minimum, spacing between targets, thumb zones, edge cases] - -### Touch-Specific Interactions - -[TO BE DEVELOPED: Swipe gestures, pull-to-refresh, long press, avoiding hover-dependent patterns] - -### Hybrid Devices - -[TO BE DEVELOPED: Supporting both touch and pointer, feature detection, adaptive interfaces] - -## Viewport & Screen Considerations - -### Viewport Meta Tag - -[TO BE DEVELOPED: Proper viewport configuration, zoom control, initial scale] - -### Safe Areas - -[TO BE DEVELOPED: iPhone notch, rounded corners, system UI insets, padding for safe areas] - -### Orientation Handling - -[TO BE DEVELOPED: Portrait vs landscape, orientation-specific layouts, testing both orientations] - -### High-DPI Screens - -[TO BE DEVELOPED: Retina images, 2x/3x assets, SVG for icons, responsive images] - -## Responsive Images & Media - -### Responsive Images - -[TO BE DEVELOPED: srcset, sizes, picture element, art direction, lazy loading] - -### Video Adaptation - -[TO BE DEVELOPED: Responsive video embeds, bandwidth considerations, poster images] - -## Performance on Mobile - -### Mobile Performance Budget - -[TO BE DEVELOPED: Constrained CPU/memory, slow connections, battery concerns] - -### Loading Strategies - -[TO BE DEVELOPED: Critical path optimization, lazy loading, code splitting for mobile] - -## Testing Strategies - -### Device Testing - -[TO BE DEVELOPED: Real device testing, browser DevTools, emulators, viewport testing] - -### Testing Checklist - -[TO BE DEVELOPED: Different viewports, orientations, input methods, connection speeds] - ---- - -**IMPORTANT**: Test on real devices, not just DevTools. Device emulation is useful but misses real-world constraints. - -**NEVER**: -- Design desktop-first and try to cram into mobile -- Hide critical functionality on mobile -- Use device detection instead of feature detection -- Create separate mobile/desktop codebases (maintain one responsive codebase) -- Ignore landscape orientation -- Use fixed pixel values without considering smaller/larger screens -- Forget about tablet (it's not just big phone or small desktop) -- Assume all mobile devices are powerful (many users have older devices) - -Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency. \ No newline at end of file diff --git a/dist/gemini/GEMINI.spatial-design.md b/dist/gemini/GEMINI.spatial-design.md deleted file mode 100644 index 95fdf046b..000000000 --- a/dist/gemini/GEMINI.spatial-design.md +++ /dev/null @@ -1,122 +0,0 @@ -This skill guides the creation of spatial systems that balance mathematical precision with artistic composition, ensuring interfaces are both systematically organized and visually compelling. - -The user provides a layout challenge: building spacing systems, establishing grids, improving visual hierarchy, fixing composition issues, or implementing responsive layouts. They may include design system constraints, aesthetic goals, or specific spatial problems to solve. - -## Spatial Design Thinking - -Before arranging elements, understand the compositional strategy: - -- **Content Priority**: What's most important? What should users see first, second, third? Hierarchy starts here. -- **Visual Weight Distribution**: Where should the eye go? Balanced or intentionally unbalanced? Symmetrical or asymmetric? -- **Density vs Breathing Room**: Controlled density (information-rich) or generous space (editorial)? Match context and audience. -- **Reading Patterns**: Z-pattern (scanning), F-pattern (text-heavy), focal point (marketing), free-form (experimental)? - -**CRITICAL**: Space is not empty - it's an active design element. Negative space gives positive elements room to breathe and meaning. - -Then build layout systems that are: -- Systematically consistent with clear spacing rules -- Visually balanced with intentional hierarchy -- Responsive and adaptive across viewports -- Compositionally strong with clear focal points - -## Classic Composition Principles - -### Visual Hierarchy Fundamentals - -[TO BE DEVELOPED: Size, weight, color, position, contrast as hierarchy tools, Gestalt principles (proximity, similarity, closure)] - -### Balance & Symmetry - -[TO BE DEVELOPED: Symmetrical vs asymmetrical balance, visual weight calculation, creating tension and resolution] - -### The Rule of Thirds & Golden Ratio - -[TO BE DEVELOPED: Classic composition grids, golden ratio applications, when to follow vs break rules] - -### Focal Points & Eye Movement - -[TO BE DEVELOPED: Creating focal points, directing eye flow, Z/F/circular patterns, intentional disruption] - -## Spacing Systems - -### Spacing Scales - -[TO BE DEVELOPED: 4pt/8pt systems, modular scales, mathematical progressions (linear, exponential, Fibonacci)] - -### Vertical Rhythm - -[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, spacing ratios, rhythm across components] - -### Micro vs Macro Space - -[TO BE DEVELOPED: Component-internal spacing, between-component spacing, section spacing, page-level breathing room] - -### Spacing Token Architecture - -[TO BE DEVELOPED: Primitive spacing tokens, semantic spacing (component gaps, section padding), contextual spacing] - -## Grid Systems & Layout Patterns - -### Grid Fundamentals - -[TO BE DEVELOPED: Column grids, modular grids, baseline grids, grid anatomy (columns, gutters, margins)] - -### Classic Layout Patterns - -[TO BE DEVELOPED: Sidebar layouts, holy grail, card grids, masonry, magazine layouts, asymmetric layouts] - -### Modern CSS Layout - -[TO BE DEVELOPED: CSS Grid (explicit placement, auto-placement, grid areas), Flexbox (direction, alignment, distribution), Container Queries] - -## Creating Visual Hierarchy - -### Hierarchy Through Scale - -[TO BE DEVELOPED: Size relationships, proportional scaling, meaningful jumps vs gradual progression] - -### Hierarchy Through Weight & Color - -[TO BE DEVELOPED: Visual weight calculation, using color for emphasis, combining multiple hierarchy tools] - -### Hierarchy Through Position - -[TO BE DEVELOPED: Placement importance, reading order, visual flow direction, breaking the grid for emphasis] - -## Responsive Spatial Design - -### Breakpoint Strategy - -[TO BE DEVELOPED: Mobile-first vs desktop-first, breakpoint values, in-between states, content-driven breakpoints] - -### Layout Adaptation - -[TO BE DEVELOPED: Reflow patterns, navigation transformation, content prioritization, progressive disclosure] - -### Fluid Spacing & Layout - -[TO BE DEVELOPED: clamp() for spacing, viewport units, fluid grids, container-relative spacing] - -## Depth & Layering - -### Creating Depth - -[TO BE DEVELOPED: Layering, shadows, elevation systems, z-index scales, parallax effects] - -### Overlap & Intersection - -[TO BE DEVELOPED: Intentional overlap, breaking containers, elements that cross boundaries] - ---- - -**IMPORTANT**: Systematic spacing doesn't mean boring. Use the system as a foundation, then break it intentionally for impact. - -**NEVER**: -- Use arbitrary spacing values outside your scale (unless intentionally breaking the system) -- Create layouts that ignore natural reading patterns without good reason -- Forget that white space is a design element, not wasted space -- Make all spacing equal (variety creates hierarchy) -- Build responsive layouts that only work at breakpoint edges -- Create hierarchy through size alone (combine multiple tools) - -Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally. \ No newline at end of file diff --git a/dist/gemini/GEMINI.typography.md b/dist/gemini/GEMINI.typography.md deleted file mode 100644 index ba04728aa..000000000 --- a/dist/gemini/GEMINI.typography.md +++ /dev/null @@ -1,90 +0,0 @@ -This skill guides the creation and refinement of typography systems that balance timeless principles with modern web capabilities. - -The user provides a typography challenge: building a type system, improving readability, selecting fonts, fixing hierarchy, or implementing responsive typography. They may include context about the project's aesthetic direction, constraints, or specific problems to solve. - -## Typography Thinking - -Before implementing, understand the context and establish a clear typographic voice: - -- **Purpose & Audience**: What is being communicated? Who is reading? Technical docs need different type than marketing pages. -- **Tone & Character**: What personality should the typography convey? Authoritative? Playful? Elegant? Minimal? The fonts and system should embody this. -- **Constraints**: Performance budgets, browser support, existing design system, accessibility requirements. -- **Reading Context**: Long-form reading vs scanning, dense information vs spacious editorial, desktop vs mobile primary usage. - -**CRITICAL**: Typography is the voice of your interface. Invest time in getting it right - it impacts every single screen. - -Then build or refine a typography system that is: -- Readable and accessible across devices and contexts -- Systematically coherent with clear hierarchy -- Performant and technically sound -- Aesthetically distinctive and appropriate for the brand - -## Classic Typography Principles - -### Vertical Rhythm & Baseline Grids - -[TO BE DEVELOPED: Baseline grids, consistent vertical spacing, maintaining rhythm across components] - -### Modular Scale & Hierarchy - -[TO BE DEVELOPED: Scale ratios, establishing hierarchy through size/weight/spacing, visual balance] - -### Readability & Measure - -[TO BE DEVELOPED: Line length (45-75 CPL), line height ratios, paragraph spacing, optimal reading conditions] - -## Font Selection & Pairing - -### Choosing Distinctive Fonts - -[TO BE DEVELOPED: Avoiding generic choices, character in typefaces, matching tone to content, Google Fonts alternatives] - -### Pairing Principles - -[TO BE DEVELOPED: Contrast-based pairing, display + body, serif + sans, mono + geometric, variable fonts] - -### Web Font Loading - -[TO BE DEVELOPED: FOUT/FOIT strategies, font-display, subsetting, variable fonts, preloading] - -## Modern Web Typography - -### Fluid & Responsive Type - -[TO BE DEVELOPED: clamp(), viewport units, container query typography, breakpoint-based scales] - -### Advanced Features - -[TO BE DEVELOPED: OpenType features, ligatures, font-feature-settings, kerning, number styles] - -### Performance Optimization - -[TO BE DEVELOPED: Font loading strategies, subsetting, variable fonts vs static, hosting decisions] - -## Typography System Architecture - -### Token Structure - -[TO BE DEVELOPED: Font stacks, size scales, weight scales, line heights, letter spacing] - -### Implementation - -[TO BE DEVELOPED: CSS custom properties, utility classes, semantic vs primitive tokens] - -## Accessibility Considerations - -[TO BE DEVELOPED: Text scaling, contrast ratios, font sizes, dyslexia-friendly choices] - ---- - -**IMPORTANT**: Balance trendy font choices with timeless readability principles. A distinctive font is worthless if users can't comfortably read it. - -**NEVER**: -- Use more than 2-3 font families in a single project -- Sacrifice readability for aesthetic novelty -- Ignore font loading performance -- Skip fallback font definitions -- Use decorative fonts for body text -- Implement arbitrary font sizes without a systematic scale - -Remember: Typography is 95% of design. Master it, and everything else becomes easier. \ No newline at end of file diff --git a/package.json b/package.json index 59e3f976c..f88f090d3 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,8 @@ "bun-plugin-tailwind": "^0.1.2" }, "dependencies": { + "lenis": "^1.3.16", + "motion": "^12.23.26", "tailwindcss": "^4.1.18" } } diff --git a/public/app.js b/public/app.js index 6dee8a900..85959db8b 100644 --- a/public/app.js +++ b/public/app.js @@ -1,60 +1,59 @@ -// ============================================ -// MAIN APP - Entry point and orchestration -// ============================================ - import { - renderWorkflowDiagram, - selectCommand, -} from "./js/commands.js"; -import { renderSkillsNav, selectSkill } from "./js/skills.js"; + initGlassTerminal, + renderTerminalLayout, +} from "./js/components/glass-terminal.js"; +import { initLensEffect } from "./js/components/lens.js"; +import { initHeroEffect } from "./js/effects/liquid-canvas.js"; +import { initScrollReveal } from "./js/utils/reveal.js"; +import { initScrollIndicator, initSmoothScroll } from "./js/utils/scroll.js"; // ============================================ // STATE // ============================================ -let allSkills = []; let allCommands = []; // ============================================ -// INITIALIZATION +// CONTENT LOADING // ============================================ async function loadContent() { try { - const [skillsRes, commandsRes] = await Promise.all([ - fetch("/api/skills"), + const [commandsRes, patternsRes] = await Promise.all([ fetch("/api/commands"), + fetch("/api/patterns"), ]); - allSkills = await skillsRes.json(); allCommands = await commandsRes.json(); + const patternsData = await patternsRes.json(); - // Render skills - renderSkillsNav(allSkills, (skill) => selectSkill(skill, allSkills)); + // Render commands (Glass Terminal) + renderTerminalLayout(allCommands); - // Render commands workflow - renderWorkflowDiagram(allCommands, (cmd) => - selectCommand(cmd, allCommands), - ); - - // Select first items by default - if (allSkills.length > 0) selectSkill(allSkills[0], allSkills); - if (allCommands.length > 0) selectCommand(allCommands[0], allCommands); + // Render patterns and antipatterns + renderPatterns(patternsData.patterns, "patterns-grid", "pattern"); + renderPatterns(patternsData.antipatterns, "antipatterns-grid", "antipattern"); } catch (error) { console.error("Failed to load content:", error); } } -// ============================================ -// UTILITIES -// ============================================ +function renderPatterns(categories, containerId, classPrefix) { + const container = document.getElementById(containerId); + if (!container || !categories) return; -function animateIn() { - const elements = document.querySelectorAll("[data-animate]:not(.animated)"); - elements.forEach((el, i) => { - el.style.animationDelay = `${i * 0.05}s`; - el.classList.add("animated"); - }); + container.innerHTML = categories + .map( + (category) => ` +
+

${category.name}

+ +
+ `, + ) + .join(""); } // ============================================ @@ -74,13 +73,20 @@ document.addEventListener("click", (e) => { // STARTUP // ============================================ -if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", loadContent); -} else { +function init() { + initSmoothScroll(); + initScrollIndicator(); + initHeroEffect(); + initLensEffect(); + initScrollReveal(); + initGlassTerminal(); loadContent(); + + document.body.classList.add("loaded"); } -window.addEventListener("load", () => { - document.body.classList.add("loaded"); - animateIn(); -}); +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init); +} else { + init(); +} diff --git a/public/css/gallery.css b/public/css/gallery.css index c20cd97ea..6d05231c3 100644 --- a/public/css/gallery.css +++ b/public/css/gallery.css @@ -1,395 +1,175 @@ -/** - * Gallery Component - Updated for new skills/commands layouts - */ +/* Gallery - Renaissance Edition */ -/* Skills Navigation - Vertical sidebar */ -.skills-nav { +.skills-section { + position: relative; + padding: var(--spacing-xl) 0; + overflow: hidden; + background: var(--color-bg); +} + +.skills-gallery { + display: block; /* Override grid from previous version */ + position: relative; +} + +/* The horizontal track */ +.gallery-track { display: flex; - flex-direction: column; - gap: 2px; + gap: var(--spacing-lg); + overflow-x: auto; + scroll-snap-type: x mandatory; + padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl); + -webkit-overflow-scrolling: touch; + scrollbar-width: none; /* Firefox */ + cursor: grab; } -.skill-nav-item { - padding: var(--spacing-sm) var(--spacing-md); - background: transparent; - border: none; - border-left: 2px solid transparent; - color: var(--color-ash); - font-family: var(--font-body); - font-size: 0.9375rem; - font-weight: 400; - cursor: pointer; - transition: all 0.2s ease; - text-align: left; - text-decoration: none; - display: block; +.gallery-track:active { + cursor: grabbing; } -.skill-nav-item:hover { - color: var(--color-text); - background: color-mix(in oklch, var(--color-paper) 85%, var(--color-accent)); +.gallery-track::-webkit-scrollbar { + display: none; /* Chrome */ } -.skill-nav-item.active { - color: var(--color-accent); - border-left-color: var(--color-accent); - background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper)); - font-weight: 500; +/* The Art Frame */ +.gallery-frame { + flex: 0 0 80vw; + max-width: 1100px; + scroll-snap-align: center; + position: relative; + background: var(--color-paper); + border: 1px solid var(--color-mist); + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.05), + 0 20px 50px -10px rgba(0, 0, 0, 0.1); + border-radius: 2px; /* Sharp, like a frame */ + overflow: hidden; + opacity: 0.4; + transform: scale(0.95); + transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } -@media (max-width: 968px) { - .skills-nav { - flex-direction: row; - flex-wrap: wrap; - gap: var(--spacing-xs); - } - - .skill-nav-item { - border-left: none; - border-bottom: 2px solid transparent; - padding: var(--spacing-xs) var(--spacing-md); - } - - .skill-nav-item.active { - border-bottom-color: var(--color-accent); - } +/* Active State (Center) */ +.gallery-frame.active { + opacity: 1; + transform: scale(1); + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 40px 100px -20px rgba(0, 0, 0, 0.2); + border-color: var(--color-charcoal); + border-width: 1px; } -/* Skills Showcase - Demo + Info layout */ -.skills-showcase { +/* Frame Content Layout */ +.gallery-content { display: grid; grid-template-columns: 1.2fr 1fr; - gap: var(--spacing-lg); - align-items: start; - - @media (max-width: 1100px) { + height: 600px; /* Fixed height for consistency */ +} + +@media (max-width: 900px) { + .gallery-frame { + flex: 0 0 90vw; + } + .gallery-content { grid-template-columns: 1fr; + height: auto; + min-height: 600px; } } -.skills-showcase .loading { - grid-column: 1 / -1; - min-height: 300px; +/* Visual Side (Demo) */ +.gallery-visual { + background: var(--color-cream); + border-right: 1px solid var(--color-mist); + position: relative; + overflow: hidden; display: flex; align-items: center; justify-content: center; + padding: var(--spacing-lg); } -/* Skill Demo Area */ -.skill-demo-area { - /* Demo container */ -} - -/* Skill Info Panel */ -.skill-info-panel { - /* Info panel */ -} - -.skill-header { - margin-bottom: var(--spacing-md); -} - -.skill-header h3 { - font-family: var(--font-display); - font-size: 1.75rem; - font-weight: 300; - font-style: italic; - margin: 0 0 var(--spacing-xs) 0; - color: var(--color-text); - letter-spacing: -0.02em; - line-height: 1.1; -} - -.skill-header .meta { +/* Info Side */ +.gallery-info { + padding: var(--spacing-xl); display: flex; - gap: var(--spacing-sm); - align-items: center; - color: var(--color-ash); - font-size: 0.8125rem; - font-weight: 400; - letter-spacing: 0.03em; - text-transform: uppercase; + flex-direction: column; + overflow-y: auto; } -.skill-header .meta a { - color: var(--color-accent); - text-decoration: none; - transition: opacity 0.2s ease; -} - -.skill-header .meta a:hover { - opacity: 0.7; -} - -.skill-description { - font-size: 0.9375rem; - line-height: 1.6; - margin-bottom: var(--spacing-md); - color: var(--color-charcoal); - max-width: 50ch; -} - -/* Skill Sections (Focus Areas, Relationships) */ -.skill-section { +.gallery-header { margin-bottom: var(--spacing-lg); } -.skill-section h4 { - font-family: var(--font-body); +.gallery-title { + font-family: var(--font-display); + font-size: 2.5rem; + font-style: italic; + margin: 0 0 var(--spacing-xs); + color: var(--color-ink); +} + +.gallery-meta { + font-family: var(--font-mono); font-size: 0.75rem; - font-weight: 600; - margin: 0 0 var(--spacing-sm) 0; - color: var(--color-ash); text-transform: uppercase; letter-spacing: 0.1em; -} - -/* Focus Areas - Compact list */ -.focus-areas-compact { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-xs); -} - -.focus-area-tag { - display: inline-flex; - align-items: center; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--color-paper); - border-radius: 3px; - font-size: 0.8125rem; -} - -.focus-area-tag strong { - color: var(--color-text); - font-weight: 500; -} - -.focus-area-tag span { color: var(--color-ash); - font-size: 0.75rem; } -/* Relationship Tags */ -.relationship-tags { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-xs); -} - -.relationship-tag { - display: inline-block; - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--color-paper); - color: var(--color-text); - border: 1px solid color-mix(in oklch, var(--color-accent) 30%, transparent); - font-size: 0.8125rem; - font-weight: 400; - border-radius: 2px; - transition: all 0.2s ease; - cursor: pointer; -} - -.relationship-tag:hover { - border-color: var(--color-accent); - color: var(--color-accent); - background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper)); -} - -/* Skill Downloads (Icons) */ -.skill-downloads { - display: flex; - align-items: center; - gap: var(--spacing-sm); - padding-top: var(--spacing-md); - margin-top: var(--spacing-md); - border-top: 1px solid var(--color-mist); -} - -.downloads-label { - font-size: 0.75rem; - color: var(--color-ash); - margin-right: var(--spacing-xs); -} - -.download-icon { - display: flex; - align-items: center; - gap: var(--spacing-xs); - padding: 6px 10px; - border-radius: 4px; - background: transparent; - border: 1px solid var(--color-mist); - color: var(--color-ash); - text-decoration: none; - font-size: 0.75rem; - transition: all 0.15s ease; -} - -.download-icon svg { - width: 14px; - height: 14px; - flex-shrink: 0; -} - -.download-icon:hover { - color: var(--color-accent); - border-color: var(--color-accent); - background: color-mix(in oklch, var(--color-accent) 5%, transparent); -} - -/* Command Detail Panel - mirrors skills showcase */ -.command-detail-panel { - display: grid; - grid-template-columns: 1.2fr 1fr; - gap: var(--spacing-lg); - align-items: start; - - @media (max-width: 1100px) { - grid-template-columns: 1fr; - } -} - -.command-demo-area { - /* Command before/after demos */ -} - -.command-info-area { - /* Command info and metadata */ -} - -.command-header h3 { - font-family: 'Space Grotesk', monospace; - font-size: 2rem; - font-weight: 500; - margin: 0 0 var(--spacing-xs) 0; - color: var(--color-text); -} - -.command-header .meta { - display: flex; - gap: var(--spacing-sm); - align-items: center; - color: var(--color-ash); - font-size: 0.8125rem; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.command-description { - font-size: 1rem; - line-height: 1.7; - color: var(--color-charcoal); - margin-bottom: var(--spacing-lg); -} - -/* Process Steps - Compact */ -.process-steps-compact { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-sm); - counter-reset: step; -} - -.process-step-compact { - display: flex; - align-items: center; - gap: var(--spacing-xs); - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--color-paper); - border-radius: 3px; - font-size: 0.8125rem; -} - -.process-step-compact::before { - counter-increment: step; - content: counter(step); - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - background: var(--color-accent); - color: var(--color-paper); - border-radius: 50%; - font-size: 0.6875rem; - font-weight: 600; -} - - -/* Coming Soon States */ -.skill-nav-item.coming-soon, -.command-nav-item.coming-soon { - opacity: 0.7; -} - -.coming-soon-badge { - display: inline-block; - font-size: 0.5625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - padding: 2px 5px; - background: var(--color-mist); - color: var(--color-ash); - border-radius: 2px; - margin-left: var(--spacing-xs); - vertical-align: middle; -} - -.coming-soon-showcase { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding: var(--spacing-2xl); - min-height: 300px; -} - -.coming-soon-icon { - color: var(--color-mist); - margin-bottom: var(--spacing-lg); -} - -.coming-soon-showcase h3 { - font-family: var(--font-display); - font-size: 1.75rem; - font-weight: 300; - font-style: italic; - margin: 0 0 var(--spacing-sm) 0; - color: var(--color-text); -} - -.coming-soon-text { - font-size: 1rem; - color: var(--color-accent); - font-weight: 500; - margin-bottom: var(--spacing-md); -} - -.coming-soon-showcase .skill-description { - max-width: 50ch; - color: var(--color-ash); - font-size: 0.9375rem; +.gallery-desc { + font-size: 1.125rem; line-height: 1.6; + color: var(--color-charcoal); + margin-bottom: var(--spacing-xl); + max-width: 45ch; } -/* Animation */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } +/* Tags within frame */ +.gallery-tags { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-xs); + margin-top: auto; } -.skills-showcase, -.command-detail-panel, -.coming-soon-showcase { - animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); +.gallery-tag { + padding: 6px 12px; + border: 1px solid var(--color-mist); + border-radius: 4px; + font-size: 0.8125rem; + color: var(--color-ash); +} + +/* Map Navigation */ +.gallery-map { + display: flex; + justify-content: center; + gap: 8px; + margin-top: var(--spacing-lg); +} + +.gallery-dot { + width: 40px; + height: 2px; + background: var(--color-mist); + cursor: pointer; + transition: all 0.3s ease; + position: relative; +} + +.gallery-dot::after { + content: ''; + position: absolute; + top: -10px; + bottom: -10px; + left: 0; + right: 0; +} + +.gallery-dot.active { + background: var(--color-accent); + height: 4px; } diff --git a/public/css/main.css b/public/css/main.css index 8f57a0d33..4d9de3942 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,16 +1,14 @@ /* - * impeccable.style — Tailwind CSS v4 + Custom Components + * impeccable.style — Renaissance Redesign * - * Architecture: - * - Tailwind v4 with custom theme tokens - * - Custom components for complex UI patterns - * - Minimal CSS for what Tailwind can't express + * Editorial precision meets fluid motion. + * Light, high-contrast, typographically bold. */ @import "tailwindcss"; /* ============================================ - TAILWIND THEME - Static Design Tokens + TAILWIND THEME - Design Tokens ============================================ */ @theme { @@ -29,13 +27,14 @@ --spacing-3xl: 192px; /* Width */ - --width-max: 1280px; - --width-content: 840px; + --width-max: 1400px; + --width-content: 900px; /* Animation */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); - --duration-fast: 0.2s; + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --duration-fast: 0.15s; --duration-base: 0.3s; --duration-slow: 0.6s; --duration-slower: 0.8s; @@ -43,21 +42,25 @@ } /* ============================================ - COLOR TOKENS - Light/Dark Mode via CSS + COLOR TOKENS - Renaissance Palette ============================================ */ :root { - /* Colors - Light Mode */ + /* Core Colors - Light Mode */ --color-ink: oklch(10% 0 0); --color-text: oklch(10% 0 0); --color-paper: oklch(98% 0 0); + --color-cream: oklch(96% 0.005 350); --color-charcoal: oklch(25% 0 0); --color-ash: oklch(55% 0 0); --color-mist: oklch(92% 0 0); --color-bg: oklch(96% 0.005 350); + + /* Accent - Vibrant Magenta/Rose (original) */ --color-accent: oklch(60% 0.25 350); --color-accent-hover: oklch(52% 0.25 350); --color-accent-dim: oklch(60% 0.25 350 / 0.15); + --color-accent-soft: oklch(60% 0.25 350 / 0.25); } /* Dark Mode */ @@ -66,12 +69,16 @@ --color-ink: oklch(98% 0 0); --color-text: oklch(98% 0 0); --color-paper: oklch(10% 0 0); + --color-cream: oklch(12% 0.005 350); --color-charcoal: oklch(92% 0 0); --color-ash: oklch(65% 0 0); --color-mist: oklch(20% 0 0); --color-bg: oklch(12% 0.005 350); + --color-accent: oklch(68% 0.23 350); --color-accent-hover: oklch(76% 0.23 350); + --color-accent-dim: oklch(68% 0.23 350 / 0.15); + --color-accent-soft: oklch(68% 0.23 350 / 0.25); } } @@ -79,100 +86,1043 @@ BASE STYLES ============================================ */ +* { + box-sizing: border-box; +} + html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; + scroll-behavior: smooth; +} + +html.lenis, html.lenis body { + height: auto; +} + +.lenis.lenis-smooth { + scroll-behavior: auto !important; +} + +.lenis.lenis-smooth [data-lenis-prevent] { + overscroll-behavior: contain; +} + +.lenis.lenis-stopped { + overflow: hidden; } body { font-family: var(--font-body); - color: var(--color-ink); + font-size: 16px; + line-height: 1.6; + color: var(--color-text); background: var(--color-paper); + overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); - font-weight: 600; + font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; + color: var(--color-ink); } a { color: var(--color-accent); text-decoration: none; - transition: opacity var(--duration-fast) var(--ease-out); + transition: color var(--duration-fast) var(--ease-out); } a:hover { - opacity: 0.7; + color: var(--color-accent-hover); +} + +strong { + font-weight: 600; + color: var(--color-ink); +} + +code { + font-family: var(--font-mono); + font-size: 0.9em; + padding: 0.15em 0.4em; + background: var(--color-accent-dim); + color: var(--color-accent); + border-radius: 4px; +} + +::selection { + background: var(--color-accent-soft); + color: var(--color-ink); } /* ============================================ - SECTION TITLE - With accent underline + GRAIN OVERLAY ============================================ */ -.section-title { - font-size: clamp(2rem, 4vw, 3rem); - font-weight: 600; +.grain-overlay { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 9999; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); + background-repeat: repeat; +} + +/* ============================================ + LAYOUT + ============================================ */ + +.site-content { + max-width: var(--width-max); + margin: 0 auto; + padding: 0 var(--spacing-lg); +} + +@media (max-width: 768px) { + .site-content { + padding: 0 var(--spacing-md); + } +} + +/* ============================================ + SECTION HEADERS + ============================================ */ + +.section-header { + margin-bottom: var(--spacing-xl); position: relative; +} + +.section-number { display: block; - padding-bottom: var(--spacing-sm); + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.1em; + color: var(--color-accent); + margin-bottom: var(--spacing-sm); + text-transform: uppercase; +} + +.section-title { + font-size: clamp(2.5rem, 6vw, 4.5rem); + font-weight: 300; + line-height: 1; + margin: 0; + position: relative; } .section-title::after { content: ''; position: absolute; - bottom: -0.25em; + bottom: -0.3em; left: 0; - width: 80px; + width: 60px; height: 2px; background: var(--color-accent); } +.section-subtitle { + font-size: 1.125rem; + color: var(--color-ash); + margin-top: var(--spacing-md); + max-width: 50ch; +} + +.section-lead { + font-size: clamp(1.125rem, 2.5vw, 1.5rem); + line-height: 1.5; + color: var(--color-charcoal); + max-width: 55ch; + margin-bottom: var(--spacing-xl); +} + /* ============================================ - BACKGROUND ATMOSPHERE + HERO SECTION ============================================ */ -body::before { - content: ''; - position: fixed; +.hero-section { + min-height: 100vh; + /* Use dynamic viewport height for mobile browsers */ + min-height: 100dvh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + overflow: hidden; + padding: var(--spacing-2xl) var(--spacing-lg); +} + +.hero-canvas { + position: absolute; inset: 0; - background: - radial-gradient(circle at 20% 30%, var(--color-accent-dim) 0%, transparent 50%), - radial-gradient(circle at 80% 70%, var(--color-accent-dim) 0%, transparent 50%); + width: 100%; + height: 100%; + pointer-events: none; + opacity: 0.4; +} + +.hero-container { + position: relative; + z-index: 1; + text-align: center; + max-width: 900px; +} + +.hero-content { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-md); +} + +.hero-eyebrow { + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--color-accent); + /* Animation handled by JS reveal.js */ +} + +.hero-title { + font-size: clamp(4rem, 15vw, 12rem); + font-weight: 300; + line-height: 0.9; + letter-spacing: -0.04em; + margin: var(--spacing-md) 0; + display: flex; + flex-direction: column; +} + +.hero-title-line { + display: block; +} + +.hero-title-accent { + font-style: italic; + color: var(--color-accent); +} + +.hero-subtitle { + font-size: clamp(1rem, 2.5vw, 1.375rem); + color: var(--color-charcoal); + max-width: 45ch; + line-height: 1.5; +} + +.hero-cta { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-md); + margin-top: var(--spacing-lg); +} + +.hero-providers { + font-size: 0.8125rem; + color: var(--color-ash); + letter-spacing: 0.03em; +} + +.hero-scroll-indicator { + position: absolute; + bottom: var(--spacing-lg); + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-xs); + color: var(--color-ash); + font-size: 0.6875rem; + font-weight: 500; + letter-spacing: 0.1em; + text-transform: uppercase; opacity: 0; - z-index: -1; - animation: fadeInBg var(--duration-slowest) var(--ease-out) 0.3s forwards; + /* Restore simple CSS animation */ + animation: fadeIn 1s var(--ease-out) 1.5s forwards, float 2s ease-in-out infinite 2s; +} + +/* Removed .revealed dependency for scroll indicator */ + +.hero-scroll-indicator svg { + /* No separate bounce animation needed, handled by float */ +} + +/* ============================================ + PROBLEM SECTION - Clarity Lens + ============================================ */ + +.problem-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.problem-content { + display: grid; + gap: var(--spacing-xl); +} + +.lens-comparison { + position: relative; + width: 100%; + max-width: 600px; + margin: 0 auto; +} + +.lens-container { + position: relative; + width: 100%; + max-width: 500px; + height: 380px; + margin: 0 auto; + border-radius: 12px; + overflow: hidden; + background: var(--color-cream); + border: 1px solid var(--color-mist); +} + +.lens-before, +.lens-after { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.lens-before { + z-index: 1; +} + +.lens-after { + clip-path: circle(120px at var(--lens-x, 70%) var(--lens-y, 50%)); + transition: clip-path 0.08s ease-out; + z-index: 2; + background: var(--color-paper); +} + +.lens-circle { + position: absolute; + width: 240px; + height: 240px; + border: 2px solid var(--color-accent); + border-radius: 50%; + pointer-events: none; + z-index: 3; + left: var(--lens-x, 70%); + top: var(--lens-y, 50%); + transform: translate(-50%, -50%); + transition: left 0.08s ease-out, top 0.08s ease-out; + box-shadow: 0 0 0 4px var(--color-accent-dim), 0 20px 60px rgba(0,0,0,0.15); +} + +.lens-label { + position: absolute; + top: -28px; + left: 50%; + transform: translateX(-50%); + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-accent); + background: var(--color-paper); + padding: 4px 12px; + border-radius: 4px; + white-space: nowrap; +} + +/* Slop Card - Generic AI output */ +.slop-card { + width: 280px; + height: 280px; + background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%); + border-radius: 16px; + padding: 24px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + font-family: 'Inter', system-ui, sans-serif; + display: flex; + flex-direction: column; +} + +.slop-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.slop-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background: linear-gradient(135deg, #8b5cf6, #7c3aed); + flex-shrink: 0; +} + +.slop-text { flex: 1; } +.slop-title { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 2px; } +.slop-subtitle { font-size: 12px; color: #6b7280; } +.slop-body { font-size: 13px; line-height: 1.5; color: #4b5563; margin-bottom: auto; flex: 1; } + +.slop-button { + width: 100%; + padding: 10px 20px; + background: linear-gradient(135deg, #8b5cf6, #7c3aed); + color: white; + border: none; + border-radius: 8px; + font-family: 'Inter', system-ui, sans-serif; + font-size: 13px; + font-weight: 500; + cursor: pointer; + margin-top: auto; +} + +/* Callout labels pointing to issues */ +.slop-callouts { + position: absolute; + inset: 0; pointer-events: none; } -/* ============================================ - HERO DECORATIONS - ============================================ */ - -.deco-line { +.slop-callout { position: absolute; - width: 160px; - height: 2px; - background: var(--color-accent); - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(-25deg); - animation: expandLine 1s var(--ease-out) 0.6s both; + font-size: 0.625rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--color-accent); + background: var(--color-paper); + padding: 4px 8px; + border: 1px solid var(--color-accent); + border-radius: 3px; + white-space: nowrap; + opacity: 0; + animation: calloutFadeIn 0.4s var(--ease-out) forwards; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); } -.deco-circle { - position: absolute; - width: 120px; - height: 120px; - border: 2px solid var(--color-accent); +.slop-callout[data-point="font"] { + top: 15%; + right: 5%; + animation-delay: 0.1s; +} + +.slop-callout[data-point="gradient"] { + top: 40%; + left: 5%; + animation-delay: 0.25s; +} + +.slop-callout[data-point="copy"] { + bottom: 35%; + right: 8%; + animation-delay: 0.4s; +} + +.slop-callout[data-point="rounded"] { + bottom: 12%; + left: 10%; + animation-delay: 0.55s; +} + +@keyframes calloutFadeIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* Impeccable Card - With Design Skills */ +.impeccable-card { + width: 280px; + height: 280px; + background: var(--color-paper); + border: 1px solid var(--color-mist); + padding: var(--spacing-lg); + text-align: left; + display: flex; + flex-direction: column; +} + +.impeccable-eyebrow { + font-family: var(--font-mono); + font-size: 0.625rem; + font-weight: 500; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--color-accent); + margin-bottom: var(--spacing-xs); +} + +.impeccable-title { + font-family: var(--font-display); + font-size: 1.75rem; + font-weight: 300; + font-style: italic; + color: var(--color-ink); + margin-bottom: var(--spacing-sm); + line-height: 1.1; +} + +.impeccable-body { + font-size: 0.875rem; + line-height: 1.6; + color: var(--color-ash); + margin-bottom: auto; + flex: 1; +} + +.impeccable-button { + display: inline-flex; + padding: 0.625rem 1.5rem; + background: var(--color-ink); + color: var(--color-paper); + border: none; + font-family: var(--font-body); + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 0.03em; + cursor: pointer; + transition: all var(--duration-base) var(--ease-out); + margin-top: auto; + align-self: flex-start; +} + +.impeccable-button:hover { + background: var(--color-accent); +} + +/* Lens Labels */ +.lens-labels { + display: flex; + justify-content: center; + gap: var(--spacing-lg); + margin-top: var(--spacing-md); +} + +.lens-label-item { + display: flex; + align-items: center; + gap: var(--spacing-xs); + font-size: 0.8125rem; + color: var(--color-ash); +} + +.lens-label-dot { + width: 8px; + height: 8px; border-radius: 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - animation: drawCircle 1s var(--ease-out) 0.8s both; - opacity: 0.3; + background: var(--color-mist); +} + +.lens-label-dot--accent { + background: var(--color-accent); +} + +/* ============================================ + SOLUTION SECTION + ============================================ */ + +.solution-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.solution-content { + display: grid; + gap: var(--spacing-xl); +} + +/* Two-pillar visual layout */ +.solution-visual { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: var(--spacing-lg); + align-items: stretch; +} + +@media (max-width: 900px) { + .solution-visual { + grid-template-columns: 1fr; + gap: var(--spacing-md); + } +} + +.solution-pillar { + background: var(--color-cream); + border: 1px solid var(--color-mist); + padding: var(--spacing-lg); + transition: all var(--duration-base) var(--ease-out); +} + +.solution-pillar:hover { + border-color: var(--color-accent); + transform: translateY(-4px); + box-shadow: 0 20px 60px var(--color-accent-dim); +} + +.pillar-header { + text-align: center; + margin-bottom: var(--spacing-lg); + padding-bottom: var(--spacing-md); + border-bottom: 1px solid var(--color-mist); +} + +.pillar-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + border-radius: 50%; + background: var(--color-accent-dim); + color: var(--color-accent); + margin-bottom: var(--spacing-sm); +} + +.pillar-title { + font-family: var(--font-display); + font-size: 1.75rem; + font-weight: 400; + margin: 0 0 var(--spacing-xs); +} + +.pillar-subtitle { + font-size: 0.875rem; + color: var(--color-ash); + margin: 0; +} + +.pillar-content { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.pillar-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-sm); + background: var(--color-paper); + border-radius: 4px; + transition: all var(--duration-fast) var(--ease-out); +} + +.pillar-item:hover { + background: var(--color-accent-dim); +} + +.pillar-item-name { + font-weight: 500; + color: var(--color-ink); + font-size: 0.9375rem; +} + +.pillar-item-code { + font-family: var(--font-mono); + font-size: 0.875rem; + font-weight: 500; + color: var(--color-accent); + background: transparent; + padding: 0; +} + +.pillar-item-desc { + font-size: 0.75rem; + color: var(--color-ash); +} + +.pillar-item--more { + justify-content: center; + font-size: 0.8125rem; + font-weight: 500; + color: var(--color-accent); + background: transparent; + border: 1px dashed var(--color-mist); +} + +/* Connector between pillars */ +.solution-connector { + display: flex; + align-items: center; + justify-content: center; +} + +.connector-plus { + font-family: var(--font-display); + font-size: 3rem; + font-weight: 300; + color: var(--color-accent); + opacity: 0.5; +} + +@media (max-width: 900px) { + .solution-connector { + padding: var(--spacing-sm) 0; + } + + .connector-plus { + font-size: 2rem; + } +} + +/* Result statement */ +.solution-result { + text-align: center; + padding-top: var(--spacing-lg); +} + +.result-arrow { + display: block; + font-size: 2rem; + color: var(--color-accent); + margin-bottom: var(--spacing-sm); + animation: bounce 1.5s ease-in-out infinite; +} + +.result-text { + font-size: 1.25rem; + color: var(--color-charcoal); + margin: 0; +} + +.result-text em { + font-style: italic; + color: var(--color-accent); + font-weight: 500; +} + +/* ============================================ + SKILLS SECTION + ============================================ */ + +.skills-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.skills-gallery { + display: grid; + grid-template-columns: 200px 1fr; + gap: var(--spacing-xl); + align-items: start; +} + +@media (max-width: 968px) { + .skills-gallery { + grid-template-columns: 1fr; + gap: var(--spacing-lg); + } +} + +.skills-nav { + display: flex; + flex-direction: column; + gap: 2px; + position: sticky; + top: var(--spacing-lg); +} + +@media (max-width: 968px) { + .skills-nav { + flex-direction: row; + flex-wrap: wrap; + gap: var(--spacing-xs); + position: static; + } +} + +.skill-nav-item { + padding: var(--spacing-sm) var(--spacing-md); + background: transparent; + border: none; + border-left: 2px solid transparent; + color: var(--color-ash); + font-family: var(--font-body); + font-size: 0.9375rem; + font-weight: 400; + cursor: pointer; + transition: all 0.2s ease; + text-align: left; + text-decoration: none; + display: block; +} + +.skill-nav-item:hover { + color: var(--color-text); + background: var(--color-cream); +} + +.skill-nav-item.active { + color: var(--color-accent); + border-left-color: var(--color-accent); + background: var(--color-accent-dim); + font-weight: 500; +} + +@media (max-width: 968px) { + .skill-nav-item { + border-left: none; + border-bottom: 2px solid transparent; + padding: var(--spacing-xs) var(--spacing-md); + } + + .skill-nav-item.active { + border-bottom-color: var(--color-accent); + } +} + +.skills-showcase { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: var(--spacing-lg); + align-items: start; +} + +@media (max-width: 1100px) { + .skills-showcase { + grid-template-columns: 1fr; + } +} + +.loading-state { + padding: var(--spacing-xl); + text-align: center; + color: var(--color-ash); + font-style: italic; +} + +/* ============================================ + COMMANDS SECTION + ============================================ */ + +.commands-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.commands-gallery { + display: grid; + grid-template-columns: 200px 1fr; + gap: var(--spacing-xl); + align-items: start; +} + +@media (max-width: 968px) { + .commands-gallery { + grid-template-columns: 1fr; + gap: var(--spacing-lg); + } +} + +.commands-nav { + display: flex; + flex-direction: column; + gap: 2px; + position: sticky; + top: var(--spacing-lg); +} + +@media (max-width: 968px) { + .commands-nav { + flex-direction: row; + flex-wrap: wrap; + gap: var(--spacing-xs); + position: static; + } +} + +.commands-showcase { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: var(--spacing-lg); + align-items: start; +} + +@media (max-width: 1100px) { + .commands-showcase { + grid-template-columns: 1fr; + } +} + +/* ============================================ + DOWNLOADS SECTION + ============================================ */ + +.downloads-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.downloads-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--spacing-lg); +} + +.download-card { + display: flex; + flex-direction: column; + padding: var(--spacing-lg); + background: var(--color-cream); + border: 1px solid var(--color-mist); + transition: all var(--duration-base) var(--ease-out); +} + +.download-card:hover { + border-color: var(--color-accent); + transform: translateY(-4px); + box-shadow: 0 20px 60px var(--color-accent-dim); +} + +.download-card-icon { + color: var(--color-accent); + margin-bottom: var(--spacing-md); +} + +.download-card-content { + flex: 1; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.download-card-title { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 400; + margin: 0; +} + +.download-card-badge { + display: inline-block; + align-self: flex-start; + font-size: 0.625rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 4px 10px; + background: var(--color-accent-dim); + color: var(--color-accent); + border-radius: 4px; +} + +.download-card-desc { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-ash); + flex: 1; +} + +.download-card .btn { + margin-top: var(--spacing-md); +} + +/* ============================================ + OPEN SOURCE SECTION + ============================================ */ + +.opensource-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); + text-align: center; +} + +.opensource-content { + max-width: 500px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-md); +} + +.opensource-title { + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 300; +} + +.opensource-desc { + font-size: 1.125rem; + color: var(--color-ash); + line-height: 1.6; +} + +/* ============================================ + FOOTER + ============================================ */ + +.site-footer { + border-top: 1px solid var(--color-mist); + padding: var(--spacing-xl) var(--spacing-lg); + background: var(--color-cream); +} + +.footer-content { + max-width: var(--width-max); + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-lg); +} + +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + text-align: center; + } +} + +.footer-brand { + display: flex; + flex-direction: column; + gap: var(--spacing-xs); +} + +.footer-logo { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 400; + color: var(--color-ink); +} + +.footer-tagline { + font-size: 0.875rem; + color: var(--color-ash); +} + +.footer-links { + display: flex; + gap: var(--spacing-lg); + flex-wrap: wrap; +} + +.footer-links a { + font-size: 0.875rem; + color: var(--color-ash); + transition: color var(--duration-fast) var(--ease-out); +} + +.footer-links a:hover { + color: var(--color-accent); } /* ============================================ @@ -183,12 +1133,12 @@ body::before { display: inline-flex; align-items: center; justify-content: center; - padding: 0.875rem 2rem; + gap: var(--spacing-xs); + padding: 1rem 2rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.03em; border: none; cursor: pointer; transition: all var(--duration-base) var(--ease-out); @@ -198,27 +1148,40 @@ body::before { } .btn-primary { - background: var(--color-accent); + background: var(--color-ink); color: var(--color-paper); - width: 100%; - position: relative; - z-index: 1; } .btn-primary::before { content: ''; position: absolute; inset: 0; - background: var(--color-ink); + background: var(--color-accent); transform: translateY(100%); transition: transform var(--duration-base) var(--ease-out); - z-index: -1; + z-index: 0; } .btn-primary:hover::before { transform: translateY(0); } +.btn-primary:hover { + color: var(--color-paper); +} + +.btn-primary span, +.btn-primary svg { + position: relative; + z-index: 1; +} + +/* For buttons without span wrapper */ +.btn-primary:not(:has(span)) { + position: relative; + z-index: 1; +} + .btn-secondary { background: transparent; color: var(--color-ink); @@ -230,148 +1193,391 @@ body::before { color: var(--color-paper); } -/* ============================================ - CARD COMPONENTS - ============================================ */ - -.card-inner { - height: 100%; - padding: var(--spacing-lg); - background: var(--color-paper); - border: 1px solid var(--color-mist); - display: flex; - flex-direction: column; - gap: var(--spacing-md); - transition: all var(--duration-base) var(--ease-out); - position: relative; - overflow: hidden; -} - -.card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: var(--color-accent); - transform: translateX(-100%); - transition: transform 0.4s var(--ease-out); -} - -.card-inner:hover { - border-color: var(--color-accent); - transform: translateY(-4px); -} - -.card-inner:hover::before { - transform: translateX(0); -} - -.badge { - font-size: 0.625rem; - text-transform: uppercase; - letter-spacing: 0.1em; - padding: 0.25em 0.625em; - border: 1px solid var(--color-accent); - color: var(--color-accent); - border-radius: 2px; - font-weight: 600; - white-space: nowrap; -} - -/* ============================================ - SOLUTION CARDS - ============================================ */ - -.solution-card { - padding: var(--spacing-lg); - background: var(--color-paper); - border-left: 3px solid var(--color-accent); - transition: all var(--duration-base) var(--ease-out); -} - -.solution-card:hover { - background: color-mix(in oklch, var(--color-paper) 90%, var(--color-accent)); - transform: translateX(4px); -} - -.solution-card code { - font-family: var(--font-mono); - font-size: 0.875em; - background: color-mix(in oklch, var(--color-accent) 15%, transparent); - color: var(--color-accent); - padding: 0.125em 0.375em; - border-radius: 3px; -} - /* ============================================ ANIMATIONS ============================================ */ -@keyframes fadeInBg { - to { opacity: 1; } -} - -@keyframes slideInLeft { - from { - opacity: 0; - transform: translateX(-40px); - } -} - -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(40px); - } -} - -@keyframes fadeInUp { +@keyframes revealUp { to { opacity: 1; transform: translateY(0); } } -@keyframes expandLine { - from { width: 0; } -} - -@keyframes drawCircle { - from { - opacity: 0; - scale: 0; - } +@keyframes fadeIn { to { opacity: 1; - scale: 1; } } -[data-animate] { +@keyframes float { + 0%, 100% { transform: translateX(-50%) translateY(0); } + 50% { transform: translateX(-50%) translateY(-8px); } +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(4px); } +} + +/* Reveal animation for scroll */ +[data-reveal] { opacity: 0; - transform: translateY(20px); + transform: translateY(30px); + transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } -[data-animate].animated { - animation: fadeInUp var(--duration-slow) var(--ease-out) both; +[data-reveal].revealed { + opacity: 1; + transform: translateY(0); } -/* Hero animations */ -.hero-content { - animation: slideInLeft var(--duration-slower) var(--ease-out) 0.1s both; -} - -.hero-decoration { - animation: slideInRight var(--duration-slower) var(--ease-out) 0.3s both; -} +/* Staggered reveals */ +[data-reveal]:nth-child(1) { transition-delay: 0s; } +[data-reveal]:nth-child(2) { transition-delay: 0.1s; } +[data-reveal]:nth-child(3) { transition-delay: 0.2s; } +[data-reveal]:nth-child(4) { transition-delay: 0.3s; } /* ============================================ - IMPORTS - Complex components that need custom CSS + IMPORTS ============================================ */ @import "./problem-section.css"; @import "./skill-demos.css"; @import "./gallery.css"; @import "./workflow.css"; + +/* ============================================ + BIAS GRID (Problem Section Enhancement) + ============================================ */ + +.bias-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: var(--spacing-md); + margin-bottom: var(--spacing-xl); +} + +.bias-item { + display: flex; + align-items: flex-start; + gap: var(--spacing-sm); + padding: var(--spacing-md); + background: var(--color-cream); + border: 1px solid var(--color-mist); + border-left: 3px solid var(--color-accent); + transition: all var(--duration-fast) var(--ease-out); +} + +.bias-item:hover { + border-color: var(--color-accent); + transform: translateX(4px); +} + +.bias-icon { + font-size: 1.25rem; + color: var(--color-accent); + font-weight: 300; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.bias-content { + display: flex; + flex-direction: column; + gap: 2px; +} + +.bias-content strong { + font-size: 0.9375rem; + font-weight: 600; + color: var(--color-ink); +} + +.bias-content span { + font-size: 0.8125rem; + color: var(--color-ash); +} + +/* ============================================ + ANTIDOTE SECTION + ============================================ */ + +.antidote-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); + background: var(--color-cream); + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + padding-left: calc(50vw - 50% + var(--spacing-lg)); + padding-right: calc(50vw - 50% + var(--spacing-lg)); +} + +.antidote-content { + max-width: var(--width-max); + margin: 0 auto; +} + +.antidote-intro { + text-align: center; + margin-bottom: var(--spacing-xl); +} + +.antidote-intro p { + font-size: 1.25rem; + color: var(--color-charcoal); + max-width: 50ch; + margin: 0 auto; +} + +.antidote-intro strong { + color: var(--color-accent); + font-weight: 600; +} + +/* Section titles for patterns/antipatterns */ +.patterns-section-title { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 400; + color: var(--color-ink); + margin: var(--spacing-lg) 0 var(--spacing-md); + text-align: center; +} + +.patterns-section-title::before { + content: '✓ '; + color: var(--color-success, #22c55e); +} + +.patterns-section-title--anti::before { + content: '× '; + color: var(--color-accent); +} + +/* Patterns grid (what TO do) */ +.patterns-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--spacing-lg); + margin-bottom: var(--spacing-xl); +} + +.pattern-category { + background: var(--color-paper); + border: 1px solid var(--color-mist); + padding: var(--spacing-lg); + transition: all var(--duration-base) var(--ease-out); +} + +.pattern-category:hover { + border-color: var(--color-success, #22c55e); + box-shadow: 0 10px 40px rgba(34, 197, 94, 0.1); +} + +.pattern-category-title { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 400; + color: var(--color-ink); + margin: 0 0 var(--spacing-md); + padding-bottom: var(--spacing-sm); + border-bottom: 1px solid var(--color-mist); +} + +.pattern-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.pattern-list li { + font-size: 0.875rem; + color: var(--color-charcoal); + padding-left: var(--spacing-md); + position: relative; + line-height: 1.5; +} + +.pattern-list li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--color-success, #22c55e); + font-weight: 600; + font-size: 0.875rem; +} + +/* Anti-patterns grid */ +.antipatterns-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--spacing-lg); + margin-bottom: var(--spacing-xl); +} + +.antipattern-category { + background: var(--color-paper); + border: 1px solid var(--color-mist); + padding: var(--spacing-lg); + transition: all var(--duration-base) var(--ease-out); +} + +.antipattern-category:hover { + border-color: var(--color-accent); + box-shadow: 0 10px 40px var(--color-accent-dim); +} + +.antipattern-category-title { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 400; + color: var(--color-ink); + margin: 0 0 var(--spacing-md); + padding-bottom: var(--spacing-sm); + border-bottom: 1px solid var(--color-mist); +} + +.antipattern-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.antipattern-list li { + font-size: 0.875rem; + color: var(--color-charcoal); + padding-left: var(--spacing-md); + position: relative; + line-height: 1.5; +} + +.antipattern-list li::before { + content: '×'; + position: absolute; + left: 0; + color: var(--color-accent); + font-weight: 600; + font-size: 1rem; +} + +/* Antidote CTA */ +.antidote-cta { + text-align: center; + padding-top: var(--spacing-lg); + border-top: 1px solid var(--color-mist); +} + +.antidote-cta p { + font-size: 1.125rem; + color: var(--color-charcoal); + max-width: 50ch; + margin: 0 auto; + font-style: italic; +} + +/* ============================================ + SOLUTION SECTION ENHANCEMENTS + ============================================ */ + +/* Main skill item styling */ +.pillar-item--main { + background: var(--color-accent-dim); + border: 1px solid var(--color-accent); +} + +.pillar-item--main .pillar-item-name { + font-size: 1.125rem; + font-weight: 600; + color: var(--color-accent); +} + +.pillar-item--ref { + background: transparent; + padding: var(--spacing-xs) var(--spacing-sm); +} + +.pillar-item-label { + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-ash); +} + +/* Reference domain tags */ +.pillar-refs { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-xs); + padding: 0 var(--spacing-sm); +} + +.pillar-ref { + font-size: 0.6875rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.03em; + padding: 4px 10px; + background: var(--color-paper); + color: var(--color-ash); + border: 1px solid var(--color-mist); + border-radius: 3px; + transition: all var(--duration-fast) var(--ease-out); +} + +.pillar-ref:hover { + border-color: var(--color-accent); + color: var(--color-accent); +} + +/* Command groups */ +.pillar-command-group { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--spacing-xs); + padding: var(--spacing-sm); + background: var(--color-paper); + border-radius: 4px; +} + +.pillar-group-label { + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-ash); + width: 100%; + margin-bottom: 4px; +} + +.pillar-command-group .pillar-item-code { + font-size: 0.8125rem; + padding: 4px 8px; + background: var(--color-accent-dim); + border-radius: 3px; +} + +/* ============================================ + PLATFORMS SECTION (alias for downloads) + ============================================ */ + +.platforms-section { + padding: var(--spacing-2xl) 0; + border-top: 1px solid var(--color-mist); +} + +.platforms-section .section-subtitle { + max-width: 60ch; +} diff --git a/public/css/problem-section.css b/public/css/problem-section.css index e33dd5724..aa18cda41 100644 --- a/public/css/problem-section.css +++ b/public/css/problem-section.css @@ -1,195 +1,130 @@ /** - * Problem Section - Showcases the "AI slop" aesthetic - * Deliberately uses generic design patterns to illustrate what we're solving + * Problem Section - The Clarity Lens + * Interactive before/after comparison */ -.problem-section { - padding: var(--spacing-2xl) 0; - border-top: 1px solid var(--color-mist); +/* Additional lens styles that need complex CSS */ + +.lens-container { + cursor: crosshair; + user-select: none; + -webkit-user-select: none; } -.problem-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--spacing-2xl); - align-items: center; - - @media (max-width: 968px) { - grid-template-columns: 1fr; - gap: var(--spacing-xl); - } -} - -.problem-content { - max-width: 480px; -} - -.problem-content .section-title { - margin-bottom: var(--spacing-md); -} - -.problem-lead { - font-size: 1.25rem; - line-height: 1.6; - color: var(--color-charcoal); -} - -/* AI Slop Demo - Deliberately generic design */ -.problem-showcase { - display: flex; - justify-content: center; -} - -.ai-slop-demo { - position: relative; - max-width: 380px; - width: 100%; -} - -.slop-card { - /* Deliberately generic card styling */ - background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%); - border-radius: 16px; - padding: 24px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - font-family: 'Inter', system-ui, sans-serif; -} - -.slop-header { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 16px; -} - -.slop-avatar { - width: 48px; - height: 48px; - border-radius: 50%; - background: linear-gradient(135deg, #8b5cf6, #7c3aed); -} - -.slop-text { - flex: 1; -} - -.slop-title { - font-size: 16px; - font-weight: 600; - color: #1f2937; - margin-bottom: 2px; -} - -.slop-subtitle { - font-size: 13px; - color: #6b7280; -} - -.slop-body { - font-size: 14px; - line-height: 1.6; - color: #4b5563; - margin-bottom: 20px; -} - -.slop-button { - width: 100%; - padding: 12px 24px; - background: linear-gradient(135deg, #8b5cf6, #7c3aed); - color: white; - border: none; - border-radius: 8px; - font-family: 'Inter', system-ui, sans-serif; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.slop-button:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); -} - -/* Labels pointing out the generic patterns */ -.slop-labels { +/* Subtle grid background for the lens container */ +.lens-container::before { + content: ''; position: absolute; inset: 0; + background-image: + linear-gradient(var(--color-mist) 1px, transparent 1px), + linear-gradient(90deg, var(--color-mist) 1px, transparent 1px); + background-size: 20px 20px; + opacity: 0.5; pointer-events: none; } -.slop-label { +/* Lens glow effect */ +.lens-circle::before { + content: ''; position: absolute; - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--color-accent); - background: var(--color-paper); - padding: 4px 8px; - border: 1px solid var(--color-accent); - border-radius: 2px; - white-space: nowrap; - opacity: 0; - animation: labelFadeIn 0.5s ease forwards; + inset: -20px; + border-radius: 50%; + background: radial-gradient( + circle, + var(--color-accent-dim) 0%, + transparent 70% + ); + opacity: 0.5; + pointer-events: none; } -.slop-label[data-point="font"] { - top: 24px; - right: -20px; - transform: translateX(100%); - animation-delay: 0.2s; -} - -.slop-label[data-point="gradient"] { - top: 50%; - right: -20px; - transform: translateX(100%) translateY(-50%); - animation-delay: 0.4s; -} - -.slop-label[data-point="layout"] { - bottom: 60px; - left: -20px; - transform: translateX(-100%); - animation-delay: 0.6s; -} - -.slop-label[data-point="copy"] { - bottom: 24px; - left: -20px; - transform: translateX(-100%); - animation-delay: 0.8s; -} - -@keyframes labelFadeIn { - from { - opacity: 0; - transform: translateX(calc(var(--tx, 100%) - 10px)); +/* Pulsing animation for the lens when idle */ +@keyframes lensGlow { + 0%, 100% { + box-shadow: + 0 0 0 4px var(--color-accent-dim), + 0 20px 60px rgba(0,0,0,0.15); } - to { - opacity: 1; - transform: translateX(var(--tx, 100%)); + 50% { + box-shadow: + 0 0 0 8px var(--color-accent-dim), + 0 20px 80px rgba(0,0,0,0.2); } } -.slop-label[data-point="layout"], -.slop-label[data-point="copy"] { - --tx: -100%; +.lens-container:not(:hover) .lens-circle { + animation: lensGlow 3s ease-in-out infinite; } -.slop-label[data-point="gradient"] { - --tx: 100%; - transform: translateX(100%) translateY(-50%); +/* Smooth transitions when hovering */ +.lens-container:hover .lens-circle { + transition: left 0.05s linear, top 0.05s linear; } -@media (max-width: 640px) { - .slop-labels { +.lens-container:hover .lens-after { + transition: clip-path 0.05s linear; +} + +/* Mobile: tap to reveal */ +@media (hover: none) { + .lens-label { display: none; } - .ai-slop-demo { - max-width: 100%; + .lens-circle::after { + content: 'Tap & Drag'; + position: absolute; + bottom: -36px; + left: 50%; + transform: translateX(-50%); + font-size: 0.625rem; + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-accent); + background: var(--color-paper); + padding: 4px 12px; + border-radius: 4px; + white-space: nowrap; } } +/* Hover state for impeccable card inside lens */ +.lens-after .impeccable-card { + box-shadow: 0 10px 40px rgba(0,0,0,0.08); +} + +/* Entry animation for the lens */ +@keyframes lensEntry { + from { + opacity: 0; + transform: translate(-50%, -50%) scale(0.8); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + +.lens-circle { + animation: lensEntry 0.6s var(--ease-out) 0.3s backwards; +} + +/* Labels hover states */ +.lens-label-item { + transition: color var(--duration-fast) var(--ease-out); + cursor: default; +} + +.lens-label-item:hover { + color: var(--color-text); +} + +.lens-label-item[data-point="after"]:hover .lens-label-dot--accent { + transform: scale(1.3); +} + +.lens-label-dot { + transition: transform var(--duration-fast) var(--ease-spring); +} diff --git a/public/css/skill-demos.css b/public/css/skill-demos.css index 21a335678..b042aa7ed 100644 --- a/public/css/skill-demos.css +++ b/public/css/skill-demos.css @@ -1,5 +1,6 @@ /** * Skill Demos - Interactive before/after demonstrations + * Renaissance Edition */ /* ============================================ @@ -13,32 +14,37 @@ .demo-tabs { display: flex; - gap: 2px; - margin-bottom: var(--spacing-sm); + gap: 0; + margin-bottom: 0; justify-content: center; + background: var(--color-paper); + border-bottom: 1px solid var(--color-mist); } .demo-tab { - padding: var(--spacing-xs) var(--spacing-md); + padding: var(--spacing-sm) var(--spacing-lg); background: transparent; border: none; border-bottom: 2px solid transparent; - font-family: var(--font-body); - font-size: 0.8125rem; - font-weight: 400; + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.05em; + text-transform: uppercase; color: var(--color-ash); cursor: pointer; - transition: all 0.15s ease; + transition: all var(--duration-fast) var(--ease-out); } .demo-tab:hover { color: var(--color-text); + background: var(--color-cream); } .demo-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); - font-weight: 500; + background: var(--color-accent-dim); } .demo-panels { @@ -51,6 +57,18 @@ .demo-panel.active { display: block; + animation: fadeSlideIn 0.3s var(--ease-out); +} + +@keyframes fadeSlideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } /* ============================================ @@ -59,34 +77,40 @@ .demo-container { background: var(--color-paper); - border: 1px solid var(--color-mist); - border-radius: 6px; + border: none; + border-radius: 0; overflow: hidden; } .demo-header { display: flex; align-items: center; - justify-content: flex-end; - padding: var(--spacing-xs) var(--spacing-md); - background: var(--color-bg); + justify-content: center; + padding: var(--spacing-sm) var(--spacing-md); + background: var(--color-paper); border-bottom: 1px solid var(--color-mist); - min-height: 40px; + min-height: 48px; } .demo-toggle { display: flex; align-items: center; - gap: var(--spacing-sm); + gap: var(--spacing-md); } .demo-toggle-label { + font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.08em; color: var(--color-ash); - transition: color 0.15s ease; + transition: color var(--duration-fast) var(--ease-out); + cursor: pointer; +} + +.demo-toggle-label:hover { + color: var(--color-text); } .demo-toggle-label.active { @@ -95,25 +119,30 @@ .demo-toggle-switch { position: relative; - width: 36px; - height: 20px; + width: 44px; + height: 24px; background: var(--color-mist); - border-radius: 10px; + border-radius: 12px; cursor: pointer; - transition: background 0.15s ease; + transition: background var(--duration-fast) var(--ease-out); + border: 1px solid transparent; +} + +.demo-toggle-switch:hover { + border-color: var(--color-ash); } .demo-toggle-switch::after { content: ''; position: absolute; - top: 2px; - left: 2px; + top: 3px; + left: 3px; width: 16px; height: 16px; background: var(--color-paper); border-radius: 50%; - box-shadow: 0 1px 3px rgba(0,0,0,0.2); - transition: transform 0.15s ease; + box-shadow: 0 1px 4px rgba(0,0,0,0.15); + transition: transform var(--duration-base) var(--ease-spring); } .demo-toggle-switch.active { @@ -121,24 +150,31 @@ } .demo-toggle-switch.active::after { - transform: translateX(16px); + transform: translateX(20px); } .demo-viewport { - padding: var(--spacing-lg); + padding: var(--spacing-xl); display: flex; align-items: center; justify-content: center; - min-height: 200px; - background: var(--color-bg); + min-height: 280px; + background: var(--color-cream); + transition: background var(--duration-base) var(--ease-out); +} + +.demo-viewport[data-state="after"] { + background: var(--color-paper); } .demo-caption { - padding: var(--spacing-xs) var(--spacing-md); - font-size: 0.75rem; + padding: var(--spacing-sm) var(--spacing-md); + font-family: var(--font-mono); + font-size: 0.6875rem; + letter-spacing: 0.03em; color: var(--color-ash); border-top: 1px solid var(--color-mist); - background: var(--color-bg); + background: var(--color-paper); text-align: center; } diff --git a/public/css/workflow.css b/public/css/workflow.css index 357cf9004..a1dd47cd3 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1,342 +1,173 @@ -/** - * Commands Navigation - Vertical sidebar with grouped commands - */ +/* Workflow / Commands - Renaissance Edition */ -/* Commands nav container */ -.commands-nav { - display: flex; - flex-direction: column; - gap: 2px; +.commands-section { + position: relative; + padding: var(--spacing-xl) 0; + background: var(--color-paper); } -/* Command Nav Groups */ -.command-nav-group { - display: flex; - flex-direction: column; - gap: 2px; - margin-bottom: var(--spacing-sm); - - &:last-child { - margin-bottom: 0; - } +.commands-gallery { + /* Reset grid */ + display: block; } -.command-nav-label { - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--color-ash); - padding: var(--spacing-xs) var(--spacing-md); - margin-bottom: 2px; - margin-top: var(--spacing-xs); - - &:first-child { - margin-top: 0; - } -} - -.command-nav-item { - padding: var(--spacing-xs) var(--spacing-md); - background: transparent; - border: none; - border-left: 2px solid transparent; - color: var(--color-ash); - font-family: 'Space Grotesk', monospace; - font-size: 0.875rem; - font-weight: 400; - cursor: pointer; - transition: all 0.2s ease; - text-align: left; - white-space: nowrap; -} - -.command-nav-item:hover { - color: var(--color-text); - background: color-mix(in oklch, var(--color-paper) 85%, var(--color-accent)); -} - -.command-nav-item.active { - color: var(--color-accent); - border-left-color: var(--color-accent); - background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper)); - font-weight: 500; -} - -@media (max-width: 968px) { - .commands-nav { - flex-direction: row; - flex-wrap: wrap; - gap: var(--spacing-xs); - } - - .command-nav-group { - flex-direction: row; - flex-wrap: wrap; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-sm); - } - - .command-nav-label { - width: 100%; - padding: var(--spacing-xs) 0; - margin-top: 0; - } - - .command-nav-item { - border-left: none; - border-bottom: 2px solid transparent; - padding: var(--spacing-xs) var(--spacing-sm); - } - - .command-nav-item.active { - border-bottom-color: var(--color-accent); - } -} - -/* Workflow Row */ -.workflow-row { - display: flex; - align-items: center; - gap: var(--spacing-md); - flex-wrap: wrap; -} - -.workflow-row-label { - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--color-ash); - width: 120px; - flex-shrink: 0; - - @media (max-width: 768px) { - width: 100%; - margin-bottom: var(--spacing-xs); - } -} - -.workflow-row-content { - display: flex; - align-items: center; - gap: var(--spacing-sm); - flex-wrap: wrap; -} - -/* Workflow Node */ -.workflow-node { - display: inline-flex; - align-items: center; - padding: 4px 10px; - background: transparent; - border: 1px solid var(--color-mist); - border-radius: 3px; - font-family: 'Space Grotesk', monospace; - font-size: 0.8125rem; - font-weight: 500; - color: var(--color-charcoal); - cursor: pointer; - transition: all var(--duration-fast) var(--ease-out); -} - -.workflow-node:hover { - border-color: var(--color-accent); - color: var(--color-accent); - background: color-mix(in oklch, var(--color-accent) 5%, transparent); -} - -.workflow-node.active { - background: var(--color-accent); - border-color: var(--color-accent); - color: var(--color-paper); -} - -/* Workflow Arrow */ -.workflow-arrow { - display: flex; - align-items: center; - color: var(--color-ash); - font-size: 1.25rem; - padding: 0 var(--spacing-xs); -} - -.workflow-arrow-bidirectional::before { - content: '↔'; -} - -.workflow-arrow-forward::before { - content: '→'; -} - -.workflow-arrow-branch::before { - content: '┬'; - transform: rotate(90deg); -} - -/* Workflow Groups */ -.workflow-group { - display: flex; - align-items: center; - gap: var(--spacing-sm); - padding: var(--spacing-sm); - background: color-mix(in oklch, var(--color-paper) 50%, transparent); - border: 1px dashed var(--color-mist); - border-radius: 4px; -} - -.workflow-group-label { - font-size: 0.6875rem; - font-weight: 500; - color: var(--color-ash); - text-transform: uppercase; - letter-spacing: 0.05em; - writing-mode: vertical-lr; - transform: rotate(180deg); - - @media (max-width: 768px) { - writing-mode: horizontal-tb; - transform: none; - width: 100%; - margin-bottom: var(--spacing-xs); - } -} - -/* Production Flow */ -.workflow-production { +.commands-container { display: grid; - grid-template-columns: auto 1fr; - gap: var(--spacing-md); + grid-template-columns: 1fr 1.2fr; + gap: var(--spacing-2xl); align-items: start; } -.workflow-production-stages { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); -} - -.workflow-stage { - display: flex; - align-items: center; - gap: var(--spacing-sm); -} - -.workflow-stage-label { - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--color-ash); - width: 80px; -} - -.workflow-stage-nodes { - display: flex; - gap: var(--spacing-xs); - flex-wrap: wrap; -} - -/* Aesthetic Adjustments Section */ -.workflow-aesthetics { - border-top: 1px solid var(--color-mist); - padding-top: var(--spacing-lg); - margin-top: var(--spacing-sm); -} - -.workflow-aesthetics-title { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--color-ash); - margin-bottom: var(--spacing-md); -} - -.workflow-pairs { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-lg); -} - -.workflow-pair { - display: flex; - align-items: center; - gap: var(--spacing-sm); -} - -/* Responsive */ -@media (max-width: 768px) { - .workflow-container { - padding: var(--spacing-md); - } - - .workflow-production { +@media (max-width: 900px) { + .commands-container { grid-template-columns: 1fr; } - - .workflow-stage { - flex-direction: column; - align-items: flex-start; - } - - .workflow-stage-label { - width: auto; - margin-bottom: var(--spacing-xs); - } } -/* Command Card in Grid */ -.command-card { - padding: var(--spacing-sm) var(--spacing-md); - background: var(--color-paper); - border: 1px solid var(--color-mist); - border-radius: 3px; +/* Left: The Manual (Scrollable) */ +.command-manual { + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + padding-bottom: 20vh; +} + +.manual-entry { + padding: var(--spacing-lg); + border-left: 2px solid var(--color-mist); + transition: all 0.4s var(--ease-out); + opacity: 0.4; cursor: pointer; - transition: all var(--duration-fast) var(--ease-out); - text-align: left; } -.command-card:hover { - border-color: var(--color-accent); - transform: translateY(-2px); - box-shadow: 0 4px 12px color-mix(in oklch, var(--color-accent) 10%, transparent); +.manual-entry:hover { + opacity: 0.7; } -.command-card.active { - border-color: var(--color-accent); - background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper)); +.manual-entry.active { + border-left-color: var(--color-accent); + opacity: 1; + padding-left: var(--spacing-xl); + background: linear-gradient(to right, var(--color-bg), transparent); } -.command-card-name { - font-family: 'Space Grotesk', monospace; - font-size: 0.9375rem; +.manual-cmd-name { + font-family: var(--font-mono); + font-size: 1.5rem; + margin: 0 0 var(--spacing-sm); + color: var(--color-ink); font-weight: 500; - color: var(--color-text); - margin-bottom: 2px; } -.command-card-desc { - font-size: 0.75rem; - color: var(--color-ash); - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; +.manual-cmd-desc { + font-size: 1rem; + line-height: 1.6; + color: var(--color-charcoal); + margin: 0; +} + +/* Right: The Terminal (Sticky) */ +.glass-terminal-wrapper { + position: sticky; + top: var(--spacing-lg); + height: 600px; +} + +@media (max-width: 900px) { + .glass-terminal-wrapper { + display: none; /* Hide on mobile for now, or stack */ + /* Alternatively: Position fixed bottom sheet */ + } +} + +.glass-terminal { + background: rgba(255, 255, 255, 0.9); + /* Glass effect handled by backdrop-filter if supported */ + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--color-mist); + border-radius: 8px; + box-shadow: + 0 20px 60px -10px rgba(0,0,0,0.15), + 0 0 0 1px rgba(255,255,255,0.5) inset; + height: 100%; + display: flex; + flex-direction: column; overflow: hidden; } -/* Category badge on command card */ -.command-card-category { - display: inline-block; - font-size: 0.625rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - padding: 2px 6px; - background: var(--color-mist); - color: var(--color-ash); - border-radius: 2px; - margin-top: var(--spacing-xs); +.terminal-header { + background: rgba(0,0,0,0.02); + padding: 12px 16px; + display: flex; + align-items: center; + gap: 8px; + border-bottom: 1px solid var(--color-mist); } +.terminal-dot { + width: 10px; + height: 10px; + border-radius: 50%; +} +.terminal-dot.red { background: #ff5f56; } +.terminal-dot.yellow { background: #ffbd2e; } +.terminal-dot.green { background: #27c93f; } + +.terminal-title { + margin-left: auto; + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--color-ash); +} + +.terminal-body { + flex: 1; + padding: var(--spacing-lg); + font-family: var(--font-mono); + font-size: 0.9375rem; + color: var(--color-ink); + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.terminal-line { + margin-bottom: var(--spacing-sm); + display: flex; + gap: var(--spacing-sm); + line-height: 1.5; +} + +.terminal-prompt { + color: var(--color-accent); + user-select: none; + font-weight: bold; +} + +.terminal-cursor { + display: inline-block; + width: 8px; + height: 1.2em; + background: var(--color-accent); + vertical-align: middle; + animation: blink 1s step-end infinite; +} + +.terminal-output { + color: var(--color-ash); + margin-bottom: var(--spacing-md); + white-space: pre-wrap; +} + +.terminal-preview { + border: 1px solid var(--color-mist); + border-radius: 4px; + background: var(--color-paper); + padding: var(--spacing-md); + margin: var(--spacing-md) 0; + flex: 1; + overflow: auto; +} + +@keyframes blink { 50% { opacity: 0; } } diff --git a/public/index.html b/public/index.html index e6653d312..4149a3c9e 100644 --- a/public/index.html +++ b/public/index.html @@ -9,191 +9,402 @@ + + + - -
-
+ + + + +
+ +
-

- Impeccable style - made easy +

The Anti-Slop Framework for AI Design

+

+ Impeccable + Style

-

Your LLM can design beautiful interfaces.
It just needs to know what to ask for.

-

Works with Cursor · Claude Code · Gemini CLI · Codex CLI

-
-
+
-
- -
-
-
-

The Problem

-

LLMs are biased toward safe, generic design choices. Without guidance, you get the same predictable aesthetic every time.

+
+ +
+
+ 01 +

AI Has Design Bias

+
+
+

Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes—every single time.

+ + +
+
+ Aa +
+ Safe fonts + Defaults to Inter, Roboto, system fonts +
+
+
+ ◐ +
+ Purple gradients + Purple-to-blue on white backgrounds +
+
+
+ ▢ +
+ Cards everywhere + Wraps everything in rounded boxes +
+
+
+ ◫ +
+ Gray on color + Gray text on colored backgrounds +
+
+
+ ≡ +
+ Centered everything + Centers all text and layouts +
+
+
+ ◌ +
+ Decorative shadows + Adds shadows without purpose +
+
-
-
-
-
-
-
-
Welcome to Our Platform
-
The best solution for your needs
+ +
+
+ +
+
+
+
+
+
Welcome to Our Platform
+
The best solution for your needs
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.

+ +
+ +
+ Inter font (again) + Purple gradient + Generic copy + Cards on cards
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text in a card layout.

-
-
- Inter font - Purple gradient - Card layout - Generic copy + +
+
+

Introducing

+

Thoughtful Design

+

Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.

+ +
+
+ +
+ With Skills +
+
+
+
+ + Generic AI Output +
+
+ + With Design Skills
- -
-
-
-

The Solution

-

Teach your AI assistant the language of design. Skills provide deep design knowledge. Commands give you precise control over the creative process.

+ +
+
+ 02 +

The Antidote

+
+
+

The original Claude frontend-design skill says to avoid Arial and Inter. We've expanded it with 60+ specific patterns that fight model bias across every design domain.

+ +
+

Your AI learns what TO do and what NOT to do. These rules are baked into the skill.

-
-
-
- - - -
-

8 Skills

-

Deep knowledge in typography, color, motion, spatial design, and more. The AI learns how to think about design.

-
-
-
- - - -
-

15 Commands

-

Precise actions like /bolder, /animate, /audit. Steer the AI through iterative design refinement.

-
+ + +

What TO Do

+
+ +
+ + +

What NOT to Do

+
+ +
+ +
+

These rules are embedded in the skill. Your AI internalizes them before writing a single line of code.

- -
-
-

Skills

-

Design knowledge that transforms AI output

+ +
+
+ 03 +

The Framework

-
- -
-
Select a skill to see it in action
+
+

One comprehensive skill with deep expertise, plus 15 commands that form the language of design.

+ +
+ +
+
+ + + + + +

One Skill

+

Infinite expertise, progressive loading

+
+
+
+ Frontend Design + Comprehensive design intelligence +
+
+ Reference domains: +
+
+ Typography + Color + Spatial + Responsive + Interaction + Motion + UX Writing +
+
+
+ + +
+ + +
+ + +
+
+ + + + + +

15 Commands

+

The language of design

+
+
+
+ Diagnose + /audit +
+
+ Calibrate + /bolder + /quieter + /simplify +
+
+ Enhance + /animate + /colorize + /delight +
+
+ Align + /normalize + /polish + /optimize +
+
+5 more commands
+
+
+
+ +
+ ↓ +

Together, they transform generic output into impeccable design.

- -
-
-

Commands

-

Precise control over the design process

+ +
+
+ 04 +

Commands in Action

+

See how commands transform your designs

+
+ +
+ +
+
+ + +
+
+ 05 +

One Framework, Every AI Tool

+

We wrote it once, then compiled it for each platform. Same design intelligence, native to your workflow.

-
- - - - -
-
Select a command to view details
-
-
-
- - -
-
-

Get Started

-

Download the complete bundle for your preferred AI tool. Extract into your project root and start creating.

-
-
-
-
-
-

Cursor

- Rules + Commands -
-

Commands and rules for Cursor IDE. Works via appending, no frontmatter required.

- +
+
+
+ + +
+
+

Cursor

+ Rules + Commands +

Commands and rules for Cursor IDE. Works via appending, no frontmatter required.

+
+
-
-
-
-

Claude Code

- Full Featured -
-

Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.

- +
+
+ + +
+
+

Claude Code

+ Full Featured +

Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.

+
+
-
-
-
-

Gemini CLI

- TOML + Modular -
-

TOML-formatted commands with modular skill imports via GEMINI.md.

- +
+
+ + +
+
+

Gemini CLI

+ TOML + Modular +

TOML-formatted commands with modular skill imports via GEMINI.md.

+
+
-
-
-
-

Codex CLI

- Prompts + Routing -
-

Custom prompt format with skill routing through AGENTS.md architecture.

- +
+
+ + +
+
+

Codex CLI

+ Prompts + Routing +

Custom prompt format with skill routing through AGENTS.md architecture.

+
+
-
-
-

Open Source

-

View the source, contribute skills and commands, or report issues on GitHub.

- View Repository +
+
+

Open Source

+

View the source, contribute skills and commands, or report issues on GitHub.

+ + + + + View Repository +
-