View detailed information about a specific uxscii component including metadata, states, props, and ASCII preview. Use when working with .uxm files, when user wants to see, view, inspect, or get details about a .uxm component.
Displays detailed metadata, props, states, and ASCII preview for a specific uxscii component. Use when users request to view, inspect, or get details about a .uxm file.
/plugin marketplace add trabian/fluxwing-skills/plugin install fluxwing-skills@fluxwing-marketplaceThis skill is limited to using the following tools:
docs/02-core-concepts.mdView detailed information about a specific uxscii component from any source.
READ from (bundled templates - reference only):
{SKILL_ROOT}/../uxscii-component-creator/templates/ - 11 component templates{SKILL_ROOT}/../uxscii-screen-scaffolder/templates/ - 2 screen examples (if available)READ from (project workspace):
./fluxwing/components/ - Your created components./fluxwing/library/ - Customized template copies./fluxwing/screens/ - Your created screensNEVER write - this is a read-only viewer!
Display comprehensive details about a single uxscii component, including metadata, ASCII template preview, and context-appropriate actions.
Search these locations in order and stop at the first match:
Project Components: ./fluxwing/components/[name].uxm
Project Library: ./fluxwing/library/[name].uxm
Bundled Templates: {SKILL_ROOT}/../uxscii-component-creator/templates/[name].uxm
Important: Stop searching after first match. If found in bundled templates, check if it also exists in user's project and add a note: "š” You also have a customized version in ./fluxwing/library/"
For the matched component, read both files:
[name].uxm - JSON metadata[name].md - ASCII templatePresent component information in a clean, scannable format:
š PRIMARY-BUTTON
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š¦ Source: Bundled Template
š Location: Component Creator Templates
ā±ļø Modified: 2024-10-11 10:30:00
š Version: 1.0.0
Description:
Standard clickable button with hover, focus, and disabled states
Component Details:
ā¢ Type: button
ā¢ Props: text (string), variant (string), disabled (boolean)
ā¢ States: default, hover, focus, disabled
ā¢ Accessibility: ā Role (button), ā Focusable, ā Keyboard (Space, Enter)
ASCII Template Preview (first 20 lines):
Default State:
āāāāāāāāāāāā
ā {{text}} ā
āāāāāāāāāāāā
Hover State:
āāāāāāāāāāāāā
āā {{text}} āā
āāāāāāāāāāāā
Disabled State:
ā ā ā ā ā āā
ā {{text}} ā
ā ā ā ā ā āā
[... 1 more state]
Template has 4 states total. View full template?
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Header Section:
Description:
metadata.description field from .uxm fileComponent Details:
type fieldpropName (type)text (string), disabled (boolean)ASCII Template Preview:
[... N more states/lines]{{variableName}}If .md template exceeds 20 lines:
[... N more states]After displaying the component, offer context-appropriate actions:
What would you like to do?
1ļøā£ Copy to project library (makes it editable)
2ļøā£ View full template file (all states)
3ļøā£ View full metadata (complete .uxm)
4ļøā£ Browse all components
Action Details:
./fluxwing/library/What would you like to do?
1ļøā£ Edit component (modify .uxm and .md)
2ļøā£ View full template file (all states)
3ļøā£ View full metadata (complete .uxm)
4ļøā£ Delete component (manual: remove files from filesystem)
5ļøā£ Browse all components
Action Details:
To delete this component, remove these files from your filesystem:
ā¢ ./fluxwing/components/[name].uxm
ā¢ ./fluxwing/components/[name].md
Which component would you like to view?
Example:
"Show me primary-button"
"View details for user-card"
View all available components: Ask me to "show me all components"
ā Component '[name]' not found.
Searched in:
- ./fluxwing/components/
- ./fluxwing/library/
- Bundled templates
Available components:
[List first 10 components found]
Did you mean one of these?
- primary-button
- submit-button
- user-card
Fuzzy search: If component name is close to an existing component, suggest it:
ā Component 'primry-button' not found.
Did you mean 'primary-button'?
ā Found component but couldn't read files.
Location: ./fluxwing/components/[name].uxm
Error: [specific error message]
Please check file permissions and try again.
User: Show me the primary-button
Skill: š PRIMARY-BUTTON
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š¦ Source: Bundled Template
š Location: Component Creator Templates
Description:
Standard clickable button with hover, focus, and disabled states
Component Details:
ā¢ Type: button
ā¢ Props: text (string), variant (string), disabled (boolean)
ā¢ States: default, hover, focus, disabled
ā¢ Accessibility: ā Full support
[ASCII preview shown...]
What would you like to do?
1ļøā£ Copy to project library
2ļøā£ View full template
3ļøā£ View metadata
4ļøā£ Browse all components
User: What's in my submit-button component?
Skill: š SUBMIT-BUTTON
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
šØ Source: Your Component
š Location: ./fluxwing/components/submit-button.uxm
ā±ļø Modified: 2024-10-15 14:23:00
Description:
Custom submit button for forms
Component Details:
ā¢ Type: button
ā¢ Props: text (string)
ā¢ States: default
ā¢ Accessibility: ā Basic support
[ASCII preview shown...]
š” Tip: Add more states with "expand submit-button with hover and disabled"
{SKILL_ROOT}/docs/02-core-concepts.md for component fundamentalsYou're helping users understand their uxscii components in detail!
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.