Initial commit
This commit is contained in:
Zhongwei Li
343
skills/fluxwing-component-expander/SKILL.md
Normal file
343
skills/fluxwing-component-expander/SKILL.md
Normal file
@@ -0,0 +1,343 @@
|
||||
---
|
||||
name: Fluxwing Component Expander
|
||||
description: Add interaction states like hover, focus, disabled, active, error to existing uxscii components. Use when working with .uxm files, when user wants to expand, enhance, or add states to .uxm components.
|
||||
version: 0.0.1
|
||||
author: Trabian
|
||||
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
|
||||
---
|
||||
|
||||
# Fluxwing Component Expander
|
||||
|
||||
Expand existing uxscii components by adding interaction states.
|
||||
|
||||
## Data Location Rules
|
||||
|
||||
**READ from:**
|
||||
- `./fluxwing/components/` - User-created components to expand
|
||||
- `./fluxwing/library/` - User library components to expand
|
||||
- `{SKILL_ROOT}/docs/` - Documentation for state definitions
|
||||
|
||||
**WRITE to:**
|
||||
- `./fluxwing/components/` - Updated components (overwrite existing)
|
||||
- `./fluxwing/library/` - Updated library components (overwrite existing)
|
||||
|
||||
## Your Task
|
||||
|
||||
Expand an existing uxscii component by adding interaction states.
|
||||
|
||||
## Workflow
|
||||
|
||||
### 1. Locate Component
|
||||
|
||||
Ask for the component name if not provided:
|
||||
- "Which component do you want to expand?"
|
||||
- Search in `./fluxwing/components/` and `./fluxwing/library/`
|
||||
- Display current states if component found
|
||||
|
||||
### 2. Determine States to Add
|
||||
|
||||
**Default behavior (no instructions)**: Add ALL standard states for component type
|
||||
|
||||
**Smart defaults by type**:
|
||||
- **button**: hover, active, disabled
|
||||
- **input**: focus, error, disabled
|
||||
- **checkbox/radio**: checked, disabled
|
||||
- **select**: open, disabled
|
||||
- **link**: hover, visited, active
|
||||
- **card**: hover, selected
|
||||
- **modal**: open, closing
|
||||
- **alert**: success, warning, error, info
|
||||
- **badge**: active, inactive
|
||||
- **navigation**: active, hover
|
||||
- **toggle**: on, off, disabled
|
||||
- **slider**: dragging, disabled
|
||||
- **tab**: selected, hover
|
||||
- **list**: selected, hover
|
||||
- **table**: sorted, hover
|
||||
|
||||
**User can override**: "Only add hover and focus" or "Add error state only"
|
||||
|
||||
### 3. Read Existing Component Files
|
||||
|
||||
Read both files:
|
||||
- `{component-name}.uxm` - Current JSON metadata
|
||||
- `{component-name}.md` - Current ASCII template
|
||||
|
||||
Extract:
|
||||
- Current states (from behavior.states array)
|
||||
- Component type (from type field)
|
||||
- Visual properties (from ascii section)
|
||||
- Variables (from ascii.variables array)
|
||||
- Border style from default state (from behavior.states[0].properties.border)
|
||||
|
||||
### 4. Generate New States
|
||||
|
||||
For each new state to add:
|
||||
|
||||
**A. Add state definition to .uxm file**
|
||||
|
||||
Insert into the `behavior.states` array. Each state needs:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "hover",
|
||||
"properties": {
|
||||
"border": "heavy",
|
||||
"background": "primary-dark",
|
||||
"textColor": "default"
|
||||
},
|
||||
"triggers": ["mouseenter"]
|
||||
}
|
||||
```
|
||||
|
||||
**State property patterns by state name**:
|
||||
|
||||
- **hover**:
|
||||
- border: "heavy"
|
||||
- background: slightly darker than default
|
||||
- triggers: ["mouseenter"]
|
||||
|
||||
- **focus**:
|
||||
- border: "double"
|
||||
- background: same as default
|
||||
- textColor: "primary"
|
||||
- triggers: ["focus"]
|
||||
|
||||
- **active**:
|
||||
- border: "heavy"
|
||||
- background: "filled"
|
||||
- triggers: ["mousedown"]
|
||||
|
||||
- **disabled**:
|
||||
- border: "dashed"
|
||||
- opacity: 0.5
|
||||
- cursor: "not-allowed"
|
||||
|
||||
- **error**:
|
||||
- border: "heavy"
|
||||
- borderColor: "red"
|
||||
- textColor: "error"
|
||||
|
||||
- **success**:
|
||||
- border: "heavy"
|
||||
- borderColor: "green"
|
||||
- textColor: "success"
|
||||
|
||||
- **loading**:
|
||||
- opacity: 0.7
|
||||
- cursor: "wait"
|
||||
|
||||
- **checked** (checkbox/radio):
|
||||
- border: "heavy"
|
||||
- background: "filled"
|
||||
- textColor: "primary"
|
||||
|
||||
- **selected**:
|
||||
- border: "heavy"
|
||||
- background: "highlight"
|
||||
- textColor: "primary"
|
||||
|
||||
- **open** (modal/select):
|
||||
- visible: true
|
||||
- triggers: ["click"]
|
||||
|
||||
- **visited** (link):
|
||||
- textColor: "visited"
|
||||
|
||||
**B. Generate ASCII for new state in .md file**
|
||||
|
||||
Use appropriate box-drawing characters for each state:
|
||||
|
||||
- **hover**: Heavy border `┏━┓┃┗━┛`
|
||||
- **focus**: Double border `╔═╗║╚═╝`
|
||||
- **active**: Heavy filled `┏━┓┃┗━┛` with darker interior
|
||||
- **disabled**: Dashed border `┌┄┄┐┆└┄┄┘`
|
||||
- **error**: Heavy border with indicator `┏━┓┃┗━┛ ⚠`
|
||||
- **success**: Heavy border with indicator `┏━┓┃┗━┛ ✓`
|
||||
- **checked**: Box with checkmark `[✓]` or filled indicator
|
||||
- **selected**: Heavy border with highlight background
|
||||
- **loading**: Spinner or progress indicator
|
||||
|
||||
**Template for new state section in .md file**:
|
||||
|
||||
```markdown
|
||||
## {State Name} State
|
||||
|
||||
\`\`\`
|
||||
{ASCII art using appropriate border style}
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
### 5. Update Files
|
||||
|
||||
**Write updated files**:
|
||||
- Overwrite `{component-name}.uxm` with expanded states array
|
||||
- Append new state sections to `{component-name}.md`
|
||||
|
||||
**Preserve**:
|
||||
- All existing metadata (name, description, author, created, tags, category)
|
||||
- All existing variables
|
||||
- All existing states
|
||||
- All existing props
|
||||
- Component ID and version
|
||||
|
||||
**Update**:
|
||||
- `metadata.modified` timestamp (set to current ISO 8601 timestamp)
|
||||
- `behavior.states` array (add new states to end)
|
||||
- `.md` file (append new state sections before Variables section if it exists, otherwise at end)
|
||||
|
||||
**Important**: When updating the .md file, insert new state sections AFTER existing state sections but BEFORE the Variables, Accessibility, and Usage sections.
|
||||
|
||||
### 5a. Validate Expanded Component
|
||||
|
||||
After updating the files, validate the expanded component to ensure quality:
|
||||
|
||||
```bash
|
||||
uv run {SKILL_ROOT}/../uxscii-component-creator/scripts/quick_validate.py \\
|
||||
./fluxwing/components/{component-name}.uxm \\
|
||||
{SKILL_ROOT}/../uxscii-component-creator/schemas/uxm-component.schema.json
|
||||
```
|
||||
|
||||
**Validation checks:**
|
||||
- ✓ JSON schema compliance
|
||||
- ✓ All states have valid properties
|
||||
- ✓ Variables match between .uxm and .md
|
||||
- ✓ Accessibility requirements met
|
||||
- ✓ No duplicate states
|
||||
|
||||
**If validation fails:**
|
||||
1. Read the error messages
|
||||
2. Fix the issues in the .uxm or .md files
|
||||
3. Re-validate before confirming to user
|
||||
|
||||
**Performance**: ~100ms (very fast!)
|
||||
|
||||
### 6. Confirm Expansion
|
||||
|
||||
Show summary:
|
||||
```
|
||||
✓ Expanded: ./fluxwing/components/{component-name}
|
||||
✓ Added states: hover, active, disabled
|
||||
✓ Total states: 4 (default, hover, active, disabled)
|
||||
|
||||
Preview of hover state:
|
||||
┏━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ {{text}} ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━┛
|
||||
```
|
||||
|
||||
## Resources Available
|
||||
|
||||
- **State patterns**: `{SKILL_ROOT}/docs/06-ascii-patterns.md` - Box-drawing characters
|
||||
- **Component creation**: `{SKILL_ROOT}/docs/03-component-creation.md` - Component structure
|
||||
|
||||
## Example Interaction
|
||||
|
||||
```
|
||||
User: Expand submit-button with hover state
|
||||
|
||||
Skill: I found `submit-button` in ./fluxwing/components/
|
||||
|
||||
Current states: default
|
||||
|
||||
I'll add the hover state to make the button interactive.
|
||||
|
||||
[Reads submit-button.uxm and submit-button.md]
|
||||
[Generates hover state]
|
||||
[Updates both files]
|
||||
|
||||
✓ Expanded: ./fluxwing/components/submit-button
|
||||
✓ Added states: hover
|
||||
✓ Total states: 2 (default, hover)
|
||||
|
||||
Preview of hover state:
|
||||
┏━━━━━━━━━━━━━━━━━━━━┓
|
||||
┃ Submit Form ┃
|
||||
┗━━━━━━━━━━━━━━━━━━━━┛
|
||||
|
||||
Next steps:
|
||||
- Add more states (active, disabled)
|
||||
- Use this button in a screen
|
||||
- View all components
|
||||
```
|
||||
|
||||
## Example with Custom States
|
||||
|
||||
```
|
||||
User: Add focus and error states to email-input
|
||||
|
||||
Skill: I found `email-input` in ./fluxwing/components/
|
||||
|
||||
Current states: default
|
||||
|
||||
I'll add the requested states: focus, error
|
||||
|
||||
[Generates only focus and error states]
|
||||
|
||||
✓ Expanded: ./fluxwing/components/email-input
|
||||
✓ Added states: focus, error
|
||||
✓ Total states: 3 (default, focus, error)
|
||||
|
||||
Note: Standard input states also include 'disabled'.
|
||||
Let me know if you want to add it!
|
||||
```
|
||||
|
||||
## Quality Standards
|
||||
|
||||
Ensure expanded components include:
|
||||
- ✓ Valid JSON schema compliance (no breaking changes)
|
||||
- ✓ All new states have definitions in .uxm behavior.states array
|
||||
- ✓ All new states have ASCII sections in .md
|
||||
- ✓ State properties match component type conventions
|
||||
- ✓ Consistent box-drawing character usage
|
||||
- ✓ Updated modification timestamp
|
||||
- ✓ Preserved existing data (no data loss)
|
||||
- ✓ No duplicate states (check before adding)
|
||||
|
||||
## Important Notes
|
||||
|
||||
- **Always preserve existing states** (never remove or modify existing ones)
|
||||
- **Detect duplicate states** (skip if state already exists in behavior.states array)
|
||||
- **Validate component after expansion** (ensure valid JSON)
|
||||
- **Use appropriate border styles per state** (refer to patterns doc)
|
||||
- **Match visual style of existing default state** (consistent dimensions and layout)
|
||||
- **Test keyboard navigation** for new interactive states
|
||||
- **Insert .md sections in correct location** (after states, before Variables section)
|
||||
- **Update only the modified timestamp** (preserve created timestamp)
|
||||
|
||||
## Error Handling
|
||||
|
||||
If component not found:
|
||||
```
|
||||
✗ Component '{component-name}' not found.
|
||||
|
||||
Searched in:
|
||||
- ./fluxwing/components/
|
||||
- ./fluxwing/library/
|
||||
|
||||
Available components:
|
||||
[List first 10 components found]
|
||||
|
||||
Please check the component name and try again.
|
||||
```
|
||||
|
||||
If state already exists:
|
||||
```
|
||||
⚠ State 'hover' already exists in {component-name}.
|
||||
Skipping duplicate state.
|
||||
|
||||
Current states: default, hover
|
||||
Adding: active, disabled
|
||||
```
|
||||
|
||||
If file write fails:
|
||||
```
|
||||
✗ Failed to update {component-name}.
|
||||
|
||||
Error: [specific error message]
|
||||
|
||||
The component files remain unchanged.
|
||||
Please check file permissions and try again.
|
||||
```
|
||||
|
||||
You're helping users create fully interactive uxscii components!
|
||||
294
skills/fluxwing-component-expander/docs/03-component-creation.md
Normal file
294
skills/fluxwing-component-expander/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!
|
||||
498
skills/fluxwing-component-expander/docs/06-ascii-patterns.md
Normal file
498
skills/fluxwing-component-expander/docs/06-ascii-patterns.md
Normal file
@@ -0,0 +1,498 @@
|
||||
# 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
|
||||
|
||||
### Padding Example
|
||||
```
|
||||
╭──────────────╮
|
||||
│ │ ← 1 line padding
|
||||
│ Content │
|
||||
│ │ ← 1 line padding
|
||||
╰──────────────╯
|
||||
```
|
||||
|
||||
### Grid Alignment
|
||||
```
|
||||
╭────╮╭────╮╭────╮ ← No gap
|
||||
╭────╮ ╭────╮ ╭────╮ ← 1 char gap
|
||||
╭────╮ ╭────╮ ╭────╮ ← 2 char gap
|
||||
```
|
||||
|
||||
## 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!
|
||||
Reference in New Issue
Block a user