From skillslida
Generate a static HTML brand/styleguide exploration page for any project. Explores the codebase for existing design patterns, asks multi-select questions about aesthetic direction, and produces a self-contained HTML file with multiple visual theme options (color palettes, typography, UI components, and wireframes). Use when the user wants to explore visual directions, brand options, or redesign ideas.
How this skill is triggered — by the user, by Claude, or both
Slash command
/skillslida:styleguideThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a standalone, static HTML brand/styleguide exploration page with multiple visual theme options for the current project. This file is temporary and independent of the main codebase.
Generate a standalone, static HTML brand/styleguide exploration page with multiple visual theme options for the current project. This file is temporary and independent of the main codebase.
Before asking any questions, silently explore the project to understand the current design baseline:
Summarize your findings briefly to the user (2–4 lines), then proceed to Phase 2.
Use the AskUserQuestion tool to ask the following. All questions must use multiSelect: true so the user can pick multiple answers if they're torn or want hybrid options reflected in the output.
Ask all questions in a single AskUserQuestion call (up to 4 at a time), then follow up with a second call if needed.
Round 1 — big picture:
Vibe / purpose — What should the site feel like to visitors?
Aesthetic mood — Which directions are you drawn to? (pick all that feel right)
Round 2 — specifics:
Color direction — What palette families interest you?
Typography style — What type direction excites you?
Based on the user's answers, design 3 distinct theme options. Each should be a genuinely different direction — not minor variations. If the user selected multiple mood/color preferences, distribute them across the options (e.g., one option leans toward their first pick, another toward their second, a third is a creative hybrid).
For each option, define:
Determine the output filename:
$ARGUMENTS is provided, use that as the filenamestyleguide.html in the project rootGenerate a single, self-contained static HTML file with:
Each option must show:
Color palette — Swatches with hex values and role labels (Background, Surface, Text, Muted, Accent, Accent Dim)
Typography specimen — 4 rows:
<head> for all non-system fonts.UI components — Show realistic previews of:
Layout wireframe — A simplified browser-chrome wireframe showing the approximate page layout using colored blocks. Use opacity/color fills from the palette rather than placeholder gray blocks.
<link> in <head><section> with a clear visual separatorInclude a styled footer section with copy-pasteable commands for running a local server:
# Python 3
python3 -m http.server 8080
# Node / npx
npx serve . --port 8080
# Node / http-server
npx http-server . -p 8080 -o
# PHP
php -S localhost:8080
# VS Code Simple Browser
# Command palette → "Simple Browser: Show"
# Enter: file:///ABSOLUTE/PATH/TO/styleguide.html
Replace styleguide.html with the actual filename used. Replace the absolute path with the real path based on the project's working directory.
Show instructions for opening in VS Code Simple Browser separately, as it doesn't require a server (direct file:// URL).
After generating the file, tell the user:
file:// URL)Then ask a final question using AskUserQuestion:
"Would you like to regenerate any of the options?"
Use multiSelect: true. If the user selects one or more options to regenerate, ask follow-up questions to understand what they want changed for each selected option (mood shift? different color family? different fonts?), then rewrite only those sections in the HTML file and re-present the regeneration offer.
If the user selects "All look good", confirm the file is ready and remind them it's a temporary file to delete when done.
styleguide.html to .gitignore.<style> block in <head>). No external CSS files.npx claudepluginhub thalida/skillslida --plugin skillslidaGuides exploration of visual design direction through conversation, producing style brief with CSS framework and component library configurations for colors, typography, spacing, and animations.
Interactive wizard guiding frontend design process: discovery questions, trend research, moodboard creation, aesthetic selection, and code generation for production-ready UI.
Creates or extracts DESIGN.md visual design systems from scratch, a URL, or a codebase — documenting tokens, components, and style rules for AI agents to reproduce.