Initial commit
This commit is contained in:
Zhongwei Li
742
skills/fluxwing-component-creator/SKILL.md
Normal file
742
skills/fluxwing-component-creator/SKILL.md
Normal file
@@ -0,0 +1,742 @@
|
||||
---
|
||||
name: Fluxwing Component Creator
|
||||
description: Create uxscii components with ASCII art and structured metadata when user wants to create, build, or design UI components. Use when working with .uxm files, when user mentions .uxm components, or when creating buttons, inputs, cards, forms, modals, or navigation.
|
||||
version: 0.0.1
|
||||
author: Trabian
|
||||
allowed-tools: Read, Write, Edit, Glob, Grep, Task, TodoWrite, Bash
|
||||
---
|
||||
|
||||
# Fluxwing Component Creator
|
||||
|
||||
You are helping the user create uxscii component(s) using the **uxscii standard** by orchestrating the designer agent.
|
||||
|
||||
## Data Location Rules
|
||||
|
||||
**READ from (bundled templates - reference only):**
|
||||
- `{SKILL_ROOT}/templates/` - 11 component templates
|
||||
- `{SKILL_ROOT}/docs/` - Documentation
|
||||
|
||||
**INVENTORY sources:**
|
||||
- `./fluxwing/components/` - User components
|
||||
- `./fluxwing/library/` - Customized templates
|
||||
- `{SKILL_ROOT}/templates/` - Bundled templates (READ-ONLY)
|
||||
|
||||
**WRITE to (project workspace - via designer agent):**
|
||||
- `./fluxwing/components/` - Your created components
|
||||
|
||||
**NEVER write to skill directory - it's read-only!**
|
||||
|
||||
**LOAD for copy-on-update logic:**
|
||||
- `{SKILL_ROOT}/../shared/docs/copy-versioning.md` - Versioning pattern for existing components
|
||||
|
||||
## Your Task
|
||||
|
||||
Help the user create uxscii component(s) by gathering requirements and spawning designer agent(s).
|
||||
|
||||
**Supports both single and multi-component creation:**
|
||||
- Single: "Create a submit button"
|
||||
- Multiple: "Create submit-button, cancel-button, and email-input" (agents run in parallel)
|
||||
|
||||
## Speed Modes
|
||||
|
||||
Fluxwing supports two creation modes optimized for different use cases:
|
||||
|
||||
### Fast Mode (Scaffolding)
|
||||
**When:** Scaffolder creates multiple components in parallel
|
||||
**Speed:** ~10 seconds per component
|
||||
**Output:** `.uxm` only (fidelity: sketch)
|
||||
**Method:** Template-based variable substitution
|
||||
|
||||
Fast mode skips:
|
||||
- Documentation loading
|
||||
- ASCII art generation
|
||||
- Detailed metadata
|
||||
|
||||
### Detailed Mode (Standalone)
|
||||
**When:** User explicitly creates single component
|
||||
**Speed:** ~60-90 seconds per component
|
||||
**Output:** `.uxm` + `.md` (fidelity: detailed)
|
||||
**Method:** Full docs, careful ASCII generation
|
||||
|
||||
Detailed mode includes:
|
||||
- Complete documentation reference
|
||||
- Hand-crafted ASCII art
|
||||
- Rich metadata with examples
|
||||
|
||||
**Default:** Fast mode when called by scaffolder, detailed mode otherwise
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Determine Creation Mode & Parse Request
|
||||
|
||||
**First, determine creation mode:**
|
||||
|
||||
Check context to decide fast vs detailed mode:
|
||||
|
||||
**Use Fast Mode if:**
|
||||
- Called by scaffolder skill (check for "screen context" in request)
|
||||
- User explicitly requests "fast" or "quick" component
|
||||
- Creating multiple components (6+ components)
|
||||
|
||||
**Use Detailed Mode if:**
|
||||
- User creating single component interactively
|
||||
- User requests "detailed" or "production" quality
|
||||
- No screen context provided
|
||||
|
||||
**Default:** Detailed mode (safer, better quality)
|
||||
|
||||
**Then, detect if user wants single or multiple components:**
|
||||
|
||||
1. **Single component request**:
|
||||
- "Create a submit button"
|
||||
- "I need a card component"
|
||||
- Proceed with single-component workflow (Steps 2-4)
|
||||
|
||||
2. **Multiple component request**:
|
||||
- "Create submit-button, cancel-button, and email-input"
|
||||
- "I need a button, input, and card"
|
||||
- "Create these components: [list]"
|
||||
- Proceed with multi-component workflow (see Step 3b)
|
||||
|
||||
**For each component, gather:**
|
||||
- **Component name** (will be converted to kebab-case, e.g., "Submit Button" → "submit-button")
|
||||
- **Component type**: button, input, card, navigation, form, list, modal, table, badge, alert, container, text, image, divider, or custom
|
||||
- **Key properties**: What should be configurable? (text, colors, sizes, etc.)
|
||||
- **Visual style preferences**: rounded, sharp, minimal, detailed, etc.
|
||||
|
||||
**If details are missing**: Make reasonable assumptions based on component type and common patterns. Don't over-ask.
|
||||
|
||||
**Note**: Components are created with default state only for fast MVP prototyping. Users can expand components later to add interactive states (hover, focus, disabled, etc.).
|
||||
|
||||
### Step 2: Check for Similar Templates
|
||||
|
||||
Browse available templates to offer starting points:
|
||||
|
||||
```typescript
|
||||
// Check bundled templates
|
||||
const bundledTemplates = glob('{SKILL_ROOT}/templates/*.uxm');
|
||||
// Check user library
|
||||
const libraryTemplates = glob('./fluxwing/library/*.uxm');
|
||||
|
||||
// Suggest similar templates if found
|
||||
if (similarTemplates.length > 0) {
|
||||
console.log(`Similar templates found: ${similarTemplates.join(', ')}`);
|
||||
console.log('Would you like to base this on an existing template or create from scratch?');
|
||||
}
|
||||
```
|
||||
|
||||
### Step 3: Pre-Creation Validation (Check for Existing Component)
|
||||
|
||||
**IMPORTANT**: Before creating any component, check if it already exists to prevent data loss.
|
||||
|
||||
**For each component you plan to create:**
|
||||
|
||||
1. **Convert to kebab-case ID**:
|
||||
```
|
||||
"Submit Button" → "submit-button"
|
||||
"User Profile Card" → "user-profile-card"
|
||||
```
|
||||
|
||||
2. **Check if component exists**:
|
||||
```bash
|
||||
# Check for existing component
|
||||
test -f ./fluxwing/components/{component-id}.uxm
|
||||
```
|
||||
|
||||
3. **If component EXISTS**:
|
||||
|
||||
**Inform user and offer choices**:
|
||||
```
|
||||
Component '{component-id}' already exists (version {current-version}).
|
||||
|
||||
Options:
|
||||
(a) Create new version (copy-on-update: {component-id}-v{N+1})
|
||||
(b) Create with different name
|
||||
(c) Cancel operation
|
||||
|
||||
What would you like to do?
|
||||
```
|
||||
|
||||
**Handle user response**:
|
||||
|
||||
- **Choice (a) - Create new version**:
|
||||
1. Load copy-versioning logic from `{SKILL_ROOT}/../shared/docs/copy-versioning.md`
|
||||
2. Read existing `{component-id}.uxm`
|
||||
3. Find highest version (check for `{component-id}-v2`, `-v3`, etc.)
|
||||
4. Calculate next version: `v{N+1}`
|
||||
5. Pass to designer agent with versioning parameters:
|
||||
- `baseComponentId`: Original ID (e.g., "submit-button")
|
||||
- `newComponentId`: Versioned ID (e.g., "submit-button-v2")
|
||||
- `baseOnExisting`: true
|
||||
- `sourceVersion`: Highest existing version
|
||||
6. Designer creates `{component-id}-v{N+1}.uxm` and `.md`
|
||||
7. Metadata: Increment minor version (1.0.0 → 1.1.0), update modified, preserve created
|
||||
|
||||
- **Choice (b) - Different name**:
|
||||
1. Ask: "What would you like to name this component?"
|
||||
2. Wait for user response
|
||||
3. Use new name for component ID
|
||||
4. Proceed with normal creation
|
||||
|
||||
- **Choice (c) - Cancel**:
|
||||
1. Do not create any files
|
||||
2. Inform user: "Operation cancelled. No files were created."
|
||||
3. Exit workflow
|
||||
|
||||
4. **If component DOES NOT exist**:
|
||||
- Proceed with normal creation workflow (no versioning needed)
|
||||
- Component will be created as `{component-id}.uxm` (no version suffix)
|
||||
- Initial version: 1.0.0
|
||||
|
||||
**For multiple components**: Check existence for EACH component individually. Some may need versioning, others may not.
|
||||
|
||||
## Agent Prompts
|
||||
|
||||
### Fast Mode Agent (For Scaffolder)
|
||||
|
||||
Use this when creating multiple components quickly:
|
||||
|
||||
```typescript
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
// Note: model parameter not yet supported by Task tool
|
||||
description: "Create ${componentName} (fast)",
|
||||
prompt: `Create sketch-fidelity uxscii component from template.
|
||||
|
||||
Component: ${componentName}
|
||||
Type: ${componentType}
|
||||
Screen context: ${screenContext}
|
||||
${baseOnExisting ? `
|
||||
VERSIONING MODE:
|
||||
- Base on existing: ${baseComponentId}
|
||||
- New component ID: ${newComponentId}
|
||||
- Source version: ${sourceVersion}
|
||||
- Copy-on-update: Increment minor version, preserve created timestamp
|
||||
` : ''}
|
||||
|
||||
FAST MODE - Speed is critical! <10 seconds target.
|
||||
|
||||
Your task:
|
||||
1. ${baseOnExisting ? `Load existing: ./fluxwing/components/${sourceVersion}.uxm` : `Load minimal template: {SKILL_ROOT}/templates/minimal/${componentType}.uxm.template`}
|
||||
2. ${baseOnExisting ? `Read current version number and metadata.created timestamp` : `If template not found, FAIL with error: "No template found for type: ${componentType}"`}
|
||||
3. Replace template variables (component type specific):
|
||||
|
||||
**Common variables (all types):**
|
||||
- {{id}} = "${componentId}"
|
||||
- {{name}} = "${componentName}"
|
||||
- {{description}} = "${description || 'Component for ' + screenContext}"
|
||||
- {{timestamp}} = "${new Date().toISOString()}"
|
||||
|
||||
**Component-specific variables:**
|
||||
| Type | Variables |
|
||||
|------------|-------------------------------------------|
|
||||
| button | {{label}}, {{variant}} |
|
||||
| input | {{placeholder}}, {{type}}, {{value}} |
|
||||
| text | {{content}}, {{align}} |
|
||||
| heading | {{text}}, {{level}} |
|
||||
| card | {{title}}, {{content}} |
|
||||
| modal | {{title}}, {{content}} |
|
||||
| container | {{content}}, {{direction}} |
|
||||
| navigation | {{items}}, {{orientation}} |
|
||||
| form | {{fields}}, {{action}} |
|
||||
| table | {{headers}}, {{rows}} |
|
||||
| list | {{items}}, {{type}} |
|
||||
|
||||
Use component name as default value if variable not provided.
|
||||
|
||||
4. CRITICAL: Set metadata.fidelity = "sketch"
|
||||
|
||||
**REQUIRED FIELD**: The fidelity field is MANDATORY in the schema and tracks progressive enhancement.
|
||||
Fast mode MUST set fidelity to "sketch" to indicate initial scaffolding quality.
|
||||
|
||||
This field enables progressive fidelity workflow:
|
||||
- sketch (fast mode) → basic → detailed → production
|
||||
|
||||
5. ${baseOnExisting ? `Update version metadata:
|
||||
- id: "${newComponentId}" (versioned ID)
|
||||
- version: Increment minor from source (e.g., 1.0.0 → 1.1.0)
|
||||
- metadata.created: PRESERVE from ${sourceVersion}
|
||||
- metadata.modified: SET to current timestamp
|
||||
` : `Verify JSON is well-formed (quick syntax check)`}
|
||||
6. Save to ./fluxwing/components/${componentId}.uxm
|
||||
7. DO NOT create .md file
|
||||
8. DO NOT load documentation
|
||||
9. DO NOT generate ASCII art
|
||||
|
||||
VERIFICATION CHECKLIST:
|
||||
- [ ] metadata.fidelity field is set to "sketch"
|
||||
- [ ] All required fields are present (name, description, created, modified, tags, category, fidelity)
|
||||
- [ ] JSON is valid and well-formed
|
||||
|
||||
Return message: "Created ${componentId}.uxm (sketch fidelity)"
|
||||
|
||||
Target: <10 seconds
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
### Detailed Mode Agent (For User)
|
||||
|
||||
Use this when creating single component with full quality:
|
||||
|
||||
```typescript
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
// Note: model parameter not yet supported by Task tool
|
||||
description: "Create ${componentName} (detailed)",
|
||||
prompt: `Create production-ready uxscii component with full documentation.
|
||||
|
||||
Component: ${componentName}
|
||||
Type: ${componentType}
|
||||
${baseOnExisting ? `
|
||||
VERSIONING MODE:
|
||||
- Base on existing: ${baseComponentId}
|
||||
- New component ID: ${newComponentId}
|
||||
- Source version: ${sourceVersion}
|
||||
- Copy-on-update: Increment minor version, preserve created timestamp
|
||||
` : ''}
|
||||
|
||||
DETAILED MODE - Quality is priority.
|
||||
|
||||
Your task:
|
||||
1. ${baseOnExisting ? `Load existing: ./fluxwing/components/${sourceVersion}.uxm` : `Load schema: {SKILL_ROOT}/schemas/uxm-component.schema.json`}
|
||||
2. ${baseOnExisting ? `Read copy-versioning docs: {SKILL_ROOT}/../shared/docs/copy-versioning.md` : `Load docs: {SKILL_ROOT}/docs/03-component-creation.md`}
|
||||
3. Load ASCII patterns: {SKILL_ROOT}/docs/06-ascii-patterns.md
|
||||
4. Create rich .uxm with:
|
||||
- Detailed metadata.description
|
||||
- Relevant tags
|
||||
- Complete props with examples
|
||||
- Default + hover states
|
||||
- Full accessibility metadata
|
||||
|
||||
5. CRITICAL: Set metadata.fidelity = "detailed"
|
||||
|
||||
**REQUIRED FIELD**: The fidelity field is MANDATORY in the schema and tracks progressive enhancement.
|
||||
Detailed mode MUST set fidelity to "detailed" to indicate high-quality production-ready components.
|
||||
|
||||
This field enables progressive fidelity workflow:
|
||||
- sketch → basic → detailed (detailed mode) → production
|
||||
|
||||
6. ${baseOnExisting ? `Update version metadata:
|
||||
- id: "${newComponentId}" (versioned ID with -v{N} suffix)
|
||||
- version: Increment minor from source (e.g., 1.0.0 → 1.1.0)
|
||||
- metadata.created: PRESERVE from ${sourceVersion}
|
||||
- metadata.modified: SET to current timestamp
|
||||
- metadata.fidelity: Update if enhancing (preserve or upgrade)
|
||||
` : `Verify JSON is well-formed`}
|
||||
|
||||
7. Create polished .md with:
|
||||
- Clean ASCII art using box-drawing characters
|
||||
- All variables documented
|
||||
- State examples
|
||||
- ${baseOnExisting ? `Filename: ${newComponentId}.md (versioned)` : `Filename: ${componentId}.md`}
|
||||
|
||||
8. Validate against schema
|
||||
9. Save both files to ./fluxwing/components/
|
||||
- ${baseOnExisting ? `${newComponentId}.uxm and ${newComponentId}.md` : `${componentId}.uxm and ${componentId}.md`}
|
||||
|
||||
VERIFICATION CHECKLIST:
|
||||
- [ ] metadata.fidelity field is set to "detailed"
|
||||
- [ ] All required fields are present (name, description, created, modified, tags, category, fidelity)
|
||||
- [ ] Both .uxm and .md files are created
|
||||
- [ ] ${baseOnExisting ? `Version incremented and ID has -v{N} suffix` : `Component ID is kebab-case`}
|
||||
- [ ] ${baseOnExisting ? `metadata.created preserved from source` : `metadata.created set to current timestamp`}
|
||||
- [ ] JSON is valid and well-formed
|
||||
|
||||
Return: Component summary with preview ${baseOnExisting ? `- Mention version created` : ``}
|
||||
|
||||
Target: 60-90 seconds
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
### Step 3a: Spawn Designer Agent (Single Component)
|
||||
|
||||
**For SINGLE component requests**, spawn one designer agent:
|
||||
|
||||
```typescript
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
description: "Create single uxscii component",
|
||||
prompt: `You are a uxscii component designer creating production-ready components.
|
||||
|
||||
Component requirements:
|
||||
- Name: ${componentName}
|
||||
- Type: ${componentType}
|
||||
- Key properties: ${keyProperties}
|
||||
- Visual style: ${visualStyle}
|
||||
|
||||
Your task:
|
||||
1. Load schema from {SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
2. Load documentation from {SKILL_ROOT}/docs/03-component-creation.md and 06-ascii-patterns.md
|
||||
3. Check {SKILL_ROOT}/templates/ for similar examples
|
||||
4. Create .uxm file (valid JSON with default state only)
|
||||
5. Create .md file (ASCII template with default state only)
|
||||
6. Save both files to ./fluxwing/components/
|
||||
7. Validate using: node {SKILL_ROOT}/../fluxwing-validator/validate-component.js ./fluxwing/components/${componentId}.uxm {SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
8. Use TodoWrite to track progress
|
||||
9. Return component summary with ASCII preview
|
||||
|
||||
Component creation guidelines:
|
||||
- Create default state only for fast MVP prototyping
|
||||
- Use consistent box-drawing characters (see docs/06-ascii-patterns.md)
|
||||
- Include complete accessibility attributes (ARIA roles, keyboard support)
|
||||
- Follow naming conventions: kebab-case IDs, camelCase variables
|
||||
- Ensure all template variables in .md are defined in .uxm props
|
||||
- Keep ASCII dimensions reasonable (width: 1-120, height: 1-50)
|
||||
|
||||
Data locations:
|
||||
- READ templates from: {SKILL_ROOT}/templates/ (reference only)
|
||||
- WRITE components to: ./fluxwing/components/ (your output)
|
||||
- NEVER write to skill directory
|
||||
|
||||
Follow the uxscii standard strictly for production quality.`
|
||||
})
|
||||
```
|
||||
|
||||
**Wait for designer agent to complete.**
|
||||
|
||||
### Step 3b: Spawn Designer Agents (Multiple Components - IN PARALLEL)
|
||||
|
||||
**For MULTIPLE component requests**, spawn ALL designer agents in a SINGLE message for maximum parallelism:
|
||||
|
||||
**CRITICAL**: You MUST send ONE message with multiple Task calls to achieve parallel execution.
|
||||
|
||||
**DO THIS**: One message with N Task calls (one per component)
|
||||
**DON'T DO THIS**: Separate messages for each component (runs sequentially)
|
||||
|
||||
```typescript
|
||||
// Example: User wants submit-button, cancel-button, email-input
|
||||
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
description: "Create submit-button component",
|
||||
prompt: `You are a uxscii component designer creating production-ready components.
|
||||
|
||||
Component requirements:
|
||||
- Name: submit-button
|
||||
- Type: button
|
||||
- Key properties: text, variant
|
||||
- Visual style: rounded, filled
|
||||
|
||||
Your task:
|
||||
1. Load schema from {SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
2. Load docs from {SKILL_ROOT}/docs/03-component-creation.md and 06-ascii-patterns.md
|
||||
3. Create .uxm file (valid JSON with default state only)
|
||||
4. Create .md file (ASCII template with default state only)
|
||||
5. Save to ./fluxwing/components/
|
||||
6. Validate using: node {SKILL_ROOT}/../fluxwing-validator/validate-component.js
|
||||
7. Return component summary
|
||||
|
||||
Follow uxscii standard strictly. Create default state only for fast MVP.`
|
||||
})
|
||||
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
description: "Create cancel-button component",
|
||||
prompt: `You are a uxscii component designer creating production-ready components.
|
||||
|
||||
Component requirements:
|
||||
- Name: cancel-button
|
||||
- Type: button
|
||||
- Key properties: text, variant
|
||||
- Visual style: rounded, outlined
|
||||
|
||||
Your task:
|
||||
1. Load schema from {SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
2. Load docs from {SKILL_ROOT}/docs/03-component-creation.md and 06-ascii-patterns.md
|
||||
3. Create .uxm file (valid JSON with default state only)
|
||||
4. Create .md file (ASCII template with default state only)
|
||||
5. Save to ./fluxwing/components/
|
||||
6. Validate using: node {SKILL_ROOT}/../fluxwing-validator/validate-component.js
|
||||
7. Return component summary
|
||||
|
||||
Follow uxscii standard strictly. Create default state only for fast MVP.`
|
||||
})
|
||||
|
||||
Task({
|
||||
subagent_type: "general-purpose",
|
||||
description: "Create email-input component",
|
||||
prompt: `You are a uxscii component designer creating production-ready components.
|
||||
|
||||
Component requirements:
|
||||
- Name: email-input
|
||||
- Type: input
|
||||
- Key properties: placeholder, value
|
||||
- Visual style: light border, minimal
|
||||
|
||||
Your task:
|
||||
1. Load schema from {SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
2. Load docs from {SKILL_ROOT}/docs/03-component-creation.md and 06-ascii-patterns.md
|
||||
3. Create .uxm file (valid JSON with default state only)
|
||||
4. Create .md file (ASCII template with default state only)
|
||||
5. Save to ./fluxwing/components/
|
||||
6. Validate using: node {SKILL_ROOT}/../fluxwing-validator/validate-component.js
|
||||
7. Return component summary
|
||||
|
||||
Follow uxscii standard strictly. Create default state only for fast MVP.`
|
||||
})
|
||||
|
||||
... all Task calls in the SAME message for parallel execution ...
|
||||
```
|
||||
|
||||
**Wait for ALL designer agents to complete.**
|
||||
|
||||
**Performance Benefit**: Creating 3 components in parallel is ~3x faster than sequential creation!
|
||||
|
||||
### Step 3c: Validate Created Components (Optional but Recommended)
|
||||
|
||||
After the designer agent(s) complete, validate the created components using the fast validation script:
|
||||
|
||||
```bash
|
||||
# For single component
|
||||
node {SKILL_ROOT}/../fluxwing-validator/validate-component.js \\
|
||||
./fluxwing/components/${componentId}.uxm \\
|
||||
{SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
|
||||
# For multiple components, validate each one
|
||||
node {SKILL_ROOT}/../fluxwing-validator/validate-component.js \\
|
||||
./fluxwing/components/submit-button.uxm \\
|
||||
{SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
|
||||
node {SKILL_ROOT}/../fluxwing-validator/validate-component.js \\
|
||||
./fluxwing/components/cancel-button.uxm \\
|
||||
{SKILL_ROOT}/schemas/uxm-component.schema.json
|
||||
```
|
||||
|
||||
**Validation output:**
|
||||
- ✓ If valid: Shows component summary (type, states, props)
|
||||
- ✗ If invalid: Shows specific errors that need fixing
|
||||
|
||||
**Performance**: ~80ms per component (very fast!)
|
||||
|
||||
**If validation fails:**
|
||||
1. Read the error messages carefully
|
||||
2. Fix the issues in the .uxm or .md files
|
||||
3. Re-validate before reporting to user
|
||||
|
||||
**Note**: The validation script checks:
|
||||
- JSON schema compliance
|
||||
- .md file exists
|
||||
- Variables match between .uxm and .md
|
||||
- Accessibility requirements
|
||||
- Dimension constraints
|
||||
|
||||
### Step 4: Report Success
|
||||
|
||||
**For SINGLE component**, present the results:
|
||||
|
||||
```markdown
|
||||
# Component Created ✓
|
||||
|
||||
## ${componentName}
|
||||
|
||||
**Type**: ${componentType}
|
||||
**Files**:
|
||||
- ./fluxwing/components/${componentId}.uxm
|
||||
- ./fluxwing/components/${componentId}.md
|
||||
|
||||
**States**: default (created)
|
||||
**Detected states**: ${detectedStates.join(', ')}
|
||||
|
||||
## Preview
|
||||
|
||||
${asciiPreview}
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Add interaction states using the component expander skill
|
||||
2. Use in a screen with the screen scaffolder skill
|
||||
3. View all components with the library browser skill
|
||||
4. Customize: Edit files in ./fluxwing/components/
|
||||
```
|
||||
|
||||
**For MULTIPLE components**, present a summary:
|
||||
|
||||
```markdown
|
||||
# Components Created ✓
|
||||
|
||||
Created ${componentCount} components in parallel:
|
||||
|
||||
## submit-button (button)
|
||||
**Files**:
|
||||
- ./fluxwing/components/submit-button.uxm
|
||||
- ./fluxwing/components/submit-button.md
|
||||
|
||||
**Preview**:
|
||||
╭──────────────────╮
|
||||
│ Submit Form │
|
||||
╰──────────────────╯
|
||||
|
||||
## cancel-button (button)
|
||||
**Files**:
|
||||
- ./fluxwing/components/cancel-button.uxm
|
||||
- ./fluxwing/components/cancel-button.md
|
||||
|
||||
**Preview**:
|
||||
┌──────────────────┐
|
||||
│ Cancel │
|
||||
└──────────────────┘
|
||||
|
||||
## email-input (input)
|
||||
**Files**:
|
||||
- ./fluxwing/components/email-input.uxm
|
||||
- ./fluxwing/components/email-input.md
|
||||
|
||||
**Preview**:
|
||||
┌────────────────────────────┐
|
||||
│ Email: [________________] │
|
||||
└────────────────────────────┘
|
||||
|
||||
---
|
||||
|
||||
**Total**: 6 files created (3 .uxm + 3 .md)
|
||||
**Performance**: Created in parallel (~3x faster than sequential)
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Add interaction states to components
|
||||
2. Use components in screens
|
||||
3. View all components
|
||||
4. Customize: Edit files in ./fluxwing/components/
|
||||
```
|
||||
|
||||
## Example Interactions
|
||||
|
||||
### Example 1: Single Component
|
||||
|
||||
```
|
||||
User: Create a submit button
|
||||
|
||||
Skill: I'll create a submit button component! Let me check for similar templates...
|
||||
|
||||
[Checks bundled templates]
|
||||
|
||||
I found a primary-button template. Would you like me to:
|
||||
1. Base it on the primary-button template (faster)
|
||||
2. Create a custom design from scratch
|
||||
|
||||
[User responds: custom, rounded corners, filled]
|
||||
|
||||
Perfect! Creating submit-button component with the designer agent...
|
||||
|
||||
[Spawns designer agent]
|
||||
|
||||
✓ Component created successfully!
|
||||
|
||||
Files:
|
||||
- ./fluxwing/components/submit-button.uxm
|
||||
- ./fluxwing/components/submit-button.md
|
||||
|
||||
Preview (default state):
|
||||
╭──────────────────╮
|
||||
│ Submit Form │
|
||||
╰──────────────────╯
|
||||
|
||||
Next steps:
|
||||
- Add states: Ask me to "add hover state to submit-button"
|
||||
- Use in screen: Ask me to "create a login screen"
|
||||
```
|
||||
|
||||
### Example 2: Multiple Components (Parallel)
|
||||
|
||||
```
|
||||
User: Create submit-button, cancel-button, and email-input
|
||||
|
||||
Skill: I'll create all 3 components in parallel! This will be much faster.
|
||||
|
||||
Based on the component types, I'll use these defaults:
|
||||
- submit-button: button type, rounded, filled style
|
||||
- cancel-button: button type, rounded, outlined style
|
||||
- email-input: input type, light border, minimal style
|
||||
|
||||
[Spawns 3 designer agents in a SINGLE message]
|
||||
|
||||
✓ All 3 components created successfully in parallel!
|
||||
|
||||
## submit-button (button)
|
||||
Files: submit-button.uxm + submit-button.md
|
||||
|
||||
## cancel-button (button)
|
||||
Files: cancel-button.uxm + cancel-button.md
|
||||
|
||||
## email-input (input)
|
||||
Files: email-input.uxm + email-input.md
|
||||
|
||||
Total: 6 files created
|
||||
Performance: ~3x faster than sequential creation
|
||||
|
||||
Next steps:
|
||||
- Add states to components
|
||||
- Use in a screen
|
||||
- View all components
|
||||
```
|
||||
|
||||
## Benefits of Using Designer Agent
|
||||
|
||||
- **Consistent quality**: Agent follows quality standards
|
||||
- **Complete metadata**: Proper tags, descriptions, accessibility
|
||||
- **Best practices**: Schema compliance, naming conventions
|
||||
- **Reusable logic**: Same creation workflow across all skills
|
||||
- **Parallel execution**: Multiple components created simultaneously (not sequentially)
|
||||
|
||||
## Performance Benefits
|
||||
|
||||
**Single vs Multi-Component Creation:**
|
||||
|
||||
- **Sequential (old)**: Component 1 → wait → Component 2 → wait → Component 3
|
||||
- Time: 3 × agent_time
|
||||
|
||||
- **Parallel (new)**: Component 1 + Component 2 + Component 3 → all at once
|
||||
- Time: 1 × agent_time (3x faster!)
|
||||
|
||||
**When to use multi-component creation:**
|
||||
- Creating multiple components for a single screen (e.g., login form components)
|
||||
- Building a component library in bulk
|
||||
- Prototyping quickly with several variations
|
||||
|
||||
**Example speedup:**
|
||||
- 1 component: ~30 seconds
|
||||
- 3 components sequential: ~90 seconds
|
||||
- 3 components parallel: ~30 seconds (3x faster!) ⚡
|
||||
|
||||
## Error Handling
|
||||
|
||||
**If single designer agent fails:**
|
||||
- Report specific error from agent
|
||||
- Suggest fixes or alternatives
|
||||
- User can retry with adjusted requirements
|
||||
|
||||
**If multiple designer agents fail:**
|
||||
- Report which components succeeded and which failed
|
||||
- Keep successfully created components (partial success is OK)
|
||||
- User can retry failed components individually or as a group
|
||||
|
||||
**Example partial failure:**
|
||||
```
|
||||
✓ submit-button created successfully
|
||||
✓ cancel-button created successfully
|
||||
✗ email-input failed: Invalid component type specified
|
||||
|
||||
2 of 3 components created. You can:
|
||||
1. Retry email-input with corrected parameters
|
||||
2. Use the 2 successful components as-is
|
||||
3. Manually create email-input
|
||||
```
|
||||
|
||||
## Success Criteria
|
||||
|
||||
**For single component:**
|
||||
- ✓ Designer agent created component successfully
|
||||
- ✓ Both .uxm and .md files exist in ./fluxwing/components/
|
||||
- ✓ Component follows uxscii standard
|
||||
- ✓ User can immediately use or expand the component
|
||||
|
||||
**For multiple components:**
|
||||
- ✓ All designer agents launched in parallel (single message)
|
||||
- ✓ Each component has both .uxm and .md files in ./fluxwing/components/
|
||||
- ✓ All components follow uxscii standard
|
||||
- ✓ Clear report showing which succeeded/failed (if any failures)
|
||||
- ✓ User can immediately use all successful components
|
||||
|
||||
You are helping build AI-native designs with production-quality components at maximum speed!
|
||||
294
skills/fluxwing-component-creator/docs/03-component-creation.md
Normal file
294
skills/fluxwing-component-creator/docs/03-component-creation.md
Normal file
@@ -0,0 +1,294 @@
|
||||
# Component Creation - Step-by-Step Workflow
|
||||
|
||||
Complete guide for creating uxscii components from scratch.
|
||||
|
||||
## Before You Start
|
||||
|
||||
1. **Understand the concept** - Read `02-core-concepts.md` if you haven't
|
||||
2. **Check examples** - Browse `../examples/` for similar components
|
||||
3. **Plan your component** - Know what you're building
|
||||
|
||||
## Step-by-Step Process
|
||||
|
||||
### Step 1: Plan Your Component
|
||||
|
||||
Answer these questions:
|
||||
- **What is it?** Button, input, card, modal, etc.
|
||||
- **What does it do?** Primary purpose and use case
|
||||
- **What's configurable?** Props users can change
|
||||
- **What states does it have?** Default, hover, focus, disabled, error, success
|
||||
- **How will it look?** Sketch ASCII layout
|
||||
|
||||
### Step 2: Create the .uxm File
|
||||
|
||||
Start with required fields:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "my-component",
|
||||
"type": "button",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "My Component",
|
||||
"created": "2024-10-11T12:00:00Z",
|
||||
"modified": "2024-10-11T12:00:00Z"
|
||||
},
|
||||
"props": {},
|
||||
"ascii": {
|
||||
"templateFile": "my-component.md",
|
||||
"width": 20,
|
||||
"height": 3
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Tips:**
|
||||
- ID must be kebab-case, 2-64 characters
|
||||
- Version must be semantic (major.minor.patch)
|
||||
- Timestamps should be ISO 8601 format
|
||||
- Template file must end with `.md`
|
||||
|
||||
### Step 3: Add Props and Variables
|
||||
|
||||
Define what users can configure:
|
||||
|
||||
```json
|
||||
{
|
||||
"props": {
|
||||
"text": "Click me", // Default values
|
||||
"variant": "primary",
|
||||
"disabled": false
|
||||
},
|
||||
"ascii": {
|
||||
"templateFile": "my-component.md",
|
||||
"width": 20,
|
||||
"height": 3,
|
||||
"variables": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "string",
|
||||
"required": true,
|
||||
"description": "Button label text",
|
||||
"validation": {
|
||||
"min": 1,
|
||||
"max": 20
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "variant",
|
||||
"type": "string",
|
||||
"defaultValue": "primary",
|
||||
"validation": {
|
||||
"enum": ["primary", "secondary", "outline"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Step 4: Define Default State and Behaviors
|
||||
|
||||
Components are created with **default state only** for fast MVP prototyping:
|
||||
|
||||
```json
|
||||
{
|
||||
"behavior": {
|
||||
"states": [
|
||||
{
|
||||
"name": "default",
|
||||
"properties": {
|
||||
"border": "solid",
|
||||
"background": "primary"
|
||||
}
|
||||
}
|
||||
],
|
||||
"interactions": [
|
||||
{
|
||||
"trigger": "click",
|
||||
"action": "emit-click-event"
|
||||
}
|
||||
],
|
||||
"accessibility": {
|
||||
"role": "button",
|
||||
"ariaLabel": "{{text}}",
|
||||
"focusable": true,
|
||||
"keyboardSupport": ["Enter", "Space"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Adding more states**: After MVP validation, use `/fluxwing-expand-component` to add hover, focus, disabled states. The command will automatically add appropriate states based on component type.
|
||||
|
||||
### Step 5: Add Metadata (Recommended)
|
||||
|
||||
Help others discover and understand your component:
|
||||
|
||||
```json
|
||||
{
|
||||
"metadata": {
|
||||
"name": "My Component",
|
||||
"description": "A customizable button component with multiple variants and states",
|
||||
"author": "Your Name",
|
||||
"created": "2024-10-11T12:00:00Z",
|
||||
"modified": "2024-10-11T12:00:00Z",
|
||||
"tags": ["button", "interactive", "form"],
|
||||
"category": "input"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Step 6: Create the .md Template
|
||||
|
||||
Basic structure:
|
||||
|
||||
````markdown
|
||||
# My Component
|
||||
|
||||
Brief description of what this component does.
|
||||
|
||||
## Default State
|
||||
|
||||
```
|
||||
╭──────────────────╮
|
||||
│ {{text}} │
|
||||
╰──────────────────╯
|
||||
```
|
||||
|
||||
## Variables
|
||||
|
||||
- `text` (string, required): Button label text. Max 20 characters.
|
||||
- `variant` (string): Visual style - "primary", "secondary", or "outline"
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Role**: button
|
||||
- **Focusable**: Yes
|
||||
- **Keyboard**: Enter or Space to activate
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Primary Button
|
||||
```
|
||||
╭──────────────────╮
|
||||
│ Submit Form │
|
||||
╰──────────────────╯
|
||||
```
|
||||
|
||||
### Secondary Button
|
||||
```
|
||||
┌──────────────────┐
|
||||
│ Cancel │
|
||||
└──────────────────┘
|
||||
```
|
||||
````
|
||||
|
||||
**Tips:**
|
||||
- Start with default state only (fast MVP creation)
|
||||
- Document ALL variables used in template
|
||||
- Include usage examples with real data
|
||||
- Add accessibility notes for interactive components
|
||||
|
||||
**Adding more states**: After creating the component, run `/fluxwing-expand-component my-component` to add hover, focus, disabled states automatically.
|
||||
|
||||
### Step 7: Save Files
|
||||
|
||||
Save both files together:
|
||||
```
|
||||
./fluxwing/components/my-component.uxm
|
||||
./fluxwing/components/my-component.md
|
||||
```
|
||||
|
||||
Create the directory if it doesn't exist:
|
||||
```bash
|
||||
mkdir -p ./fluxwing/components
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Form Input
|
||||
```json
|
||||
{
|
||||
"id": "text-input",
|
||||
"type": "input",
|
||||
"props": {
|
||||
"placeholder": "Enter text",
|
||||
"value": "",
|
||||
"error": "",
|
||||
"disabled": false
|
||||
},
|
||||
"behavior": {
|
||||
"states": ["default", "focus", "error", "disabled"],
|
||||
"interactions": [
|
||||
{"trigger": "focus", "action": "highlight-field"},
|
||||
{"trigger": "blur", "action": "validate-field"}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Data Card
|
||||
```json
|
||||
{
|
||||
"id": "metric-card",
|
||||
"type": "card",
|
||||
"props": {
|
||||
"title": "Metric",
|
||||
"value": "1,234",
|
||||
"change": "+12%",
|
||||
"trend": "up"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Modal Dialog
|
||||
```json
|
||||
{
|
||||
"id": "confirm-dialog",
|
||||
"type": "modal",
|
||||
"props": {
|
||||
"title": "Confirm",
|
||||
"message": "Are you sure?",
|
||||
"confirmText": "Yes",
|
||||
"cancelText": "No"
|
||||
},
|
||||
"behavior": {
|
||||
"states": ["open", "closed"],
|
||||
"interactions": [
|
||||
{"trigger": "click", "action": "close-modal", "target": "backdrop"},
|
||||
{"trigger": "keydown", "action": "close-modal", "condition": "key === 'Escape'"}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Template file not found"
|
||||
**Fix**: Ensure `.md` file exists and `templateFile` path is correct
|
||||
|
||||
### "Variable not defined"
|
||||
**Fix**: Add variable to `ascii.variables` array in `.uxm`
|
||||
|
||||
### "Invalid JSON"
|
||||
**Fix**: Validate JSON syntax (no trailing commas, proper quotes)
|
||||
|
||||
### "ASCII art looks broken"
|
||||
**Fix**: Use monospace font, check for consistent character width
|
||||
|
||||
## Quick Reference
|
||||
|
||||
**Required .uxm fields**: id, type, version, metadata (name, created, modified), props, ascii (templateFile, width, height)
|
||||
|
||||
**Required .md sections**: Title, default state, variables documentation
|
||||
|
||||
**Recommended additions**: Multiple states, accessibility attributes, usage examples, detailed metadata
|
||||
|
||||
## Next Steps
|
||||
|
||||
- **Compose screens**: Use `/fluxwing-scaffold` to build complete screens
|
||||
- **Browse library**: Use `/fluxwing-library` to see all components
|
||||
- **Learn patterns**: Check `06-ascii-patterns.md` for ASCII art reference
|
||||
|
||||
You can now create production-ready uxscii components!
|
||||
792
skills/fluxwing-component-creator/docs/06-ascii-patterns.md
Normal file
792
skills/fluxwing-component-creator/docs/06-ascii-patterns.md
Normal file
@@ -0,0 +1,792 @@
|
||||
# ASCII Patterns - Visual Toolkit
|
||||
|
||||
Complete library of ASCII characters and patterns for uxscii components.
|
||||
|
||||
## Box-Drawing Characters
|
||||
|
||||
### Basic Borders
|
||||
|
||||
**Light (Default)**
|
||||
```
|
||||
┌─────┐
|
||||
│ Box │
|
||||
└─────┘
|
||||
```
|
||||
Characters: `┌ ─ ┐ │ └ ┘`
|
||||
|
||||
**Rounded (Friendly)**
|
||||
```
|
||||
╭─────╮
|
||||
│ Box │
|
||||
╰─────╯
|
||||
```
|
||||
Characters: `╭ ─ ╮ │ ╰ ╯`
|
||||
|
||||
**Double (Emphasis)**
|
||||
```
|
||||
╔═════╗
|
||||
║ Box ║
|
||||
╚═════╝
|
||||
```
|
||||
Characters: `╔ ═ ╗ ║ ╚ ╝`
|
||||
|
||||
**Heavy (Strong)**
|
||||
```
|
||||
┏━━━━━┓
|
||||
┃ Box ┃
|
||||
┗━━━━━┛
|
||||
```
|
||||
Characters: `┏ ━ ┓ ┃ ┗ ┛`
|
||||
|
||||
### Complex Borders
|
||||
|
||||
**With Dividers**
|
||||
```
|
||||
┌─────────┬─────────┐
|
||||
│ Col 1 │ Col 2 │
|
||||
├─────────┼─────────┤
|
||||
│ Data │ Data │
|
||||
└─────────┴─────────┘
|
||||
```
|
||||
|
||||
**Nested**
|
||||
```
|
||||
╭─────────────────╮
|
||||
│ Outer │
|
||||
│ ┌─────────────┐ │
|
||||
│ │ Inner │ │
|
||||
│ └─────────────┘ │
|
||||
╰─────────────────╯
|
||||
```
|
||||
|
||||
## Component State Patterns
|
||||
|
||||
### Buttons
|
||||
|
||||
**Default**
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
▓ Click ▓
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
**Hover (Highlighted)**
|
||||
```
|
||||
░▓▓▓▓▓▓▓▓▓▓░
|
||||
░▓ Click ▓░
|
||||
░▓▓▓▓▓▓▓▓▓▓░
|
||||
```
|
||||
|
||||
**Focus (Ring)**
|
||||
```
|
||||
┏━━━━━━━━━━┓✨
|
||||
┃ Click ┃
|
||||
┗━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
**Disabled (Grayed)**
|
||||
```
|
||||
┌ ─ ─ ─ ─ ┐
|
||||
│ Click │
|
||||
└ ─ ─ ─ ─ ┘
|
||||
```
|
||||
|
||||
**Pressed/Active**
|
||||
```
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
▓▓Click ▓▓
|
||||
▓▓▓▓▓▓▓▓▓▓
|
||||
```
|
||||
|
||||
### Form Inputs
|
||||
|
||||
**Text Input (Empty)**
|
||||
```
|
||||
[____________________]
|
||||
```
|
||||
|
||||
**Text Input (Filled)**
|
||||
```
|
||||
[john@example.com ]
|
||||
```
|
||||
|
||||
**Text Input (Focus)**
|
||||
```
|
||||
┏━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃john@example.com│ ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
**Text Input (Error)**
|
||||
```
|
||||
[invalid-email ]⚠️
|
||||
❌ Please enter valid email
|
||||
```
|
||||
|
||||
**Text Input (Success)**
|
||||
```
|
||||
[john@example.com ]✅
|
||||
```
|
||||
|
||||
**Text Input (Disabled)**
|
||||
```
|
||||
[────────────────────]
|
||||
```
|
||||
|
||||
**Password (Masked)**
|
||||
```
|
||||
[•••••••• ]
|
||||
```
|
||||
|
||||
**Password (With Toggle)**
|
||||
```
|
||||
[•••••••• ]👁️
|
||||
```
|
||||
|
||||
### Checkboxes & Radios
|
||||
|
||||
**Checkbox (Unchecked)**
|
||||
```
|
||||
[□] Option 1
|
||||
```
|
||||
|
||||
**Checkbox (Checked)**
|
||||
```
|
||||
[✓] Option 1
|
||||
```
|
||||
|
||||
**Checkbox (Indeterminate)**
|
||||
```
|
||||
[▬] Option 1
|
||||
```
|
||||
|
||||
**Radio (Unselected)**
|
||||
```
|
||||
○ Option A
|
||||
```
|
||||
|
||||
**Radio (Selected)**
|
||||
```
|
||||
◉ Option A
|
||||
```
|
||||
|
||||
### Selects & Dropdowns
|
||||
|
||||
**Select (Closed)**
|
||||
```
|
||||
[Choose option ▼]
|
||||
```
|
||||
|
||||
**Select (Open)**
|
||||
```
|
||||
[Current option ▼]
|
||||
╭────────────────╮
|
||||
│ Option 1 │
|
||||
│ ● Option 2 │
|
||||
│ Option 3 │
|
||||
╰────────────────╯
|
||||
```
|
||||
|
||||
### Sliders
|
||||
|
||||
**Slider (Basic)**
|
||||
```
|
||||
├────────●───────┤
|
||||
0% 100%
|
||||
```
|
||||
|
||||
**Slider (With Value)**
|
||||
```
|
||||
├────────●───────┤ 45%
|
||||
```
|
||||
|
||||
**Range Slider**
|
||||
```
|
||||
├────●────●──────┤
|
||||
20% 80%
|
||||
```
|
||||
|
||||
## Status Indicators
|
||||
|
||||
### Icons
|
||||
|
||||
**Success**: ✅ ✓ ●
|
||||
**Error**: ❌ ✗ ⚠️ ⛔
|
||||
**Warning**: ⚠️ ⚡ △
|
||||
**Info**: ℹ️ ⓘ ◉
|
||||
**Loading**: ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏
|
||||
|
||||
### Progress Bars
|
||||
|
||||
**Loading (40%)**
|
||||
```
|
||||
████▓▓▓▓▓▓ 40%
|
||||
```
|
||||
|
||||
**Loading (Indeterminate)**
|
||||
```
|
||||
▓▓▓░░░░░░░
|
||||
```
|
||||
|
||||
**Steps**
|
||||
```
|
||||
● ━━━ ● ━━━ ○ ━━━ ○
|
||||
```
|
||||
|
||||
### Badges
|
||||
|
||||
**Count Badge**
|
||||
```
|
||||
[Inbox] ●3
|
||||
```
|
||||
|
||||
**Status Badge**
|
||||
```
|
||||
● Online
|
||||
○ Offline
|
||||
```
|
||||
|
||||
**Label Badge**
|
||||
```
|
||||
▓ New ▓
|
||||
```
|
||||
|
||||
## Data Display
|
||||
|
||||
### Lists
|
||||
|
||||
**Unordered**
|
||||
```
|
||||
• Item 1
|
||||
• Item 2
|
||||
• Item 3
|
||||
```
|
||||
|
||||
**Ordered**
|
||||
```
|
||||
1. First
|
||||
2. Second
|
||||
3. Third
|
||||
```
|
||||
|
||||
**Nested**
|
||||
```
|
||||
• Parent
|
||||
├─ Child 1
|
||||
├─ Child 2
|
||||
└─ Child 3
|
||||
```
|
||||
|
||||
### Tables
|
||||
|
||||
**Simple**
|
||||
```
|
||||
┌─────┬─────┬─────┐
|
||||
│ A │ B │ C │
|
||||
├─────┼─────┼─────┤
|
||||
│ 1 │ 2 │ 3 │
|
||||
│ 4 │ 5 │ 6 │
|
||||
└─────┴─────┴─────┘
|
||||
```
|
||||
|
||||
**With Header**
|
||||
```
|
||||
╔═══════╦═══════╦═══════╗
|
||||
║ Name ║ Email ║ Status║
|
||||
╠═══════╬═══════╬═══════╣
|
||||
║ Alice ║ a@... ║ ✓ ║
|
||||
║ Bob ║ b@... ║ ○ ║
|
||||
╚═══════╩═══════╩═══════╝
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
**Basic**
|
||||
```
|
||||
╭─────────────╮
|
||||
│ Title │
|
||||
├─────────────┤
|
||||
│ Content... │
|
||||
╰─────────────╯
|
||||
```
|
||||
|
||||
**With Actions**
|
||||
```
|
||||
╭─────────────────────╮
|
||||
│ Card Title │
|
||||
├─────────────────────┤
|
||||
│ Content goes here │
|
||||
│ │
|
||||
│ [Action] ─┐ │
|
||||
╰─────────────────────╯
|
||||
```
|
||||
|
||||
**Metric Card**
|
||||
```
|
||||
╭───────────╮
|
||||
│ Revenue │
|
||||
├───────────┤
|
||||
│ $24,567 │
|
||||
│ +12.5% ↗ │
|
||||
╰───────────╯
|
||||
```
|
||||
|
||||
## Navigation
|
||||
|
||||
### Tabs
|
||||
|
||||
**Horizontal**
|
||||
```
|
||||
[Active] [Tab 2] [Tab 3]
|
||||
─────────
|
||||
Content for active tab
|
||||
```
|
||||
|
||||
**Vertical**
|
||||
```
|
||||
┌─ ● Tab 1
|
||||
├─ ○ Tab 2
|
||||
└─ ○ Tab 3
|
||||
```
|
||||
|
||||
### Breadcrumbs
|
||||
|
||||
```
|
||||
Home > Products > Details
|
||||
```
|
||||
|
||||
### Pagination
|
||||
|
||||
```
|
||||
‹ Prev [1] 2 3 4 5 Next ›
|
||||
```
|
||||
|
||||
### Menu
|
||||
|
||||
**Dropdown**
|
||||
```
|
||||
File ▼
|
||||
╭──────────╮
|
||||
│ New │
|
||||
│ Open │
|
||||
│ Save │
|
||||
├──────────┤
|
||||
│ Exit │
|
||||
╰──────────╯
|
||||
```
|
||||
|
||||
**Sidebar**
|
||||
```
|
||||
╭─────────╮
|
||||
│ • Home │
|
||||
│ • Users │
|
||||
│ • Data │
|
||||
│ • Info │
|
||||
╰─────────╯
|
||||
```
|
||||
|
||||
## Modals & Overlays
|
||||
|
||||
### Modal
|
||||
|
||||
**Simple**
|
||||
```
|
||||
╔═══════════════════╗
|
||||
║ Modal Title ║
|
||||
╠═══════════════════╣
|
||||
║ Content here... ║
|
||||
║ ║
|
||||
║ [OK] [Cancel] ║
|
||||
╚═══════════════════╝
|
||||
```
|
||||
|
||||
**With Close**
|
||||
```
|
||||
╔═══════════════════╗✕
|
||||
║ Title ║
|
||||
╠═══════════════════╣
|
||||
║ Content... ║
|
||||
╚═══════════════════╝
|
||||
```
|
||||
|
||||
### Toast/Alert
|
||||
|
||||
**Success**
|
||||
```
|
||||
╭─────────────────╮
|
||||
│ ✅ Saved! │
|
||||
╰─────────────────╯
|
||||
```
|
||||
|
||||
**Error**
|
||||
```
|
||||
╭─────────────────────╮
|
||||
│ ❌ Error: Try again │
|
||||
╰─────────────────────╯
|
||||
```
|
||||
|
||||
**Warning**
|
||||
```
|
||||
╭────────────────────╮
|
||||
│ ⚠️ Warning message │
|
||||
╰────────────────────╯
|
||||
```
|
||||
|
||||
## Arrows & Indicators
|
||||
|
||||
### Directional
|
||||
```
|
||||
↑ ↓ ← →
|
||||
↗ ↘ ↙ ↖
|
||||
⬆ ⬇ ⬅ ➡
|
||||
▲ ▼ ◀ ▶
|
||||
```
|
||||
|
||||
### Trend
|
||||
```
|
||||
↗️ Up trend
|
||||
→ Flat
|
||||
↘️ Down trend
|
||||
```
|
||||
|
||||
### Expand/Collapse
|
||||
```
|
||||
▼ Expanded
|
||||
▶ Collapsed
|
||||
```
|
||||
|
||||
## Spacing & Alignment
|
||||
|
||||
**CRITICAL FOR SCREEN RENDERING**: These rules prevent alignment issues in `.rendered.md` files.
|
||||
|
||||
### 1. Boundary Alignment - Content MUST Stay Inside Borders
|
||||
|
||||
**Golden Rule**: All text and content MUST be contained within component borders. Nothing floats outside.
|
||||
|
||||
**❌ INCORRECT - Text outside borders:**
|
||||
```
|
||||
╔════════════════════════════════════════╗
|
||||
║ ║
|
||||
║ Video Title Here ║
|
||||
║ ┌─────────┐ ║
|
||||
║ │ 12:34 │ ║
|
||||
╚════════════════════════════└─────────┘═╝
|
||||
|
||||
Video Title Here ← WRONG: Outside the box!
|
||||
MrBeast ✓ ← WRONG: Floating metadata!
|
||||
24M views · 2 days ago
|
||||
```
|
||||
|
||||
**✅ CORRECT - All content inside borders:**
|
||||
```
|
||||
╔════════════════════════════════════════╗
|
||||
║ ║
|
||||
║ Video Title Here ║
|
||||
║ ┌─────────┐ ║
|
||||
║ │ 12:34 │ ║
|
||||
║ ║
|
||||
║ Video Title Here ║
|
||||
║ MrBeast ✓ ║
|
||||
║ 24M views · 2 days ago ║
|
||||
╚════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
**Rule**: If a box has borders, ALL related content must appear between those borders.
|
||||
|
||||
### 2. Vertical Spacing - Consistent Gaps Between Components
|
||||
|
||||
**Standard vertical gaps:**
|
||||
- **1 line** - Tight spacing (related items within same section)
|
||||
- **2 lines** - Standard spacing (between different components)
|
||||
- **3 lines** - Section dividers (major layout breaks)
|
||||
|
||||
**❌ INCORRECT - Inconsistent spacing:**
|
||||
```
|
||||
╭────────────╮
|
||||
│ Button 1 │
|
||||
╰────────────╯
|
||||
╭────────────╮
|
||||
│ Button 2 │
|
||||
╰────────────╯
|
||||
|
||||
|
||||
╭────────────╮
|
||||
│ Button 3 │
|
||||
╰────────────╯
|
||||
```
|
||||
|
||||
**✅ CORRECT - Consistent 2-line gaps:**
|
||||
```
|
||||
╭────────────╮
|
||||
│ Button 1 │
|
||||
╰────────────╯
|
||||
|
||||
╭────────────╮
|
||||
│ Button 2 │
|
||||
╰────────────╯
|
||||
|
||||
╭────────────╮
|
||||
│ Button 3 │
|
||||
╰────────────╯
|
||||
```
|
||||
|
||||
**Nested component spacing:**
|
||||
```
|
||||
╭─────────────────────────────────╮
|
||||
│ Outer Container │
|
||||
│ │ ← 1 line padding
|
||||
│ ╭─────────────────────────╮ │
|
||||
│ │ Inner Component │ │
|
||||
│ ╰─────────────────────────╯ │
|
||||
│ │ ← 1 line padding
|
||||
╰─────────────────────────────────╯
|
||||
```
|
||||
|
||||
### 3. Horizontal Alignment - Consistent Padding and Text Columns
|
||||
|
||||
**Standard left padding:**
|
||||
- **2 characters** - Minimum readable padding (compact layouts)
|
||||
- **4 characters** - Standard padding (default for most screens)
|
||||
- **6 characters** - Generous padding (spacious layouts)
|
||||
|
||||
**❌ INCORRECT - No padding, text against border:**
|
||||
```
|
||||
╭────────────────────╮
|
||||
│Title │ ← No space after │
|
||||
│Content here │
|
||||
╰────────────────────╯
|
||||
```
|
||||
|
||||
**✅ CORRECT - Consistent 2-char padding:**
|
||||
```
|
||||
╭────────────────────╮
|
||||
│ Title │ ← 2 spaces after │
|
||||
│ Content here │
|
||||
╰────────────────────╯
|
||||
```
|
||||
|
||||
**Text column alignment:**
|
||||
```
|
||||
╭──────────────────────────────────╮
|
||||
│ Label: Value │ ← Aligned columns
|
||||
│ Name: Sarah Johnson │
|
||||
│ Email: sarah@example.com │
|
||||
│ Status: Active │
|
||||
╰──────────────────────────────────╯
|
||||
```
|
||||
|
||||
**Center alignment for titles:**
|
||||
```
|
||||
╭──────────────────────────────────╮
|
||||
│ │
|
||||
│ Welcome Back │ ← Centered
|
||||
│ Sign in to continue │ ← Centered
|
||||
│ │
|
||||
╰──────────────────────────────────╯
|
||||
```
|
||||
|
||||
**Right alignment for metadata:**
|
||||
```
|
||||
╭──────────────────────────────────╮
|
||||
│ Post Title │
|
||||
│ u/username · 3h ago [123] │ ← Right-aligned vote count
|
||||
╰──────────────────────────────────╯
|
||||
```
|
||||
|
||||
### 4. Grid Layouts - Multi-Column Screens
|
||||
|
||||
**2-column grid with proper spacing:**
|
||||
|
||||
**❌ INCORRECT - Inconsistent gaps, misaligned:**
|
||||
```
|
||||
╭──────────╮╭──────────╮ ← No gap
|
||||
│ Card 1 ││ Card 2 │
|
||||
╰──────────╯╰──────────╯
|
||||
|
||||
╭──────────╮ ╭──────────╮ ← Different gap
|
||||
│ Card 3 │ │ Card 4 │
|
||||
╰──────────╯ ╰──────────╯
|
||||
```
|
||||
|
||||
**✅ CORRECT - Consistent 2-char gaps, aligned columns:**
|
||||
```
|
||||
╭──────────╮ ╭──────────╮
|
||||
│ Card 1 │ │ Card 2 │
|
||||
╰──────────╯ ╰──────────╯
|
||||
|
||||
╭──────────╮ ╭──────────╮
|
||||
│ Card 3 │ │ Card 4 │
|
||||
╰──────────╯ ╰──────────╯
|
||||
```
|
||||
|
||||
**3-column grid:**
|
||||
```
|
||||
╭────────╮ ╭────────╮ ╭────────╮
|
||||
│ Card 1 │ │ Card 2 │ │ Card 3 │
|
||||
╰────────╯ ╰────────╯ ╰────────╯
|
||||
|
||||
╭────────╮ ╭────────╮ ╭────────╮
|
||||
│ Card 4 │ │ Card 5 │ │ Card 6 │
|
||||
╰────────╯ ╰────────╯ ╰────────╯
|
||||
```
|
||||
|
||||
**Sidebar + main layout:**
|
||||
```
|
||||
╭─────────╮ ╭──────────────────────────────╮
|
||||
│ Sidebar │ │ Main Content │
|
||||
│ │ │ │
|
||||
│ • Home │ │ ╭─────────────────────╮ │
|
||||
│ • Users │ │ │ Content Card │ │
|
||||
│ • Data │ │ ╰─────────────────────╯ │
|
||||
│ │ │ │
|
||||
╰─────────╯ ╰──────────────────────────────╯
|
||||
```
|
||||
|
||||
### 5. Screen Composition Rules
|
||||
|
||||
**Full screen example combining all rules:**
|
||||
|
||||
```
|
||||
╔══════════════════════════════════════════════════════╗
|
||||
║ ║
|
||||
║ Screen Title ║ ← Centered, 1 line padding
|
||||
║ ║
|
||||
╠══════════════════════════════════════════════════════╣
|
||||
║ Navigation Bar ║ ← 2-char padding
|
||||
╠══════════════════════════════════════════════════════╣
|
||||
║ ║ ← 1 line section gap
|
||||
║ ╭────────────────────────╮ ╭────────────────────╮ ║
|
||||
║ │ Left Card │ │ Right Card │ ║ ← 2-col grid, 2-char gap
|
||||
║ │ │ │ │ ║
|
||||
║ │ Content with 2-char │ │ Aligned content │ ║ ← All content inside borders
|
||||
║ │ left padding │ │ stays in bounds │ ║
|
||||
║ │ │ │ │ ║
|
||||
║ ╰────────────────────────╯ ╰────────────────────╯ ║
|
||||
║ ║ ← 2 line component gap
|
||||
║ ║
|
||||
║ ╭──────────────────────────────────────────────╮ ║
|
||||
║ │ Full-width Component │ ║ ← Centered in parent
|
||||
║ │ │ ║
|
||||
║ │ Text content properly padded │ ║
|
||||
║ │ │ ║
|
||||
║ ╰──────────────────────────────────────────────╯ ║
|
||||
║ ║
|
||||
╚══════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
### 6. Common Patterns - Feed Layouts
|
||||
|
||||
**YouTube-style feed (CORRECT):**
|
||||
```
|
||||
╔═══════════════════════════╗ ╔═══════════════════════════╗
|
||||
║ ║ ║ ║
|
||||
║ Thumbnail Area ║ ║ Thumbnail Area ║
|
||||
║ ║ ║ ║
|
||||
║ ┌────────┐ ║ ║ ┌────────┐ ║
|
||||
║ │ 12:34 │ ║ ║ │ 8:45 │ ║
|
||||
║ └────────┘ ║ ║ └────────┘ ║
|
||||
║ ║ ║ ║
|
||||
║ DON'T TRY THIS ║ ║ Watermelon Candy VS REAL ║
|
||||
║ ║ ║ ║
|
||||
║ MrBeast ✓ ║ ║ Crafty Panda ✓ ║
|
||||
║ 24M views · 2 days ago ║ ║ 543K views · 1 day ago ║
|
||||
╚═══════════════════════════╝ ╚═══════════════════════════╝
|
||||
```
|
||||
|
||||
**Reddit-style post feed (CORRECT):**
|
||||
```
|
||||
╭──────────────────────────────────────────────────────╮
|
||||
│ ▲ Which bank offers best savings in 2025? │
|
||||
│ 342 │
|
||||
│ ▼ Posted by u/financeguru · 3h ago │
|
||||
│ │
|
||||
│ I've been researching high-yield savings │
|
||||
│ accounts and comparing rates... │
|
||||
│ │
|
||||
│ 💬 156 comments 📤 Share 🔖 Save │
|
||||
╰──────────────────────────────────────────────────────╯
|
||||
|
||||
╭──────────────────────────────────────────────────────╮
|
||||
│ ▲ PSA: Chase added Zelle fraud protection │
|
||||
│ 289 │
|
||||
│ ▼ Posted by u/bankwatcher · 5h ago │
|
||||
│ │
|
||||
│ Just got an email that Chase is now offering │
|
||||
│ Zelle fraud reimbursement... │
|
||||
│ │
|
||||
│ 💬 87 comments 📤 Share 🔖 Save │
|
||||
╰──────────────────────────────────────────────────────╯
|
||||
```
|
||||
|
||||
### 7. Overflow Handling
|
||||
|
||||
**When content is too long:**
|
||||
|
||||
**❌ INCORRECT - Breaking borders:**
|
||||
```
|
||||
╭──────────────╮
|
||||
│ This is a very long title that goes past the border │
|
||||
╰──────────────╯
|
||||
```
|
||||
|
||||
**✅ CORRECT - Truncate with ellipsis:**
|
||||
```
|
||||
╭──────────────────────────╮
|
||||
│ This is a very long ti...│
|
||||
╰──────────────────────────╯
|
||||
```
|
||||
|
||||
**✅ CORRECT - Wrap within bounds:**
|
||||
```
|
||||
╭──────────────────────────╮
|
||||
│ This is a very long │
|
||||
│ title that wraps to │
|
||||
│ multiple lines │
|
||||
╰──────────────────────────╯
|
||||
```
|
||||
|
||||
### 8. Alignment Checklist for Screen Composition
|
||||
|
||||
Before saving any `.rendered.md` file, verify:
|
||||
|
||||
- [ ] **Boundary**: All text is inside component borders (no floating text)
|
||||
- [ ] **Vertical**: Consistent gaps between components (1-3 lines)
|
||||
- [ ] **Horizontal**: Consistent left padding (2-4 chars minimum)
|
||||
- [ ] **Grid**: Multi-column layouts have aligned columns and consistent gaps
|
||||
- [ ] **Overflow**: Long content is truncated or wrapped, never breaking borders
|
||||
- [ ] **Nested**: Inner components have proper padding from outer containers
|
||||
- [ ] **Metadata**: Related info (timestamps, counts) aligned consistently
|
||||
|
||||
### Quick Reference - Standard Measurements
|
||||
|
||||
```
|
||||
Padding (horizontal): 2-4 chars (standard)
|
||||
Gaps (vertical): 1-2 lines (standard)
|
||||
Grid gaps: 2 chars (between columns)
|
||||
Section breaks: 3 lines
|
||||
Border padding: 1 line top/bottom
|
||||
```
|
||||
|
||||
## Tips for Consistent Patterns
|
||||
|
||||
1. **Choose one border style per component** - Don't mix light/rounded/heavy
|
||||
2. **Use consistent spacing** - Multiples of 4 characters work well
|
||||
3. **Align related elements** - Keep boxes at same width when stacked
|
||||
4. **Test in monospace** - Always preview in monospace font
|
||||
5. **Consider state transitions** - Visual changes should be clear
|
||||
|
||||
## Copy-Paste Ready
|
||||
|
||||
```
|
||||
Light box: ┌─┐│└┘
|
||||
Rounded: ╭─╮│╰╯
|
||||
Double: ╔═╗║╚╝
|
||||
Heavy: ┏━┓┃┗┛
|
||||
|
||||
Checkbox: [□] [✓]
|
||||
Radio: ○ ◉
|
||||
Status: ✅ ❌ ⚠️ ℹ️
|
||||
Arrows: ↑↓←→ ↗↘
|
||||
```
|
||||
|
||||
Use these patterns to create beautiful, consistent uxscii components!
|
||||
205
skills/fluxwing-component-creator/docs/07-schema-reference.md
Normal file
205
skills/fluxwing-component-creator/docs/07-schema-reference.md
Normal file
@@ -0,0 +1,205 @@
|
||||
# Schema Reference
|
||||
|
||||
Pointer to the definitive uxscii component schema and how to use it.
|
||||
|
||||
## The Schema File
|
||||
|
||||
**Location**: `../schema/uxm-component.schema.json`
|
||||
|
||||
This is the **definitive source of truth** for the uxscii `.uxm` file format.
|
||||
|
||||
## What the Schema Defines
|
||||
|
||||
The schema specifies:
|
||||
- All valid field names and types
|
||||
- Required vs optional fields
|
||||
- Validation rules (min/max, patterns, enums)
|
||||
- Nested object structures
|
||||
- Field descriptions
|
||||
|
||||
## How to Use the Schema
|
||||
|
||||
### For Reference
|
||||
|
||||
When creating components, refer to the schema to understand:
|
||||
- What fields are available
|
||||
- What values are allowed
|
||||
- What's required vs optional
|
||||
|
||||
### For Autocompletion
|
||||
|
||||
Many editors can use the schema for:
|
||||
- Field suggestions
|
||||
- Type checking
|
||||
- Documentation on hover
|
||||
|
||||
Add to your `.uxm` file:
|
||||
```json
|
||||
{
|
||||
"$schema": "../data/schema/uxm-component.schema.json",
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Key Schema Sections
|
||||
|
||||
### Required Root Fields
|
||||
|
||||
```
|
||||
id - Component identifier (kebab-case, 2-64 chars)
|
||||
type - Component type (enum or "custom")
|
||||
version - Semantic version (X.Y.Z)
|
||||
metadata - Component metadata object
|
||||
props - Component properties object
|
||||
ascii - ASCII template reference
|
||||
```
|
||||
|
||||
### Metadata Object (required fields)
|
||||
|
||||
```
|
||||
name - Human-readable name (1-100 chars)
|
||||
created - ISO 8601 timestamp
|
||||
modified - ISO 8601 timestamp
|
||||
```
|
||||
|
||||
### Metadata Object (optional fields)
|
||||
|
||||
```
|
||||
description - Component description (max 500 chars)
|
||||
author - Creator name (max 100 chars)
|
||||
tags - Array of search tags (max 10)
|
||||
category - Component category (enum)
|
||||
```
|
||||
|
||||
### ASCII Object (required)
|
||||
|
||||
```
|
||||
templateFile - Template filename (must end in .md)
|
||||
width - Character width (1-120)
|
||||
height - Character height (1-50)
|
||||
```
|
||||
|
||||
### ASCII Object (optional)
|
||||
|
||||
```
|
||||
variables - Array of template variable definitions
|
||||
```
|
||||
|
||||
### Behavior Object (optional)
|
||||
|
||||
```
|
||||
states - Array of component states
|
||||
interactions - Array of user interactions
|
||||
animations - Array of animation definitions
|
||||
accessibility- Accessibility attributes
|
||||
```
|
||||
|
||||
## Component Types (Enum)
|
||||
|
||||
Valid `type` values:
|
||||
```
|
||||
button, input, card, navigation, form, list, modal,
|
||||
table, badge, alert, container, text, image, divider, custom
|
||||
```
|
||||
|
||||
## Categories (Enum)
|
||||
|
||||
Valid `metadata.category` values:
|
||||
```
|
||||
layout, input, display, navigation, feedback,
|
||||
utility, overlay, custom
|
||||
```
|
||||
|
||||
## Variable Types (Enum)
|
||||
|
||||
Valid `ascii.variables[].type` values:
|
||||
```
|
||||
string, number, boolean, color, size, array, object
|
||||
```
|
||||
|
||||
## Quick Reference Examples
|
||||
|
||||
### Minimal Valid Component
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "simple",
|
||||
"type": "button",
|
||||
"version": "1.0.0",
|
||||
"metadata": {
|
||||
"name": "Simple",
|
||||
"created": "2024-01-01T00:00:00Z",
|
||||
"modified": "2024-01-01T00:00:00Z"
|
||||
},
|
||||
"props": {},
|
||||
"ascii": {
|
||||
"templateFile": "simple.md",
|
||||
"width": 10,
|
||||
"height": 3
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Complete Component
|
||||
|
||||
See `../examples/primary-button.uxm` for a fully-featured example using all available fields.
|
||||
|
||||
## Schema Version
|
||||
|
||||
Current schema version: **1.1.0**
|
||||
|
||||
Schema follows semantic versioning:
|
||||
- Major: Breaking changes to structure
|
||||
- Minor: New optional fields
|
||||
- Patch: Documentation or validation updates
|
||||
|
||||
## Validation Rules Summary
|
||||
|
||||
### ID Rules
|
||||
- Pattern: `^[a-z0-9][a-z0-9-]*[a-z0-9]$`
|
||||
- Length: 2-64 characters
|
||||
- Format: kebab-case only
|
||||
|
||||
### Version Rules
|
||||
- Pattern: `^\d+\.\d+\.\d+(?:-[a-zA-Z0-9-]+)?$`
|
||||
- Examples: `1.0.0`, `2.1.3`, `1.0.0-beta`
|
||||
|
||||
### Timestamp Rules
|
||||
- Format: ISO 8601 date-time
|
||||
- Example: `2024-10-11T12:00:00Z`
|
||||
|
||||
### Variable Name Rules
|
||||
- Pattern: `^[a-zA-Z][a-zA-Z0-9_]*$`
|
||||
- Format: camelCase recommended
|
||||
- Examples: `text`, `userName`, `isDisabled`
|
||||
|
||||
## Common Schema Errors
|
||||
|
||||
**"Additional property not allowed"**
|
||||
- You used a field name that doesn't exist in the schema
|
||||
- Check field spelling and location in object hierarchy
|
||||
|
||||
**"Missing required property"**
|
||||
- You omitted a required field
|
||||
- Add the field with a valid value
|
||||
|
||||
**"Value does not match pattern"**
|
||||
- Field value doesn't match regex pattern
|
||||
- Check format requirements (kebab-case, semver, etc.)
|
||||
|
||||
**"Value not in enum"**
|
||||
- You used a value not in the allowed list
|
||||
- Use one of the valid enum values
|
||||
|
||||
## Deep Dive
|
||||
|
||||
For comprehensive schema documentation, see:
|
||||
- **Full guide**: `UXSCII_SCHEMA_GUIDE.md` (detailed explanations)
|
||||
- **Agent guide**: `UXSCII_AGENT_GUIDE.md` (practical examples)
|
||||
|
||||
## Next Steps
|
||||
|
||||
- **View schema**: Open `../schema/uxm-component.schema.json`
|
||||
- **See examples**: Browse `../examples/*.uxm`
|
||||
|
||||
The schema ensures all uxscii components are compatible and machine-readable!
|
||||
@@ -0,0 +1,386 @@
|
||||
{
|
||||
"$schema": "http://json-schema.org/draft-07/schema#",
|
||||
"$id": "https://uxscii.org/schemas/uxm-component.json",
|
||||
"title": "UXM Component Schema",
|
||||
"description": "JSON schema for .uxm component metadata files",
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"id": {
|
||||
"type": "string",
|
||||
"pattern": "^[a-z0-9][a-z0-9-]*[a-z0-9]$",
|
||||
"minLength": 2,
|
||||
"maxLength": 64,
|
||||
"description": "Unique identifier for the component using kebab-case"
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"button",
|
||||
"input",
|
||||
"checkbox",
|
||||
"card",
|
||||
"navigation",
|
||||
"form",
|
||||
"list",
|
||||
"modal",
|
||||
"table",
|
||||
"badge",
|
||||
"icon",
|
||||
"alert",
|
||||
"container",
|
||||
"text",
|
||||
"image",
|
||||
"divider",
|
||||
"custom"
|
||||
],
|
||||
"description": "Component type from the standard library or 'custom'"
|
||||
},
|
||||
"version": {
|
||||
"type": "string",
|
||||
"pattern": "^\\d+\\.\\d+\\.\\d+(?:-[a-zA-Z0-9-]+)?$",
|
||||
"description": "Semantic version of the component specification"
|
||||
},
|
||||
"metadata": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"minLength": 1,
|
||||
"maxLength": 100,
|
||||
"description": "Human-readable name for the component"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"maxLength": 500,
|
||||
"description": "Optional description of the component's purpose and usage"
|
||||
},
|
||||
"author": {
|
||||
"type": "string",
|
||||
"maxLength": 100,
|
||||
"description": "Component author or organization"
|
||||
},
|
||||
"created": {
|
||||
"type": "string",
|
||||
"format": "date-time",
|
||||
"description": "ISO 8601 timestamp when component was created"
|
||||
},
|
||||
"modified": {
|
||||
"type": "string",
|
||||
"format": "date-time",
|
||||
"description": "ISO 8601 timestamp when component was last modified"
|
||||
},
|
||||
"tags": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string",
|
||||
"pattern": "^[a-z0-9][a-z0-9-]*[a-z0-9]$"
|
||||
},
|
||||
"maxItems": 10,
|
||||
"uniqueItems": true,
|
||||
"description": "Tags for categorization and search"
|
||||
},
|
||||
"category": {
|
||||
"type": "string",
|
||||
"enum": ["layout", "input", "display", "navigation", "feedback", "utility", "overlay", "custom"],
|
||||
"description": "Primary category for component organization"
|
||||
},
|
||||
"fidelity": {
|
||||
"type": "string",
|
||||
"enum": ["sketch", "basic", "detailed", "production"],
|
||||
"description": "Component design fidelity level",
|
||||
"default": "detailed"
|
||||
}
|
||||
},
|
||||
"required": ["name", "description", "created", "modified", "tags", "category", "fidelity"],
|
||||
"additionalProperties": false
|
||||
},
|
||||
"props": {
|
||||
"type": "object",
|
||||
"description": "Component properties and configuration",
|
||||
"additionalProperties": true
|
||||
},
|
||||
"behavior": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"states": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"$ref": "#/$defs/componentState"
|
||||
},
|
||||
"description": "Possible states the component can be in"
|
||||
},
|
||||
"interactions": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"$ref": "#/$defs/componentInteraction"
|
||||
},
|
||||
"description": "User interactions the component responds to"
|
||||
},
|
||||
"animations": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"$ref": "#/$defs/componentAnimation"
|
||||
},
|
||||
"description": "Animations associated with state changes"
|
||||
},
|
||||
"accessibility": {
|
||||
"$ref": "#/$defs/accessibilitySpec",
|
||||
"description": "Accessibility requirements and ARIA attributes"
|
||||
}
|
||||
},
|
||||
"additionalProperties": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"positioning": {
|
||||
"type": "string",
|
||||
"enum": ["static", "relative", "absolute", "fixed", "sticky"],
|
||||
"default": "static"
|
||||
},
|
||||
"display": {
|
||||
"type": "string",
|
||||
"enum": ["block", "inline", "inline-block", "flex", "grid", "none", "overlay", "table"],
|
||||
"default": "block"
|
||||
},
|
||||
"spacing": {
|
||||
"$ref": "#/$defs/spacingSpec"
|
||||
},
|
||||
"sizing": {
|
||||
"$ref": "#/$defs/sizingSpec"
|
||||
}
|
||||
},
|
||||
"additionalProperties": true
|
||||
},
|
||||
"ascii": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"templateFile": {
|
||||
"type": "string",
|
||||
"pattern": "^[a-zA-Z0-9._-]+\\.md$",
|
||||
"description": "Filename of the associated ASCII template"
|
||||
},
|
||||
"width": {
|
||||
"type": "integer",
|
||||
"minimum": 1,
|
||||
"maximum": 120,
|
||||
"description": "Character width of the ASCII representation"
|
||||
},
|
||||
"height": {
|
||||
"type": "integer",
|
||||
"minimum": 1,
|
||||
"maximum": 50,
|
||||
"description": "Character height of the ASCII representation"
|
||||
},
|
||||
"variables": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"$ref": "#/$defs/templateVariable"
|
||||
},
|
||||
"description": "Variables used in the ASCII template"
|
||||
}
|
||||
},
|
||||
"required": ["templateFile", "width", "height"],
|
||||
"additionalProperties": false
|
||||
},
|
||||
"extends": {
|
||||
"type": "string",
|
||||
"description": "Component ID that this component extends"
|
||||
}
|
||||
},
|
||||
"required": ["id", "type", "version", "metadata", "props", "ascii"],
|
||||
"additionalProperties": false,
|
||||
"$defs": {
|
||||
"componentState": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": true
|
||||
},
|
||||
"triggers": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string"
|
||||
}
|
||||
}
|
||||
},
|
||||
"required": ["name", "properties"],
|
||||
"additionalProperties": true
|
||||
},
|
||||
"componentInteraction": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"trigger": {
|
||||
"type": "string",
|
||||
"enum": ["click", "hover", "focus", "blur", "keydown", "keyup", "change", "submit", "timeout", "reset", "field-change"]
|
||||
},
|
||||
"action": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"target": {
|
||||
"type": "string",
|
||||
"description": "Optional target element or component"
|
||||
},
|
||||
"condition": {
|
||||
"type": "string",
|
||||
"description": "Optional condition for the interaction"
|
||||
}
|
||||
},
|
||||
"required": ["trigger", "action"],
|
||||
"additionalProperties": false
|
||||
},
|
||||
"componentAnimation": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"minLength": 1
|
||||
},
|
||||
"duration": {
|
||||
"type": "number",
|
||||
"minimum": 0
|
||||
},
|
||||
"easing": {
|
||||
"type": "string",
|
||||
"enum": ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "cubic-bezier"]
|
||||
},
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"additionalProperties": true
|
||||
}
|
||||
},
|
||||
"required": ["name", "duration", "properties"],
|
||||
"additionalProperties": false
|
||||
},
|
||||
"accessibilitySpec": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"role": {
|
||||
"type": "string",
|
||||
"description": "ARIA role for the component"
|
||||
},
|
||||
"ariaLabel": {
|
||||
"type": "string",
|
||||
"description": "Accessible label for screen readers"
|
||||
},
|
||||
"ariaDescribedBy": {
|
||||
"type": "string",
|
||||
"description": "IDs of elements that describe this component"
|
||||
},
|
||||
"ariaLabelledBy": {
|
||||
"type": "string",
|
||||
"description": "IDs of elements that label this component"
|
||||
},
|
||||
"keyboardSupport": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string"
|
||||
},
|
||||
"description": "Keyboard interactions supported"
|
||||
},
|
||||
"focusable": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Whether the component can receive focus"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
},
|
||||
"spacingSpec": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"margin": {
|
||||
"oneOf": [
|
||||
{"type": "number"},
|
||||
{"$ref": "#/$defs/boxSpacing"}
|
||||
]
|
||||
},
|
||||
"padding": {
|
||||
"oneOf": [
|
||||
{"type": "number"},
|
||||
{"$ref": "#/$defs/boxSpacing"}
|
||||
]
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
},
|
||||
"boxSpacing": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"top": {"type": "number"},
|
||||
"right": {"type": "number"},
|
||||
"bottom": {"type": "number"},
|
||||
"left": {"type": "number"}
|
||||
},
|
||||
"additionalProperties": false
|
||||
},
|
||||
"sizingSpec": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"width": {
|
||||
"oneOf": [
|
||||
{"type": "number"},
|
||||
{"type": "string", "enum": ["auto", "fit-content", "max-content", "min-content"]}
|
||||
]
|
||||
},
|
||||
"height": {
|
||||
"oneOf": [
|
||||
{"type": "number"},
|
||||
{"type": "string", "enum": ["auto", "fit-content", "max-content", "min-content"]}
|
||||
]
|
||||
},
|
||||
"minWidth": {"type": "number"},
|
||||
"maxWidth": {"type": "number"},
|
||||
"minHeight": {"type": "number"},
|
||||
"maxHeight": {"type": "number"}
|
||||
},
|
||||
"additionalProperties": true
|
||||
},
|
||||
"templateVariable": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
|
||||
"description": "Variable name using camelCase"
|
||||
},
|
||||
"type": {
|
||||
"type": "string",
|
||||
"enum": ["string", "number", "boolean", "color", "size", "array", "object"],
|
||||
"description": "Data type of the variable"
|
||||
},
|
||||
"defaultValue": {
|
||||
"description": "Default value for the variable"
|
||||
},
|
||||
"description": {
|
||||
"type": "string",
|
||||
"maxLength": 200,
|
||||
"description": "Description of the variable's purpose"
|
||||
},
|
||||
"required": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Whether the variable is required"
|
||||
},
|
||||
"validation": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"min": {"type": "number"},
|
||||
"max": {"type": "number"},
|
||||
"pattern": {"type": "string"},
|
||||
"enum": {"type": "array"}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
},
|
||||
"required": ["name", "type"],
|
||||
"additionalProperties": false
|
||||
}
|
||||
}
|
||||
}
|
||||
101
skills/fluxwing-component-creator/scripts/quick_validate.py
Normal file
101
skills/fluxwing-component-creator/scripts/quick_validate.py
Normal file
@@ -0,0 +1,101 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Quick validation wrapper for component creation workflow.
|
||||
Returns simple pass/fail + actionable error messages.
|
||||
|
||||
Usage:
|
||||
python quick_validate.py <component.uxm> <schema.json>
|
||||
|
||||
Returns:
|
||||
Exit 0 if valid, Exit 1 if errors found
|
||||
Human-friendly output for Claude to read
|
||||
"""
|
||||
|
||||
import json
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
try:
|
||||
from jsonschema import validate, ValidationError, Draft7Validator
|
||||
except ImportError:
|
||||
print("✗ Error: jsonschema library not found")
|
||||
print(" Install with: pip install jsonschema")
|
||||
sys.exit(2)
|
||||
|
||||
|
||||
def quick_validate(uxm_file: str, schema_file: str) -> None:
|
||||
"""Validate and print result in Claude-friendly format."""
|
||||
try:
|
||||
# Load component
|
||||
with open(uxm_file) as f:
|
||||
component = json.load(f)
|
||||
|
||||
# Load schema
|
||||
with open(schema_file) as f:
|
||||
schema = json.load(f)
|
||||
|
||||
# Validate against schema
|
||||
validator = Draft7Validator(schema)
|
||||
errors = list(validator.iter_errors(component))
|
||||
|
||||
if errors:
|
||||
# Schema validation failed
|
||||
print(f"✗ Validation Failed: {uxm_file}")
|
||||
print()
|
||||
for i, error in enumerate(errors[:3], 1): # Show first 3 errors
|
||||
path = " → ".join(map(str, error.path)) if error.path else "root"
|
||||
print(f" Error {i}: {error.message}")
|
||||
print(f" Location: {path}")
|
||||
print()
|
||||
if len(errors) > 3:
|
||||
print(f" ... and {len(errors) - 3} more errors")
|
||||
sys.exit(1)
|
||||
|
||||
# Schema validation passed - check for .md file
|
||||
md_file = uxm_file.replace('.uxm', '.md')
|
||||
if not Path(md_file).exists():
|
||||
print(f"✗ Missing ASCII File: {md_file}")
|
||||
print(f" Component .uxm is valid, but .md template file not found")
|
||||
sys.exit(1)
|
||||
|
||||
# Success!
|
||||
comp_name = component['metadata']['name']
|
||||
comp_id = component['id']
|
||||
comp_type = component['type']
|
||||
state_count = len(component.get('behavior', {}).get('states', []))
|
||||
prop_count = len(component.get('props', {}))
|
||||
|
||||
print(f"✓ Valid: {comp_name} ({comp_id})")
|
||||
print(f" Type: {comp_type}")
|
||||
print(f" States: {state_count}")
|
||||
print(f" Props: {prop_count}")
|
||||
print(f" Files: {uxm_file} + {Path(md_file).name}")
|
||||
|
||||
sys.exit(0)
|
||||
|
||||
except json.JSONDecodeError as e:
|
||||
print(f"✗ Invalid JSON: {uxm_file}")
|
||||
print(f" Error: {e.msg} at line {e.lineno}, column {e.colno}")
|
||||
sys.exit(1)
|
||||
|
||||
except FileNotFoundError as e:
|
||||
print(f"✗ File Not Found: {e.filename}")
|
||||
sys.exit(1)
|
||||
|
||||
except Exception as e:
|
||||
print(f"✗ Unexpected Error: {e}")
|
||||
sys.exit(1)
|
||||
|
||||
|
||||
def main():
|
||||
if len(sys.argv) != 3:
|
||||
print("Usage: quick_validate.py <component.uxm> <schema.json>")
|
||||
print()
|
||||
print("Quickly validates a uxscii component for use in workflows.")
|
||||
sys.exit(1)
|
||||
|
||||
quick_validate(sys.argv[1], sys.argv[2])
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
207
skills/fluxwing-component-creator/scripts/validate_component.py
Normal file
207
skills/fluxwing-component-creator/scripts/validate_component.py
Normal file
@@ -0,0 +1,207 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Fast, deterministic component validation using JSON Schema.
|
||||
Replaces the removed fluxwing-validator agent with reliable script.
|
||||
|
||||
Usage:
|
||||
python validate_component.py <component.uxm> <schema.json>
|
||||
|
||||
Returns:
|
||||
Exit 0 if valid, Exit 1 if errors found
|
||||
JSON output with validation results
|
||||
"""
|
||||
|
||||
import json
|
||||
import sys
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
try:
|
||||
from jsonschema import validate, ValidationError, Draft7Validator
|
||||
except ImportError:
|
||||
print("Error: jsonschema library not found. Install with: pip install jsonschema")
|
||||
sys.exit(2)
|
||||
|
||||
|
||||
def validate_component(uxm_file_path: str, schema_path: str) -> dict:
|
||||
"""
|
||||
Validate a .uxm component file against the schema.
|
||||
|
||||
Returns:
|
||||
{
|
||||
"valid": bool,
|
||||
"errors": [list of error messages],
|
||||
"warnings": [list of warnings],
|
||||
"stats": {component stats}
|
||||
}
|
||||
"""
|
||||
# Load component
|
||||
try:
|
||||
with open(uxm_file_path) as f:
|
||||
component = json.load(f)
|
||||
except json.JSONDecodeError as e:
|
||||
return {
|
||||
"valid": False,
|
||||
"errors": [{
|
||||
"path": [],
|
||||
"message": f"Invalid JSON: {e.msg} at line {e.lineno}",
|
||||
"type": "json_error"
|
||||
}],
|
||||
"warnings": [],
|
||||
"stats": {}
|
||||
}
|
||||
except FileNotFoundError:
|
||||
return {
|
||||
"valid": False,
|
||||
"errors": [{
|
||||
"path": [],
|
||||
"message": f"Component file not found: {uxm_file_path}",
|
||||
"type": "file_not_found"
|
||||
}],
|
||||
"warnings": [],
|
||||
"stats": {}
|
||||
}
|
||||
|
||||
# Load schema
|
||||
try:
|
||||
with open(schema_path) as f:
|
||||
schema = json.load(f)
|
||||
except FileNotFoundError:
|
||||
return {
|
||||
"valid": False,
|
||||
"errors": [{
|
||||
"path": [],
|
||||
"message": f"Schema file not found: {schema_path}",
|
||||
"type": "file_not_found"
|
||||
}],
|
||||
"warnings": [],
|
||||
"stats": {}
|
||||
}
|
||||
|
||||
# Validate against schema
|
||||
validator = Draft7Validator(schema)
|
||||
errors = []
|
||||
|
||||
for error in validator.iter_errors(component):
|
||||
errors.append({
|
||||
"path": list(error.path),
|
||||
"message": error.message,
|
||||
"type": "schema_violation"
|
||||
})
|
||||
|
||||
# Additional uxscii-specific checks
|
||||
warnings = []
|
||||
|
||||
# Check 1: ASCII file exists
|
||||
md_file = uxm_file_path.replace('.uxm', '.md')
|
||||
if not Path(md_file).exists():
|
||||
errors.append({
|
||||
"path": ["ascii", "templateFile"],
|
||||
"message": f"ASCII template file not found: {md_file}",
|
||||
"type": "missing_file"
|
||||
})
|
||||
else:
|
||||
# Check 2: Template variables match
|
||||
with open(md_file) as f:
|
||||
md_content = f.read()
|
||||
|
||||
# Extract {{variables}} from markdown
|
||||
md_vars = set(re.findall(r'\{\{(\w+)\}\}', md_content))
|
||||
|
||||
# Get variables from .uxm (handle both formats: array of strings or array of objects)
|
||||
ascii_vars = component.get('ascii', {}).get('variables', [])
|
||||
if ascii_vars and isinstance(ascii_vars[0], dict):
|
||||
# Array of objects format: [{"name": "text", "type": "string"}]
|
||||
uxm_vars = {v['name'] for v in ascii_vars if isinstance(v, dict) and 'name' in v}
|
||||
else:
|
||||
# Array of strings format: ["text", "value"]
|
||||
uxm_vars = set(ascii_vars)
|
||||
|
||||
missing = md_vars - uxm_vars
|
||||
if missing:
|
||||
warnings.append({
|
||||
"path": ["ascii", "variables"],
|
||||
"message": f"Variables in .md but not defined in .uxm: {', '.join(sorted(missing))}",
|
||||
"type": "variable_mismatch"
|
||||
})
|
||||
|
||||
# Check 3: Accessibility requirements
|
||||
if component.get('behavior', {}).get('interactive'):
|
||||
accessibility = component.get('accessibility', {})
|
||||
if not accessibility.get('role'):
|
||||
warnings.append({
|
||||
"path": ["accessibility", "role"],
|
||||
"message": "Interactive component should have ARIA role",
|
||||
"type": "accessibility"
|
||||
})
|
||||
if not accessibility.get('focusable'):
|
||||
warnings.append({
|
||||
"path": ["accessibility", "focusable"],
|
||||
"message": "Interactive component should be focusable",
|
||||
"type": "accessibility"
|
||||
})
|
||||
|
||||
# Check 4: ASCII dimensions
|
||||
ascii_config = component.get('ascii', {})
|
||||
width = ascii_config.get('width', 0)
|
||||
height = ascii_config.get('height', 0)
|
||||
|
||||
if width > 120:
|
||||
warnings.append({
|
||||
"path": ["ascii", "width"],
|
||||
"message": f"Width {width} exceeds recommended max of 120",
|
||||
"type": "dimensions"
|
||||
})
|
||||
|
||||
if height > 50:
|
||||
warnings.append({
|
||||
"path": ["ascii", "height"],
|
||||
"message": f"Height {height} exceeds recommended max of 50",
|
||||
"type": "dimensions"
|
||||
})
|
||||
|
||||
# Check 5: States should have properties
|
||||
states = component.get('behavior', {}).get('states', [])
|
||||
for state in states:
|
||||
if 'properties' not in state:
|
||||
warnings.append({
|
||||
"path": ["behavior", "states", state.get('name', 'unknown')],
|
||||
"message": f"State '{state.get('name')}' has no properties defined",
|
||||
"type": "incomplete_state"
|
||||
})
|
||||
|
||||
return {
|
||||
"valid": len(errors) == 0,
|
||||
"errors": errors,
|
||||
"warnings": warnings,
|
||||
"stats": {
|
||||
"id": component.get('id'),
|
||||
"type": component.get('type'),
|
||||
"version": component.get('version'),
|
||||
"states": len(component.get('behavior', {}).get('states', [])),
|
||||
"props": len(component.get('props', {})),
|
||||
"interactive": component.get('behavior', {}).get('interactive', False),
|
||||
"has_accessibility": bool(component.get('accessibility'))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
def main():
|
||||
if len(sys.argv) < 3:
|
||||
print("Usage: validate_component.py <component.uxm> <schema.json>")
|
||||
print()
|
||||
print("Validates a uxscii component against the JSON schema.")
|
||||
print("Returns JSON with validation results and exits 0 if valid, 1 if invalid.")
|
||||
sys.exit(1)
|
||||
|
||||
uxm_file = sys.argv[1]
|
||||
schema_file = sys.argv[2]
|
||||
|
||||
result = validate_component(uxm_file, schema_file)
|
||||
print(json.dumps(result, indent=2))
|
||||
|
||||
sys.exit(0 if result["valid"] else 1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
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