Enhance uxscii components from sketch to production fidelity. Use when working with .uxm files marked as "fidelity: sketch" or when user wants to add detail and polish to components.
Progressively enhances uxscii components from sketch to production fidelity. Automatically triggers when working with .uxm files marked as "fidelity: sketch" or when users request upgrades to basic, detailed, or production levels.
/plugin marketplace add trabian/fluxwing-skills/plugin install fluxwing-skills@fluxwing-marketplaceThis skill is limited to using the following tools:
docs/enhancement-patterns.mdProgressively enhance uxscii components from sketch to production quality.
READ from:
./fluxwing/components/ - User components to enhance{SKILL_ROOT}/../fluxwing-component-creator/templates/state-additions/ - State templates{SKILL_ROOT}/docs/ - Enhancement documentationLOAD for copy-on-update logic:
{SKILL_ROOT}/../shared/docs/copy-versioning.md - Versioning pattern for fidelity enhancementsWRITE to:
./fluxwing/components/ - New versioned components (copy-on-update: {id}-v{N+1})./fluxwing/screens/ - Updated screen .rendered.md (if applicable)IMPORTANT: Enhancer creates NEW versions instead of overwriting originals. Each fidelity enhancement creates a new -v{N} copy.
Characteristics:
Improvements over sketch:
Improvements over basic:
Improvements over detailed:
Help users enhance components from current fidelity to target fidelity.
Check what components exist and their current fidelity:
ls ./fluxwing/components/*.uxm
For each component, read fidelity level:
python3 -c "import json; print(json.load(open('./fluxwing/components/button.uxm'))['metadata'].get('fidelity', 'detailed'))"
List components by fidelity:
Ask user or use defaults:
User specifies:
Auto-select (if not specified):
If enhancing multiple components (3+):
If enhancing single component:
Enhancement Agent Prompt:
Task({
subagent_type: "general-purpose",
model: "sonnet", // Quality matters for enhancement
description: "Enhance ${componentId} to ${targetFidelity} (copy)",
prompt: `Enhance uxscii component from ${currentFidelity} to ${targetFidelity} using copy-on-update pattern.
Component: ${componentId}
Current fidelity: ${currentFidelity}
Target fidelity: ${targetFidelity}
COPY-ON-UPDATE MODE:
- Read existing component
- Find highest version (check ${componentId}-v2, -v3, etc.)
- Create NEW versioned copy: ${componentId}-v{N+1}
- DO NOT overwrite original
- Preserve metadata.created, update metadata.modified
Your task:
1. Read ./fluxwing/components/${componentId}.uxm
2. Read ./fluxwing/components/${componentId}.md (if exists)
3. Load copy-versioning docs: {SKILL_ROOT}/../shared/docs/copy-versioning.md
4. Find highest version of ${componentId} (original is v1)
5. Calculate next version number: v{N+1}
6. Load enhancement patterns: {SKILL_ROOT}/docs/enhancement-patterns.md
7. Load state templates: {SKILL_ROOT}/../fluxwing-component-creator/templates/state-additions/
8. Create versioned copy with enhancements:
**Update version metadata:**
- id: "${componentId}-v{N+1}" (add -v{N+1} suffix)
- version: Increment minor (e.g., 1.0.0 → 1.1.0)
- metadata.created: PRESERVE from source
- metadata.modified: SET to current timestamp
- metadata.fidelity: UPDATE to "${targetFidelity}"
${targetFidelity === 'basic' ? `
For "basic" fidelity:
- Improve metadata.description (1-2 sentences, specific)
- Add specific tags (not just generic type)
- Create/improve .md with clean ASCII art
- Keep single default state
- Update fidelity field to "basic"
` : ''}
${targetFidelity === 'detailed' ? `
For "detailed" fidelity:
- All "basic" enhancements (if not already done)
- Add hover state (use {SKILL_ROOT}/../fluxwing-component-creator/templates/state-additions/hover.json)
- Add focus state (use {SKILL_ROOT}/../fluxwing-component-creator/templates/state-additions/focus.json)
- Polish ASCII art (smooth alignment, consistent spacing)
- Add props.examples array (2-3 usage examples)
- Update fidelity field to "detailed"
` : ''}
${targetFidelity === 'production' ? `
For "production" fidelity:
- All "detailed" enhancements (if not already done)
- Add disabled state (if applicable for component type)
- Add error state (if applicable for component type)
- Complete accessibility metadata:
- aria-label templates
- keyboard shortcuts
- screen reader descriptions
- Add behavior.keyboardShortcuts (if interactive)
- Publication-quality ASCII (pixel-perfect alignment)
- Document edge cases in description
- Update fidelity field to "production"
` : ''}
9. Save NEW versioned files:
- ./fluxwing/components/${componentId}-v{N+1}.uxm
- ./fluxwing/components/${componentId}-v{N+1}.md
- DO NOT overwrite original ${componentId}.uxm
10. Verify JSON is valid
11. Return enhancement summary with version info
Target time: ${targetTime[targetFidelity]} seconds
Return format:
"Enhanced ${componentId} → ${componentId}-v{N+1}: ${currentFidelity} → ${targetFidelity}
- Version: {old version} → {new version}
- Added X states
- Improved metadata
- Polished ASCII
- Original preserved at ${componentId}.uxm"
`
})
If components belong to a screen, regenerate .rendered.md:
# Find which screen uses this component
grep -l "${componentId}" ./fluxwing/screens/*.uxm
If found, respawn composer to regenerate .rendered.md with enhanced components.
# Enhancement Complete ✓
## Components Enhanced
${enhancedComponents.map(c => `
### ${c.id}
- Before: ${c.oldFidelity}
- After: ${c.newFidelity}
- Time: ${c.time}s
- Changes:
- ${c.changes.join('\n - ')}
`).join('\n')}
## Total Time: ${totalTime}s
## Screens Updated
${updatedScreens.length > 0 ? updatedScreens.map(s => `- ${s}.rendered.md regenerated`).join('\n') : 'None'}
## Next Steps
1. Review enhanced components: \`ls ./fluxwing/components/\`
2. View updated screen: \`cat ./fluxwing/screens/${screenName}.rendered.md\`
3. Customize as needed
User: "Enhance all components in banking-chat to detailed"
Enhancer:
User: "Make submit-button production-ready"
Enhancer:
You are building a progressive enhancement system for maximum flexibility!
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.