mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 17:16:46 +03:00
Consolidate skills + add patterns source file
Major changes: - Consolidate 8 design skills into single frontend-design skill with 7 reference files - Add source/patterns.md as single source of truth for patterns/antipatterns - Patterns are merged into skill during build, served via API for website - Website now dynamically renders both "What TO Do" and "What NOT to Do" sections - Update build system to handle directory-based skills with references - Add /api/patterns endpoint to server - Refactor website with new Antidote section layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
99f1091f20
commit
2181137d04
@@ -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=="],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
+81
-2
@@ -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.
|
||||
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
|
||||
+4
-2
@@ -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.
|
||||
Remember: Color is powerful. Use it deliberately, systematically, and inclusively.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Typography is 95% of design. Master it, and everything else becomes easier.
|
||||
+4
-2
@@ -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.
|
||||
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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
-203
@@ -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.
|
||||
-104
@@ -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.
|
||||
Vendored
+1051
-1
File diff suppressed because it is too large
Load Diff
Vendored
+1
-43
@@ -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
|
||||
|
||||
|
||||
Vendored
-197
@@ -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.
|
||||
+1051
-1
File diff suppressed because it is too large
Load Diff
+1051
-1
File diff suppressed because it is too large
Load Diff
-146
@@ -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.
|
||||
Vendored
+1
-43
@@ -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
|
||||
|
||||
|
||||
Vendored
-105
@@ -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.
|
||||
-152
@@ -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.
|
||||
Vendored
-122
@@ -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.
|
||||
Vendored
-90
@@ -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.
|
||||
@@ -26,6 +26,8 @@
|
||||
"bun-plugin-tailwind": "^0.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"lenis": "^1.3.16",
|
||||
"motion": "^12.23.26",
|
||||
"tailwindcss": "^4.1.18"
|
||||
}
|
||||
}
|
||||
|
||||
+45
-39
@@ -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) => `
|
||||
<div class="${classPrefix}-category">
|
||||
<h3 class="${classPrefix}-category-title">${category.name}</h3>
|
||||
<ul class="${classPrefix}-list">
|
||||
${category.items.map((item) => `<li>${item}</li>`).join("")}
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.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();
|
||||
}
|
||||
|
||||
+134
-354
@@ -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;
|
||||
}
|
||||
|
||||
+1385
-179
File diff suppressed because it is too large
Load Diff
+103
-168
@@ -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);
|
||||
}
|
||||
|
||||
+68
-32
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+145
-314
@@ -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; } }
|
||||
|
||||
+347
-136
@@ -9,191 +9,402 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="tailwindcss" />
|
||||
<link rel="stylesheet" href="./css/main.css">
|
||||
|
||||
<!-- Import Maps for ES Module dependencies -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.16/+esm",
|
||||
"motion": "https://cdn.jsdelivr.net/npm/motion@12.23.26/+esm"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="min-h-screen overflow-x-hidden leading-relaxed">
|
||||
<!-- 1. HERO - Hook with the problem statement -->
|
||||
<header class="min-h-[85vh] flex items-center relative py-32 px-12 overflow-hidden max-md:min-h-[70vh] max-md:py-20 max-md:px-6">
|
||||
<div class="max-w-max mx-auto grid grid-cols-[1fr_auto] gap-32 items-center w-full relative max-md:grid-cols-1 max-md:gap-20">
|
||||
<!-- Grain Overlay -->
|
||||
<div class="grain-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- 1. HERO - Liquid Typography -->
|
||||
<header class="hero-section" id="hero">
|
||||
<canvas class="hero-canvas" id="hero-canvas"></canvas>
|
||||
<div class="hero-container">
|
||||
<div class="hero-content">
|
||||
<h1 class="font-display text-[clamp(3rem,8vw,7rem)] font-light leading-[0.9] mb-12 flex flex-col max-md:text-[clamp(2.5rem,12vw,4rem)]">
|
||||
<span class="font-normal tracking-tight">Impeccable style</span>
|
||||
<span class="font-light italic text-accent tracking-tight">made easy</span>
|
||||
<p class="hero-eyebrow" data-reveal data-split-text>The Anti-Slop Framework for AI Design</p>
|
||||
<h1 class="hero-title" data-reveal>
|
||||
<span class="hero-title-line" data-split-text>Impeccable</span>
|
||||
<span class="hero-title-line hero-title-accent" data-split-text>Style</span>
|
||||
</h1>
|
||||
<p class="text-[clamp(1.125rem,2vw,1.5rem)] leading-snug text-charcoal mb-6 max-w-[32ch]">Your LLM can design beautiful interfaces.<br>It just needs to know what to ask for.</p>
|
||||
<p class="text-sm text-ash uppercase tracking-widest font-medium">Works with Cursor · Claude Code · Gemini CLI · Codex CLI</p>
|
||||
</div>
|
||||
<div class="hero-decoration w-60 h-60 relative max-md:hidden" aria-hidden="true">
|
||||
<div class="deco-line"></div>
|
||||
<div class="deco-circle"></div>
|
||||
<p class="hero-subtitle" data-reveal>One design skill and 15 commands that work across Cursor, Claude Code, Gemini CLI, and Codex CLI. Stop getting generic AI output. Start getting considered design.</p>
|
||||
<div class="hero-cta" data-reveal>
|
||||
<a href="#downloads" class="btn btn-primary">Get the Framework</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-scroll-indicator" aria-hidden="true">
|
||||
<span>Scroll</span>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-max mx-auto px-12 max-sm:px-6">
|
||||
<!-- 2. THE PROBLEM - Show the "AI slop" aesthetic -->
|
||||
<section class="problem-section py-32 border-t border-mist">
|
||||
<div class="problem-grid grid grid-cols-2 gap-32 items-center max-lg:grid-cols-1 max-lg:gap-20">
|
||||
<div class="max-w-md">
|
||||
<h2 class="section-title mb-6">The Problem</h2>
|
||||
<p class="text-xl leading-relaxed text-charcoal">LLMs are biased toward safe, generic design choices. Without guidance, you get the same predictable aesthetic every time.</p>
|
||||
<main class="site-content">
|
||||
<!-- 2. THE PROBLEM - AI Design Bias -->
|
||||
<section class="problem-section" id="problem">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">01</span>
|
||||
<h2 class="section-title">AI Has Design Bias</h2>
|
||||
</div>
|
||||
<div class="problem-content">
|
||||
<p class="section-lead" data-reveal>Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes—every single time.</p>
|
||||
|
||||
<!-- Bias Examples Grid -->
|
||||
<div class="bias-grid" data-reveal>
|
||||
<div class="bias-item">
|
||||
<span class="bias-icon">Aa</span>
|
||||
<div class="bias-content">
|
||||
<strong>Safe fonts</strong>
|
||||
<span>Defaults to Inter, Roboto, system fonts</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-item">
|
||||
<span class="bias-icon">◐</span>
|
||||
<div class="bias-content">
|
||||
<strong>Purple gradients</strong>
|
||||
<span>Purple-to-blue on white backgrounds</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-item">
|
||||
<span class="bias-icon">▢</span>
|
||||
<div class="bias-content">
|
||||
<strong>Cards everywhere</strong>
|
||||
<span>Wraps everything in rounded boxes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-item">
|
||||
<span class="bias-icon">◫</span>
|
||||
<div class="bias-content">
|
||||
<strong>Gray on color</strong>
|
||||
<span>Gray text on colored backgrounds</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-item">
|
||||
<span class="bias-icon">≡</span>
|
||||
<div class="bias-content">
|
||||
<strong>Centered everything</strong>
|
||||
<span>Centers all text and layouts</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-item">
|
||||
<span class="bias-icon">◌</span>
|
||||
<div class="bias-content">
|
||||
<strong>Decorative shadows</strong>
|
||||
<span>Adds shadows without purpose</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem-showcase flex justify-center">
|
||||
<div class="ai-slop-demo relative max-w-sm w-full">
|
||||
<div class="slop-card">
|
||||
<div class="slop-header">
|
||||
<div class="slop-avatar"></div>
|
||||
<div class="slop-text">
|
||||
<div class="slop-title">Welcome to Our Platform</div>
|
||||
<div class="slop-subtitle">The best solution for your needs</div>
|
||||
|
||||
<div class="lens-comparison" id="lens-comparison">
|
||||
<div class="lens-container">
|
||||
<!-- Before: AI Slop -->
|
||||
<div class="lens-before">
|
||||
<div class="slop-card">
|
||||
<div class="slop-header">
|
||||
<div class="slop-avatar"></div>
|
||||
<div class="slop-text">
|
||||
<div class="slop-title">Welcome to Our Platform</div>
|
||||
<div class="slop-subtitle">The best solution for your needs</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.</p>
|
||||
<button class="slop-button">Get Started</button>
|
||||
</div>
|
||||
<!-- Callout labels pointing to issues -->
|
||||
<div class="slop-callouts">
|
||||
<span class="slop-callout" data-point="font">Inter font (again)</span>
|
||||
<span class="slop-callout" data-point="gradient">Purple gradient</span>
|
||||
<span class="slop-callout" data-point="copy">Generic copy</span>
|
||||
<span class="slop-callout" data-point="rounded">Cards on cards</span>
|
||||
</div>
|
||||
<p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text in a card layout.</p>
|
||||
<button class="slop-button">Get Started</button>
|
||||
</div>
|
||||
<div class="slop-labels">
|
||||
<span class="slop-label" data-point="font">Inter font</span>
|
||||
<span class="slop-label" data-point="gradient">Purple gradient</span>
|
||||
<span class="slop-label" data-point="layout">Card layout</span>
|
||||
<span class="slop-label" data-point="copy">Generic copy</span>
|
||||
<!-- After: Impeccable (shown through lens) -->
|
||||
<div class="lens-after">
|
||||
<div class="impeccable-card">
|
||||
<p class="impeccable-eyebrow">Introducing</p>
|
||||
<h3 class="impeccable-title">Thoughtful Design</h3>
|
||||
<p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
|
||||
<button class="impeccable-button">Explore</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- The Lens -->
|
||||
<div class="lens-circle" id="lens-circle">
|
||||
<span class="lens-label">With Skills</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lens-labels">
|
||||
<div class="lens-label-item" data-point="before">
|
||||
<span class="lens-label-dot"></span>
|
||||
<span>Generic AI Output</span>
|
||||
</div>
|
||||
<div class="lens-label-item" data-point="after">
|
||||
<span class="lens-label-dot lens-label-dot--accent"></span>
|
||||
<span>With Design Skills</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. THE SOLUTION - Brief explanation -->
|
||||
<section class="py-32 border-t border-mist">
|
||||
<div class="grid gap-20">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="section-title mb-6">The Solution</h2>
|
||||
<p class="text-[1.375rem] leading-relaxed text-charcoal">Teach your AI assistant the language of design. <strong class="text-ink font-semibold">Skills</strong> provide deep design knowledge. <strong class="text-ink font-semibold">Commands</strong> give you precise control over the creative process.</p>
|
||||
<!-- 3. THE ANTIDOTE - Patterns & Anti-Patterns -->
|
||||
<section class="antidote-section" id="antidote">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">02</span>
|
||||
<h2 class="section-title">The Antidote</h2>
|
||||
</div>
|
||||
<div class="antidote-content">
|
||||
<p class="section-lead" data-reveal>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.</p>
|
||||
|
||||
<div class="antidote-intro" data-reveal>
|
||||
<p>Your AI learns <strong>what TO do</strong> and <strong>what NOT to do</strong>. These rules are baked into the skill.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-12 max-sm:grid-cols-1">
|
||||
<div class="solution-card">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-6 text-accent">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl font-normal mb-4">8 Skills</h3>
|
||||
<p class="text-base leading-relaxed text-ash">Deep knowledge in typography, color, motion, spatial design, and more. The AI learns <em class="italic text-charcoal">how</em> to think about design.</p>
|
||||
</div>
|
||||
<div class="solution-card">
|
||||
<div class="w-12 h-12 flex items-center justify-center mb-6 text-accent">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-display text-3xl font-normal mb-4">15 Commands</h3>
|
||||
<p class="text-base leading-relaxed text-ash">Precise actions like <code>/bolder</code>, <code>/animate</code>, <code>/audit</code>. Steer the AI through iterative design refinement.</p>
|
||||
</div>
|
||||
|
||||
<!-- Patterns (what TO do) -->
|
||||
<h3 class="patterns-section-title" data-reveal>What TO Do</h3>
|
||||
<div class="patterns-grid" id="patterns-grid" data-reveal>
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
|
||||
<!-- Anti-patterns (what NOT to do) -->
|
||||
<h3 class="patterns-section-title patterns-section-title--anti" data-reveal>What NOT to Do</h3>
|
||||
<div class="antipatterns-grid" id="antipatterns-grid" data-reveal>
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
|
||||
<div class="antidote-cta" data-reveal>
|
||||
<p>These rules are embedded in the skill. Your AI internalizes them before writing a single line of code.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. SKILLS SHOWCASE - Interactive demos -->
|
||||
<section class="skills-section py-20 border-t border-mist" id="skills-section">
|
||||
<div class="mb-12">
|
||||
<h2 class="section-title mb-4">Skills</h2>
|
||||
<p class="text-lg text-ash mt-6 max-w-[50ch]">Design knowledge that transforms AI output</p>
|
||||
<!-- 4. THE SOLUTION - Two-part system -->
|
||||
<section class="solution-section" id="solution">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">03</span>
|
||||
<h2 class="section-title">The Framework</h2>
|
||||
</div>
|
||||
<div class="skills-layout grid grid-cols-[180px_1fr] gap-12 items-start max-lg:grid-cols-1 max-lg:gap-6">
|
||||
<nav class="skills-nav flex flex-col gap-0.5 max-lg:flex-row max-lg:flex-wrap max-lg:gap-2" id="skills-nav">
|
||||
<div class="py-20 text-center text-ash italic">Loading...</div>
|
||||
</nav>
|
||||
<div class="skills-showcase" id="skills-detail">
|
||||
<div class="py-20 text-center text-ash italic">Select a skill to see it in action</div>
|
||||
<div class="solution-content">
|
||||
<p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 15 commands that form the language of design.</p>
|
||||
|
||||
<div class="solution-visual" data-reveal>
|
||||
<!-- Skills Column -->
|
||||
<div class="solution-pillar solution-pillar--skills">
|
||||
<div class="pillar-header">
|
||||
<span class="pillar-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
|
||||
</svg>
|
||||
</span>
|
||||
<h3 class="pillar-title">One Skill</h3>
|
||||
<p class="pillar-subtitle">Infinite expertise, progressive loading</p>
|
||||
</div>
|
||||
<div class="pillar-content">
|
||||
<div class="pillar-item pillar-item--main">
|
||||
<span class="pillar-item-name">Frontend Design</span>
|
||||
<span class="pillar-item-desc">Comprehensive design intelligence</span>
|
||||
</div>
|
||||
<div class="pillar-item pillar-item--ref">
|
||||
<span class="pillar-item-label">Reference domains:</span>
|
||||
</div>
|
||||
<div class="pillar-refs">
|
||||
<span class="pillar-ref">Typography</span>
|
||||
<span class="pillar-ref">Color</span>
|
||||
<span class="pillar-ref">Spatial</span>
|
||||
<span class="pillar-ref">Responsive</span>
|
||||
<span class="pillar-ref">Interaction</span>
|
||||
<span class="pillar-ref">Motion</span>
|
||||
<span class="pillar-ref">UX Writing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connector -->
|
||||
<div class="solution-connector">
|
||||
<span class="connector-plus">+</span>
|
||||
</div>
|
||||
|
||||
<!-- Commands Column -->
|
||||
<div class="solution-pillar solution-pillar--commands">
|
||||
<div class="pillar-header">
|
||||
<span class="pillar-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<h3 class="pillar-title">15 Commands</h3>
|
||||
<p class="pillar-subtitle">The language of design</p>
|
||||
</div>
|
||||
<div class="pillar-content">
|
||||
<div class="pillar-command-group">
|
||||
<span class="pillar-group-label">Diagnose</span>
|
||||
<code class="pillar-item-code">/audit</code>
|
||||
</div>
|
||||
<div class="pillar-command-group">
|
||||
<span class="pillar-group-label">Calibrate</span>
|
||||
<code class="pillar-item-code">/bolder</code>
|
||||
<code class="pillar-item-code">/quieter</code>
|
||||
<code class="pillar-item-code">/simplify</code>
|
||||
</div>
|
||||
<div class="pillar-command-group">
|
||||
<span class="pillar-group-label">Enhance</span>
|
||||
<code class="pillar-item-code">/animate</code>
|
||||
<code class="pillar-item-code">/colorize</code>
|
||||
<code class="pillar-item-code">/delight</code>
|
||||
</div>
|
||||
<div class="pillar-command-group">
|
||||
<span class="pillar-group-label">Align</span>
|
||||
<code class="pillar-item-code">/normalize</code>
|
||||
<code class="pillar-item-code">/polish</code>
|
||||
<code class="pillar-item-code">/optimize</code>
|
||||
</div>
|
||||
<div class="pillar-item pillar-item--more">+5 more commands</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="solution-result" data-reveal>
|
||||
<span class="result-arrow">↓</span>
|
||||
<p class="result-text">Together, they transform generic output into <em>impeccable</em> design.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. COMMANDS - Sidebar nav + details (mirrors skills layout) -->
|
||||
<section class="commands-section py-20 border-t border-mist" id="commands-section">
|
||||
<div class="mb-12">
|
||||
<h2 class="section-title mb-4">Commands</h2>
|
||||
<p class="text-lg text-ash mt-6 max-w-[50ch]">Precise control over the design process</p>
|
||||
<!-- 4. COMMANDS - Glass Terminal -->
|
||||
<section class="commands-section" id="commands-section">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">04</span>
|
||||
<h2 class="section-title">Commands in Action</h2>
|
||||
<p class="section-subtitle">See how commands transform your designs</p>
|
||||
</div>
|
||||
|
||||
<div class="commands-gallery">
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. PLATFORMS -->
|
||||
<section class="platforms-section" id="downloads">
|
||||
<div class="section-header" data-reveal>
|
||||
<span class="section-number">05</span>
|
||||
<h2 class="section-title">One Framework, Every AI Tool</h2>
|
||||
<p class="section-subtitle">We wrote it once, then compiled it for each platform. Same design intelligence, native to your workflow.</p>
|
||||
</div>
|
||||
|
||||
<div class="commands-layout grid grid-cols-[180px_1fr] gap-12 items-start max-lg:grid-cols-1 max-lg:gap-6">
|
||||
<!-- Commands nav (left sidebar) -->
|
||||
<nav class="commands-nav flex flex-col gap-4 max-lg:flex-row max-lg:flex-wrap max-lg:gap-2" id="workflow-diagram">
|
||||
<!-- Will be rendered by JS -->
|
||||
</nav>
|
||||
|
||||
<!-- Command detail (right side) -->
|
||||
<div class="commands-showcase" id="commands-detail">
|
||||
<div class="py-20 text-center text-ash italic">Select a command to view details</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. DOWNLOAD BUNDLES - After demonstrating value -->
|
||||
<section class="py-32 border-t border-mist" id="downloads">
|
||||
<div class="mb-20 max-w-xl">
|
||||
<h2 class="section-title mb-6">Get Started</h2>
|
||||
<p class="text-lg leading-relaxed text-ash">Download the complete bundle for your preferred AI tool. Extract into your project root and start creating.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-6 max-sm:grid-cols-1">
|
||||
<article class="download-card" data-animate>
|
||||
<div class="card-inner">
|
||||
<div class="flex justify-between items-start gap-6">
|
||||
<h3 class="font-display text-xl font-medium">Cursor</h3>
|
||||
<span class="badge">Rules + Commands</span>
|
||||
</div>
|
||||
<p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">Commands and rules for Cursor IDE. Works via appending, no frontmatter required.</p>
|
||||
<button class="btn btn-primary" data-bundle="cursor">Download</button>
|
||||
<div class="downloads-grid">
|
||||
<article class="download-card" data-reveal>
|
||||
<div class="download-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2v-4M9 21H5a2 2 0 01-2-2v-4m0-6v6m18-6v6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="download-card-content">
|
||||
<h3 class="download-card-title">Cursor</h3>
|
||||
<span class="download-card-badge">Rules + Commands</span>
|
||||
<p class="download-card-desc">Commands and rules for Cursor IDE. Works via appending, no frontmatter required.</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" data-bundle="cursor">
|
||||
<span>Download</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<article class="download-card" data-animate>
|
||||
<div class="card-inner">
|
||||
<div class="flex justify-between items-start gap-6">
|
||||
<h3 class="font-display text-xl font-medium">Claude Code</h3>
|
||||
<span class="badge">Full Featured</span>
|
||||
</div>
|
||||
<p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.</p>
|
||||
<button class="btn btn-primary" data-bundle="claude-code">Download</button>
|
||||
<article class="download-card" data-reveal>
|
||||
<div class="download-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="download-card-content">
|
||||
<h3 class="download-card-title">Claude Code</h3>
|
||||
<span class="download-card-badge">Full Featured</span>
|
||||
<p class="download-card-desc">Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" data-bundle="claude-code">
|
||||
<span>Download</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<article class="download-card" data-animate>
|
||||
<div class="card-inner">
|
||||
<div class="flex justify-between items-start gap-6">
|
||||
<h3 class="font-display text-xl font-medium">Gemini CLI</h3>
|
||||
<span class="badge">TOML + Modular</span>
|
||||
</div>
|
||||
<p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">TOML-formatted commands with modular skill imports via GEMINI.md.</p>
|
||||
<button class="btn btn-primary" data-bundle="gemini">Download</button>
|
||||
<article class="download-card" data-reveal>
|
||||
<div class="download-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="download-card-content">
|
||||
<h3 class="download-card-title">Gemini CLI</h3>
|
||||
<span class="download-card-badge">TOML + Modular</span>
|
||||
<p class="download-card-desc">TOML-formatted commands with modular skill imports via GEMINI.md.</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" data-bundle="gemini">
|
||||
<span>Download</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<article class="download-card" data-animate>
|
||||
<div class="card-inner">
|
||||
<div class="flex justify-between items-start gap-6">
|
||||
<h3 class="font-display text-xl font-medium">Codex CLI</h3>
|
||||
<span class="badge">Prompts + Routing</span>
|
||||
</div>
|
||||
<p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">Custom prompt format with skill routing through AGENTS.md architecture.</p>
|
||||
<button class="btn btn-primary" data-bundle="codex">Download</button>
|
||||
<article class="download-card" data-reveal>
|
||||
<div class="download-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="download-card-content">
|
||||
<h3 class="download-card-title">Codex CLI</h3>
|
||||
<span class="download-card-badge">Prompts + Routing</span>
|
||||
<p class="download-card-desc">Custom prompt format with skill routing through AGENTS.md architecture.</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" data-bundle="codex">
|
||||
<span>Download</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. OPEN SOURCE -->
|
||||
<section class="py-32 border-t border-mist text-center">
|
||||
<div class="max-w-md mx-auto flex flex-col items-center gap-6">
|
||||
<h2 class="font-display text-[clamp(2rem,4vw,3rem)] font-semibold">Open Source</h2>
|
||||
<p class="text-lg text-ash max-w-[42ch]">View the source, contribute skills and commands, or report issues on GitHub.</p>
|
||||
<a href="https://github.com/pbakaus/vibe-design-plugins" class="btn btn-secondary">View Repository</a>
|
||||
<section class="opensource-section" id="opensource">
|
||||
<div class="opensource-content" data-reveal>
|
||||
<h2 class="opensource-title">Open Source</h2>
|
||||
<p class="opensource-desc">View the source, contribute skills and commands, or report issues on GitHub.</p>
|
||||
<a href="https://github.com/pbakaus/vibe-design-plugins" class="btn btn-secondary">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span>View Repository</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="border-t border-mist py-32 px-12 bg-paper">
|
||||
<div class="max-w-max mx-auto flex justify-between items-center text-sm text-ash max-md:flex-col max-md:gap-4 max-md:text-center">
|
||||
<p>impeccable.style</p>
|
||||
<p><a href="https://github.com/pbakaus/vibe-design-plugins" class="text-ink underline underline-offset-2">GitHub</a></p>
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">impeccable.style</span>
|
||||
<p class="footer-tagline">The anti-slop framework for AI design</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#antidote">Anti-Patterns</a>
|
||||
<a href="#commands-section">Commands</a>
|
||||
<a href="#downloads">Downloads</a>
|
||||
<a href="https://github.com/pbakaus/vibe-design-plugins">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
@@ -1,267 +0,0 @@
|
||||
// ============================================
|
||||
// COMMANDS - Rendering, workflow, and category logic
|
||||
// ============================================
|
||||
|
||||
import {
|
||||
commandCategories,
|
||||
commandProcessSteps,
|
||||
commandRelationships,
|
||||
readyCommands,
|
||||
} from "./data.js";
|
||||
import { renderCommandDemo } from "./demo-renderer.js";
|
||||
import { setupCommandDemoToggles } from "./demo-toggles.js";
|
||||
|
||||
let currentCommand = null;
|
||||
let currentCategory = "all";
|
||||
|
||||
// Check if a command is ready for public use
|
||||
function isCommandReady(id) {
|
||||
return readyCommands.includes(id);
|
||||
}
|
||||
|
||||
export function renderWorkflowDiagram(allCommands, onSelectCommand) {
|
||||
const container = document.getElementById("workflow-diagram");
|
||||
if (!container) return;
|
||||
|
||||
// Group commands by category for the sidebar
|
||||
const groups = {
|
||||
production: [
|
||||
"audit",
|
||||
"normalize",
|
||||
"adapt",
|
||||
"clarify",
|
||||
"harden",
|
||||
"optimize",
|
||||
"polish",
|
||||
],
|
||||
aesthetic: [
|
||||
"bolder",
|
||||
"quieter",
|
||||
"animate",
|
||||
"delight",
|
||||
"colorize",
|
||||
"simplify",
|
||||
],
|
||||
system: ["extract", "onboard"],
|
||||
};
|
||||
|
||||
const renderNavItem = (id) => {
|
||||
const ready = isCommandReady(id);
|
||||
return `<button class="command-nav-item ${!ready ? "coming-soon" : ""}" data-command="${id}">/${id}${!ready ? '<span class="coming-soon-badge">Soon</span>' : ""}</button>`;
|
||||
};
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="command-nav-group">
|
||||
<span class="command-nav-label">Production</span>
|
||||
${groups.production.map(renderNavItem).join("")}
|
||||
</div>
|
||||
<div class="command-nav-group">
|
||||
<span class="command-nav-label">Aesthetic</span>
|
||||
${groups.aesthetic.map(renderNavItem).join("")}
|
||||
</div>
|
||||
<div class="command-nav-group">
|
||||
<span class="command-nav-label">System</span>
|
||||
${groups.system.map(renderNavItem).join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add click handlers
|
||||
container.querySelectorAll(".command-nav-item").forEach((node) => {
|
||||
node.addEventListener("click", () => {
|
||||
const commandId = node.dataset.command;
|
||||
const command = allCommands.find((c) => c.id === commandId);
|
||||
if (command) onSelectCommand(command);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function setupCategoryTabs(onFilter) {
|
||||
const tabs = document.querySelectorAll(".category-tab");
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
currentCategory = tab.dataset.category;
|
||||
tabs.forEach((t) => t.classList.toggle("active", t === tab));
|
||||
onFilter(currentCategory);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function filterCommands(category) {
|
||||
const cards = document.querySelectorAll(".command-card");
|
||||
cards.forEach((card) => {
|
||||
const commandId = card.dataset.id;
|
||||
const cmdCategory = commandCategories[commandId];
|
||||
const visible = category === "all" || cmdCategory === category;
|
||||
card.style.display = visible ? "" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
export function renderCommandsGrid(commands, onSelectCommand) {
|
||||
const grid = document.getElementById("commands-nav");
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = commands
|
||||
.map(
|
||||
(cmd) => `
|
||||
<button class="command-card" data-id="${cmd.id}">
|
||||
<div class="command-card-name">/${cmd.id}</div>
|
||||
<div class="command-card-desc">${cmd.description.slice(0, 60)}${cmd.description.length > 60 ? "..." : ""}</div>
|
||||
<span class="command-card-category">${commandCategories[cmd.id] || "other"}</span>
|
||||
</button>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
grid.querySelectorAll(".command-card").forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
const cmd = commands.find((c) => c.id === card.dataset.id);
|
||||
if (cmd) onSelectCommand(cmd);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function selectCommand(command, allCommands) {
|
||||
currentCommand = command;
|
||||
|
||||
// Update nav active state
|
||||
document.querySelectorAll(".command-nav-item").forEach((item) => {
|
||||
item.classList.toggle("active", item.dataset.command === command.id);
|
||||
});
|
||||
|
||||
// Render detail
|
||||
const detail = document.getElementById("commands-detail");
|
||||
if (detail) {
|
||||
detail.innerHTML = renderCommandDetail(command);
|
||||
setupCommandDemoToggles(allCommands, (cmd) =>
|
||||
selectCommand(cmd, allCommands),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCommandDetail(command) {
|
||||
const relationships = commandRelationships[command.id] || {};
|
||||
const steps = commandProcessSteps[command.id] || [];
|
||||
const category = commandCategories[command.id] || "other";
|
||||
const ready = isCommandReady(command.id);
|
||||
|
||||
// Coming soon placeholder for incomplete commands
|
||||
if (!ready) {
|
||||
return `
|
||||
<div class="coming-soon-showcase">
|
||||
<div class="coming-soon-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 6v6l4 2M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>/${command.id}</h3>
|
||||
<p class="coming-soon-text">This command is being refined and will be available soon.</p>
|
||||
<p class="skill-description">${command.description}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="command-detail-panel">
|
||||
<div class="command-demo-area">
|
||||
${renderCommandDemo(command.id)}
|
||||
</div>
|
||||
|
||||
<div class="command-info-area">
|
||||
<div class="command-header">
|
||||
<h3>/${command.id}</h3>
|
||||
<div class="meta">
|
||||
<a href="https://github.com/pbakaus/vibe-design-plugins/blob/main/source/commands/${command.id}.md" target="_blank" rel="noopener">
|
||||
View Source →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="command-description">${command.description}</p>
|
||||
|
||||
${
|
||||
steps.length > 0
|
||||
? `
|
||||
<div class="skill-section">
|
||||
<h4>Process</h4>
|
||||
<div class="process-steps-compact">
|
||||
${steps.map((step) => `<span class="process-step-compact">${step}</span>`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
${
|
||||
relationships.combinesWith
|
||||
? `
|
||||
<div class="skill-section">
|
||||
<h4>Combines With</h4>
|
||||
<div class="relationship-tags">
|
||||
${relationships.combinesWith
|
||||
.map(
|
||||
(name) => `
|
||||
<button class="relationship-tag" data-command="${name}">/${name}</button>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
${
|
||||
relationships.leadsTo
|
||||
? `
|
||||
<div class="skill-section">
|
||||
<h4>Often Leads To</h4>
|
||||
<div class="relationship-tags">
|
||||
${relationships.leadsTo
|
||||
.map(
|
||||
(name) => `
|
||||
<button class="relationship-tag" data-command="${name}">/${name}</button>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
${
|
||||
relationships.pairs
|
||||
? `
|
||||
<div class="skill-section">
|
||||
<h4>Opposite</h4>
|
||||
<div class="relationship-tags">
|
||||
<button class="relationship-tag" data-command="${relationships.pairs}">/${relationships.pairs}</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
<div class="skill-downloads">
|
||||
<span class="downloads-label">Download for:</span>
|
||||
<a href="/api/download/command/cursor/${command.id}" class="download-icon" title="Cursor">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5.5 3h13a2.5 2.5 0 012.5 2.5v13a2.5 2.5 0 01-2.5 2.5h-13A2.5 2.5 0 013 18.5v-13A2.5 2.5 0 015.5 3zm6.5 4L7 12l5 5v-3.5h4v-3h-4V7z"/></svg>
|
||||
</a>
|
||||
<a href="/api/download/command/claude-code/${command.id}" class="download-icon" title="Claude Code">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
</a>
|
||||
<a href="/api/download/command/gemini/${command.id}" class="download-icon" title="Gemini CLI">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</a>
|
||||
<a href="/api/download/command/codex/${command.id}" class="download-icon" title="Codex CLI">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function getCurrentCommand() {
|
||||
return currentCommand;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { readySkills, skillFocusAreas } from "../data.js";
|
||||
import { renderSkillDemo, setupDemoTabs } from "../demo-renderer.js";
|
||||
import { setupDemoToggles } from "../demo-toggles.js";
|
||||
|
||||
export function initArtGallery() {
|
||||
// Initial setup if needed
|
||||
}
|
||||
|
||||
export function renderGallery(skills) {
|
||||
const container = document.querySelector(".skills-gallery");
|
||||
if (!container) return;
|
||||
|
||||
// Filter skills (hide frontend-design as per original)
|
||||
const filteredSkills = skills.filter((s) => s.id !== "frontend-design");
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="gallery-track">
|
||||
${filteredSkills.map((skill, index) => renderFrame(skill, index)).join("")}
|
||||
</div>
|
||||
<div class="gallery-map">
|
||||
${filteredSkills.map((_, index) => `<div class="gallery-dot ${index === 0 ? "active" : ""}" data-index="${index}"></div>`).join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
setupInteractions();
|
||||
setupDemoTabs();
|
||||
setupDemoToggles();
|
||||
}
|
||||
|
||||
function renderFrame(skill, index) {
|
||||
const isReady = readySkills.includes(skill.id);
|
||||
const focusAreas = skillFocusAreas[skill.id] || [];
|
||||
const displayName = formatName(skill.id);
|
||||
|
||||
return `
|
||||
<article class="gallery-frame ${index === 0 ? "active" : ""}" data-index="${index}" id="skill-${skill.id}">
|
||||
<div class="gallery-content">
|
||||
<div class="gallery-visual">
|
||||
${isReady ? renderSkillDemo(skill.id) : renderComingSoonVisual(skill.id)}
|
||||
</div>
|
||||
<div class="gallery-info">
|
||||
<div class="gallery-header">
|
||||
<h3 class="gallery-title">${displayName}</h3>
|
||||
<div class="gallery-meta">
|
||||
Skill · ${isReady ? "Available" : "Coming Soon"}
|
||||
</div>
|
||||
</div>
|
||||
<p class="gallery-desc">${skill.description}</p>
|
||||
|
||||
${
|
||||
focusAreas.length > 0
|
||||
? `
|
||||
<div class="gallery-tags">
|
||||
${focusAreas
|
||||
.slice(0, 4)
|
||||
.map(
|
||||
(area) => `
|
||||
<span class="gallery-tag">${area.area}</span>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderComingSoonVisual(id) {
|
||||
return `
|
||||
<div class="coming-soon-placeholder" style="text-align: center;">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="opacity: 0.3">
|
||||
<path d="M12 6v6l4 2M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
|
||||
</svg>
|
||||
<p style="margin-top: 1rem; color: var(--color-ash); font-size: 0.875rem;">Coming Soon</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function formatName(id) {
|
||||
return id
|
||||
.split("-")
|
||||
.map((word) =>
|
||||
word === "ux" ? "UX" : word.charAt(0).toUpperCase() + word.slice(1),
|
||||
)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function setupInteractions() {
|
||||
const track = document.querySelector(".gallery-track");
|
||||
const frames = document.querySelectorAll(".gallery-frame");
|
||||
const dots = document.querySelectorAll(".gallery-dot");
|
||||
|
||||
if (!track) return;
|
||||
|
||||
// Intersection Observer for Active State
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const index = entry.target.dataset.index;
|
||||
|
||||
// Update frames
|
||||
frames.forEach((f) => f.classList.remove("active"));
|
||||
entry.target.classList.add("active");
|
||||
|
||||
// Update dots
|
||||
dots.forEach((d) => d.classList.remove("active"));
|
||||
if (dots[index]) dots[index].classList.add("active");
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
root: track,
|
||||
threshold: 0.6,
|
||||
},
|
||||
);
|
||||
|
||||
frames.forEach((frame) => observer.observe(frame));
|
||||
|
||||
// Dot navigation
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener("click", () => {
|
||||
const frame = frames[index];
|
||||
if (frame) {
|
||||
frame.scrollIntoView({ behavior: "smooth", inline: "center" });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { renderCommandDemo } from "../demo-renderer.js";
|
||||
import { setupCommandDemoToggles } from "../demo-toggles.js";
|
||||
|
||||
export function initGlassTerminal() {
|
||||
// Initial setup if needed
|
||||
}
|
||||
|
||||
export function renderTerminalLayout(commands) {
|
||||
const container = document.querySelector('.commands-gallery');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="commands-container">
|
||||
<div class="command-manual">
|
||||
${commands.map(cmd => renderManualEntry(cmd)).join('')}
|
||||
</div>
|
||||
<div class="glass-terminal-wrapper">
|
||||
<div class="glass-terminal">
|
||||
<div class="terminal-header">
|
||||
<span class="terminal-dot red"></span>
|
||||
<span class="terminal-dot yellow"></span>
|
||||
<span class="terminal-dot green"></span>
|
||||
<span class="terminal-title">zsh — 80x24</span>
|
||||
</div>
|
||||
<div class="terminal-body" id="terminal-content">
|
||||
<!-- Dynamic Content -->
|
||||
<div class="terminal-line">
|
||||
<span class="terminal-prompt">➜</span>
|
||||
<span>Waiting for input...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setupScrollSpy(commands);
|
||||
|
||||
// Select first command initially
|
||||
if (commands.length > 0) {
|
||||
updateTerminal(commands[0], document.getElementById('terminal-content'), commands);
|
||||
const firstEntry = document.querySelector('.manual-entry');
|
||||
if (firstEntry) firstEntry.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function renderManualEntry(cmd) {
|
||||
return `
|
||||
<div class="manual-entry" data-id="${cmd.id}" id="cmd-${cmd.id}">
|
||||
<h3 class="manual-cmd-name">/${cmd.id}</h3>
|
||||
<p class="manual-cmd-desc">${cmd.description}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function setupScrollSpy(commands) {
|
||||
const entries = document.querySelectorAll('.manual-entry');
|
||||
const terminalContent = document.getElementById('terminal-content');
|
||||
|
||||
// Intersection Observer for Scroll Spy
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
// Update active state
|
||||
document.querySelectorAll('.manual-entry').forEach(e => e.classList.remove('active'));
|
||||
entry.target.classList.add('active');
|
||||
|
||||
// Update terminal
|
||||
const cmdId = entry.target.dataset.id;
|
||||
const cmd = commands.find(c => c.id === cmdId);
|
||||
if (cmd) {
|
||||
updateTerminal(cmd, terminalContent, commands);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5,
|
||||
rootMargin: "-20% 0px -60% 0px"
|
||||
});
|
||||
|
||||
entries.forEach(e => observer.observe(e));
|
||||
|
||||
// Click interaction
|
||||
entries.forEach(e => {
|
||||
e.addEventListener('click', () => {
|
||||
e.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateTerminal(cmd, container, allCommands) {
|
||||
if (!cmd || !container) return;
|
||||
|
||||
// Content update
|
||||
const content = `
|
||||
<div class="terminal-line">
|
||||
<span class="terminal-prompt">➜</span>
|
||||
<span>vibe run ${cmd.id}</span>
|
||||
</div>
|
||||
<div class="terminal-output">
|
||||
> Analyzing design context...<br>
|
||||
> Applying ${cmd.id} transformation...<br>
|
||||
> Done.
|
||||
</div>
|
||||
<div class="terminal-preview">
|
||||
${renderCommandDemo(cmd.id)}
|
||||
</div>
|
||||
<div class="terminal-line" style="margin-top: auto;">
|
||||
<span class="terminal-prompt">➜</span>
|
||||
<span class="terminal-cursor"></span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML = content;
|
||||
|
||||
// Re-bind toggles
|
||||
// We pass a no-op for the callback because scrolling handles selection now
|
||||
setupCommandDemoToggles(allCommands, () => {});
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
export function initLensEffect() {
|
||||
const container = document.getElementById("lens-comparison");
|
||||
if (!container) return;
|
||||
|
||||
const lensContainer = container.querySelector(".lens-container");
|
||||
const lensAfter = container.querySelector(".lens-after");
|
||||
const lensCircle = container.querySelector(".lens-circle");
|
||||
|
||||
if (!lensContainer || !lensAfter || !lensCircle) return;
|
||||
|
||||
let isHovering = false;
|
||||
|
||||
function updateLens(x, y) {
|
||||
const rect = lensContainer.getBoundingClientRect();
|
||||
const relX = ((x - rect.left) / rect.width) * 100;
|
||||
const relY = ((y - rect.top) / rect.height) * 100;
|
||||
|
||||
const clampedX = Math.max(25, Math.min(75, relX));
|
||||
const clampedY = Math.max(30, Math.min(70, relY));
|
||||
|
||||
lensAfter.style.clipPath = `circle(120px at ${clampedX}% ${clampedY}%)`;
|
||||
lensCircle.style.setProperty("--lens-x", `${clampedX}%`);
|
||||
lensCircle.style.setProperty("--lens-y", `${clampedY}%`);
|
||||
lensCircle.style.left = `${clampedX}%`;
|
||||
lensCircle.style.top = `${clampedY}%`;
|
||||
}
|
||||
|
||||
lensContainer.addEventListener("mouseenter", () => {
|
||||
isHovering = true;
|
||||
});
|
||||
|
||||
lensContainer.addEventListener("mouseleave", () => {
|
||||
isHovering = false;
|
||||
// Reset to default position
|
||||
updateLens(
|
||||
lensContainer.getBoundingClientRect().left +
|
||||
lensContainer.offsetWidth * 0.7,
|
||||
lensContainer.getBoundingClientRect().top +
|
||||
lensContainer.offsetHeight * 0.5,
|
||||
);
|
||||
});
|
||||
|
||||
lensContainer.addEventListener("mousemove", (e) => {
|
||||
if (isHovering) {
|
||||
updateLens(e.clientX, e.clientY);
|
||||
}
|
||||
});
|
||||
|
||||
// Touch support
|
||||
lensContainer.addEventListener("touchmove", (e) => {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
updateLens(touch.clientX, touch.clientY);
|
||||
});
|
||||
|
||||
// Initialize at default position
|
||||
updateLens(
|
||||
lensContainer.getBoundingClientRect().left +
|
||||
lensContainer.offsetWidth * 0.7,
|
||||
lensContainer.getBoundingClientRect().top +
|
||||
lensContainer.offsetHeight * 0.5,
|
||||
);
|
||||
}
|
||||
+27
-50
@@ -5,58 +5,37 @@
|
||||
// Items that are fully complete and ready for public use
|
||||
// All others will show "Coming Soon"
|
||||
export const readySkills = [
|
||||
// None ready yet - all skills are still being refined
|
||||
'frontend-design' // Consolidated skill with all design domains
|
||||
];
|
||||
|
||||
export const readyCommands = [
|
||||
'normalize' // First command to be fully completed
|
||||
];
|
||||
|
||||
// Consolidated frontend-design skill with reference domains
|
||||
export const skillFocusAreas = {
|
||||
'typography': [
|
||||
{ area: 'Scale & Rhythm', detail: 'Harmonious systems' },
|
||||
{ area: 'Hierarchy', detail: 'Clear structure' },
|
||||
{ area: 'Readability', detail: 'Optimal measure' },
|
||||
{ area: 'Expression', detail: 'Character in type' }
|
||||
],
|
||||
'color-and-contrast': [
|
||||
{ area: 'Accessibility', detail: 'WCAG contrast' },
|
||||
{ area: 'Color Systems', detail: 'Systematic palettes' },
|
||||
{ area: 'Dark Mode', detail: 'Balanced themes' },
|
||||
{ area: 'Accent Usage', detail: 'Strategic color' }
|
||||
],
|
||||
'spatial-design': [
|
||||
{ area: 'Layout Systems', detail: 'Grid & asymmetry' },
|
||||
{ area: 'Hierarchy', detail: 'Visual weight' },
|
||||
{ area: 'Spacing', detail: 'Rhythm & breath' },
|
||||
{ area: 'Composition', detail: 'Balance & tension' }
|
||||
],
|
||||
'motion-design': [
|
||||
{ area: 'Micro-interactions', detail: 'Action feedback' },
|
||||
{ area: 'Transitions', detail: 'Smooth changes' },
|
||||
{ area: 'Performance', detail: '60fps animations' },
|
||||
{ area: 'Choreography', detail: 'Orchestrated reveals' }
|
||||
],
|
||||
'interaction-design': [
|
||||
{ area: 'Affordances', detail: 'Clear cues' },
|
||||
{ area: 'Feedback', detail: 'Immediate response' },
|
||||
{ area: 'States', detail: 'Hover, focus, etc.' },
|
||||
{ area: 'Forgiveness', detail: 'Undo & confirmation' }
|
||||
],
|
||||
'responsive-design': [
|
||||
{ area: 'Fluid Layouts', detail: 'Adapt gracefully' },
|
||||
{ area: 'Touch Targets', detail: '44px minimum' },
|
||||
{ area: 'Breakpoints', detail: 'Strategic shifts' },
|
||||
{ area: 'Performance', detail: 'Mobile optimized' }
|
||||
],
|
||||
'ux-writing': [
|
||||
{ area: 'Clarity', detail: 'Plain language' },
|
||||
{ area: 'Conciseness', detail: 'Respect time' },
|
||||
{ area: 'Voice & Tone', detail: 'Human & empathetic' },
|
||||
{ area: 'Error Messaging', detail: 'Actionable guidance' }
|
||||
'frontend-design': [
|
||||
{ area: 'Typography', detail: 'Scale, rhythm, hierarchy, expression' },
|
||||
{ area: 'Color & Contrast', detail: 'Accessibility, systems, theming' },
|
||||
{ area: 'Spatial Design', detail: 'Layout, spacing, composition' },
|
||||
{ area: 'Responsive', detail: 'Fluid layouts, touch targets' },
|
||||
{ area: 'Interaction', detail: 'States, feedback, affordances' },
|
||||
{ area: 'Motion', detail: 'Micro-interactions, transitions' },
|
||||
{ area: 'UX Writing', detail: 'Clarity, voice, error messages' }
|
||||
]
|
||||
};
|
||||
|
||||
// Reference domains within the frontend-design skill
|
||||
export const skillReferenceDomains = [
|
||||
'typography',
|
||||
'color-and-contrast',
|
||||
'spatial-design',
|
||||
'responsive-design',
|
||||
'interaction-design',
|
||||
'motion-design',
|
||||
'ux-writing'
|
||||
];
|
||||
|
||||
export const commandProcessSteps = {
|
||||
'audit': ['Scan', 'Document', 'Prioritize', 'Recommend'],
|
||||
'normalize': ['Analyze', 'Identify', 'Align', 'Verify'],
|
||||
@@ -93,15 +72,13 @@ export const commandCategories = {
|
||||
'onboard': 'system'
|
||||
};
|
||||
|
||||
// Skill relationships (no longer used in UI, kept for reference)
|
||||
// Skill relationships - now consolidated into frontend-design skill
|
||||
// The frontend-design skill contains all domains as reference files
|
||||
export const skillRelationships = {
|
||||
'typography': { combinesWith: ['spatial-design'] },
|
||||
'color-and-contrast': { combinesWith: ['spatial-design'] },
|
||||
'spatial-design': { combinesWith: ['typography'] },
|
||||
'motion-design': { combinesWith: ['interaction-design'] },
|
||||
'interaction-design': { combinesWith: ['motion-design', 'ux-writing'] },
|
||||
'responsive-design': { combinesWith: ['spatial-design'] },
|
||||
'ux-writing': { combinesWith: ['interaction-design'] }
|
||||
'frontend-design': {
|
||||
description: 'Comprehensive design intelligence with progressive reference loading',
|
||||
referenceDomains: ['typography', 'color-and-contrast', 'spatial-design', 'responsive-design', 'interaction-design', 'motion-design', 'ux-writing']
|
||||
}
|
||||
};
|
||||
|
||||
export const commandRelationships = {
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
export function initHeroEffect() {
|
||||
const canvas = document.getElementById("hero-canvas");
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let width, height;
|
||||
let points = [];
|
||||
let gap = 50; // Grid gap
|
||||
const mouse = { x: -1000, y: -1000, radius: 150 }; // Moderate radius
|
||||
let animationId;
|
||||
|
||||
// Physics params - Elegant & Fluid
|
||||
const friction = 0.9; // Higher friction = less slippery
|
||||
const ease = 0.1; // Standard spring
|
||||
const forceMultiplier = 3; // Subtle push, not a splash
|
||||
|
||||
class Point {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.ox = x; // original x
|
||||
this.oy = y; // original y
|
||||
this.vx = 0;
|
||||
this.vy = 0;
|
||||
}
|
||||
|
||||
update() {
|
||||
// Mouse interaction
|
||||
const dx = mouse.x - this.x;
|
||||
const dy = mouse.y - this.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
const force = Math.max(0, (mouse.radius - dist) / mouse.radius);
|
||||
|
||||
if (force > 0) {
|
||||
const angle = Math.atan2(dy, dx);
|
||||
// Gentle push
|
||||
this.vx -= Math.cos(angle) * force * forceMultiplier;
|
||||
this.vy -= Math.sin(angle) * force * forceMultiplier;
|
||||
}
|
||||
|
||||
// Spring back to original position
|
||||
this.vx += (this.ox - this.x) * ease;
|
||||
this.vy += (this.oy - this.y) * ease;
|
||||
|
||||
// Friction
|
||||
this.vx *= friction;
|
||||
this.vy *= friction;
|
||||
|
||||
// Update position
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
width = rect.width;
|
||||
height = rect.height;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
initGrid();
|
||||
}
|
||||
|
||||
function initGrid() {
|
||||
points = [];
|
||||
// Responsive gap
|
||||
gap = width < 768 ? 40 : 50;
|
||||
|
||||
const cols = Math.ceil(width / gap);
|
||||
const rows = Math.ceil(height / gap);
|
||||
|
||||
for (let i = 0; i <= cols; i++) {
|
||||
for (let j = 0; j <= rows; j++) {
|
||||
points.push(new Point(i * gap, j * gap));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Update points
|
||||
points.forEach(p => p.update());
|
||||
|
||||
// Draw grid lines
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "rgba(100, 40, 50, 0.06)"; // Very subtle base
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
const cols = Math.ceil(width / gap) + 1;
|
||||
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
const p = points[i];
|
||||
|
||||
// Draw Horizontal
|
||||
if ((i + 1) % cols !== 0 && i + 1 < points.length) {
|
||||
const next = points[i + 1];
|
||||
// Use Bezier for fluid curves instead of straight lines
|
||||
const xc = (p.x + next.x) / 2;
|
||||
const yc = (p.y + next.y) / 2;
|
||||
ctx.moveTo(p.x, p.y);
|
||||
// ctx.quadraticCurveTo(p.x, p.y, xc, yc); // Slightly more expensive but smoother?
|
||||
// Actually straight lines with high enough density look fine and are faster.
|
||||
// Let's stick to lineTo for performance, the points themselves move smoothly.
|
||||
ctx.lineTo(next.x, next.y);
|
||||
}
|
||||
|
||||
// Draw Vertical
|
||||
if (i + cols < points.length) {
|
||||
const next = points[i + cols];
|
||||
ctx.moveTo(p.x, p.y);
|
||||
ctx.lineTo(next.x, next.y);
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
animationId = requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
mouse.x = e.clientX - rect.left;
|
||||
mouse.y = e.clientY - rect.top;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
mouse.x = -1000;
|
||||
mouse.y = -1000;
|
||||
}
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
canvas.parentElement.addEventListener("mousemove", handleMouseMove);
|
||||
canvas.parentElement.addEventListener("mouseleave", handleMouseLeave);
|
||||
|
||||
resize();
|
||||
draw();
|
||||
|
||||
// Cleanup
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
if (!animationId) draw();
|
||||
} else {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
animationId = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(canvas);
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
// ============================================
|
||||
// SKILLS - Rendering and selection logic
|
||||
// ============================================
|
||||
|
||||
import { readySkills, skillFocusAreas } from "./data.js";
|
||||
import { renderSkillDemo, setupDemoTabs } from "./demo-renderer.js";
|
||||
import { setupDemoToggles } from "./demo-toggles.js";
|
||||
|
||||
let currentSkill = null;
|
||||
|
||||
// Format skill ID to display name (e.g., "ux-writing" -> "UX Writing")
|
||||
function formatSkillName(id) {
|
||||
return id
|
||||
.split("-")
|
||||
.map((word) => {
|
||||
// Handle special cases like "ux" -> "UX"
|
||||
if (word.toLowerCase() === "ux") return "UX";
|
||||
return word.charAt(0).toUpperCase() + word.slice(1);
|
||||
})
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
// Check if a skill is ready for public use
|
||||
function isSkillReady(id) {
|
||||
return readySkills.includes(id);
|
||||
}
|
||||
|
||||
// Filter out frontend-design (Anthropic's skill, not ours)
|
||||
function filterSkills(skills) {
|
||||
return skills.filter((s) => s.id !== "frontend-design");
|
||||
}
|
||||
|
||||
export function renderSkillsNav(skills, onSelect) {
|
||||
const nav = document.getElementById("skills-nav");
|
||||
if (!nav) return;
|
||||
|
||||
const filteredSkills = filterSkills(skills);
|
||||
|
||||
nav.innerHTML = filteredSkills
|
||||
.map(
|
||||
(skill) => `
|
||||
<button class="skill-nav-item ${!isSkillReady(skill.id) ? "coming-soon" : ""}" data-id="${skill.id}">
|
||||
${formatSkillName(skill.id)}
|
||||
${!isSkillReady(skill.id) ? '<span class="coming-soon-badge">Soon</span>' : ""}
|
||||
</button>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
nav.querySelectorAll(".skill-nav-item").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const skill = filteredSkills.find((s) => s.id === btn.dataset.id);
|
||||
if (skill) onSelect(skill);
|
||||
});
|
||||
});
|
||||
|
||||
return filteredSkills;
|
||||
}
|
||||
|
||||
export function selectSkill(skill, allSkills) {
|
||||
currentSkill = skill;
|
||||
|
||||
// Update nav active state
|
||||
document.querySelectorAll(".skill-nav-item").forEach((btn) => {
|
||||
btn.classList.toggle("active", btn.dataset.id === skill.id);
|
||||
});
|
||||
|
||||
// Render showcase
|
||||
const showcase = document.getElementById("skills-detail");
|
||||
if (showcase) {
|
||||
showcase.innerHTML = renderSkillShowcase(skill, allSkills);
|
||||
setupDemoTabs();
|
||||
setupDemoToggles();
|
||||
|
||||
// Add click handlers for relationship tags
|
||||
showcase
|
||||
.querySelectorAll(".relationship-tag[data-skill]")
|
||||
.forEach((tag) => {
|
||||
tag.addEventListener("click", () => {
|
||||
const skillId = tag.dataset.skill;
|
||||
const targetSkill = allSkills.find((s) => s.id === skillId);
|
||||
if (targetSkill) selectSkill(targetSkill, allSkills);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderSkillShowcase(skill, allSkills) {
|
||||
const focusAreas = skillFocusAreas[skill.id] || [];
|
||||
const displayName = formatSkillName(skill.id);
|
||||
const ready = isSkillReady(skill.id);
|
||||
|
||||
// Coming soon placeholder for incomplete skills
|
||||
if (!ready) {
|
||||
return `
|
||||
<div class="coming-soon-showcase">
|
||||
<div class="coming-soon-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 6v6l4 2M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>${displayName}</h3>
|
||||
<p class="coming-soon-text">This skill is being refined and will be available soon.</p>
|
||||
<p class="skill-description">${skill.description}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="skill-demo-area">
|
||||
${renderSkillDemo(skill.id)}
|
||||
</div>
|
||||
<div class="skill-info-panel">
|
||||
<div class="skill-header">
|
||||
<h3>${displayName}</h3>
|
||||
<div class="meta">
|
||||
<span>Skill</span>
|
||||
<span>·</span>
|
||||
<a href="https://github.com/pbakaus/vibe-design-plugins/blob/main/source/skills/${skill.id}.md" target="_blank" rel="noopener">
|
||||
View Source →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="skill-description">${skill.description}</p>
|
||||
|
||||
${
|
||||
focusAreas.length > 0
|
||||
? `
|
||||
<div class="skill-section">
|
||||
<h4>Focus Areas</h4>
|
||||
<div class="focus-areas-compact">
|
||||
${focusAreas
|
||||
.map(
|
||||
(area) => `
|
||||
<span class="focus-area-tag">
|
||||
<strong>${area.area}</strong>
|
||||
<span>${area.detail}</span>
|
||||
</span>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
<div class="skill-downloads">
|
||||
<span class="downloads-label">Download for:</span>
|
||||
<a href="/api/download/skill/cursor/${skill.id}" class="download-icon" title="Cursor">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5.5 3h13a2.5 2.5 0 012.5 2.5v13a2.5 2.5 0 01-2.5 2.5h-13A2.5 2.5 0 013 18.5v-13A2.5 2.5 0 015.5 3zm6.5 4L7 12l5 5v-3.5h4v-3h-4V7z"/></svg>
|
||||
</a>
|
||||
<a href="/api/download/skill/claude-code/${skill.id}" class="download-icon" title="Claude Code">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
</a>
|
||||
<a href="/api/download/skill/gemini/${skill.id}" class="download-icon" title="Gemini CLI">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
||||
</a>
|
||||
<a href="/api/download/skill/codex/${skill.id}" class="download-icon" title="Codex CLI">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function getCurrentSkill() {
|
||||
return currentSkill;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { inView } from "motion";
|
||||
|
||||
export function initScrollReveal() {
|
||||
const revealElements = document.querySelectorAll("[data-reveal]");
|
||||
|
||||
revealElements.forEach((el) => {
|
||||
inView(
|
||||
el,
|
||||
() => {
|
||||
el.classList.add("revealed");
|
||||
},
|
||||
{ margin: "-50px" },
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import Lenis from "lenis";
|
||||
|
||||
export function initSmoothScroll() {
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t) => Math.min(1, 1.001 - 2 ** (-10 * t)),
|
||||
orientation: "vertical",
|
||||
gestureOrientation: "vertical",
|
||||
smoothWheel: true,
|
||||
wheelMultiplier: 1,
|
||||
touchMultiplier: 2,
|
||||
});
|
||||
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
|
||||
requestAnimationFrame(raf);
|
||||
|
||||
// Handle anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(anchor.getAttribute("href"));
|
||||
if (target) {
|
||||
lenis.scrollTo(target, { offset: -40 });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return lenis;
|
||||
}
|
||||
|
||||
export function initScrollIndicator() {
|
||||
const indicator = document.querySelector(".hero-scroll-indicator");
|
||||
if (!indicator) return;
|
||||
|
||||
function update() {
|
||||
if (window.scrollY > 20) {
|
||||
indicator.classList.add("hidden");
|
||||
} else {
|
||||
indicator.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", update, { passive: true });
|
||||
update();
|
||||
}
|
||||
+9
-8
@@ -12,7 +12,7 @@
|
||||
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { readSourceFiles } from './lib/utils.js';
|
||||
import { readSourceFiles, readPatterns } from './lib/utils.js';
|
||||
import {
|
||||
transformCursor,
|
||||
transformClaudeCode,
|
||||
@@ -31,16 +31,17 @@ const DIST_DIR = path.join(ROOT_DIR, 'dist');
|
||||
*/
|
||||
async function build() {
|
||||
console.log('🔨 Building cross-provider design plugins...\n');
|
||||
|
||||
|
||||
// Read source files
|
||||
const { commands, skills } = readSourceFiles(ROOT_DIR);
|
||||
console.log(`📖 Read ${commands.length} commands and ${skills.length} skills\n`);
|
||||
|
||||
const patterns = readPatterns(ROOT_DIR);
|
||||
console.log(`📖 Read ${commands.length} commands, ${skills.length} skills, and ${patterns.patterns.length + patterns.antipatterns.length} pattern categories\n`);
|
||||
|
||||
// Transform for each provider
|
||||
transformCursor(commands, skills, DIST_DIR);
|
||||
transformClaudeCode(commands, skills, DIST_DIR);
|
||||
transformGemini(commands, skills, DIST_DIR);
|
||||
transformCodex(commands, skills, DIST_DIR);
|
||||
transformCursor(commands, skills, DIST_DIR, patterns);
|
||||
transformClaudeCode(commands, skills, DIST_DIR, patterns);
|
||||
transformGemini(commands, skills, DIST_DIR, patterns);
|
||||
transformCodex(commands, skills, DIST_DIR, patterns);
|
||||
|
||||
// Create ZIP bundles
|
||||
await createAllZips(DIST_DIR);
|
||||
|
||||
@@ -3,19 +3,20 @@ import { cleanDir, ensureDir, writeFile, generateYamlFrontmatter } from '../util
|
||||
|
||||
/**
|
||||
* Claude Code Transformer (Full Featured)
|
||||
*
|
||||
*
|
||||
* Keeps full YAML frontmatter with args support.
|
||||
* Skills stored in subdirectories with SKILL.md filename.
|
||||
* Supports reference files in skill subdirectories.
|
||||
*/
|
||||
export function transformClaudeCode(commands, skills, distDir) {
|
||||
export function transformClaudeCode(commands, skills, distDir, patterns = null) {
|
||||
const claudeDir = path.join(distDir, 'claude-code');
|
||||
const commandsDir = path.join(claudeDir, '.claude/commands');
|
||||
const skillsDir = path.join(claudeDir, '.claude/skills');
|
||||
|
||||
|
||||
cleanDir(claudeDir);
|
||||
ensureDir(commandsDir);
|
||||
ensureDir(skillsDir);
|
||||
|
||||
|
||||
// Commands: Keep frontmatter + body
|
||||
for (const command of commands) {
|
||||
const frontmatter = generateYamlFrontmatter({
|
||||
@@ -23,27 +24,52 @@ export function transformClaudeCode(commands, skills, distDir) {
|
||||
description: command.description,
|
||||
...(command.args.length > 0 && { args: command.args })
|
||||
});
|
||||
|
||||
|
||||
const content = `${frontmatter}\n\n${command.body}`;
|
||||
const outputPath = path.join(commandsDir, `${command.name}.md`);
|
||||
writeFile(outputPath, content);
|
||||
}
|
||||
|
||||
|
||||
// Skills: Keep frontmatter + body in subdirectories
|
||||
let refCount = 0;
|
||||
for (const skill of skills) {
|
||||
const skillDir = path.join(skillsDir, skill.name);
|
||||
|
||||
|
||||
const frontmatter = generateYamlFrontmatter({
|
||||
name: skill.name,
|
||||
description: skill.description,
|
||||
...(skill.license && { license: skill.license })
|
||||
});
|
||||
|
||||
const content = `${frontmatter}\n\n${skill.body}`;
|
||||
|
||||
let body = skill.body;
|
||||
|
||||
// Merge patterns body into frontend-design skill (before Domain Reference Files section)
|
||||
if (skill.name === 'frontend-design' && patterns && patterns.body) {
|
||||
const insertPoint = body.indexOf('---\n\n## Domain Reference Files');
|
||||
if (insertPoint > -1) {
|
||||
body = body.slice(0, insertPoint) + '\n\n' + patterns.body + '\n\n' + body.slice(insertPoint);
|
||||
} else {
|
||||
body += '\n\n' + patterns.body;
|
||||
}
|
||||
}
|
||||
|
||||
const content = `${frontmatter}\n\n${body}`;
|
||||
const outputPath = path.join(skillDir, 'SKILL.md');
|
||||
writeFile(outputPath, content);
|
||||
|
||||
// Copy reference files if they exist
|
||||
if (skill.references && skill.references.length > 0) {
|
||||
const refDir = path.join(skillDir, 'reference');
|
||||
ensureDir(refDir);
|
||||
for (const ref of skill.references) {
|
||||
const refOutputPath = path.join(refDir, `${ref.name}.md`);
|
||||
writeFile(refOutputPath, ref.content);
|
||||
refCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`✓ Claude Code: ${commands.length} commands, ${skills.length} skills`);
|
||||
|
||||
const refInfo = refCount > 0 ? ` (${refCount} reference files)` : '';
|
||||
console.log(`✓ Claude Code: ${commands.length} commands, ${skills.length} skills${refInfo}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,22 +3,23 @@ import { cleanDir, ensureDir, writeFile } from '../utils.js';
|
||||
|
||||
/**
|
||||
* Codex Transformer (Full Featured - Custom Prompts + Modular Skills)
|
||||
*
|
||||
*
|
||||
* Commands: Uses argument-hint format with $VARIABLE placeholders
|
||||
* Skills: Creates modular files with guiding AGENTS.md
|
||||
* Reference files are inlined into the main skill file for Codex
|
||||
*/
|
||||
export function transformCodex(commands, skills, distDir) {
|
||||
export function transformCodex(commands, skills, distDir, patterns = null) {
|
||||
const codexDir = path.join(distDir, 'codex');
|
||||
const promptsDir = path.join(codexDir, '.codex/prompts');
|
||||
|
||||
|
||||
cleanDir(codexDir);
|
||||
ensureDir(promptsDir);
|
||||
|
||||
|
||||
// Commands: Transform to Codex prompt format
|
||||
for (const command of commands) {
|
||||
const yamlLines = ['---'];
|
||||
yamlLines.push(`description: ${command.description}`);
|
||||
|
||||
|
||||
// Build argument-hint from args array
|
||||
if (command.args && command.args.length > 0) {
|
||||
const hints = command.args.map(arg => {
|
||||
@@ -27,32 +28,54 @@ export function transformCodex(commands, skills, distDir) {
|
||||
});
|
||||
yamlLines.push(`argument-hint: ${hints.join(' ')}`);
|
||||
}
|
||||
|
||||
|
||||
yamlLines.push('---');
|
||||
|
||||
|
||||
// Transform {{argname}} to $ARGNAME for Codex
|
||||
let body = command.body;
|
||||
body = body.replace(/\{\{([^}]+)\}\}/g, (match, argName) => {
|
||||
return `$${argName.toUpperCase()}`;
|
||||
});
|
||||
|
||||
|
||||
const content = `${yamlLines.join('\n')}\n\n${body}`;
|
||||
const outputPath = path.join(promptsDir, `${command.name}.md`);
|
||||
writeFile(outputPath, content);
|
||||
}
|
||||
|
||||
// Skills: Create modular files (body only)
|
||||
|
||||
// Skills: Create modular files (with references inlined)
|
||||
const skillEntries = [];
|
||||
let refCount = 0;
|
||||
for (const skill of skills) {
|
||||
let content = skill.body;
|
||||
|
||||
// Merge patterns body into frontend-design skill (before Domain Reference Files section)
|
||||
if (skill.name === 'frontend-design' && patterns && patterns.body) {
|
||||
const insertPoint = content.indexOf('---\n\n## Domain Reference Files');
|
||||
if (insertPoint > -1) {
|
||||
content = content.slice(0, insertPoint) + '\n\n' + patterns.body + '\n\n' + content.slice(insertPoint);
|
||||
} else {
|
||||
content += '\n\n' + patterns.body;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline reference files if they exist
|
||||
if (skill.references && skill.references.length > 0) {
|
||||
const refSections = skill.references.map(ref => {
|
||||
refCount++;
|
||||
return `\n\n---\n\n## Reference: ${ref.name}\n\n${ref.content}`;
|
||||
});
|
||||
content += refSections.join('');
|
||||
}
|
||||
|
||||
const outputPath = path.join(codexDir, `AGENTS.${skill.name}.md`);
|
||||
writeFile(outputPath, skill.body);
|
||||
writeFile(outputPath, content);
|
||||
skillEntries.push({
|
||||
name: skill.name,
|
||||
description: skill.description,
|
||||
file: `AGENTS.${skill.name}.md`
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Create main AGENTS.md that guides Codex to the right skill files
|
||||
const agentsMd = [
|
||||
'# Codex Agent Instructions',
|
||||
@@ -63,7 +86,7 @@ export function transformCodex(commands, skills, distDir) {
|
||||
'',
|
||||
'Each skill provides deep expertise in its domain. Use the descriptions below to decide which skill file to read:',
|
||||
'',
|
||||
...skillEntries.map(skill =>
|
||||
...skillEntries.map(skill =>
|
||||
`### ${skill.name}\n\n**When to use**: ${skill.description}\n\n**Read**: \`${skill.file}\` for complete instructions.\n`
|
||||
),
|
||||
'',
|
||||
@@ -76,9 +99,10 @@ export function transformCodex(commands, skills, distDir) {
|
||||
'',
|
||||
'Multiple skills can be combined when the task requires expertise from different domains.'
|
||||
].join('\n');
|
||||
|
||||
|
||||
writeFile(path.join(codexDir, 'AGENTS.md'), agentsMd);
|
||||
|
||||
console.log(`✓ Codex: ${commands.length} prompts, ${skills.length} skills (modular)`);
|
||||
|
||||
const refInfo = refCount > 0 ? ` (${refCount} refs inlined)` : '';
|
||||
console.log(`✓ Codex: ${commands.length} prompts, ${skills.length} skills (modular)${refInfo}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,31 +3,55 @@ import { cleanDir, ensureDir, writeFile } from '../utils.js';
|
||||
|
||||
/**
|
||||
* Cursor Transformer (Downgraded - No Frontmatter/Args)
|
||||
*
|
||||
*
|
||||
* Strips all frontmatter and metadata, outputs body only.
|
||||
* Cursor doesn't support arguments or frontmatter.
|
||||
* Reference files are inlined into the main skill file.
|
||||
*/
|
||||
export function transformCursor(commands, skills, distDir) {
|
||||
export function transformCursor(commands, skills, distDir, patterns = null) {
|
||||
const cursorDir = path.join(distDir, 'cursor');
|
||||
const commandsDir = path.join(cursorDir, '.cursor/commands');
|
||||
const rulesDir = path.join(cursorDir, '.cursor/rules');
|
||||
|
||||
|
||||
cleanDir(cursorDir);
|
||||
ensureDir(commandsDir);
|
||||
ensureDir(rulesDir);
|
||||
|
||||
|
||||
// Commands: Body only (no frontmatter)
|
||||
for (const command of commands) {
|
||||
const outputPath = path.join(commandsDir, `${command.name}.md`);
|
||||
writeFile(outputPath, command.body);
|
||||
}
|
||||
|
||||
// Skills: Body only (no frontmatter)
|
||||
|
||||
// Skills: Body only (with references inlined)
|
||||
let refCount = 0;
|
||||
for (const skill of skills) {
|
||||
let content = skill.body;
|
||||
|
||||
// Merge patterns body into frontend-design skill (before Domain Reference Files section)
|
||||
if (skill.name === 'frontend-design' && patterns && patterns.body) {
|
||||
const insertPoint = content.indexOf('---\n\n## Domain Reference Files');
|
||||
if (insertPoint > -1) {
|
||||
content = content.slice(0, insertPoint) + '\n\n' + patterns.body + '\n\n' + content.slice(insertPoint);
|
||||
} else {
|
||||
content += '\n\n' + patterns.body;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline reference files if they exist
|
||||
if (skill.references && skill.references.length > 0) {
|
||||
const refSections = skill.references.map(ref => {
|
||||
refCount++;
|
||||
return `\n\n---\n\n## Reference: ${ref.name}\n\n${ref.content}`;
|
||||
});
|
||||
content += refSections.join('');
|
||||
}
|
||||
|
||||
const outputPath = path.join(rulesDir, `${skill.name}.md`);
|
||||
writeFile(outputPath, skill.body);
|
||||
writeFile(outputPath, content);
|
||||
}
|
||||
|
||||
console.log(`✓ Cursor: ${commands.length} commands, ${skills.length} skills (downgraded)`);
|
||||
|
||||
const refInfo = refCount > 0 ? ` (${refCount} refs inlined)` : '';
|
||||
console.log(`✓ Cursor: ${commands.length} commands, ${skills.length} skills (downgraded)${refInfo}`);
|
||||
}
|
||||
|
||||
|
||||
@@ -3,39 +3,62 @@ import { cleanDir, ensureDir, writeFile } from '../utils.js';
|
||||
|
||||
/**
|
||||
* Gemini Transformer (Full Featured - TOML + Modular Skills)
|
||||
*
|
||||
*
|
||||
* Commands: Converts to TOML format with {{args}} placeholders
|
||||
* Skills: Creates modular files imported via @./GEMINI.{name}.md syntax
|
||||
* Reference files are inlined into the main skill file for Gemini
|
||||
*/
|
||||
export function transformGemini(commands, skills, distDir) {
|
||||
export function transformGemini(commands, skills, distDir, patterns = null) {
|
||||
const geminiDir = path.join(distDir, 'gemini');
|
||||
const commandsDir = path.join(geminiDir, '.gemini/commands');
|
||||
|
||||
|
||||
cleanDir(geminiDir);
|
||||
ensureDir(commandsDir);
|
||||
|
||||
|
||||
// Commands: Transform to TOML
|
||||
for (const command of commands) {
|
||||
// Replace named placeholders with {{args}}
|
||||
let prompt = command.body.replace(/\{\{[^}]+\}\}/g, '{{args}}');
|
||||
|
||||
|
||||
const toml = [
|
||||
`description = "${command.description.replace(/"/g, '\\"')}"`,
|
||||
`prompt = """`,
|
||||
prompt,
|
||||
`"""`
|
||||
].join('\n');
|
||||
|
||||
|
||||
const outputPath = path.join(commandsDir, `${command.name}.toml`);
|
||||
writeFile(outputPath, toml);
|
||||
}
|
||||
|
||||
// Skills: Create modular files
|
||||
|
||||
// Skills: Create modular files (with references inlined)
|
||||
let refCount = 0;
|
||||
for (const skill of skills) {
|
||||
let content = skill.body;
|
||||
|
||||
// Merge patterns body into frontend-design skill (before Domain Reference Files section)
|
||||
if (skill.name === 'frontend-design' && patterns && patterns.body) {
|
||||
const insertPoint = content.indexOf('---\n\n## Domain Reference Files');
|
||||
if (insertPoint > -1) {
|
||||
content = content.slice(0, insertPoint) + '\n\n' + patterns.body + '\n\n' + content.slice(insertPoint);
|
||||
} else {
|
||||
content += '\n\n' + patterns.body;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline reference files if they exist
|
||||
if (skill.references && skill.references.length > 0) {
|
||||
const refSections = skill.references.map(ref => {
|
||||
refCount++;
|
||||
return `\n\n---\n\n## Reference: ${ref.name}\n\n${ref.content}`;
|
||||
});
|
||||
content += refSections.join('');
|
||||
}
|
||||
|
||||
const outputPath = path.join(geminiDir, `GEMINI.${skill.name}.md`);
|
||||
writeFile(outputPath, skill.body);
|
||||
writeFile(outputPath, content);
|
||||
}
|
||||
|
||||
|
||||
// Create main GEMINI.md that imports skill files
|
||||
const geminiMd = [
|
||||
'# Gemini Context',
|
||||
@@ -46,7 +69,7 @@ export function transformGemini(commands, skills, distDir) {
|
||||
'',
|
||||
'Each skill provides deep expertise in its domain. The skills below are automatically imported and will guide your responses:',
|
||||
'',
|
||||
...skills.map(skill =>
|
||||
...skills.map(skill =>
|
||||
`### ${skill.name}\n\n**When to use**: ${skill.description}\n\n@./GEMINI.${skill.name}.md\n`
|
||||
),
|
||||
'',
|
||||
@@ -57,9 +80,10 @@ export function transformGemini(commands, skills, distDir) {
|
||||
'3. Multiple skills can be combined when the task requires expertise from different domains',
|
||||
'4. Follow the detailed instructions provided in each imported skill file'
|
||||
].join('\n');
|
||||
|
||||
|
||||
writeFile(path.join(geminiDir, 'GEMINI.md'), geminiMd);
|
||||
|
||||
console.log(`✓ Gemini: ${commands.length} commands (TOML), ${skills.length} skills (modular)`);
|
||||
|
||||
const refInfo = refCount > 0 ? ` (${refCount} refs inlined)` : '';
|
||||
console.log(`✓ Gemini: ${commands.length} commands (TOML), ${skills.length} skills (modular)${refInfo}`);
|
||||
}
|
||||
|
||||
|
||||
+147
-19
@@ -103,19 +103,21 @@ export function readFilesRecursive(dir, fileList = []) {
|
||||
|
||||
/**
|
||||
* Read and parse all source files
|
||||
* Supports both:
|
||||
* - Single file skills: source/skills/{name}.md
|
||||
* - Directory skills: source/skills/{name}/SKILL.md + reference/*.md
|
||||
*/
|
||||
export function readSourceFiles(rootDir) {
|
||||
const commandsDir = path.join(rootDir, 'source/commands');
|
||||
const skillsDir = path.join(rootDir, 'source/skills');
|
||||
|
||||
|
||||
const commandFiles = readFilesRecursive(commandsDir);
|
||||
const skillFiles = readFilesRecursive(skillsDir);
|
||||
|
||||
|
||||
const commands = commandFiles.map(filePath => {
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
const { frontmatter, body } = parseFrontmatter(content);
|
||||
const name = path.basename(filePath, '.md');
|
||||
|
||||
|
||||
return {
|
||||
name: frontmatter.name || name,
|
||||
description: frontmatter.description || '',
|
||||
@@ -124,21 +126,66 @@ export function readSourceFiles(rootDir) {
|
||||
filePath
|
||||
};
|
||||
});
|
||||
|
||||
const skills = skillFiles.map(filePath => {
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
const { frontmatter, body } = parseFrontmatter(content);
|
||||
const name = path.basename(filePath, '.md');
|
||||
|
||||
return {
|
||||
name: frontmatter.name || name,
|
||||
description: frontmatter.description || '',
|
||||
license: frontmatter.license || '',
|
||||
body,
|
||||
filePath
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
// Read skills - handling both file and directory formats
|
||||
const skills = [];
|
||||
|
||||
if (fs.existsSync(skillsDir)) {
|
||||
const entries = fs.readdirSync(skillsDir, { withFileTypes: true });
|
||||
|
||||
for (const entry of entries) {
|
||||
const entryPath = path.join(skillsDir, entry.name);
|
||||
|
||||
if (entry.isDirectory()) {
|
||||
// Directory-based skill with potential references
|
||||
const skillMdPath = path.join(entryPath, 'SKILL.md');
|
||||
if (fs.existsSync(skillMdPath)) {
|
||||
const content = fs.readFileSync(skillMdPath, 'utf-8');
|
||||
const { frontmatter, body } = parseFrontmatter(content);
|
||||
|
||||
// Read reference files if they exist
|
||||
const references = [];
|
||||
const referenceDir = path.join(entryPath, 'reference');
|
||||
if (fs.existsSync(referenceDir)) {
|
||||
const refFiles = fs.readdirSync(referenceDir).filter(f => f.endsWith('.md'));
|
||||
for (const refFile of refFiles) {
|
||||
const refPath = path.join(referenceDir, refFile);
|
||||
const refContent = fs.readFileSync(refPath, 'utf-8');
|
||||
references.push({
|
||||
name: path.basename(refFile, '.md'),
|
||||
content: refContent,
|
||||
filePath: refPath
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
skills.push({
|
||||
name: frontmatter.name || entry.name,
|
||||
description: frontmatter.description || '',
|
||||
license: frontmatter.license || '',
|
||||
body,
|
||||
filePath: skillMdPath,
|
||||
references
|
||||
});
|
||||
}
|
||||
} else if (entry.name.endsWith('.md')) {
|
||||
// Single file skill (legacy format)
|
||||
const content = fs.readFileSync(entryPath, 'utf-8');
|
||||
const { frontmatter, body } = parseFrontmatter(content);
|
||||
const name = path.basename(entry.name, '.md');
|
||||
|
||||
skills.push({
|
||||
name: frontmatter.name || name,
|
||||
description: frontmatter.description || '',
|
||||
license: frontmatter.license || '',
|
||||
body,
|
||||
filePath: entryPath,
|
||||
references: []
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { commands, skills };
|
||||
}
|
||||
|
||||
@@ -169,6 +216,87 @@ export function writeFile(filePath, content) {
|
||||
fs.writeFileSync(filePath, content, 'utf-8');
|
||||
}
|
||||
|
||||
/**
|
||||
* Read and parse patterns.md
|
||||
* Returns { patterns: [...], antipatterns: [...], body: string }
|
||||
*/
|
||||
export function readPatterns(rootDir) {
|
||||
const filePath = path.join(rootDir, 'source/patterns.md');
|
||||
|
||||
if (!fs.existsSync(filePath)) {
|
||||
return { patterns: [], antipatterns: [], body: '' };
|
||||
}
|
||||
|
||||
const content = fs.readFileSync(filePath, 'utf-8');
|
||||
|
||||
// Split frontmatter and body
|
||||
const frontmatterRegex = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/;
|
||||
const match = content.match(frontmatterRegex);
|
||||
|
||||
if (!match) {
|
||||
return { patterns: [], antipatterns: [], body: content };
|
||||
}
|
||||
|
||||
const [, frontmatterText, body] = match;
|
||||
|
||||
// Parse both patterns and antipatterns sections
|
||||
const patterns = [];
|
||||
const antipatterns = [];
|
||||
const lines = frontmatterText.split('\n');
|
||||
let currentSection = null; // 'patterns' or 'antipatterns'
|
||||
let currentCategory = null;
|
||||
let inItems = false;
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
|
||||
const indent = line.length - line.trimStart().length;
|
||||
|
||||
// Top-level section declaration
|
||||
if (indent === 0 && trimmed === 'patterns:') {
|
||||
currentSection = 'patterns';
|
||||
currentCategory = null;
|
||||
inItems = false;
|
||||
continue;
|
||||
}
|
||||
if (indent === 0 && trimmed === 'antipatterns:') {
|
||||
currentSection = 'antipatterns';
|
||||
currentCategory = null;
|
||||
inItems = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// New category starts with "- name:"
|
||||
if (trimmed.startsWith('- name:') && currentSection) {
|
||||
currentCategory = {
|
||||
name: trimmed.slice(7).trim(),
|
||||
items: []
|
||||
};
|
||||
if (currentSection === 'patterns') {
|
||||
patterns.push(currentCategory);
|
||||
} else {
|
||||
antipatterns.push(currentCategory);
|
||||
}
|
||||
inItems = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Items array declaration
|
||||
if (trimmed === 'items:' && currentCategory) {
|
||||
inItems = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Item within items array (indented with "- ")
|
||||
if (trimmed.startsWith('- ') && inItems && currentCategory && indent >= 6) {
|
||||
currentCategory.items.push(trimmed.slice(2).trim());
|
||||
}
|
||||
}
|
||||
|
||||
return { patterns, antipatterns, body: body.trim() };
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate YAML frontmatter string
|
||||
*/
|
||||
|
||||
+15
-6
@@ -1,10 +1,11 @@
|
||||
import { serve } from "bun";
|
||||
import homepage from "../public/index.html";
|
||||
import {
|
||||
getSkills,
|
||||
getCommands,
|
||||
handleFileDownload,
|
||||
handleBundleDownload
|
||||
import {
|
||||
getSkills,
|
||||
getCommands,
|
||||
getPatterns,
|
||||
handleFileDownload,
|
||||
handleBundleDownload
|
||||
} from "./lib/api-handlers.js";
|
||||
|
||||
const server = serve({
|
||||
@@ -28,7 +29,15 @@ const server = serve({
|
||||
return Response.json(commands);
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// API: Get patterns and antipatterns
|
||||
"/api/patterns": {
|
||||
async GET() {
|
||||
const patterns = await getPatterns();
|
||||
return Response.json(patterns);
|
||||
},
|
||||
},
|
||||
|
||||
// API: Download individual file
|
||||
"/api/download/:type/:provider/:id": async (req) => {
|
||||
const { type, provider, id } = req.params;
|
||||
|
||||
@@ -120,6 +120,83 @@ export async function handleFileDownload(type, provider, id) {
|
||||
}
|
||||
}
|
||||
|
||||
// Read patterns from source/patterns.md
|
||||
export async function getPatterns() {
|
||||
const sourceDir = join(process.cwd(), "source");
|
||||
const filePath = join(sourceDir, "patterns.md");
|
||||
|
||||
try {
|
||||
const content = await Bun.file(filePath).text();
|
||||
const frontmatterMatch = content.match(/^---\n([\s\S]+?)\n---/);
|
||||
|
||||
if (!frontmatterMatch) {
|
||||
return { patterns: [], antipatterns: [] };
|
||||
}
|
||||
|
||||
const frontmatterText = frontmatterMatch[1];
|
||||
|
||||
// Parse patterns and antipatterns from frontmatter
|
||||
const patterns = [];
|
||||
const antipatterns = [];
|
||||
const lines = frontmatterText.split('\n');
|
||||
let currentSection = null;
|
||||
let currentCategory = null;
|
||||
let inItems = false;
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) continue;
|
||||
|
||||
const indent = line.length - line.trimStart().length;
|
||||
|
||||
// Top-level section declaration
|
||||
if (indent === 0 && trimmed === 'patterns:') {
|
||||
currentSection = 'patterns';
|
||||
currentCategory = null;
|
||||
inItems = false;
|
||||
continue;
|
||||
}
|
||||
if (indent === 0 && trimmed === 'antipatterns:') {
|
||||
currentSection = 'antipatterns';
|
||||
currentCategory = null;
|
||||
inItems = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// New category starts with "- name:"
|
||||
if (trimmed.startsWith('- name:') && currentSection) {
|
||||
currentCategory = {
|
||||
name: trimmed.slice(7).trim(),
|
||||
items: []
|
||||
};
|
||||
if (currentSection === 'patterns') {
|
||||
patterns.push(currentCategory);
|
||||
} else {
|
||||
antipatterns.push(currentCategory);
|
||||
}
|
||||
inItems = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Items array declaration
|
||||
if (trimmed === 'items:' && currentCategory) {
|
||||
inItems = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Item within items array (indented with "- ")
|
||||
if (trimmed.startsWith('- ') && inItems && currentCategory && indent >= 6) {
|
||||
currentCategory.items.push(trimmed.slice(2).trim());
|
||||
}
|
||||
}
|
||||
|
||||
return { patterns, antipatterns };
|
||||
} catch (error) {
|
||||
console.error("Error reading patterns:", error);
|
||||
return { patterns: [], antipatterns: [] };
|
||||
}
|
||||
}
|
||||
|
||||
// Handle bundle download
|
||||
export async function handleBundleDownload(provider) {
|
||||
const distDir = join(process.cwd(), "dist");
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
patterns:
|
||||
- name: Typography
|
||||
items:
|
||||
- Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios)
|
||||
- Pair a distinctive display font with a refined body font
|
||||
- Establish clear hierarchy through weight, size, and spacing
|
||||
- Set body text at 16-18px minimum for readability
|
||||
- Use proper line heights (1.4-1.6 for body, tighter for headings)
|
||||
- name: Color & Contrast
|
||||
items:
|
||||
- Build palettes from a dominant color with intentional accents
|
||||
- Use off-whites and near-blacks for softer, sophisticated feel
|
||||
- Meet WCAG AA contrast (4.5:1 text, 3:1 UI elements)
|
||||
- Create semantic color tokens (success, warning, error, info)
|
||||
- Test with color blindness simulators
|
||||
- name: Layout & Space
|
||||
items:
|
||||
- Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)
|
||||
- Create visual rhythm through varied spacing
|
||||
- Let content breathe with generous whitespace
|
||||
- Use asymmetry and unexpected compositions
|
||||
- Break the grid intentionally for emphasis
|
||||
- name: Motion
|
||||
items:
|
||||
- Animate with purpose (guide attention, confirm actions)
|
||||
- Use 150-300ms for micro-interactions
|
||||
- Prefer transform and opacity (GPU-accelerated)
|
||||
- Respect prefers-reduced-motion preferences
|
||||
- Stagger reveals for orchestrated page loads
|
||||
- name: Interaction
|
||||
items:
|
||||
- Design clear, visible focus indicators
|
||||
- Make touch targets at least 44×44px
|
||||
- Provide immediate feedback for all actions
|
||||
- Write specific, helpful error messages
|
||||
- Support keyboard, mouse, and touch equally
|
||||
- name: Responsive
|
||||
items:
|
||||
- Design mobile-first, enhance for larger screens
|
||||
- Use fluid typography (clamp for smooth scaling)
|
||||
- Ensure all functionality works across devices
|
||||
- Test landscape orientation on mobile
|
||||
- Consider device capabilities (not just screen size)
|
||||
antipatterns:
|
||||
- name: Typography
|
||||
items:
|
||||
- Don't use more than 2-3 font families
|
||||
- Don't use decorative fonts for body text
|
||||
- Don't implement arbitrary font sizes without a scale
|
||||
- Don't sacrifice readability for aesthetic novelty
|
||||
- Don't skip fallback font definitions
|
||||
- name: Color & Contrast
|
||||
items:
|
||||
- Don't use gray text on colored backgrounds
|
||||
- Don't rely on color alone to convey information
|
||||
- Don't use pure black (#000) or white (#fff) for large areas
|
||||
- Don't create palettes with arbitrary color choices
|
||||
- Don't ignore color blindness (8% of men)
|
||||
- name: Layout & Space
|
||||
items:
|
||||
- Don't wrap everything in cards
|
||||
- Don't nest cards inside cards
|
||||
- Don't make all spacing equal (variety creates hierarchy)
|
||||
- Don't forget white space is a design element
|
||||
- Don't create hierarchy through size alone
|
||||
- name: Motion
|
||||
items:
|
||||
- Don't animate without purpose
|
||||
- Don't use durations over 500ms for UI feedback
|
||||
- Don't animate layout properties (use transform)
|
||||
- Don't ignore prefers-reduced-motion
|
||||
- Don't use animation to hide slow loading
|
||||
- name: Interaction
|
||||
items:
|
||||
- Don't remove focus indicators without alternatives
|
||||
- Don't use placeholder text as labels
|
||||
- Don't make touch targets smaller than 44×44px
|
||||
- Don't show generic error messages
|
||||
- Don't design only for mouse/pointer
|
||||
- name: Responsive
|
||||
items:
|
||||
- Don't design desktop-first and cram into mobile
|
||||
- Don't hide critical functionality on mobile
|
||||
- Don't use device detection over feature detection
|
||||
- Don't forget about landscape orientation
|
||||
- Don't assume all mobile devices are powerful
|
||||
---
|
||||
|
||||
## 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.
|
||||
@@ -1,111 +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.
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -41,3 +41,45 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo
|
||||
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
+4
-2
@@ -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.
|
||||
Remember: Color is powerful. Use it deliberately, systematically, and inclusively.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Interaction design is where users actually experience your interface. Get this right, and everything else falls into place.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Motion is powerful - it can guide attention, provide feedback, and create emotional connection. Use it thoughtfully, not reflexively.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Responsive design is about creating experiences that work everywhere while feeling native nowhere. Adapt intelligently for context while maintaining consistency.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Composition is the invisible structure that makes everything else work. Master the fundamentals, then break rules intentionally.
|
||||
+4
-2
@@ -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.
|
||||
Remember: Typography is 95% of design. Master it, and everything else becomes easier.
|
||||
+4
-2
@@ -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.
|
||||
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.
|
||||
@@ -1,153 +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.
|
||||
|
||||
@@ -1,112 +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.
|
||||
|
||||
@@ -1,159 +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.
|
||||
|
||||
@@ -1,129 +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.
|
||||
|
||||
@@ -1,97 +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.
|
||||
|
||||
@@ -1,204 +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.
|
||||
|
||||
Reference in New Issue
Block a user