html-style_skill
- TypeScript
17
GitHub Stars
2
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill rohunvora/cool-claude-skills --skill html-style- README.md665 B
- SKILL.md4.1 KB
Overview
This skill applies an opinionated, cohesive design system to barebones HTML. It converts plain markup into a consistent, usable UI by injecting a base stylesheet, adding utility classes, and optionally wiring small interactive behaviors. Use it to quickly make tables, lists, status indicators, buttons, and sections look polished and consistent.
How this skill works
The skill scans provided HTML for target elements (tables, lists, status text, buttons, sections, tags, stats) and injects a single <style> block derived from the design system. It then annotates elements with appropriate classes (e.g., .table-styled, .status-success, .tag-group, .trend-up) and inserts minimal JavaScript for copy buttons, drafts, and collapsible sections when needed. The result is immediate visual consistency with options for light or dark themes by toggling a body class.
When to use it
- You have plain or minimally styled HTML and want a unified visual system.
- You need quick, consistent styling for tables, lists, status badges, or stat boxes.
- You’re preparing HTML previews or embeds that must look production-ready without building a full CSS pipeline.
- You want small interactive behaviors added (copy buttons, drafts, collapsibles) without writing JS yourself.
Best practices
- Provide the raw HTML fragment so the skill can add classes and style tags in context.
- Mark elements semantically (tables, th/td, details/summary, buttons) to get the best automatic mappings.
- Choose .table-styled for tables that need hover, colored cells, or row highlights.
- Use status text classes (.stale/.warm/.pending) for inline mentions and status pills (.status-*) for badge-like UI.
- Request dark mode explicitly by adding class="dark" to <body> when appropriate.
Example use cases
- Style an exported admin table to add hover, sortable headers, and positive/negative cell colors.
- Convert a plain task list into a compact dashboard with status pills and trend arrows.
- Wrap a set of user messages with tag pills, stat boxes, and a section header for an app mockup.
- Add copy-to-clipboard buttons and draft persistence to comment or note areas for a prototype.
- Turn plain CSV-generated HTML into a readable, highlighted report with tiered row backgrounds.
FAQ
The skill adds classes and injects a style block and small JS snippets; it avoids destructive DOM changes and preserves original semantic elements.
How do I enable dark mode?
Request dark mode or add class="dark" to the <body>. The injected CSS will switch to the dark theme automatically.
