skills.rest
cas-team-analyst
cas-team-analystOFFICIAL
Explore all skills by this author →
GitHub

create-micro-ui

Generate single-file HTML micro UI components with Vite live preview.

9|2|Updated Feb 10, 2026
Search Tags:#ui#html#data visualization#frontend#component#vite
One-click install
npx skills add https://github.com/cas-team-analyst/claude-code --skill create-micro-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-micro-ui
Source: https://github.com/cas-team-analyst/claude-code/tree/main/.claude/skills/create-micro-ui
Command: npx skills add https://github.com/cas-team-analyst/claude-code --skill create-micro-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and updating of micro UI components, which are essential for presenting complex results to users in an understandable format.

Core Features & Use Cases

  • Component Generation: Creates single HTML files for UI components.
  • Dynamic Data Handling: Emphasizes using variables and calculations derived from source data, avoiding hardcoded numbers.
  • Development Workflow: Integrates with Vite for hot-reloading and provides commands for data swapping and file copying.
  • Use Case: Quickly generate a visual dashboard component to display real-time sales figures, pulling data from a provided JSON object and styling it with Tailwind CSS.

Quick Start

Use the create-micro-ui skill to generate a new UI component based on the provided data structure.

Frequently Asked Questions about create-micro-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate HTML components for data visualization?▼

To generate HTML components for data visualization, this Skill builds single-file outputs using HTML, CSS, and JavaScript. It binds variables directly from source data structures to create dynamic visual dashboards without hardcoding values.

Can I use Vite to preview dynamic micro UI components locally?▼

Yes, you can use Vite to preview dynamic micro UI components locally. The Skill integrates with Vite to provide hot-reloading during development, enabling live updates as you modify your HTML, CSS, and JavaScript files.

What is the best way to avoid hardcoding numbers in frontend UI components?▼

The best way to avoid hardcoding numbers in frontend UI components is by using dynamic data binding. This Skill emphasizes passing variables and calculations derived from source data structures directly into your HTML output.

Does this tool support building dashboards with Tailwind CSS and JSON data?▼

Yes, this tool supports building dashboards with Tailwind CSS and JSON data. You can quickly generate a visual dashboard component that pulls real-time figures from a provided JSON object and styles it using Tailwind CSS.

How do I update existing UI components without breaking the data structure?▼

To update existing UI components without breaking the data structure, the Skill facilitates modular component design. It provides commands for data swapping and file copying, ensuring your dynamic variables remain intact during updates.

Related Skills

Explore More Design & Creative Skills→
dragnoirdragnoir
45

liquid-templating

Generate Shopify Liquid templates for displaying product data.

Community
Intermediate
mymx2mymx2
4

web-artifacts-builder

Bundle React apps with Vite, Tailwind CSS, and shadcn/ui into a single HTML file.

Community
Advanced
aryankumarraiaryankumarrai

mockup-sandbox

Create and preview UI components prototypes in an isolated Vite dev server with Tailwind/shadcn ui.

Community
Advanced
GACLoveGACLove
2

interactive-dashboard-builder

Generate self-contained HTML dashboards with Chart.js charts and filters.

Community
Intermediate