Initial commit
This commit is contained in:
Zhongwei Li
389
skills/fluxwing-component-creator/templates/alert.md
Normal file
389
skills/fluxwing-component-creator/templates/alert.md
Normal 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
|
||||
204
skills/fluxwing-component-creator/templates/alert.uxm
Normal file
204
skills/fluxwing-component-creator/templates/alert.uxm
Normal file
@@ -0,0 +1,204 @@
|
||||
{
|
||||
"id": "alert",
|
||||
"type": "alert",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Alert/Notification Component",
|
||||
"description": "Alert and notification messages for user feedback, system status, and important information display",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["alert", "notification", "message", "feedback"],
|
||||
"category": "feedback",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"title": "Success!",
|
||||
"message": "Your changes have been saved successfully.",
|
||||
"variant": "success",
|
||||
"icon": "✓",
|
||||
"dismissible": true,
|
||||
"persistent": false,
|
||||
"position": "top-right",
|
||||
"duration": 5000,
|
||||
"actions": [
|
||||
{
|
||||
"text": "Undo",
|
||||
"action": "undo"
|
||||
},
|
||||
{
|
||||
"text": "View",
|
||||
"action": "view"
|
||||
}
|
||||
],
|
||||
"showProgress": false,
|
||||
"bordered": true,
|
||||
"compact": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "visible",
|
||||
"properties": {
|
||||
"opacity": 1,
|
||||
"transform": "translateX(0)",
|
||||
"zIndex": 1000
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "entering",
|
||||
"properties": {
|
||||
"opacity": 0.5,
|
||||
"transform": "translateX(100%)",
|
||||
"transition": "all 0.3s ease"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "exiting",
|
||||
"properties": {
|
||||
"opacity": 0,
|
||||
"transform": "translateX(100%)",
|
||||
"transition": "all 0.3s ease"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hidden",
|
||||
"properties": {
|
||||
"display": "none"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "dismiss-alert",
|
||||
"condition": "dismissible && target.isCloseButton"
|
||||
},
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "execute-action",
|
||||
"condition": "target.isActionButton"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "dismiss-alert",
|
||||
"condition": "key === 'Escape' && dismissible"
|
||||
},
|
||||
{
|
||||
"trigger": "timeout",
|
||||
"action": "auto-dismiss",
|
||||
"condition": "!persistent && duration > 0"
|
||||
}
|
||||
],
|
||||
"timing": {
|
||||
"autoDismiss": true,
|
||||
"defaultDuration": 5000,
|
||||
"pauseOnHover": true,
|
||||
"resumeOnLeave": true
|
||||
},
|
||||
"accessibility": {
|
||||
"role": "alert",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Escape", "Tab", "Enter"],
|
||||
"ariaLabel": "{{variant}} alert: {{title}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "block",
|
||||
"positioning": "fixed",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 2,
|
||||
"right": 3,
|
||||
"bottom": 2,
|
||||
"left": 3
|
||||
},
|
||||
"margin": {
|
||||
"bottom": 1
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 30,
|
||||
"maxWidth": 50,
|
||||
"height": "auto"
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "alert.md",
|
||||
"width": 50,
|
||||
"height": 8,
|
||||
"variables": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "string",
|
||||
"defaultValue": "Success!",
|
||||
"description": "Alert title/heading text",
|
||||
"required": false,
|
||||
"validation": {
|
||||
"max": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "message",
|
||||
"type": "string",
|
||||
"defaultValue": "Operation completed successfully.",
|
||||
"description": "Main alert message content",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"max": 200
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
"type": "string",
|
||||
"defaultValue": "success",
|
||||
"description": "Alert type and styling",
|
||||
"validation": {
|
||||
"enum": ["success", "warning", "error", "info", "default"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"type": "string",
|
||||
"defaultValue": "✓",
|
||||
"description": "Icon character for alert type",
|
||||
"validation": {
|
||||
"max": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "dismissible",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Whether alert can be manually dismissed"
|
||||
},
|
||||
{
|
||||
"name": "persistent",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Whether alert stays until manually dismissed"
|
||||
},
|
||||
{
|
||||
"name": "actions",
|
||||
"type": "array",
|
||||
"defaultValue": [],
|
||||
"description": "Action buttons for the alert",
|
||||
"validation": {
|
||||
"max": 3
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "compact",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Use minimal spacing and height"
|
||||
},
|
||||
{
|
||||
"name": "bordered",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Show border around alert"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
340
skills/fluxwing-component-creator/templates/badge.md
Normal file
340
skills/fluxwing-component-creator/templates/badge.md
Normal file
@@ -0,0 +1,340 @@
|
||||
# Badge/Tag Component
|
||||
|
||||
Status indicators, labels, and informational tags with various styles and interactive capabilities for content labeling and notifications.
|
||||
|
||||
## Default Badge Styles
|
||||
|
||||
### Filled Badges
|
||||
```
|
||||
▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░ ▓▓▓▓▓▓▓▓▓▓ ████████████
|
||||
▓ {{text}} ▓ ░ Secondary ░ ▓ Primary ▓ █ Success █
|
||||
▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░ ▓▓▓▓▓▓▓▓▓▓ ████████████
|
||||
```
|
||||
|
||||
### Outlined Badges
|
||||
```
|
||||
┌──────┐ ┌────────────┐ ┌──────────┐ ┌────────────┐
|
||||
│ {{text}} │ │ Secondary │ │ Primary │ │ Success │
|
||||
└──────┘ └────────────┘ └──────────┘ └────────────┘
|
||||
```
|
||||
|
||||
## Badge Variants
|
||||
|
||||
### Success Badge
|
||||
```
|
||||
████████
|
||||
█ Done! █
|
||||
████████
|
||||
```
|
||||
|
||||
### Warning Badge
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Warning ▓
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Error Badge
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Failed ▓
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Info Badge
|
||||
```
|
||||
▓▓▓▓▓▓▓▓
|
||||
▓ Info ▓
|
||||
▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
## Size Variations
|
||||
|
||||
### Small Badge
|
||||
```
|
||||
▓▓▓▓▓
|
||||
▓ S ▓
|
||||
▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Medium Badge (Default)
|
||||
```
|
||||
▓▓▓▓▓▓▓▓
|
||||
▓ Med ▓
|
||||
▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Large Badge
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Large ▓
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
## Interactive Badges
|
||||
|
||||
### Clickable Badge
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Click Me ▓ ← Clickable
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Removable Badge
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Remove │✕▓ ← Removable
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Hover State
|
||||
```
|
||||
████████████
|
||||
█ Hovered █ ← Darkened on hover
|
||||
████████████
|
||||
```
|
||||
|
||||
## Pill-Shaped Badges
|
||||
|
||||
```
|
||||
╭──────────╮
|
||||
│ {{text}} │
|
||||
╰──────────╯
|
||||
```
|
||||
|
||||
## Notification Count Badges
|
||||
|
||||
### Number Badge
|
||||
```
|
||||
▓▓▓▓
|
||||
▓ 5 ▓
|
||||
▓▓▓▓
|
||||
```
|
||||
|
||||
### High Count Badge
|
||||
```
|
||||
▓▓▓▓▓▓
|
||||
▓ 99+ ▓
|
||||
▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Count with Icon
|
||||
```
|
||||
📧 ▓▓▓▓
|
||||
▓ 3 ▓
|
||||
▓▓▓▓
|
||||
```
|
||||
|
||||
## Dot Indicators
|
||||
|
||||
### Simple Dot
|
||||
```
|
||||
●
|
||||
```
|
||||
|
||||
### Colored Dots
|
||||
```
|
||||
● ● ● ●
|
||||
```
|
||||
|
||||
### Positioned Dot (with content)
|
||||
```
|
||||
📧 ● ← Notification dot
|
||||
```
|
||||
|
||||
## Badge Groups/Tags
|
||||
|
||||
### Tag List
|
||||
```
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ React ▓ ▓ TypeScript ▓ ▓ JavaScript ▓ ▓ Frontend ▓
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Removable Tags
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Tag1 │✕ ▓ Tag2 │✕ ▓ Tag3 │✕
|
||||
▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
## Status Indicators
|
||||
|
||||
### Online/Offline Status
|
||||
```
|
||||
● Online ○ Offline ◐ Away ◑ Busy
|
||||
```
|
||||
|
||||
### Priority Badges
|
||||
```
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓
|
||||
▓ High ▓ ▓ Medium ▓ ▓ Low ▓
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Progress Status
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓ ████████████ ░░░░░░░░░░░░
|
||||
▓ In Progress ▓ █ Complete █ ░ Pending ░
|
||||
▓▓▓▓▓▓▓▓▓▓▓ ████████████ ░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Badge with Icons
|
||||
|
||||
```
|
||||
🔥 ▓▓▓▓▓▓▓▓ ⭐ ▓▓▓▓▓▓▓▓▓▓ ⚠ ▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Hot ▓ ▓ Featured ▓ ▓ Warning ▓
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
## Compact Badges (Single Line)
|
||||
|
||||
```
|
||||
[{{text}}] ({{text}}) <{{text}}> |{{text}}|
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Small**: 3-8 characters wide, 1 character high
|
||||
- **Medium**: 4-12 characters wide, 1 character high
|
||||
- **Large**: 5-16 characters wide, 1 character high
|
||||
- **Dot**: 1 character (●)
|
||||
- **Count**: 3-6 characters wide depending on number
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): Badge text content (max 20 characters)
|
||||
- `variant` (string): Style variant ("default", "success", "warning", "error", "info", "secondary")
|
||||
- `size` (string): Size variant ("small", "medium", "large")
|
||||
- `removable` (boolean): Show remove button (default: false)
|
||||
- `clickable` (boolean): Enable click interactions (default: false)
|
||||
- `outlined` (boolean): Use outline style instead of filled (default: false)
|
||||
- `pill` (boolean): Use rounded pill shape (default: false)
|
||||
- `count` (number): Numeric count for notifications (0-999)
|
||||
- `dot` (boolean): Show as dot indicator without text (default: false)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: status (informational) or button (if clickable)
|
||||
- **Focusable**: Yes, if clickable or removable
|
||||
- **Keyboard Support**:
|
||||
- Enter: Activate badge (if clickable)
|
||||
- Delete/Backspace: Remove badge (if removable)
|
||||
- Tab: Navigate to next focusable element
|
||||
- **ARIA**:
|
||||
- `aria-label`: Descriptive label for badge purpose
|
||||
- `aria-hidden`: "true" for purely decorative badges
|
||||
- `aria-live`: "polite" for dynamic count badges
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Product Tags
|
||||
```
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ New ▓ ▓ Sale ▓ ▓ Featured ▓
|
||||
▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### User Roles
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Admin ▓ ░ User ░ ▓ Moderator ▓
|
||||
▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Notification Counts
|
||||
```
|
||||
📧 ▓▓▓▓ 🔔 ▓▓▓▓▓ 💬 ▓▓▓▓▓▓
|
||||
▓ 5 ▓ ▓ 12 ▓ ▓ 99+ ▓
|
||||
▓▓▓▓ ▓▓▓▓▓ ▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Status Indicators
|
||||
```
|
||||
● Online ▓▓▓▓▓▓▓▓▓▓ ○ Offline
|
||||
▓ Active ▓
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Skill Tags (Removable)
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓│✕ ▓▓▓▓▓▓▓▓▓▓▓▓▓│✕ ▓▓▓▓▓▓▓▓▓▓▓▓│✕
|
||||
▓ JavaScript ▓ TypeScript ▓ React
|
||||
▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Priority Levels
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░
|
||||
▓ Critical ▓ ▓ Important ▓ ░ Normal ░
|
||||
▓▓▓▓▓▓▓▓▓▓ ▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Click Interactions
|
||||
|
||||
1. **Clickable Badges**: Emit click events for filtering or navigation
|
||||
2. **Remove Functionality**: X button removes badge from collection
|
||||
3. **Toggle States**: Some badges can toggle between states
|
||||
4. **Hover Effects**: Visual feedback on interactive badges
|
||||
|
||||
### Dynamic Updates
|
||||
|
||||
- **Count Changes**: Automatically update notification counts
|
||||
- **Status Changes**: Update colors and text based on state
|
||||
- **Add/Remove**: Dynamic badge collections
|
||||
- **Animations**: Smooth transitions for state changes
|
||||
|
||||
### Grouping Behavior
|
||||
|
||||
- **Tag Lists**: Multiple badges displayed together
|
||||
- **Max Display**: Show limited number with "... +N more"
|
||||
- **Filtering**: Click badges to filter content
|
||||
- **Auto-complete**: Add new badges via text input
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `▓` = Primary filled background
|
||||
- `█` = Success/positive state
|
||||
- `░` = Secondary/muted state
|
||||
- `┌─┐└┘` = Outlined badge borders
|
||||
- `╭─╮╰─╯` = Pill-shaped borders
|
||||
- `●○◐◑` = Dot indicators
|
||||
- `✕` = Remove button
|
||||
|
||||
### Color Mapping
|
||||
- **Primary**: Blue/Brand color (▓)
|
||||
- **Success**: Green (█)
|
||||
- **Warning**: Yellow/Orange (▓)
|
||||
- **Error**: Red (▓)
|
||||
- **Info**: Blue (▓)
|
||||
- **Secondary**: Gray (░)
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Chip**: Similar but often larger with more content
|
||||
- **Button**: Interactive elements with different styling
|
||||
- **Label**: Form field labels and descriptions
|
||||
- **Tooltip**: Additional information on hover
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates badge patterns and states. When implementing:
|
||||
|
||||
1. **Color System**: Map ASCII patterns to actual color schemes
|
||||
2. **Animations**: Smooth transitions for hover and state changes
|
||||
3. **Accessibility**: Proper focus management and screen reader support
|
||||
4. **Performance**: Efficient rendering for large badge collections
|
||||
5. **Responsive**: Adapt sizing and spacing for different screen sizes
|
||||
6. **Customization**: Support for custom colors and shapes
|
||||
|
||||
## Variants
|
||||
|
||||
- **Label Badge**: Simple text labels
|
||||
- **Count Badge**: Numeric indicators
|
||||
- **Status Badge**: State indicators with colors
|
||||
- **Action Badge**: Clickable elements
|
||||
- **Notification Badge**: Alert indicators
|
||||
- **Tag Badge**: Removable filter tags
|
||||
201
skills/fluxwing-component-creator/templates/badge.uxm
Normal file
201
skills/fluxwing-component-creator/templates/badge.uxm
Normal file
@@ -0,0 +1,201 @@
|
||||
{
|
||||
"id": "badge",
|
||||
"type": "badge",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Badge/Tag Component",
|
||||
"description": "Status indicators, labels, and informational tags with various styles and interactive capabilities",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["badge", "tag", "label", "status", "indicator"],
|
||||
"category": "display",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"text": "New",
|
||||
"variant": "default",
|
||||
"size": "medium",
|
||||
"removable": false,
|
||||
"clickable": false,
|
||||
"icon": "",
|
||||
"color": "primary",
|
||||
"outlined": false,
|
||||
"pill": false,
|
||||
"count": null,
|
||||
"maxCount": 99,
|
||||
"dot": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"background": "primary",
|
||||
"textColor": "white",
|
||||
"border": "none"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"background": "primary-dark",
|
||||
"textColor": "white",
|
||||
"cursor": "pointer"
|
||||
},
|
||||
"triggers": ["mouseenter"],
|
||||
"condition": "clickable || removable"
|
||||
},
|
||||
{
|
||||
"name": "active",
|
||||
"properties": {
|
||||
"background": "primary-darker",
|
||||
"textColor": "white",
|
||||
"transform": "scale(0.95)"
|
||||
},
|
||||
"triggers": ["mousedown"],
|
||||
"condition": "clickable"
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"background": "gray-light",
|
||||
"textColor": "gray-dark",
|
||||
"opacity": 0.6
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "emit-click-event",
|
||||
"condition": "clickable && !disabled"
|
||||
},
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "remove-badge",
|
||||
"condition": "removable && target.isRemoveButton"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "emit-click-event",
|
||||
"condition": "key === 'Enter' && clickable"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "remove-badge",
|
||||
"condition": "key === 'Delete' && removable"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "status",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Enter", "Delete"],
|
||||
"ariaLabel": "{{text}} badge"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "inline-block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 0,
|
||||
"right": 1,
|
||||
"bottom": 0,
|
||||
"left": 1
|
||||
},
|
||||
"margin": {
|
||||
"right": 1
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"small": {
|
||||
"height": 1,
|
||||
"minWidth": 3
|
||||
},
|
||||
"medium": {
|
||||
"height": 1,
|
||||
"minWidth": 4
|
||||
},
|
||||
"large": {
|
||||
"height": 1,
|
||||
"minWidth": 5
|
||||
}
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "badge.md",
|
||||
"width": 12,
|
||||
"height": 1,
|
||||
"variables": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"defaultValue": "New",
|
||||
"description": "Badge text content",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"max": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
"type": "string",
|
||||
"defaultValue": "default",
|
||||
"description": "Badge style variant",
|
||||
"validation": {
|
||||
"enum": ["default", "success", "warning", "error", "info", "secondary"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"defaultValue": "medium",
|
||||
"description": "Badge size variant",
|
||||
"validation": {
|
||||
"enum": ["small", "medium", "large"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "removable",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Whether badge can be removed with X button"
|
||||
},
|
||||
{
|
||||
"name": "clickable",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Whether badge responds to click events"
|
||||
},
|
||||
{
|
||||
"name": "outlined",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Use outline style instead of filled"
|
||||
},
|
||||
{
|
||||
"name": "pill",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Use rounded pill shape"
|
||||
},
|
||||
{
|
||||
"name": "count",
|
||||
"type": "number",
|
||||
"defaultValue": null,
|
||||
"description": "Numeric count for notification badges",
|
||||
"validation": {
|
||||
"min": 0,
|
||||
"max": 999
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "dot",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Show as small dot indicator without text"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
216
skills/fluxwing-component-creator/templates/card.md
Normal file
216
skills/fluxwing-component-creator/templates/card.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# Card Component
|
||||
|
||||
A flexible container for grouping related content with optional header, body, and footer sections.
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ {{title}} │
|
||||
│ {{subtitle}} │
|
||||
├──────────────────────────────────────┤
|
||||
│ │
|
||||
│ {{content}} │
|
||||
│ │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## With Footer
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ {{title}} │
|
||||
│ {{subtitle}} │
|
||||
├──────────────────────────────────────┤
|
||||
│ │
|
||||
│ {{content}} │
|
||||
│ │
|
||||
├──────────────────────────────────────┤
|
||||
│ {{footer}} │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Hover State
|
||||
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ {{title}} ┃
|
||||
┃ {{subtitle}} ┃
|
||||
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
┃ ┃
|
||||
┃ {{content}} ┃
|
||||
┃ ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
## Focus State (Interactive Card)
|
||||
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ {{title}} ✨ ┃
|
||||
┃ {{subtitle}} ┃
|
||||
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
||||
┃ ┃
|
||||
┃ {{content}} ┃
|
||||
┃ ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string): The main heading of the card
|
||||
- `subtitle` (string): Optional subtitle or secondary heading
|
||||
- `content` (string): The main content or body text of the card
|
||||
- `footer` (string): Optional footer content like actions or metadata
|
||||
- `width` (number): Card width in characters (20-80, default 40)
|
||||
- `hasHeader` (boolean): Whether to show the header section
|
||||
- `hasFooter` (boolean): Whether to show the footer section
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: article (for content cards) or region (for layout cards)
|
||||
- **Focusable**: Only if interactive (clickable)
|
||||
- **Keyboard Support**:
|
||||
- Tab: Focus if interactive
|
||||
- Enter/Space: Activate if clickable
|
||||
- **ARIA**:
|
||||
- `aria-label`: Uses title for accessible name
|
||||
- `aria-describedby`: Links to content for description
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Content Card
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ Welcome to UXscii │
|
||||
│ Getting started guide │
|
||||
├──────────────────────────────────────┤
|
||||
│ │
|
||||
│ UXscii helps you create beautiful │
|
||||
│ ASCII representations of UI │
|
||||
│ components for design documentation. │
|
||||
│ │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Product Card
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ Professional Plan │
|
||||
│ For growing teams │
|
||||
├──────────────────────────────────────┤
|
||||
│ │
|
||||
│ • Up to 100 components │
|
||||
│ • Advanced customization │
|
||||
│ • Priority support │
|
||||
│ • Team collaboration │
|
||||
│ │
|
||||
├──────────────────────────────────────┤
|
||||
│ $29/month [Subscribe] │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Article Card
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ Building Better Interfaces │
|
||||
│ Design Systems Blog │
|
||||
├──────────────────────────────────────┤
|
||||
│ │
|
||||
│ Learn how to create consistent and │
|
||||
│ scalable design systems that help │
|
||||
│ your team build better products. │
|
||||
│ │
|
||||
├──────────────────────────────────────┤
|
||||
│ Published: Jan 15, 2024 5 min read │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Notification Card
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ System Update │
|
||||
│ Important notice │
|
||||
├──────────────────────────────────────┤
|
||||
│ │
|
||||
│ A new version of the system is │
|
||||
│ available. Please update at your │
|
||||
│ earliest convenience. │
|
||||
│ │
|
||||
├──────────────────────────────────────┤
|
||||
│ [Update Now] [Later] │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Interactive States
|
||||
|
||||
Cards can be:
|
||||
- **Static**: Display-only containers
|
||||
- **Clickable**: Navigate or trigger actions
|
||||
- **Expandable**: Show/hide additional content
|
||||
|
||||
### Content Organization
|
||||
|
||||
- **Header**: Title, subtitle, metadata
|
||||
- **Body**: Main content, lists, descriptions
|
||||
- **Footer**: Actions, timestamps, secondary info
|
||||
|
||||
### Responsive Behavior
|
||||
|
||||
- **Width**: Adapts to container width
|
||||
- **Content**: Text wraps within boundaries
|
||||
- **Actions**: Footer buttons stack on narrow widths
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Border Styles
|
||||
- `┌─┐` = Default border (light gray)
|
||||
- `┏━┓` = Hover/focus border (primary color)
|
||||
- `├─┤` = Section dividers
|
||||
|
||||
### Layout Patterns
|
||||
- Header: Title + optional subtitle
|
||||
- Body: Main content with padding
|
||||
- Footer: Actions or metadata
|
||||
|
||||
### Spacing
|
||||
- Internal padding: 1-2 characters
|
||||
- Section spacing: Divider lines
|
||||
- External margin: 2 characters bottom
|
||||
|
||||
## Card Variants
|
||||
|
||||
### Content Types
|
||||
- **Article Card**: News, blog posts, documentation
|
||||
- **Product Card**: Features, pricing, services
|
||||
- **Profile Card**: User info, contact details
|
||||
- **Status Card**: Notifications, alerts, updates
|
||||
|
||||
### Visual Styles
|
||||
- **Elevated**: With shadow effect
|
||||
- **Outlined**: Border-only styling
|
||||
- **Flat**: Minimal visual separation
|
||||
|
||||
## Related Components
|
||||
|
||||
- Container: Generic layout wrapper
|
||||
- Modal: Overlay card variant
|
||||
- Accordion: Expandable card variant
|
||||
- List Item: Simplified card for lists
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
When implementing in actual UI frameworks:
|
||||
|
||||
1. Use semantic HTML structure (article, section, header, footer)
|
||||
2. Implement proper focus management for interactive cards
|
||||
3. Support responsive design with CSS Grid/Flexbox
|
||||
4. Provide clear visual hierarchy with typography
|
||||
5. Add appropriate hover and focus states
|
||||
6. Support keyboard navigation for interactive elements
|
||||
7. Implement proper ARIA attributes for accessibility
|
||||
8. Consider loading states for dynamic content
|
||||
9. Support various content layouts (text, images, actions)
|
||||
10. Provide consistent spacing and alignment systems
|
||||
147
skills/fluxwing-component-creator/templates/card.uxm
Normal file
147
skills/fluxwing-component-creator/templates/card.uxm
Normal file
@@ -0,0 +1,147 @@
|
||||
{
|
||||
"id": "card",
|
||||
"type": "card",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Card Component",
|
||||
"description": "A flexible container for grouping related content with optional header, body, and footer sections",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["card", "container", "layout"],
|
||||
"category": "layout",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"title": "",
|
||||
"subtitle": "",
|
||||
"content": "",
|
||||
"footer": "",
|
||||
"elevated": true,
|
||||
"padding": "medium",
|
||||
"borderRadius": "medium",
|
||||
"maxWidth": 40,
|
||||
"hasHeader": true,
|
||||
"hasFooter": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"background": "white",
|
||||
"border": "solid-gray-light",
|
||||
"borderWidth": 1,
|
||||
"shadow": "subtle"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"background": "white",
|
||||
"border": "solid-gray-medium",
|
||||
"borderWidth": 1,
|
||||
"shadow": "elevated"
|
||||
},
|
||||
"triggers": ["hover"]
|
||||
},
|
||||
{
|
||||
"name": "focus",
|
||||
"properties": {
|
||||
"background": "white",
|
||||
"border": "solid-primary",
|
||||
"borderWidth": 2,
|
||||
"shadow": "elevated",
|
||||
"outline": "primary"
|
||||
},
|
||||
"triggers": ["focus"]
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "emit-card-click"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "article",
|
||||
"focusable": false,
|
||||
"keyboardSupport": [],
|
||||
"ariaLabel": "{{title}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"margin": {
|
||||
"bottom": 2
|
||||
},
|
||||
"padding": {
|
||||
"top": 1,
|
||||
"right": 2,
|
||||
"bottom": 1,
|
||||
"left": 2
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"width": 40,
|
||||
"height": "auto",
|
||||
"minWidth": 20,
|
||||
"maxWidth": 80
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "card.md",
|
||||
"width": 40,
|
||||
"height": 12,
|
||||
"variables": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "string",
|
||||
"defaultValue": "Card Title",
|
||||
"description": "The main heading of the card"
|
||||
},
|
||||
{
|
||||
"name": "subtitle",
|
||||
"type": "string",
|
||||
"defaultValue": "",
|
||||
"description": "Optional subtitle or secondary heading"
|
||||
},
|
||||
{
|
||||
"name": "content",
|
||||
"type": "string",
|
||||
"defaultValue": "Card content goes here. This is the main body text that provides details or information.",
|
||||
"description": "The main content or body text of the card"
|
||||
},
|
||||
{
|
||||
"name": "footer",
|
||||
"type": "string",
|
||||
"defaultValue": "",
|
||||
"description": "Optional footer content like actions or metadata"
|
||||
},
|
||||
{
|
||||
"name": "width",
|
||||
"type": "number",
|
||||
"defaultValue": 40,
|
||||
"description": "Card width in characters",
|
||||
"validation": {
|
||||
"min": 20,
|
||||
"max": 80
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hasHeader",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Whether to show the header section"
|
||||
},
|
||||
{
|
||||
"name": "hasFooter",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Whether to show the footer section"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
261
skills/fluxwing-component-creator/templates/custom-widget.md
Normal file
261
skills/fluxwing-component-creator/templates/custom-widget.md
Normal file
@@ -0,0 +1,261 @@
|
||||
# Custom Widget Component
|
||||
|
||||
A specialized widget component that extends the basic card with custom properties for dashboard and data display.
|
||||
|
||||
## Dashboard Widget
|
||||
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ {{data.icon}} {{data.title}} │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ {{data.value}} │
|
||||
│ │
|
||||
│ {{data.trend}} │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Compact Widget
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ {{data.icon}} {{data.title}} │⟳│
|
||||
│ {{data.value}} {{data.trend}} │
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
## Loading State
|
||||
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ ⟳ Loading... │
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
|
||||
│ │
|
||||
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Error State
|
||||
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ ⚠ Error Loading Data │
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ Failed to load widget data. │
|
||||
│ Click to retry. │
|
||||
│ │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Widget Types
|
||||
|
||||
### Analytics Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ 📊 Sales Analytics │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ $45,678 │
|
||||
│ │
|
||||
│ ↗ +23% vs last month │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Status Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ 🟢 System Status │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ All Systems │
|
||||
│ Operational │
|
||||
│ │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Counter Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ 👥 Active Users │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ 2,347 │
|
||||
│ │
|
||||
│ +12 new this hour │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Progress Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ 🎯 Goal Progress │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ ████████████████░░░░ 80% │
|
||||
│ │
|
||||
│ 8 of 10 completed │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Interactive Elements
|
||||
|
||||
### Refreshable Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ {{data.icon}} {{data.title}} │⟳│ ← Click to refresh
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ {{data.value}} │
|
||||
│ │
|
||||
│ Last updated: 2 min ago │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Auto-Refresh Indicator
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ {{data.icon}} {{data.title}} │●│ ← Auto-refresh active
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ {{data.value}} │
|
||||
│ │
|
||||
│ Next refresh: 25s │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Standard**: 30×8 characters
|
||||
- **Compact**: 25×4 characters
|
||||
- **Large**: 40×10 characters
|
||||
- **Full Width**: Responsive to container
|
||||
|
||||
## Variables
|
||||
|
||||
- `widgetType` (string): Type of widget ("dashboard", "analytics", "status", "counter", "progress")
|
||||
- `data` (object): Widget data with title, value, trend, and icon
|
||||
- `title` (string): Widget heading
|
||||
- `value` (string): Main display value
|
||||
- `trend` (string): Trend indicator (optional)
|
||||
- `icon` (string): Widget icon (emoji or symbol)
|
||||
- `refreshable` (boolean): Whether widget can be manually refreshed
|
||||
- `autoRefresh` (number): Auto-refresh interval in milliseconds (0 = disabled)
|
||||
- `compact` (boolean): Use compact layout
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: widget or region
|
||||
- **Focusable**: Yes, if interactive
|
||||
- **Keyboard Support**:
|
||||
- Enter/Space: Refresh widget (if refreshable)
|
||||
- Tab: Navigate to next widget
|
||||
- **ARIA**:
|
||||
- `aria-label`: Widget title and current value
|
||||
- `aria-live`: "polite" for auto-updating widgets
|
||||
- `aria-busy`: "true" when loading
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Sales Dashboard Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ 💰 Monthly Revenue │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ $127,890 │
|
||||
│ │
|
||||
│ ↗ +15.3% vs last month │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Server Monitoring Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ 🖥 Server Load │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ CPU: 45% │
|
||||
│ RAM: 67% │
|
||||
│ Disk: 23% │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Task Progress Widget
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ ✅ Sprint Progress │⟳│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ ████████████░░░░░░░░ 67% │
|
||||
│ │
|
||||
│ 12 of 18 tasks completed │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Data Loading
|
||||
|
||||
1. **Initial Load**: Show loading state while fetching data
|
||||
2. **Error Handling**: Display error message and retry option
|
||||
3. **Success**: Show formatted data with trend indicators
|
||||
4. **Auto-Refresh**: Periodically update data in background
|
||||
|
||||
### Refresh Functionality
|
||||
|
||||
- **Manual Refresh**: Click refresh icon to update immediately
|
||||
- **Auto-Refresh**: Configurable interval for automatic updates
|
||||
- **Loading Feedback**: Visual indication during data fetch
|
||||
- **Error Recovery**: Retry mechanism for failed requests
|
||||
|
||||
### State Management
|
||||
|
||||
- **Loading**: Semi-transparent with spinner
|
||||
- **Error**: Red border with error message
|
||||
- **Success**: Normal display with data
|
||||
- **Stale**: Subtle indication when data is outdated
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `┌─┐└┘─│` = Widget container borders
|
||||
- `⟳` = Refresh button icon
|
||||
- `●` = Auto-refresh active indicator
|
||||
- `░` = Loading placeholder blocks
|
||||
- `⚠` = Error/warning indicator
|
||||
- Emoji icons for widget types (📊, 💰, 🟢, etc.)
|
||||
|
||||
### Status Colors
|
||||
- **Success**: Green indicators for positive trends
|
||||
- **Warning**: Yellow for caution states
|
||||
- **Error**: Red for error states
|
||||
- **Neutral**: Gray for normal/inactive states
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Card**: Base component that this extends
|
||||
- **Dashboard**: Container for multiple widgets
|
||||
- **Chart**: Data visualization components
|
||||
- **Metric**: Simple numeric display components
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This widget component extends the base card component with:
|
||||
|
||||
1. **Data Management**: Built-in data fetching and state management
|
||||
2. **Auto-Refresh**: Configurable automatic data updates
|
||||
3. **Error Handling**: Robust error states and recovery
|
||||
4. **Accessibility**: Full screen reader and keyboard support
|
||||
5. **Customization**: Flexible widget types and layouts
|
||||
6. **Performance**: Efficient rendering and update mechanisms
|
||||
|
||||
## Extension Points
|
||||
|
||||
- **Custom Widget Types**: Add new widget variations
|
||||
- **Data Sources**: Integrate with different APIs
|
||||
- **Visualization**: Add charts and graphs
|
||||
- **Theming**: Custom color schemes and layouts
|
||||
- **Interactions**: Additional click handlers and actions
|
||||
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "custom-widget",
|
||||
"type": "custom",
|
||||
"version": "1.0.0",
|
||||
"extends": "card",
|
||||
"metadata": {
|
||||
"name": "Custom Widget",
|
||||
"description": "A specialized widget component that extends the basic card with custom properties",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["widget", "custom", "card"],
|
||||
"category": "display",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"widgetType": "dashboard",
|
||||
"data": {
|
||||
"title": "Sales Overview",
|
||||
"value": "1,234",
|
||||
"trend": "+12%",
|
||||
"icon": "📊"
|
||||
},
|
||||
"refreshable": true,
|
||||
"autoRefresh": 30000,
|
||||
"compact": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "loading",
|
||||
"properties": {
|
||||
"opacity": 0.6,
|
||||
"cursor": "wait"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "error",
|
||||
"properties": {
|
||||
"borderColor": "red",
|
||||
"background": "error-light"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "refresh-widget",
|
||||
"condition": "refreshable"
|
||||
},
|
||||
{
|
||||
"trigger": "change",
|
||||
"action": "auto-refresh",
|
||||
"condition": "autoRefresh > 0"
|
||||
}
|
||||
]
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "custom-widget.md",
|
||||
"width": 30,
|
||||
"height": 8,
|
||||
"variables": [
|
||||
{
|
||||
"name": "widgetType",
|
||||
"type": "string",
|
||||
"defaultValue": "dashboard",
|
||||
"description": "Type of widget to display"
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"type": "string",
|
||||
"defaultValue": "{\"title\":\"Widget Title\",\"value\":\"N/A\",\"trend\":\"\",\"icon\":\"📊\"}",
|
||||
"description": "Widget data to display (JSON string)"
|
||||
},
|
||||
{
|
||||
"name": "refreshable",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Whether widget can be refreshed"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
196
skills/fluxwing-component-creator/templates/email-input.md
Normal file
196
skills/fluxwing-component-creator/templates/email-input.md
Normal file
@@ -0,0 +1,196 @@
|
||||
# Email Input Field Component
|
||||
|
||||
A specialized input field for email addresses with built-in validation.
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
{{label}} *
|
||||
┌─────────────────────────────────┐
|
||||
│ {{value || placeholder}} │ @
|
||||
└─────────────────────────────────┘
|
||||
{{helpText}}
|
||||
```
|
||||
|
||||
## Focus State
|
||||
|
||||
```
|
||||
{{label}} *
|
||||
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ {{value || placeholder}} ┃ @
|
||||
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
||||
{{helpText}}
|
||||
```
|
||||
|
||||
## Valid State
|
||||
|
||||
```
|
||||
{{label}} *
|
||||
┌─────────────────────────────────┐
|
||||
│ {{value}} │ ✓
|
||||
└─────────────────────────────────┘
|
||||
{{helpText}}
|
||||
```
|
||||
|
||||
## Error State
|
||||
|
||||
```
|
||||
{{label}} *
|
||||
┌─────────────────────────────────┐
|
||||
│ {{value || placeholder}} │ ⚠️
|
||||
└─────────────────────────────────┘
|
||||
❌ {{errorMessage}}
|
||||
```
|
||||
|
||||
## Disabled State
|
||||
|
||||
```
|
||||
{{label}} *
|
||||
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
|
||||
│ {{value || placeholder}} │ @
|
||||
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
|
||||
{{helpText}}
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `label` (string): The label displayed above the input field
|
||||
- `placeholder` (string): Placeholder text for email format guidance
|
||||
- `value` (string): Current email address value
|
||||
- `width` (number): Input field width in characters (20-60, default 35)
|
||||
- `errorMessage` (string): Validation error message
|
||||
- `helpText` (string): Privacy or usage information
|
||||
- `isValid` (boolean): Whether the current email is valid
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: textbox
|
||||
- **Focusable**: Yes
|
||||
- **Input Mode**: email (shows @ symbol on mobile keyboards)
|
||||
- **Keyboard Support**:
|
||||
- Tab: Move focus to/from field
|
||||
- All text input keys: Enter email
|
||||
- @ key: Email-specific character
|
||||
- **ARIA**:
|
||||
- `aria-label`: Email address input field
|
||||
- `aria-required`: true (email usually required)
|
||||
- `aria-invalid`: Set when email format is invalid
|
||||
- `aria-describedby`: Links to help text or error message
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Email Input
|
||||
```
|
||||
Email Address *
|
||||
┌─────────────────────────────────┐
|
||||
│ name@example.com │ @
|
||||
└─────────────────────────────────┘
|
||||
We'll never share your email address
|
||||
```
|
||||
|
||||
### With Valid Email
|
||||
```
|
||||
Work Email *
|
||||
┌─────────────────────────────────┐
|
||||
│ john.doe@company.com │ ✓
|
||||
└─────────────────────────────────┘
|
||||
Used for account notifications
|
||||
```
|
||||
|
||||
### With Validation Error
|
||||
```
|
||||
Email Address *
|
||||
┌─────────────────────────────────┐
|
||||
│ invalid-email │ ⚠️
|
||||
└─────────────────────────────────┘
|
||||
❌ Please enter a valid email address
|
||||
```
|
||||
|
||||
### Registration Form
|
||||
```
|
||||
Email Address *
|
||||
┌─────────────────────────────────┐
|
||||
│ user@domain.co │ ✓
|
||||
└─────────────────────────────────┘
|
||||
This will be your login username
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Email Validation
|
||||
|
||||
Real-time validation checks:
|
||||
1. **Format**: Contains @ symbol and domain
|
||||
2. **Structure**: Basic email pattern matching
|
||||
3. **Domain**: Has valid domain extension
|
||||
4. **Length**: Within reasonable email limits
|
||||
|
||||
### State Transitions
|
||||
|
||||
1. **Default → Focus**: User clicks or tabs into field
|
||||
2. **Focus → Typing**: User starts entering email
|
||||
3. **Typing → Valid**: Email format becomes valid
|
||||
4. **Typing → Error**: Email format is invalid
|
||||
5. **Valid/Error → Default**: User leaves field
|
||||
|
||||
### Validation Timing
|
||||
|
||||
- **Real-time**: Basic format checking as user types
|
||||
- **On Blur**: Complete validation when leaving field
|
||||
- **On Submit**: Final validation before form submission
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Indicators
|
||||
- `@` = Email input indicator
|
||||
- `✓` = Valid email confirmation
|
||||
- `⚠️` = Format error warning
|
||||
- `*` = Required field indicator
|
||||
|
||||
### Border Styles
|
||||
- `┌─┐` = Default border
|
||||
- `┏━┓` = Focus border (primary color)
|
||||
- `┌ ─ ┐` = Disabled border (dashed)
|
||||
|
||||
### Colors
|
||||
- Default: Standard input styling
|
||||
- Valid: Light green background with green border
|
||||
- Error: Light red background with red border
|
||||
- Focus: Primary color border
|
||||
|
||||
## Email-Specific Features
|
||||
|
||||
### Autocomplete Support
|
||||
- Suggests common email domains
|
||||
- Remembers previously entered emails
|
||||
- Integration with browser autofill
|
||||
|
||||
### Mobile Optimization
|
||||
- Shows email-optimized keyboard
|
||||
- Includes @ and . keys prominently
|
||||
- Prevents autocorrect/autocapitalize
|
||||
|
||||
### Privacy Considerations
|
||||
- Clear privacy policy reference
|
||||
- Secure handling of email data
|
||||
- Optional email verification flow
|
||||
|
||||
## Related Components
|
||||
|
||||
- Text Input: Base input component
|
||||
- Password Input: For password entry
|
||||
- Confirmation Email Input: For email verification
|
||||
- Newsletter Signup: Specialized email collection
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
When implementing in actual UI frameworks:
|
||||
|
||||
1. Use `type="email"` for HTML5 validation
|
||||
2. Set `autocomplete="email"` for autofill
|
||||
3. Set `inputmode="email"` for mobile keyboards
|
||||
4. Implement proper email validation regex
|
||||
5. Consider email verification workflow
|
||||
6. Provide clear privacy information
|
||||
7. Handle international domain names
|
||||
8. Support paste operations for long emails
|
||||
168
skills/fluxwing-component-creator/templates/email-input.uxm
Normal file
168
skills/fluxwing-component-creator/templates/email-input.uxm
Normal file
@@ -0,0 +1,168 @@
|
||||
{
|
||||
"id": "email-input",
|
||||
"type": "input",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Email Input Field",
|
||||
"description": "A specialized input field for email addresses with built-in validation",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["input", "email", "form", "validation"],
|
||||
"category": "input",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"extends": "text-input",
|
||||
"props": {
|
||||
"label": "Email Address",
|
||||
"placeholder": "name@example.com",
|
||||
"value": "",
|
||||
"disabled": false,
|
||||
"required": true,
|
||||
"autocomplete": "email",
|
||||
"ariaLabel": "",
|
||||
"errorMessage": "",
|
||||
"helpText": "We'll never share your email address"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"background": "white",
|
||||
"textColor": "black",
|
||||
"border": "solid-gray",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "focus",
|
||||
"properties": {
|
||||
"background": "white",
|
||||
"textColor": "black",
|
||||
"border": "solid-primary",
|
||||
"borderWidth": 2,
|
||||
"outline": "primary"
|
||||
},
|
||||
"triggers": ["focus"]
|
||||
},
|
||||
{
|
||||
"name": "valid",
|
||||
"properties": {
|
||||
"background": "success-light",
|
||||
"textColor": "success-dark",
|
||||
"border": "solid-success",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "error",
|
||||
"properties": {
|
||||
"background": "error-light",
|
||||
"textColor": "error-dark",
|
||||
"border": "solid-error",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"background": "gray-lighter",
|
||||
"textColor": "gray-medium",
|
||||
"border": "dashed-gray",
|
||||
"borderWidth": 1
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "change",
|
||||
"action": "validate-email-format"
|
||||
},
|
||||
{
|
||||
"trigger": "blur",
|
||||
"action": "validate-email-complete"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "textbox",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Tab", "Shift+Tab", "All text input keys"],
|
||||
"ariaLabel": "{{ariaLabel || label}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"margin": {
|
||||
"bottom": 1
|
||||
},
|
||||
"padding": {
|
||||
"top": 1,
|
||||
"right": 1,
|
||||
"bottom": 1,
|
||||
"left": 1
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"width": 35,
|
||||
"height": 3,
|
||||
"minWidth": 20,
|
||||
"maxWidth": 60
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "email-input.md",
|
||||
"width": 35,
|
||||
"height": 5,
|
||||
"variables": [
|
||||
{
|
||||
"name": "label",
|
||||
"type": "string",
|
||||
"defaultValue": "Email Address",
|
||||
"description": "The label displayed above the input field"
|
||||
},
|
||||
{
|
||||
"name": "placeholder",
|
||||
"type": "string",
|
||||
"defaultValue": "name@example.com",
|
||||
"description": "Placeholder text shown when input is empty"
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"type": "string",
|
||||
"defaultValue": "",
|
||||
"description": "Current email address value"
|
||||
},
|
||||
{
|
||||
"name": "width",
|
||||
"type": "number",
|
||||
"defaultValue": 35,
|
||||
"description": "Input field width in characters",
|
||||
"validation": {
|
||||
"min": 20,
|
||||
"max": 60
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "errorMessage",
|
||||
"type": "string",
|
||||
"defaultValue": "",
|
||||
"description": "Error message to display below the input"
|
||||
},
|
||||
{
|
||||
"name": "helpText",
|
||||
"type": "string",
|
||||
"defaultValue": "We'll never share your email address",
|
||||
"description": "Help text to display below the input"
|
||||
},
|
||||
{
|
||||
"name": "isValid",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Whether the current email is valid"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
309
skills/fluxwing-component-creator/templates/form.md
Normal file
309
skills/fluxwing-component-creator/templates/form.md
Normal file
@@ -0,0 +1,309 @@
|
||||
# Form Container Component
|
||||
|
||||
A comprehensive form container with field grouping, validation state management, and submission handling.
|
||||
|
||||
## Standard Vertical Form Layout
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ {{title}} │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ {{fields[0].label}} {{fields[0].required ? '*' : ''}} │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ {{fields[0].placeholder}} │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ {{fields[1].label}} {{fields[1].required ? '*' : ''}} │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ {{fields[1].placeholder}} │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ {{fields[2].label}} {{fields[2].required ? '*' : ''}} │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ {{fields[2].placeholder}} │ │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────┐ {{showReset ? '┌─────────────┐' : ''}} │
|
||||
│ │ {{submitText}} │ {{showReset ? '│ Reset │' : ''}} │
|
||||
│ └─────────────┘ {{showReset ? '└─────────────┘' : ''}} │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Horizontal Form Layout
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ {{title}} │
|
||||
├────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ {{fields[0].label}}* {{fields[1].label}}* │
|
||||
│ ┌─────────────────┐ ┌─────────────────────────────────┐ │
|
||||
│ │ {{fields[0].placeholder}} │ │ {{fields[1].placeholder}} │ │
|
||||
│ └─────────────────┘ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ {{fields[2].label}} │
|
||||
│ ┌──────────────────────────────────────────────────────────┐ │
|
||||
│ │ {{fields[2].placeholder}} │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ {{submitText}} │ │ Reset │ │
|
||||
│ └─────────────┘ └─────────────┘ │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Validation States
|
||||
|
||||
### Valid Form
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ Contact Form │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Full Name * ✓ │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ John Doe │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Email Address * ✓ │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ john@example.com │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░░ │
|
||||
│ ▓ Submit ▓ ░ Reset ░ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░░ │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Form with Validation Errors
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ Contact Form │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Full Name * ✗ │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ ⚠ This field is required │
|
||||
│ │
|
||||
│ Email Address * ✗ │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ invalid-email │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ ⚠ Please enter a valid email address │
|
||||
│ │
|
||||
│ ░░░░░░░░░░░░░ ░░░░░░░░░░░░░ │
|
||||
│ ░ Submit ░ ░ Reset ░ │
|
||||
│ ░░░░░░░░░░░░░ ░░░░░░░░░░░░░ │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Grid Layout (2x2)
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
│ {{title}} │
|
||||
├──────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ First Name * Last Name * │
|
||||
│ ┌─────────────────┐ ┌─────────────────────────────────┐ │
|
||||
│ │ First name │ │ Last name │ │
|
||||
│ └─────────────────┘ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Email * Phone │
|
||||
│ ┌─────────────────┐ ┌─────────────────────────────────┐ │
|
||||
│ │ Email address │ │ Phone number │ │
|
||||
│ └─────────────────┘ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────┐ ┌─────────────┐ │
|
||||
│ │ {{submitText}} │ │ Reset │ │
|
||||
│ └─────────────┘ └─────────────┘ │
|
||||
└──────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Compact Form
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Login │
|
||||
├─────────────────────────────────────┤
|
||||
│ Username: ┌───────────────────────┐ │
|
||||
│ │ Enter username │ │
|
||||
│ └───────────────────────┘ │
|
||||
│ Password: ┌───────────────────────┐ │
|
||||
│ │ •••••••••••••••••••• │ │
|
||||
│ └───────────────────────┘ │
|
||||
│ ┌─────────┐ ┌─────────┐ │
|
||||
│ │ Login │ │ Cancel │ │
|
||||
│ └─────────┘ └─────────┘ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Standard Width**: 50-80 characters
|
||||
- **Compact Width**: 30-50 characters
|
||||
- **Height**: Variable based on field count
|
||||
- **Field Height**: 3 characters (single line), 5+ characters (textarea)
|
||||
- **Button Height**: 3 characters
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string): Form heading text (max 50 characters)
|
||||
- `fields` (array, required): Form field definitions
|
||||
- Each field: `{id, type, label, placeholder, required, validation}`
|
||||
- Min: 1 field, Max: 15 fields
|
||||
- Types: "text", "email", "password", "textarea", "select", "checkbox"
|
||||
- `layout` (string): "vertical", "horizontal", or "grid" (default: "vertical")
|
||||
- `submitText` (string): Submit button label (default: "Submit")
|
||||
- `showReset` (boolean): Whether to display reset button (default: true)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: form
|
||||
- **Focusable**: Yes, tab navigation through fields
|
||||
- **Keyboard Support**:
|
||||
- Tab/Shift+Tab: Navigate between fields
|
||||
- Enter: Submit form (if valid)
|
||||
- Ctrl+Enter: Force submit
|
||||
- Escape: Cancel/reset (if applicable)
|
||||
- **ARIA**:
|
||||
- `aria-label`: Form title or purpose
|
||||
- `aria-required`: "true" for required fields
|
||||
- `aria-invalid`: "true" for fields with errors
|
||||
- `aria-describedby`: Link to error messages
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Contact Form
|
||||
```
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ Contact Us │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Your Name * │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ Enter your full name │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Email Address * │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ your@email.com │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Subject │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ Brief description │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Message │
|
||||
│ ┌────────────────────────────────────────────────┐ │
|
||||
│ │ Your message here... │ │
|
||||
│ │ │ │
|
||||
│ │ │ │
|
||||
│ └────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░░ │
|
||||
│ ▓ Send Message │ ░ Clear ░ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░░ │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Registration Form
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
│ Create Account │
|
||||
├──────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ First Name * Last Name * │
|
||||
│ ┌─────────────────┐ ┌─────────────────────────────────┐ │
|
||||
│ │ First name │ │ Last name │ │
|
||||
│ └─────────────────┘ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Email Address * │
|
||||
│ ┌─────────────────────────────────────────────────────────┐│
|
||||
│ │ Enter a valid email address ││
|
||||
│ └─────────────────────────────────────────────────────────┘│
|
||||
│ │
|
||||
│ Password * Confirm Password * │
|
||||
│ ┌─────────────────┐ ┌─────────────────────────────────┐ │
|
||||
│ │ ••••••••••••••• │ │ •••••••••••••••••••••••••••••• │ │
|
||||
│ └─────────────────┘ └─────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ☐ I agree to the Terms of Service │
|
||||
│ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░░ │
|
||||
│ ▓ Create Account ▓ ░ Cancel ░ │
|
||||
│ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ░░░░░░░░░░░░░ │
|
||||
└──────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Form Validation
|
||||
|
||||
1. **Real-time Validation**: Fields validate as user types or on blur
|
||||
2. **Form-level Validation**: Overall form state based on all fields
|
||||
3. **Error Display**: Clear error messages below invalid fields
|
||||
4. **Submit Prevention**: Disabled submit button for invalid forms
|
||||
|
||||
### State Management
|
||||
|
||||
- **Pristine**: Form has not been modified
|
||||
- **Dirty**: Form has been modified
|
||||
- **Valid**: All validation rules pass
|
||||
- **Invalid**: One or more validation errors
|
||||
- **Submitting**: Form submission in progress
|
||||
- **Submitted**: Form successfully submitted
|
||||
|
||||
### Field Types
|
||||
|
||||
- **Text**: Single-line text input
|
||||
- **Email**: Email validation with format checking
|
||||
- **Password**: Hidden input with strength indicators
|
||||
- **Textarea**: Multi-line text input
|
||||
- **Select**: Dropdown selection
|
||||
- **Checkbox**: Boolean toggle options
|
||||
- **Radio**: Single selection from multiple options
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `┌─┐└┘─│` = Form and field borders
|
||||
- `▓` = Primary submit button
|
||||
- `░` = Secondary/reset button
|
||||
- `✓` = Valid field indicator
|
||||
- `✗` = Invalid field indicator
|
||||
- `⚠` = Error/warning symbol
|
||||
- `*` = Required field marker
|
||||
|
||||
### Status Colors (represented by patterns)
|
||||
- Solid borders = Default/active state
|
||||
- Dashed borders = Disabled state
|
||||
- Double borders = Focus state
|
||||
- `▓` pattern = Primary/submit actions
|
||||
- `░` pattern = Secondary/cancel actions
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Input Field**: Individual form field components
|
||||
- **Button**: Submit and reset button components
|
||||
- **Validation Message**: Error and success message components
|
||||
- **Field Group**: Related field grouping components
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates form structure and validation states. When implementing:
|
||||
|
||||
1. **Progressive Enhancement**: Start with basic HTML form functionality
|
||||
2. **Validation Strategy**: Combine client-side and server-side validation
|
||||
3. **Error Handling**: Graceful error recovery and clear messaging
|
||||
4. **Accessibility**: Full keyboard navigation and screen reader support
|
||||
5. **Mobile Responsiveness**: Adapt layout for small screens
|
||||
6. **Security**: Proper data sanitization and CSRF protection
|
||||
196
skills/fluxwing-component-creator/templates/form.uxm
Normal file
196
skills/fluxwing-component-creator/templates/form.uxm
Normal file
@@ -0,0 +1,196 @@
|
||||
{
|
||||
"id": "form",
|
||||
"type": "form",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Form Container",
|
||||
"description": "A form container with field grouping, validation state management, and submission handling",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["form", "container", "validation"],
|
||||
"category": "input",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"title": "Contact Form",
|
||||
"method": "POST",
|
||||
"action": "/submit",
|
||||
"fields": [
|
||||
{
|
||||
"id": "name",
|
||||
"type": "text",
|
||||
"label": "Full Name",
|
||||
"placeholder": "Enter your full name",
|
||||
"required": true,
|
||||
"validation": "text"
|
||||
},
|
||||
{
|
||||
"id": "email",
|
||||
"type": "email",
|
||||
"label": "Email Address",
|
||||
"placeholder": "your@email.com",
|
||||
"required": true,
|
||||
"validation": "email"
|
||||
},
|
||||
{
|
||||
"id": "message",
|
||||
"type": "textarea",
|
||||
"label": "Message",
|
||||
"placeholder": "Your message here...",
|
||||
"required": false,
|
||||
"validation": "text"
|
||||
}
|
||||
],
|
||||
"submitText": "Submit",
|
||||
"resetText": "Reset",
|
||||
"showReset": true,
|
||||
"layout": "vertical",
|
||||
"spacing": "normal"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"border": "solid",
|
||||
"background": "white",
|
||||
"textColor": "default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "valid",
|
||||
"properties": {
|
||||
"border": "solid",
|
||||
"borderColor": "success",
|
||||
"background": "success-light"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "invalid",
|
||||
"properties": {
|
||||
"border": "solid",
|
||||
"borderColor": "error",
|
||||
"background": "error-light"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "submitting",
|
||||
"properties": {
|
||||
"background": "gray-light",
|
||||
"textColor": "gray-dark",
|
||||
"cursor": "wait"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "submit",
|
||||
"action": "validate-and-submit",
|
||||
"condition": "form.valid"
|
||||
},
|
||||
{
|
||||
"trigger": "reset",
|
||||
"action": "clear-all-fields"
|
||||
},
|
||||
{
|
||||
"trigger": "field-change",
|
||||
"action": "validate-field",
|
||||
"condition": "field.validation"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "submit-form",
|
||||
"condition": "key === 'Enter' && ctrlKey"
|
||||
}
|
||||
],
|
||||
"validation": {
|
||||
"realTime": true,
|
||||
"showErrorsOnBlur": true,
|
||||
"preventSubmitIfInvalid": true,
|
||||
"customValidators": []
|
||||
},
|
||||
"accessibility": {
|
||||
"role": "form",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Tab", "Shift+Tab", "Enter"],
|
||||
"ariaLabel": "{{title}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 2,
|
||||
"right": 3,
|
||||
"bottom": 2,
|
||||
"left": 3
|
||||
},
|
||||
"margin": {
|
||||
"bottom": 2
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 30,
|
||||
"maxWidth": 80,
|
||||
"height": "auto"
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "form.md",
|
||||
"width": 50,
|
||||
"height": 20,
|
||||
"variables": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "string",
|
||||
"defaultValue": "Contact Form",
|
||||
"description": "Form heading/title text",
|
||||
"required": false,
|
||||
"validation": {
|
||||
"max": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "fields",
|
||||
"type": "array",
|
||||
"defaultValue": [
|
||||
{"id": "name", "type": "text", "label": "Full Name", "required": true},
|
||||
{"id": "email", "type": "email", "label": "Email", "required": true},
|
||||
{"id": "message", "type": "textarea", "label": "Message", "required": false}
|
||||
],
|
||||
"description": "Form fields with labels, types, and validation",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"min": 1,
|
||||
"max": 15
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "layout",
|
||||
"type": "string",
|
||||
"defaultValue": "vertical",
|
||||
"description": "Field layout arrangement",
|
||||
"validation": {
|
||||
"enum": ["vertical", "horizontal", "grid"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "submitText",
|
||||
"type": "string",
|
||||
"defaultValue": "Submit",
|
||||
"description": "Submit button text",
|
||||
"validation": {
|
||||
"max": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "showReset",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Whether to show reset button"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
309
skills/fluxwing-component-creator/templates/list.md
Normal file
309
skills/fluxwing-component-creator/templates/list.md
Normal file
@@ -0,0 +1,309 @@
|
||||
# List Component
|
||||
|
||||
Ordered and unordered list component with various display patterns, selection support, and keyboard navigation.
|
||||
|
||||
## Unordered List (Default)
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ {{marker}} {{items[0].text}} │
|
||||
│ {{marker}} {{items[1].text}} │
|
||||
│ {{marker}} {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Ordered List
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ 1. {{items[0].text}} │
|
||||
│ 2. {{items[1].text}} │
|
||||
│ 3. {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Selectable List with Selection
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ {{items[0].text}} │
|
||||
│ ▓▓{{items[1].text}}▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │
|
||||
│ {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Checklist Variant
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ ☐ {{items[0].text}} │
|
||||
│ ☑ {{items[1].text}} │
|
||||
│ ☐ {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Multi-Select List
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ ☑ {{items[0].text}} │
|
||||
│ ☑ {{items[1].text}} │
|
||||
│ ☐ {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Compact List (No Borders)
|
||||
|
||||
```
|
||||
{{marker}} {{items[0].text}}
|
||||
{{marker}} {{items[1].text}}
|
||||
{{marker}} {{items[2].text}}
|
||||
```
|
||||
|
||||
## Striped List
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ {{marker}} {{items[0].text}} │
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
│ {{marker}} {{items[1].text}} │
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
│ {{marker}} {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Definition List
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ {{items[0].text}} │
|
||||
│ {{items[0].description}} │
|
||||
│ │
|
||||
│ {{items[1].text}} │
|
||||
│ {{items[1].description}} │
|
||||
│ │
|
||||
│ {{items[2].text}} │
|
||||
│ {{items[2].description}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Menu-Style List
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ > {{items[0].text}} │
|
||||
│ {{items[1].text}} │
|
||||
│ {{items[2].text}} │
|
||||
│ {{items[3].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Numbered List Variants
|
||||
|
||||
### Decimal (Default)
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ 1. {{items[0].text}} │
|
||||
│ 2. {{items[1].text}} │
|
||||
│ 3. {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Alphabetic
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ a. {{items[0].text}} │
|
||||
│ b. {{items[1].text}} │
|
||||
│ c. {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Roman Numerals
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ i. {{items[0].text}} │
|
||||
│ ii. {{items[1].text}} │
|
||||
│ iii.{{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Disabled Items
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ {{marker}} {{items[0].text}} │
|
||||
│ ░ {{items[1].text}} (disabled) │
|
||||
│ {{marker}} {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Interactive States
|
||||
|
||||
### Hover State
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ {{marker}} {{items[0].text}} │
|
||||
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
|
||||
│▓{{marker}} {{items[1].text}} ▓│
|
||||
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
|
||||
│ {{marker}} {{items[2].text}} │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Standard Width**: 30-60 characters
|
||||
- **Compact Width**: 20-40 characters
|
||||
- **Item Height**: 1 character (compact), 2-3 characters (normal)
|
||||
- **Container Height**: Variable based on item count
|
||||
- **Marker Width**: 2-4 characters depending on type
|
||||
|
||||
## Variables
|
||||
|
||||
- `items` (array, required): List items with text and metadata
|
||||
- Each item: `{id, text, selected?, disabled?, description?}`
|
||||
- Min: 1 item, Max: 50 items
|
||||
- `type` (string): "unordered", "ordered", "definition", or "checklist"
|
||||
- `marker` (string): Bullet character for unordered lists (default: "•")
|
||||
- `numbering` (string): Style for ordered lists ("decimal", "alpha", "roman", "roman-upper")
|
||||
- `selectable` (boolean): Whether items can be selected (default: true)
|
||||
- `multiSelect` (boolean): Allow multiple selections (default: false)
|
||||
- `bordered` (boolean): Show container border (default: true)
|
||||
- `compact` (boolean): Use minimal spacing (default: false)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: list (or listbox if selectable)
|
||||
- **Item Role**: listitem (or option if selectable)
|
||||
- **Focusable**: Yes, if selectable
|
||||
- **Keyboard Support**:
|
||||
- Arrow Up/Down: Navigate between items
|
||||
- Enter/Space: Select item
|
||||
- Ctrl+A: Select all (if multiSelect)
|
||||
- Home/End: Jump to first/last item
|
||||
- **ARIA**:
|
||||
- `aria-multiselectable`: "true" if multiSelect enabled
|
||||
- `aria-selected`: "true" for selected items
|
||||
- `aria-disabled`: "true" for disabled items
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Navigation Menu
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ > Dashboard │
|
||||
│ Products │
|
||||
│ Orders │
|
||||
│ Customers │
|
||||
│ Settings │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Task List
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ ☑ Complete project proposal │
|
||||
│ ☑ Review team feedback │
|
||||
│ ☐ Update documentation │
|
||||
│ ☐ Schedule client meeting │
|
||||
│ ☐ Prepare presentation │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### File Browser
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ 📁 Documents │
|
||||
│ 📁 Downloads │
|
||||
│ 📁 Pictures │
|
||||
│ 📄 README.md │
|
||||
│ 📄 package.json │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Settings Menu
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ • General Settings │
|
||||
│ • Privacy & Security │
|
||||
│ • Notifications │
|
||||
│ • Account Management │
|
||||
│ • Help & Support │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Multi-Select Options
|
||||
```
|
||||
┌────────────────────────────────────────┐
|
||||
│ ☑ Email Notifications │
|
||||
│ ☐ SMS Alerts │
|
||||
│ ☑ Push Notifications │
|
||||
│ ☐ Weekly Digest │
|
||||
│ ☑ Marketing Updates │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Selection Management
|
||||
|
||||
1. **Single Select**: Only one item selected at a time
|
||||
2. **Multi Select**: Multiple items can be selected simultaneously
|
||||
3. **Toggle Selection**: Click to select/deselect items
|
||||
4. **Keyboard Navigation**: Arrow keys move focus, Enter/Space selects
|
||||
|
||||
### State Management
|
||||
|
||||
- **Default**: No items selected
|
||||
- **Selected**: One or more items selected
|
||||
- **Focused**: Current keyboard focus position
|
||||
- **Disabled**: Items that cannot be interacted with
|
||||
|
||||
### Visual Feedback
|
||||
|
||||
- **Selection**: Highlighted background for selected items
|
||||
- **Hover**: Temporary highlight on mouse over
|
||||
- **Focus**: Keyboard focus indicator
|
||||
- **Disabled**: Grayed out appearance
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `┌─┐└┘─│` = List container borders
|
||||
- `{{marker}}` = Configurable bullet points (•, -, *, ►)
|
||||
- `▓` = Selection/hover background
|
||||
- `░` = Disabled state indicator
|
||||
- `☐☑` = Checkbox states (unchecked/checked)
|
||||
- `>` = Active/current item indicator
|
||||
|
||||
### List Markers
|
||||
- **Bullets**: •, -, *, ►, ○, ■, ♦
|
||||
- **Numbers**: 1., a., i., I., (1), [1]
|
||||
- **Custom**: Any single character or short string
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Menu**: Dropdown or context menu with list items
|
||||
- **Navigation**: Hierarchical navigation lists
|
||||
- **Table**: Tabular data display with rows
|
||||
- **Tree**: Hierarchical list with expand/collapse
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates list patterns and interactions. When implementing:
|
||||
|
||||
1. **Virtual Scrolling**: Handle large lists efficiently
|
||||
2. **Keyboard Navigation**: Full accessibility support
|
||||
3. **Selection Persistence**: Maintain selection state across updates
|
||||
4. **Performance**: Optimize rendering for large item counts
|
||||
5. **Customization**: Support custom markers and styling
|
||||
6. **Search/Filter**: Add search capabilities for long lists
|
||||
|
||||
## Variants
|
||||
|
||||
- **Simple List**: Basic display without interaction
|
||||
- **Selectable List**: Single or multi-selection support
|
||||
- **Menu List**: Navigation and action items
|
||||
- **Checklist**: Task management with completion states
|
||||
- **Definition List**: Term and description pairs
|
||||
- **Nested List**: Hierarchical list structures
|
||||
206
skills/fluxwing-component-creator/templates/list.uxm
Normal file
206
skills/fluxwing-component-creator/templates/list.uxm
Normal file
@@ -0,0 +1,206 @@
|
||||
{
|
||||
"id": "list",
|
||||
"type": "list",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "List Component",
|
||||
"description": "Ordered and unordered list component with various display patterns and interaction support",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["list", "menu", "navigation", "display"],
|
||||
"category": "display",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"items": [
|
||||
{
|
||||
"id": "1",
|
||||
"text": "First item",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"text": "Second item",
|
||||
"selected": true,
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"text": "Third item",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
}
|
||||
],
|
||||
"type": "unordered",
|
||||
"selectable": true,
|
||||
"multiSelect": false,
|
||||
"variant": "default",
|
||||
"marker": "•",
|
||||
"numbering": "decimal",
|
||||
"compact": false,
|
||||
"bordered": true,
|
||||
"striped": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"background": "transparent",
|
||||
"textColor": "default",
|
||||
"border": "none"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "selected",
|
||||
"properties": {
|
||||
"background": "primary-light",
|
||||
"textColor": "primary-dark",
|
||||
"border": "solid",
|
||||
"fontWeight": "medium"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"background": "gray-light",
|
||||
"textColor": "default"
|
||||
},
|
||||
"triggers": ["mouseenter"]
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"background": "transparent",
|
||||
"textColor": "gray-light",
|
||||
"opacity": 0.5
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "select-item",
|
||||
"condition": "selectable && !disabled"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "select-next",
|
||||
"condition": "key === 'ArrowDown'"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "select-previous",
|
||||
"condition": "key === 'ArrowUp'"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "select-item",
|
||||
"condition": "key === 'Enter' || key === ' '"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "toggle-select",
|
||||
"condition": "key === 'Space' && multiSelect"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "list",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["ArrowUp", "ArrowDown", "Enter", "Space", "Home", "End"],
|
||||
"ariaLabel": "List of items"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 1,
|
||||
"right": 1,
|
||||
"bottom": 1,
|
||||
"left": 1
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 15,
|
||||
"maxWidth": 60,
|
||||
"height": "auto"
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "list.md",
|
||||
"width": 40,
|
||||
"height": 10,
|
||||
"variables": [
|
||||
{
|
||||
"name": "items",
|
||||
"type": "array",
|
||||
"defaultValue": [
|
||||
{"id": "1", "text": "First item", "selected": false},
|
||||
{"id": "2", "text": "Second item", "selected": true},
|
||||
{"id": "3", "text": "Third item", "selected": false}
|
||||
],
|
||||
"description": "List items with text, selection state, and metadata",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"min": 1,
|
||||
"max": 50
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"type": "string",
|
||||
"defaultValue": "unordered",
|
||||
"description": "List type: ordered, unordered, or definition",
|
||||
"validation": {
|
||||
"enum": ["ordered", "unordered", "definition", "checklist"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "marker",
|
||||
"type": "string",
|
||||
"defaultValue": "•",
|
||||
"description": "Bullet character for unordered lists",
|
||||
"validation": {
|
||||
"max": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "numbering",
|
||||
"type": "string",
|
||||
"defaultValue": "decimal",
|
||||
"description": "Numbering style for ordered lists",
|
||||
"validation": {
|
||||
"enum": ["decimal", "alpha", "roman", "roman-upper"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "selectable",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Whether items can be selected"
|
||||
},
|
||||
{
|
||||
"name": "multiSelect",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Allow multiple item selection"
|
||||
},
|
||||
{
|
||||
"name": "bordered",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Show border around list"
|
||||
},
|
||||
{
|
||||
"name": "compact",
|
||||
"type": "boolean",
|
||||
"defaultValue": false,
|
||||
"description": "Use compact spacing between items"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "badge",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["badge", "{{screenContext}}"],
|
||||
"category": "display",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"text": "{{text}}"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "status",
|
||||
"focusable": false
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 15,
|
||||
"height": 1
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "button",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["button", "{{screenContext}}"],
|
||||
"category": "form",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"label": "{{label}}"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "button",
|
||||
"focusable": true
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 20,
|
||||
"height": 3
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "card",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["card", "{{screenContext}}"],
|
||||
"category": "display",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"title": "{{title}}",
|
||||
"content": "{{content}}"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "article",
|
||||
"focusable": false
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 50,
|
||||
"height": 10
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "checkbox",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["checkbox", "{{screenContext}}"],
|
||||
"category": "form",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"label": "{{label}}",
|
||||
"checked": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "checkbox",
|
||||
"focusable": true
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 30,
|
||||
"height": 1
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "container",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["container", "{{screenContext}}"],
|
||||
"category": "layout",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"children": []
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "region",
|
||||
"focusable": false
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 80,
|
||||
"height": 30
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "form",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["form", "{{screenContext}}"],
|
||||
"category": "form",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"fields": []
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "form",
|
||||
"focusable": true
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 60,
|
||||
"height": 25
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "icon",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["icon", "{{screenContext}}"],
|
||||
"category": "display",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"symbol": "{{symbol}}"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "img",
|
||||
"focusable": false
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 3,
|
||||
"height": 1
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "input",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["input", "{{screenContext}}"],
|
||||
"category": "form",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"placeholder": "{{placeholder}}",
|
||||
"label": "{{label}}"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "textbox",
|
||||
"focusable": true
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 40,
|
||||
"height": 3
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "list",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["list", "{{screenContext}}"],
|
||||
"category": "display",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"items": []
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "list",
|
||||
"focusable": false
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 60,
|
||||
"height": 20
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "modal",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["modal", "{{screenContext}}"],
|
||||
"category": "overlay",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"title": "{{title}}",
|
||||
"content": "{{content}}"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "dialog",
|
||||
"focusable": true
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 60,
|
||||
"height": 20
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "{{id}}",
|
||||
"type": "navigation",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "{{name}}",
|
||||
"description": "{{description}}",
|
||||
"created": "{{timestamp}}",
|
||||
"modified": "{{timestamp}}",
|
||||
"tags": ["navigation", "{{screenContext}}"],
|
||||
"category": "navigation",
|
||||
"fidelity": "sketch"
|
||||
},
|
||||
"props": {
|
||||
"items": []
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{"name": "default", "properties": {}}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "navigation",
|
||||
"focusable": true
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "{{id}}.md",
|
||||
"width": 80,
|
||||
"height": 5
|
||||
}
|
||||
}
|
||||
341
skills/fluxwing-component-creator/templates/modal.md
Normal file
341
skills/fluxwing-component-creator/templates/modal.md
Normal file
@@ -0,0 +1,341 @@
|
||||
# Modal Dialog Component
|
||||
|
||||
Modal dialog overlay with focus management, backdrop, and configurable content areas for confirmations, forms, and content display.
|
||||
|
||||
## Standard Modal (Medium Size)
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░░░│ {{title}} │✕│░░░░░░░░
|
||||
░░░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░│ {{content}} │░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░░░│ ┌─────────┐ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░░░│ │ Cancel │ │ {{buttons[1].text}} │ │░░░░░░░░
|
||||
░░░░░░░░░░│ └─────────┘ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Small Modal (Confirmation)
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌──────────────────────────┐░░░░░
|
||||
░░░░░░░░│ {{title}} │✕│░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ {{content}} │░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ ┌──────┐ ┌────────────┐ │░░░░░
|
||||
░░░░░░░░│ │ No │ │ Yes │ │░░░░░
|
||||
░░░░░░░░│ └──────┘ └────────────┘ │░░░░░
|
||||
░░░░░░░░└──────────────────────────┘░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Large Modal (Form/Content)
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ {{title}} │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ {{content}} │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Name: ┌─────────────────────────────────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Enter your name │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────────────────────────────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Email: ┌────────────────────────────────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ your@email.com │ │░░░░░░░░
|
||||
░░░░░░░░│ └────────────────────────────────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌──────────┐ ┌──────────────┐ ┌──────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Cancel │ │ Save │ │ Submit │ │░░░░░░░░
|
||||
░░░░░░░░│ └──────────┘ └──────────────┘ └──────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────────────────────────────┘░░░░░░░░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Fullscreen Modal
|
||||
|
||||
```
|
||||
╔══════════════════════════════════════════════════════════════════════════╗
|
||||
║ {{title}} ✕ ║
|
||||
╠══════════════════════════════════════════════════════════════════════════╣
|
||||
║ ║
|
||||
║ {{content}} ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
║ ║
|
||||
╠══════════════════════════════════════════════════════════════════════════╣
|
||||
║ ┌──────────┐ ┌──────────┐ ║
|
||||
║ │ Cancel │ │ OK │ ║
|
||||
║ └──────────┘ └──────────┘ ║
|
||||
╚══════════════════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
## Modal Variants
|
||||
|
||||
### Warning Modal
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ ⚠ Warning │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ This action cannot be undone. │░░░░░░░░
|
||||
░░░░░░░░│ Are you sure you want to │░░░░░░░░
|
||||
░░░░░░░░│ continue? │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────┐ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Cancel │ │ Delete │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────┘ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
### Error Modal
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ ✗ Error │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ An error occurred while │░░░░░░░░
|
||||
░░░░░░░░│ processing your request. │░░░░░░░░
|
||||
░░░░░░░░│ Please try again later. │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ OK │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
### Success Modal
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ ✓ Success │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Your changes have been saved │░░░░░░░░
|
||||
░░░░░░░░│ successfully! │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ Continue │ │░░░░░░░░
|
||||
░░░░░░░░│ └─────────────┘ │░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
## Modal Without Backdrop
|
||||
|
||||
```
|
||||
┌────────────────────────────────┐
|
||||
│ {{title}} │✕│
|
||||
├────────────────────────────────┤
|
||||
│ │
|
||||
│ {{content}} │
|
||||
│ │
|
||||
│ │
|
||||
├────────────────────────────────┤
|
||||
│ ┌─────────┐ ┌─────────────┐ │
|
||||
│ │ Cancel │ │ Confirm │ │
|
||||
│ └─────────┘ └─────────────┘ │
|
||||
└────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Modal with Custom Content
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░░░░░░░░┌────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ Image Gallery │✕│░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ ┌────────────────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ IMAGE_CONTENT │ │░░░░░░░░
|
||||
░░░░░░░░│ │ [PHOTO] │ │░░░░░░░░
|
||||
░░░░░░░░│ │ │ │░░░░░░░░
|
||||
░░░░░░░░│ └────────────────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Photo 1 of 5 │░░░░░░░░
|
||||
░░░░░░░░├────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────┐ ┌─────┐ ┌─────────────┐│░░░░░░░░
|
||||
░░░░░░░░│ │ Prev│ │Next │ │ Close ││░░░░░░░░
|
||||
░░░░░░░░│ └─────┘ └─────┘ └─────────────┘│░░░░░░░░
|
||||
░░░░░░░░└────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Small**: 30×15 characters
|
||||
- **Medium**: 50×20 characters (default)
|
||||
- **Large**: 70×30 characters
|
||||
- **Fullscreen**: Full viewport dimensions
|
||||
- **Custom**: Configurable width/height
|
||||
|
||||
## Variables
|
||||
|
||||
- `title` (string): Modal header title (max 60 characters)
|
||||
- `content` (string, required): Main modal content (max 500 characters)
|
||||
- `size` (string): Modal size ("small", "medium", "large", "fullscreen")
|
||||
- `buttons` (array): Action buttons with text, variant, and action
|
||||
- `showCloseButton` (boolean): Show X button in header (default: true)
|
||||
- `backdrop` (boolean): Show backdrop overlay (default: true)
|
||||
- `variant` (string): Style variant ("default", "warning", "error", "success", "info")
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: dialog
|
||||
- **Focus Management**:
|
||||
- Trap focus within modal
|
||||
- Return focus to trigger element on close
|
||||
- Initial focus on first button or specified element
|
||||
- **Keyboard Support**:
|
||||
- Escape: Close modal (if closable)
|
||||
- Tab/Shift+Tab: Navigate within modal
|
||||
- Enter: Activate focused button
|
||||
- **ARIA**:
|
||||
- `aria-labelledby`: References title element
|
||||
- `aria-describedby`: References content element
|
||||
- `aria-modal`: "true"
|
||||
- `aria-hidden`: "true" on background content when modal open
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Confirmation Dialog
|
||||
```
|
||||
░░░░░░░░┌──────────────────────────┐░░░░░
|
||||
░░░░░░░░│ Delete Item │✕│░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ Are you sure you want to │░░░░░
|
||||
░░░░░░░░│ delete this item? This │░░░░░
|
||||
░░░░░░░░│ action cannot be undone. │░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ ┌──────┐ ┌────────────┐ │░░░░░
|
||||
░░░░░░░░│ │Cancel│ │ Delete │ │░░░░░
|
||||
░░░░░░░░│ └──────┘ └────────────┘ │░░░░░
|
||||
░░░░░░░░└──────────────────────────┘░░░░░
|
||||
```
|
||||
|
||||
### Loading Modal
|
||||
```
|
||||
░░░░░░░░┌──────────────────────────┐░░░░░
|
||||
░░░░░░░░│ Processing... │░│░░░░░
|
||||
░░░░░░░░├──────────────────────────┤░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ Please wait while we │░░░░░
|
||||
░░░░░░░░│ process your request... │░░░░░
|
||||
░░░░░░░░│ │░░░░░
|
||||
░░░░░░░░│ ████████████████░░░░ 80% │░░░░░
|
||||
░░░░░░░░└──────────────────────────┘░░░░░
|
||||
```
|
||||
|
||||
### Settings Modal
|
||||
```
|
||||
░░░░░░░░┌──────────────────────────────────┐░░░░░░░░
|
||||
░░░░░░░░│ Preferences │✕│░░░░░░░░
|
||||
░░░░░░░░├──────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ ☑ Enable notifications │░░░░░░░░
|
||||
░░░░░░░░│ ☐ Auto-save changes │░░░░░░░░
|
||||
░░░░░░░░│ ☑ Dark mode │░░░░░░░░
|
||||
░░░░░░░░│ │░░░░░░░░
|
||||
░░░░░░░░│ Language: ┌───────────────────┐ │░░░░░░░░
|
||||
░░░░░░░░│ │ English ▼│ │░░░░░░░░
|
||||
░░░░░░░░│ └───────────────────┘ │░░░░░░░░
|
||||
░░░░░░░░├──────────────────────────────────┤░░░░░░░░
|
||||
░░░░░░░░│ ┌─────────┐ ┌─────────────────┐│░░░░░░░░
|
||||
░░░░░░░░│ │ Cancel │ │ Save ││░░░░░░░░
|
||||
░░░░░░░░│ └─────────┘ └─────────────────┘│░░░░░░░░
|
||||
░░░░░░░░└──────────────────────────────────┘░░░░░░░░
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Modal Lifecycle
|
||||
|
||||
1. **Trigger**: User action opens modal
|
||||
2. **Opening**: Modal animates into view
|
||||
3. **Open**: Modal fully visible and interactive
|
||||
4. **Interaction**: User interacts with modal content
|
||||
5. **Closing**: Modal closes via button, escape, or backdrop
|
||||
6. **Closed**: Modal hidden, focus restored
|
||||
|
||||
### Focus Management
|
||||
|
||||
- **Focus Trap**: Tab navigation stays within modal
|
||||
- **Initial Focus**: First focusable element (usually close button)
|
||||
- **Focus Restoration**: Return to trigger element on close
|
||||
- **Focus Indicators**: Clear visual feedback for keyboard users
|
||||
|
||||
### Backdrop Behavior
|
||||
|
||||
- **Backdrop Click**: Close modal if `backdropClosable` is true
|
||||
- **Backdrop Scroll**: Prevent page scrolling when modal open
|
||||
- **Multiple Modals**: Handle stacking and z-index management
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `░` = Backdrop overlay (semi-transparent)
|
||||
- `┌─┐└┘─│` = Modal border and dividers
|
||||
- `╔═╗╚╝═║` = Fullscreen modal borders
|
||||
- `✕` = Close button icon
|
||||
- `⚠✗✓` = Status icons for variants
|
||||
|
||||
### Spacing
|
||||
- **Padding**: 2-3 characters internal spacing
|
||||
- **Margins**: Centered positioning with backdrop
|
||||
- **Button Spacing**: 2-3 characters between buttons
|
||||
- **Content Spacing**: 1-2 lines between sections
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Popup**: Smaller, contextual overlays
|
||||
- **Tooltip**: Informational overlays
|
||||
- **Dropdown**: Menu-style overlays
|
||||
- **Sidebar**: Panel-style content areas
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates modal overlay patterns. When implementing:
|
||||
|
||||
1. **Focus Management**: Robust focus trapping and restoration
|
||||
2. **Backdrop Management**: Proper event handling and scroll prevention
|
||||
3. **Animation**: Smooth open/close transitions
|
||||
4. **Mobile Adaptation**: Responsive sizing and touch interactions
|
||||
5. **Performance**: Efficient rendering and memory management
|
||||
6. **Accessibility**: Full screen reader and keyboard support
|
||||
|
||||
## Variants
|
||||
|
||||
- **Alert Dialog**: Simple message with OK button
|
||||
- **Confirmation Dialog**: Yes/No or Cancel/Confirm actions
|
||||
- **Form Modal**: Data input and submission
|
||||
- **Content Modal**: Rich content display (images, videos, etc.)
|
||||
- **Loading Modal**: Progress indication during operations
|
||||
207
skills/fluxwing-component-creator/templates/modal.uxm
Normal file
207
skills/fluxwing-component-creator/templates/modal.uxm
Normal file
@@ -0,0 +1,207 @@
|
||||
{
|
||||
"id": "modal",
|
||||
"type": "modal",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Modal Dialog",
|
||||
"description": "Modal dialog overlay with focus management, backdrop, and configurable content areas",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["modal", "dialog", "overlay", "popup"],
|
||||
"category": "overlay",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"title": "Confirm Action",
|
||||
"content": "Are you sure you want to proceed with this action?",
|
||||
"size": "medium",
|
||||
"showCloseButton": true,
|
||||
"closable": true,
|
||||
"backdrop": true,
|
||||
"backdropClosable": true,
|
||||
"centered": true,
|
||||
"buttons": [
|
||||
{
|
||||
"text": "Cancel",
|
||||
"variant": "secondary",
|
||||
"action": "close"
|
||||
},
|
||||
{
|
||||
"text": "Confirm",
|
||||
"variant": "primary",
|
||||
"action": "confirm"
|
||||
}
|
||||
],
|
||||
"icon": "",
|
||||
"variant": "default"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "closed",
|
||||
"properties": {
|
||||
"visible": false,
|
||||
"zIndex": -1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "opening",
|
||||
"properties": {
|
||||
"visible": true,
|
||||
"zIndex": 1000,
|
||||
"opacity": 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "open",
|
||||
"properties": {
|
||||
"visible": true,
|
||||
"zIndex": 1000,
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "closing",
|
||||
"properties": {
|
||||
"visible": true,
|
||||
"zIndex": 1000,
|
||||
"opacity": 0.5
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "close-modal",
|
||||
"condition": "backdrop && backdropClosable"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "close-modal",
|
||||
"condition": "key === 'Escape' && closable"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "cycle-focus",
|
||||
"condition": "key === 'Tab'"
|
||||
},
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "button-action",
|
||||
"condition": "target.type === 'button'"
|
||||
}
|
||||
],
|
||||
"focusManagement": {
|
||||
"trapFocus": true,
|
||||
"restoreFocus": true,
|
||||
"initialFocus": "first-button",
|
||||
"focusableElements": ["button", "input", "select", "textarea"]
|
||||
},
|
||||
"accessibility": {
|
||||
"role": "dialog",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Escape", "Tab", "Shift+Tab", "Enter"],
|
||||
"ariaLabel": "{{title}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "overlay",
|
||||
"positioning": "fixed",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 2,
|
||||
"right": 3,
|
||||
"bottom": 2,
|
||||
"left": 3
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"small": {
|
||||
"width": 30,
|
||||
"height": 15
|
||||
},
|
||||
"medium": {
|
||||
"width": 50,
|
||||
"height": 20
|
||||
},
|
||||
"large": {
|
||||
"width": 70,
|
||||
"height": 30
|
||||
},
|
||||
"fullscreen": {
|
||||
"width": "100vw",
|
||||
"height": "100vh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "modal.md",
|
||||
"width": 50,
|
||||
"height": 20,
|
||||
"variables": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "string",
|
||||
"defaultValue": "Confirm Action",
|
||||
"description": "Modal dialog title/header text",
|
||||
"required": false,
|
||||
"validation": {
|
||||
"max": 60
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "content",
|
||||
"type": "string",
|
||||
"defaultValue": "Are you sure you want to proceed?",
|
||||
"description": "Main content/message text",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"max": 500
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"defaultValue": "medium",
|
||||
"description": "Modal size variant",
|
||||
"validation": {
|
||||
"enum": ["small", "medium", "large", "fullscreen"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "buttons",
|
||||
"type": "array",
|
||||
"defaultValue": [
|
||||
{"text": "Cancel", "variant": "secondary", "action": "close"},
|
||||
{"text": "Confirm", "variant": "primary", "action": "confirm"}
|
||||
],
|
||||
"description": "Modal action buttons",
|
||||
"validation": {
|
||||
"max": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "showCloseButton",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Show X close button in header"
|
||||
},
|
||||
{
|
||||
"name": "backdrop",
|
||||
"type": "boolean",
|
||||
"defaultValue": true,
|
||||
"description": "Show backdrop overlay behind modal"
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
"type": "string",
|
||||
"defaultValue": "default",
|
||||
"description": "Modal style variant",
|
||||
"validation": {
|
||||
"enum": ["default", "warning", "error", "success", "info"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
199
skills/fluxwing-component-creator/templates/navigation.md
Normal file
199
skills/fluxwing-component-creator/templates/navigation.md
Normal file
@@ -0,0 +1,199 @@
|
||||
# Navigation Component
|
||||
|
||||
A horizontal or vertical navigation component with active state management and keyboard support.
|
||||
|
||||
## Horizontal Navigation (Default)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ [*] {{items[0].label}} {{separator}} {{items[1].label}} {{separator}} {{items[2].label}} │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Vertical Navigation
|
||||
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ [*] {{items[0].label}} │
|
||||
│ {{items[1].label}} │
|
||||
│ {{items[2].label}} │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
## Active State Indicator
|
||||
|
||||
Active items are marked with the `{{activeIndicator}}` symbol:
|
||||
|
||||
### Horizontal Active Example
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ [*] Home {{separator}} About {{separator}} Contact │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Vertical Active Example
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ [*] Home │
|
||||
│ About │
|
||||
│ Contact │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
## Hover State
|
||||
|
||||
Items show visual emphasis when hovered:
|
||||
|
||||
### Horizontal Hover
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ [*] Home {{separator}} ▓About▓ {{separator}} Contact │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Vertical Hover
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ [*] Home │
|
||||
│ ▓▓▓ About ▓▓▓ │
|
||||
│ Contact │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
## Compact Horizontal Layout
|
||||
|
||||
```
|
||||
[*] Home | About | Contact
|
||||
```
|
||||
|
||||
## Breadcrumb Style
|
||||
|
||||
```
|
||||
Home > Category > {{items[2].label}}
|
||||
```
|
||||
|
||||
## Tab Style Navigation
|
||||
|
||||
```
|
||||
┌─────┐ ┌─────┐ ┌─────┐
|
||||
│ Home│ │About│ │Help │
|
||||
├─────┘ └─────┘ └─────┤
|
||||
│ │
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- **Horizontal**: Width adjusts to content, height 3 characters
|
||||
- **Vertical**: Width adjusts to longest item, height scales with item count
|
||||
- **Compact**: Single line, width adjusts to content
|
||||
|
||||
## Variables
|
||||
|
||||
- `items` (array, required): Navigation items with label, href, and active properties
|
||||
- Each item: `{label: string, href: string, active: boolean}`
|
||||
- Min: 1 item, Max: 10 items
|
||||
- `orientation` (string): "horizontal" or "vertical" (default: "horizontal")
|
||||
- `separator` (string): Character(s) between horizontal items (default: " | ")
|
||||
- `activeIndicator` (string): Symbol marking active item (default: "[*]")
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: navigation
|
||||
- **Focusable**: Yes, each navigation item is focusable
|
||||
- **Keyboard Support**:
|
||||
- Arrow Keys: Navigate between items
|
||||
- Enter/Space: Activate navigation item
|
||||
- Tab: Move to next focusable element
|
||||
- **ARIA**:
|
||||
- `aria-label`: "Main navigation" or custom label
|
||||
- `aria-current`: "page" for active navigation item
|
||||
- `role="navigation"` on container
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Three-Item Menu
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ [*] Dashboard | Products | Settings │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Sidebar Navigation
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ [*] Dashboard │
|
||||
│ Products │
|
||||
│ Orders │
|
||||
│ Customers │
|
||||
│ Settings │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
### Header Navigation with Icons
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ [*] 🏠 Home | 📋 About | 📞 Contact | 🔧 Settings │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### Navigation Flow
|
||||
|
||||
1. **Item Selection**: Click or Enter/Space activates navigation
|
||||
2. **Active State**: Only one item can be active at a time
|
||||
3. **Focus Management**: Arrow keys move focus between items
|
||||
4. **URL Updates**: Navigation typically updates browser URL
|
||||
|
||||
### Keyboard Navigation
|
||||
|
||||
- **Horizontal**: Left/Right arrows move between items
|
||||
- **Vertical**: Up/Down arrows move between items
|
||||
- **Enter/Space**: Activate current focused item
|
||||
- **Tab**: Exit navigation to next focusable element
|
||||
|
||||
### State Management
|
||||
|
||||
- **Active Item**: Visually distinct with indicator
|
||||
- **Hover State**: Temporary emphasis on mouse over
|
||||
- **Focus State**: Keyboard navigation indicator
|
||||
- **Disabled Items**: Optional grayed-out non-interactive items
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Visual Elements
|
||||
- `┌─┐└┘─│` = Border characters for containers
|
||||
- `▓` = Hover/emphasis background
|
||||
- `[*]` = Default active indicator (customizable)
|
||||
- `|` = Default separator (customizable)
|
||||
|
||||
### Spacing
|
||||
- Internal padding: 1 character around content
|
||||
- Item spacing: Determined by separator in horizontal mode
|
||||
- Vertical spacing: 1 line between items in vertical mode
|
||||
|
||||
## Related Components
|
||||
|
||||
- **Breadcrumb**: Linear navigation showing hierarchy
|
||||
- **Tab Navigation**: Content switching interface
|
||||
- **Menu**: Dropdown or popup navigation
|
||||
- **Sidebar**: Persistent vertical navigation panel
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates navigation patterns. When implementing:
|
||||
|
||||
1. **Active State Management**: Ensure only one item is active
|
||||
2. **Keyboard Accessibility**: Full arrow key navigation support
|
||||
3. **Focus Indicators**: Clear visual feedback for keyboard users
|
||||
4. **Responsive Behavior**: Consider mobile/narrow screen adaptations
|
||||
5. **URL Integration**: Sync with browser history and routing
|
||||
6. **Loading States**: Handle navigation during page transitions
|
||||
|
||||
## Variants
|
||||
|
||||
- **Primary Navigation**: Main site navigation
|
||||
- **Secondary Navigation**: Subsection or category navigation
|
||||
- **Breadcrumb Navigation**: Hierarchical path display
|
||||
- **Tab Navigation**: Content area switching
|
||||
- **Pagination**: Numeric page navigation
|
||||
163
skills/fluxwing-component-creator/templates/navigation.uxm
Normal file
163
skills/fluxwing-component-creator/templates/navigation.uxm
Normal file
@@ -0,0 +1,163 @@
|
||||
{
|
||||
"id": "navigation",
|
||||
"type": "navigation",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Navigation Menu",
|
||||
"description": "A horizontal or vertical navigation component with active state management",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["navigation", "menu", "nav"],
|
||||
"category": "navigation",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"items": [
|
||||
{
|
||||
"label": "Home",
|
||||
"href": "/",
|
||||
"active": true
|
||||
},
|
||||
{
|
||||
"label": "About",
|
||||
"href": "/about",
|
||||
"active": false
|
||||
},
|
||||
{
|
||||
"label": "Contact",
|
||||
"href": "/contact",
|
||||
"active": false
|
||||
}
|
||||
],
|
||||
"orientation": "horizontal",
|
||||
"variant": "default",
|
||||
"separator": " | ",
|
||||
"activeIndicator": "[*]"
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"textColor": "default",
|
||||
"background": "transparent"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "active",
|
||||
"properties": {
|
||||
"textColor": "primary",
|
||||
"background": "primary-light",
|
||||
"fontWeight": "bold"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"textColor": "primary-dark",
|
||||
"background": "gray-light"
|
||||
},
|
||||
"triggers": ["mouseenter"]
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "navigate",
|
||||
"condition": "item.href"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "navigate-next",
|
||||
"condition": "key === 'ArrowRight' && orientation === 'horizontal'"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "navigate-previous",
|
||||
"condition": "key === 'ArrowLeft' && orientation === 'horizontal'"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "navigate-next",
|
||||
"condition": "key === 'ArrowDown' && orientation === 'vertical'"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "navigate-previous",
|
||||
"condition": "key === 'ArrowUp' && orientation === 'vertical'"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "navigation",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Enter", "Space"],
|
||||
"ariaLabel": "Main navigation"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 1,
|
||||
"right": 1,
|
||||
"bottom": 1,
|
||||
"left": 1
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 20,
|
||||
"height": "auto"
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "navigation.md",
|
||||
"width": 60,
|
||||
"height": 3,
|
||||
"variables": [
|
||||
{
|
||||
"name": "items",
|
||||
"type": "array",
|
||||
"defaultValue": [
|
||||
{"label": "Home", "href": "/", "active": true},
|
||||
{"label": "About", "href": "/about", "active": false},
|
||||
{"label": "Contact", "href": "/contact", "active": false}
|
||||
],
|
||||
"description": "Navigation menu items with labels, links, and active states",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"min": 1,
|
||||
"max": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "orientation",
|
||||
"type": "string",
|
||||
"defaultValue": "horizontal",
|
||||
"description": "Layout orientation of navigation items",
|
||||
"validation": {
|
||||
"enum": ["horizontal", "vertical"]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "separator",
|
||||
"type": "string",
|
||||
"defaultValue": " | ",
|
||||
"description": "Separator between navigation items (horizontal only)",
|
||||
"validation": {
|
||||
"max": 5
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "activeIndicator",
|
||||
"type": "string",
|
||||
"defaultValue": "[*]",
|
||||
"description": "Visual indicator for active navigation item",
|
||||
"validation": {
|
||||
"max": 10
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
131
skills/fluxwing-component-creator/templates/primary-button.md
Normal file
131
skills/fluxwing-component-creator/templates/primary-button.md
Normal file
@@ -0,0 +1,131 @@
|
||||
# Primary Button Component
|
||||
|
||||
A primary action button with emphasis styling for main user actions.
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ {{text}} ▓
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
## Hover State
|
||||
|
||||
```
|
||||
████████████████
|
||||
█ {{text}} █
|
||||
████████████████
|
||||
```
|
||||
|
||||
## Active/Pressed State
|
||||
|
||||
```
|
||||
░▓▓▓▓▓▓▓▓▓▓▓▓▓▓░
|
||||
░▓ {{text}} ▓░
|
||||
░▓▓▓▓▓▓▓▓▓▓▓▓▓▓░
|
||||
```
|
||||
|
||||
## Disabled State
|
||||
|
||||
```
|
||||
┌ ─ ─ ─ ─ ─ ─ ─┐
|
||||
│ {{text}} │
|
||||
└ ─ ─ ─ ─ ─ ─ ─┘
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- Width: {{width}} characters (configurable, min 8, max 40)
|
||||
- Height: 3 characters (fixed)
|
||||
- Text alignment: center
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): Button label text (max 20 characters)
|
||||
- `width` (number): Button width in characters (8-40, default 16)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: button
|
||||
- **Focusable**: Yes
|
||||
- **Keyboard Support**:
|
||||
- Enter: Activates button
|
||||
- Space: Activates button
|
||||
- **ARIA**:
|
||||
- `aria-label`: Uses `text` value or custom `ariaLabel` prop
|
||||
- `aria-disabled`: Set to "true" when disabled
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Save ▓
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Compact Button
|
||||
```
|
||||
▓▓▓▓▓▓▓▓
|
||||
▓ OK ▓
|
||||
▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Wide Button
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Create Account ▓
|
||||
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### State Transitions
|
||||
|
||||
1. **Default → Hover**: Mouse enters button area
|
||||
2. **Hover → Active**: Mouse button pressed down
|
||||
3. **Active → Default**: Mouse button released
|
||||
4. **Any → Disabled**: Component disabled property set to true
|
||||
|
||||
### Click Handling
|
||||
|
||||
The button emits a click event when:
|
||||
- Mouse click occurs
|
||||
- Enter key pressed while focused
|
||||
- Space key pressed while focused
|
||||
|
||||
### Focus Management
|
||||
|
||||
- Button receives focus via Tab navigation
|
||||
- Focus visible indicator shown when keyboard navigated
|
||||
- Focus moves to next focusable element on Tab
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Colors (represented by patterns)
|
||||
- `▓` = Primary background color
|
||||
- `█` = Primary hover color
|
||||
- `░` = Shadow/pressed effect
|
||||
- `─` = Disabled border style
|
||||
|
||||
### Spacing
|
||||
- Internal padding: 1 character top/bottom, 2 characters left/right
|
||||
- Minimum touch target: 8×3 characters
|
||||
- Recommended spacing between buttons: 2 characters
|
||||
|
||||
## Related Components
|
||||
|
||||
- Secondary Button: Outline style variant
|
||||
- Icon Button: Button with icon instead of text
|
||||
- Button Group: Multiple buttons grouped together
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates the visual hierarchy and interaction states. When implementing in actual UI frameworks:
|
||||
|
||||
1. Map the `▓` pattern to the primary brand color
|
||||
2. Ensure proper contrast ratios for accessibility
|
||||
3. Implement smooth hover transitions
|
||||
4. Add appropriate ripple/click effects
|
||||
5. Support all specified keyboard interactions
|
||||
120
skills/fluxwing-component-creator/templates/primary-button.uxm
Normal file
120
skills/fluxwing-component-creator/templates/primary-button.uxm
Normal file
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"id": "primary-button",
|
||||
"type": "button",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Primary Button",
|
||||
"description": "A primary action button with emphasis styling for main user actions",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-01T00:00:00Z",
|
||||
"modified": "2024-01-01T00:00:00Z",
|
||||
"tags": ["button", "primary", "action"],
|
||||
"category": "input",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"text": "Button",
|
||||
"disabled": false,
|
||||
"size": "medium",
|
||||
"fullWidth": false,
|
||||
"ariaLabel": ""
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"background": "primary",
|
||||
"textColor": "white",
|
||||
"border": "solid"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"background": "primary-dark",
|
||||
"textColor": "white",
|
||||
"border": "solid"
|
||||
},
|
||||
"triggers": ["mouseenter"]
|
||||
},
|
||||
{
|
||||
"name": "active",
|
||||
"properties": {
|
||||
"background": "primary-darker",
|
||||
"textColor": "white",
|
||||
"border": "inset"
|
||||
},
|
||||
"triggers": ["mousedown"]
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"background": "gray-light",
|
||||
"textColor": "gray-dark",
|
||||
"border": "dashed"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "emit-click-event"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "emit-click-event",
|
||||
"condition": "key === 'Enter' || key === ' '"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "button",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Enter", "Space"],
|
||||
"ariaLabel": "{{ariaLabel || text}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "inline-block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 1,
|
||||
"right": 2,
|
||||
"bottom": 1,
|
||||
"left": 2
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 8,
|
||||
"height": 3
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "primary-button.md",
|
||||
"width": 16,
|
||||
"height": 3,
|
||||
"variables": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"defaultValue": "Button",
|
||||
"description": "The text displayed on the button",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"max": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "width",
|
||||
"type": "number",
|
||||
"defaultValue": 16,
|
||||
"description": "Button width in characters",
|
||||
"validation": {
|
||||
"min": 8,
|
||||
"max": 40
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
139
skills/fluxwing-component-creator/templates/secondary-button.md
Normal file
139
skills/fluxwing-component-creator/templates/secondary-button.md
Normal file
@@ -0,0 +1,139 @@
|
||||
# Secondary Button Component
|
||||
|
||||
A secondary action button with subtle styling for less prominent actions.
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
░░░░░░░░░░░░░░░░
|
||||
░ {{text}} ░
|
||||
░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Hover State
|
||||
|
||||
```
|
||||
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
|
||||
▒ {{text}} ▒
|
||||
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
|
||||
```
|
||||
|
||||
## Active/Pressed State
|
||||
|
||||
```
|
||||
████████████████
|
||||
█ {{text}} █
|
||||
████████████████
|
||||
```
|
||||
|
||||
## Disabled State
|
||||
|
||||
```
|
||||
┌ ─ ─ ─ ─ ─ ─ ─┐
|
||||
│ {{text}} │
|
||||
└ ─ ─ ─ ─ ─ ─ ─┘
|
||||
```
|
||||
|
||||
## Dimensions
|
||||
|
||||
- Width: {{width}} characters (configurable, min 8, max 40)
|
||||
- Height: 3 characters (fixed)
|
||||
- Text alignment: center
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): Button label text (max 20 characters)
|
||||
- `width` (number): Button width in characters (8-40, default 16)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: button
|
||||
- **Focusable**: Yes
|
||||
- **Keyboard Support**:
|
||||
- Enter: Activates button
|
||||
- Space: Activates button
|
||||
- **ARIA**:
|
||||
- `aria-label`: Uses `text` value or custom `ariaLabel` prop
|
||||
- `aria-disabled`: Set to "true" when disabled
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
```
|
||||
░░░░░░░░░░░░░░░░
|
||||
░ Cancel ░
|
||||
░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
### Compact Button
|
||||
```
|
||||
░░░░░░░░
|
||||
░ No ░
|
||||
░░░░░░░░
|
||||
```
|
||||
|
||||
### Wide Button
|
||||
```
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
░ Learn More ░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░
|
||||
```
|
||||
|
||||
## Component Behavior
|
||||
|
||||
### State Transitions
|
||||
|
||||
1. **Default → Hover**: Mouse enters button area
|
||||
2. **Hover → Active**: Mouse button pressed down
|
||||
3. **Active → Default**: Mouse button released
|
||||
4. **Any → Disabled**: Component disabled property set to true
|
||||
|
||||
### Click Handling
|
||||
|
||||
The button emits a click event when:
|
||||
- Mouse click occurs
|
||||
- Enter key pressed while focused
|
||||
- Space key pressed while focused
|
||||
|
||||
### Focus Management
|
||||
|
||||
- Button receives focus via Tab navigation
|
||||
- Focus visible indicator shown when keyboard navigated
|
||||
- Focus moves to next focusable element on Tab
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### Colors (represented by patterns)
|
||||
- `░` = Light gray background color
|
||||
- `▒` = Medium gray hover color
|
||||
- `█` = Dark gray pressed effect
|
||||
- `─` = Disabled border style
|
||||
|
||||
### Spacing
|
||||
- Internal padding: 1 character top/bottom, 2 characters left/right
|
||||
- Minimum touch target: 8×3 characters
|
||||
- Recommended spacing between buttons: 2 characters
|
||||
|
||||
## Related Components
|
||||
|
||||
- Primary Button: High emphasis style variant
|
||||
- Outline Button: Border-only style variant
|
||||
- Button Group: Multiple buttons grouped together
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
This ASCII representation demonstrates a subtle visual hierarchy. When implementing in actual UI frameworks:
|
||||
|
||||
1. Map the `░` pattern to a light gray background
|
||||
2. Ensure sufficient contrast ratios for accessibility
|
||||
3. Implement smooth hover transitions
|
||||
4. Add appropriate visual feedback for interactions
|
||||
5. Support all specified keyboard interactions
|
||||
|
||||
## Usage Guidelines
|
||||
|
||||
Secondary buttons are ideal for:
|
||||
- Cancel or dismiss actions
|
||||
- Less important navigation
|
||||
- Actions that complement a primary action
|
||||
- Secondary paths in user workflows
|
||||
120
skills/fluxwing-component-creator/templates/secondary-button.uxm
Normal file
120
skills/fluxwing-component-creator/templates/secondary-button.uxm
Normal file
@@ -0,0 +1,120 @@
|
||||
{
|
||||
"id": "secondary-button",
|
||||
"type": "button",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Secondary Button",
|
||||
"description": "A secondary action button with subtle styling for less prominent actions",
|
||||
"author": "UXscii Team",
|
||||
"created": "2024-01-15T00:00:00Z",
|
||||
"modified": "2024-01-15T00:00:00Z",
|
||||
"tags": ["button", "secondary", "action"],
|
||||
"category": "input",
|
||||
"fidelity": "detailed"
|
||||
},
|
||||
"props": {
|
||||
"text": "Button",
|
||||
"disabled": false,
|
||||
"size": "medium",
|
||||
"fullWidth": false,
|
||||
"ariaLabel": ""
|
||||
},
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"background": "gray-light",
|
||||
"textColor": "gray-dark",
|
||||
"border": "solid"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"background": "gray-medium",
|
||||
"textColor": "gray-darker",
|
||||
"border": "solid"
|
||||
},
|
||||
"triggers": ["mouseenter"]
|
||||
},
|
||||
{
|
||||
"name": "active",
|
||||
"properties": {
|
||||
"background": "gray-dark",
|
||||
"textColor": "white",
|
||||
"border": "inset"
|
||||
},
|
||||
"triggers": ["mousedown"]
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"background": "gray-lighter",
|
||||
"textColor": "gray-light",
|
||||
"border": "dashed"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "emit-click-event"
|
||||
},
|
||||
{
|
||||
"trigger": "keydown",
|
||||
"action": "emit-click-event",
|
||||
"condition": "key === 'Enter' || key === ' '"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "button",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Enter", "Space"],
|
||||
"ariaLabel": "{{ariaLabel || text}}"
|
||||
}
|
||||
},
|
||||
"layout": {
|
||||
"display": "inline-block",
|
||||
"positioning": "static",
|
||||
"spacing": {
|
||||
"padding": {
|
||||
"top": 1,
|
||||
"right": 2,
|
||||
"bottom": 1,
|
||||
"left": 2
|
||||
}
|
||||
},
|
||||
"sizing": {
|
||||
"minWidth": 8,
|
||||
"height": 3
|
||||
}
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "secondary-button.md",
|
||||
"width": 16,
|
||||
"height": 3,
|
||||
"variables": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"defaultValue": "Button",
|
||||
"description": "The text displayed on the button",
|
||||
"required": true,
|
||||
"validation": {
|
||||
"max": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "width",
|
||||
"type": "number",
|
||||
"defaultValue": 16,
|
||||
"description": "Button width in characters",
|
||||
"validation": {
|
||||
"min": 8,
|
||||
"max": 40
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "disabled",
|
||||
"properties": {
|
||||
"opacity": 0.5,
|
||||
"cursor": "not-allowed",
|
||||
"interactive": false,
|
||||
"asciiModifier": "grayed-out"
|
||||
},
|
||||
"description": "Component is not interactive or available"
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "error",
|
||||
"properties": {
|
||||
"borderColor": "#cc0000",
|
||||
"backgroundColor": "#fff0f0",
|
||||
"showErrorMessage": true,
|
||||
"asciiModifier": "error-border"
|
||||
},
|
||||
"description": "Component has invalid input or error condition"
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "focus",
|
||||
"properties": {
|
||||
"outline": "2px solid #0066cc",
|
||||
"backgroundColor": "#f0f8ff",
|
||||
"asciiModifier": "focus-ring"
|
||||
},
|
||||
"description": "Visual indicator when component has keyboard focus"
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"backgroundColor": "#e0e0e0",
|
||||
"cursor": "pointer",
|
||||
"asciiModifier": "bold"
|
||||
},
|
||||
"description": "Visual feedback when user hovers over component"
|
||||
}
|
||||
Reference in New Issue
Block a user