zhongwei/gh-trabian-fluxwing-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 09:02:33 +08:00
commit 0c40192593
82 changed files with 18699 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
skills/fluxwing-component-creator/templates/alert.md Normal file
View File

@@ -0,0 +1,389 @@
# Alert/Notification Component
Alert and notification messages for user feedback, system status, and important information display with various styles and interactive capabilities.
## Success Alert
```
┌──────────────────────────────────────────────────┐
│ ✓ {{title}} │✕│
├──────────────────────────────────────────────────┤
│ │
│ {{message}} │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Undo │ │ View │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Warning Alert
```
┌──────────────────────────────────────────────────┐
│ ⚠ Warning: Check Your Input │✕│
├──────────────────────────────────────────────────┤
│ │
│ Some fields contain invalid data. Please │
│ review and correct before proceeding. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Review │ │ Continue │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Error Alert
```
┌──────────────────────────────────────────────────┐
│ ✗ Error: Failed to Save │✕│
├──────────────────────────────────────────────────┤
│ │
│ An error occurred while saving your changes. │
│ Please try again or contact support. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Try Again│ │ Support │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Info Alert
```
┌──────────────────────────────────────────────────┐
│ ℹ Information │✕│
├──────────────────────────────────────────────────┤
│ │
│ New features are available! Check out the │
│ latest updates in your dashboard. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Learn More│ │ Dismiss │ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Compact Alert
```
┌─────────────────────────────────────────────┐
│ ✓ Saved successfully! │✕│
└─────────────────────────────────────────────┘
```
## Alert without Actions
```
┌──────────────────────────────────────────────────┐
│ ✓ {{title}} │✕│
├──────────────────────────────────────────────────┤
│ │
│ {{message}} │
│ │
└──────────────────────────────────────────────────┘
```
## Alert without Border
```
✓ {{title}} ✕
{{message}}
┌──────────┐ ┌──────────┐
│ Undo │ │ View │
└──────────┘ └──────────┘
```
## Toast Notification Style
```
┌────────────────────────────────────────┐
│ ✓ Changes saved! │✕│
└────────────────────────────────────────┘
```
## Progress Alert
```
┌──────────────────────────────────────────────────┐
│ ⏳ Uploading Files... │✕│
├──────────────────────────────────────────────────┤
│ │
│ Please wait while we upload your files. │
│ │
│ ████████████████░░░░ 75% │
│ │
│ ┌──────────┐ │
│ │ Cancel │ │
│ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Persistent Alert (No Auto-dismiss)
```
┌──────────────────────────────────────────────────┐
│ ⚠ Action Required │✕│
├──────────────────────────────────────────────────┤
│ │
│ Your subscription expires in 3 days. │
│ Please update your payment method. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Update │ │ Remind Later│ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Alert Stack (Multiple Alerts)
```
┌──────────────────────────────────────────────────┐
│ ✓ File uploaded successfully! │✕│
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ ℹ New message received │✕│
└──────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────┐
│ ⚠ Storage almost full │✕│
└──────────────────────────────────────────────────┘
```
## Loading Alert
```
┌──────────────────────────────────────────────────┐
│ ⟳ Processing Request... │░│
├──────────────────────────────────────────────────┤
│ │
│ Please wait while we process your request. │
│ This may take a few moments. │
│ │
└──────────────────────────────────────────────────┘
```
## Alert with Rich Content
```
┌──────────────────────────────────────────────────┐
│ 🎉 Welcome to Premium! │✕│
├──────────────────────────────────────────────────┤
│ │
│ You've successfully upgraded to Premium plan. │
│ │
│ ✓ Unlimited storage │
│ ✓ Priority support │
│ ✓ Advanced features │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Get Started│ │ Learn More│ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Status Message Alert
```
┌──────────────────────────────────────────────────┐
│ 🔄 System Maintenance │░│
├──────────────────────────────────────────────────┤
│ │
│ We're performing scheduled maintenance. │
│ Expected completion: 2:00 AM EST │
│ │
│ ┌──────────┐ │
│ │ Status Page│ │
│ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Inline Alert (Within Form)
```
┌─────────────────────────────────────────────────┐
│ Name: ┌─────────────────────────────────────┐ │
│ │ John Doe │ │
│ └─────────────────────────────────────┘ │
│ │
│ Email: ┌────────────────────────────────────┐ │
│ │ invalid-email │ │
│ └────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────┐ │
│ │ ⚠ Please enter a valid email address │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
```
## Dismissible with Timer
```
┌──────────────────────────────────────────────────┐
│ ✓ Message sent! │✕│
├──────────────────────────────────────────────────┤
│ │
│ Your message has been delivered successfully. │
│ │
│ ░░░░░░░░░░░░░░░████ Auto-dismiss in 3s │
└──────────────────────────────────────────────────┘
```
## Dimensions
- **Standard Width**: 40-60 characters
- **Compact Width**: 30-45 characters
- **Toast Width**: 25-40 characters
- **Height**: 4-10 lines depending on content
- **Action Button Height**: 3 characters
## Variables
- `title` (string): Alert heading text (max 50 characters)
- `message` (string, required): Main alert content (max 200 characters)
- `variant` (string): Alert type ("success", "warning", "error", "info", "default")
- `icon` (string): Icon character for alert type (max 5 characters)
- `dismissible` (boolean): Show close button (default: true)
- `persistent` (boolean): Prevent auto-dismiss (default: false)
- `actions` (array): Action buttons with text and callbacks (max 3)
- `compact` (boolean): Use minimal spacing (default: false)
- `bordered` (boolean): Show container border (default: true)
## Accessibility
- **Role**: alert (for important messages) or status (for less critical)
- **Focusable**: Yes, for dismissible alerts
- **Keyboard Support**:
- Escape: Dismiss alert (if dismissible)
- Tab: Navigate through action buttons
- Enter: Activate focused button
- **ARIA**:
- `aria-live`: "assertive" for alerts, "polite" for status
- `aria-label`: Descriptive label including alert type
- `aria-describedby`: Link to message content
## Usage Examples
### Form Validation
```
┌──────────────────────────────────────────────────┐
│ ✗ Validation Error │✕│
├──────────────────────────────────────────────────┤
│ │
│ Please correct the following errors: │
│ • Email address is required │
│ • Password must be at least 8 characters │
│ │
└──────────────────────────────────────────────────┘
```
### Save Confirmation
```
┌──────────────────────────────────────────────────┐
│ ✓ Draft Saved │✕│
├──────────────────────────────────────────────────┤
│ │
│ Your draft has been automatically saved. │
│ │
│ ┌──────────┐ │
│ │ Continue │ │
│ └──────────┘ │
└──────────────────────────────────────────────────┘
```
### System Status
```
┌──────────────────────────────────────────────────┐
│ 🔧 Maintenance Mode │░│
├──────────────────────────────────────────────────┤
│ │
│ The system is currently undergoing maintenance. │
│ Please try again in a few minutes. │
│ │
└──────────────────────────────────────────────────┘
```
### Achievement Notification
```
┌──────────────────────────────────────────────────┐
│ 🏆 Achievement Unlocked! │✕│
├──────────────────────────────────────────────────┤
│ │
│ You've completed 100 tasks! Keep up the │
│ great work. │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ Share │ │ View Badge│ │
│ └──────────┘ └──────────┘ │
└──────────────────────────────────────────────────┘
```
## Component Behavior
### Auto-Dismiss Functionality
1. **Timer-based**: Automatically dismiss after specified duration
2. **Pause on Hover**: Stop timer when user hovers over alert
3. **Resume on Leave**: Continue timer when mouse leaves
4. **Persistent Override**: Some alerts stay until manually dismissed
### Animation States
- **Enter**: Slide in from edge with fade
- **Exit**: Slide out to edge with fade
- **Hover**: Subtle highlight or shadow
- **Progress**: Animated progress bars for loading states
### Stacking Behavior
- **Multiple Alerts**: Stack vertically with spacing
- **Max Count**: Limit visible alerts, queue excess
- **Position Management**: Handle overlapping and positioning
- **Cleanup**: Remove dismissed alerts from DOM
## Design Tokens
### Visual Elements
- `┌─┐└┘─│` = Alert container borders
- `✓` = Success icon
- `⚠` = Warning icon
- `✗` = Error icon
- `ℹ` = Info icon
- `⟳🔄` = Loading/processing icons
- `✕` = Dismiss button
- `░` = Disabled/loading state
### Color Mapping (ASCII patterns)
- **Success**: `█` = Green background
- **Warning**: `▓` = Yellow/orange background
- **Error**: `▓` = Red background
- **Info**: `▓` = Blue background
- **Default**: `░` = Gray background
## Related Components
- **Toast**: Temporary notification messages
- **Banner**: Persistent page-level announcements
- **Modal**: Blocking dialog for critical alerts
- **Tooltip**: Contextual help and information
## Implementation Notes
This ASCII representation demonstrates alert patterns and states. When implementing:
1. **Animation System**: Smooth enter/exit transitions
2. **Position Management**: Handle multiple alerts and positioning
3. **Timer Management**: Accurate auto-dismiss with pause/resume
4. **Accessibility**: Proper announcement to screen readers
5. **Performance**: Efficient rendering and cleanup
6. **Mobile Adaptation**: Responsive sizing and positioning
## Variants
- **Toast Notification**: Temporary messages that auto-dismiss
- **Banner Alert**: Full-width page announcements
- **Inline Alert**: Contextual messages within content
- **Modal Alert**: Blocking alerts requiring user action
- **Status Alert**: System status and maintenance messages
- **Progress Alert**: Loading and operation progress indicators