Help us improve
Share bugs, ideas, or general feedback.
From fluxwing-skills
Views metadata, props, states, and ASCII previews of uxscii components (.uxm files) from project dirs or bundled templates. Use for inspecting Fluxwing UI components.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin trabian-fluxwing-skillsHow this skill is triggered โ by the user, by Claude, or both
Slash command
/fluxwing-skills:skills/fluxwing-component-viewerThis skill is limited to the following tools:
The summary Claude sees in its skill listing โ used to decide when to auto-load this skill
View detailed information about a specific uxscii component from any source.
Browses and previews uxscii components from bundled templates, project components, library, and screens in Fluxwing workspaces. Use for .uxm file browsing, listing, or searching.
Discovers and retrieves gluestack-ui React Native UI components via MCP tools: lists components/variants (NativeWind, Themed, Unstyled), source code, Storybook demos, and metadata.
Generates AI-optimized prose descriptions for UI components in six-section format (purpose, props, anti-patterns, composition, accessibility, examples) for Figma MCP server and LLM consumption.
Share bugs, ideas, or general feedback.
View 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!