Claude MarketplacesSubmit
himself65 avatar

Generative Ui

himself65/finance-skills

This is the complete Anthropic "Imagine" design system for Claude's show_widget tool, which renders interactive HTML/SVG widgets inline on claude.ai. It's comprehensive: routing tables for picking the right visual type, strict streaming-order rules (styles before HTML before scripts), the full CSS variable spec with dark mode support, Chart.js templates with onload callbacks, and hard constraints like the CDN allowlist and the no-comments rule. If you're building dashboards, diagrams, or interactive explainers in Claude conversations, this gives you the actual design guidelines Anthropic uses internally. The philosophy is clean: flat surfaces, no gradients, semantic colors that adapt to light and dark, and text goes in your response while visuals go in the tool. It's opinionated but thorough.

skills.sh installs
3.4K
GitHub stars
3.5K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add himself65/finance-skills --skill generative-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

Generative UI Skill

This skill contains the complete design system for Claude's built-in show_widget tool — the generative UI feature that renders interactive HTML/SVG widgets inline in claude.ai conversations. The guidelines below are the actual Anthropic "Imagine — Visual Creation Suite" design rules, extracted so you can produce high-quality widgets directly without needing the read_me setup call.

How it works: On claude.ai, Claude has access to the show_widget tool which renders raw HTML/SVG fragments inline in the conversation. This skill provides the design system, templates, and patterns to use it well.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/himself65/finance-skills
Categories
Frontend Development, DevOps & CI/CD, Documentation, Code Review & Quality, AI & Agent Building, Design & UI/UX, Finance & Trading
First seen
May 16, 2026

More from himself65/finance-skills

All 25

Recommended

More Frontend Development
1netlify avatarnetlify-frameworksnetlify/context-and-toolsGuide for deploying web frameworks on Netlify. Use when setting up a framework project (Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit, Remix) for 3.4Kskills.sh installs
2dpearson2699 avatarswiftui-webkitdpearson2699/swift-ios-skillsEmbeds and controls web content in SwiftUI with WebKit for SwiftUI, including WebView, WebPage, navigation policies, JavaScript execution, observable page state3.4Kskills.sh installs
3jezweb avatarcolor-palettejezweb/claude-skillsGenerate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS ou3.4Kskills.sh installs
4vercel avatarstreamdownvercel/streamdownImplement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and C3.3Kskills.sh installs
5gogf avatargoframe-v2gogf/skillsGoFrame v2 development skill. Use only when the target Go project uses or is explicitly adopting GoFrame v2: the nearest go.mod requires github.com/gogf/gf/v2, 3.3Kskills.sh installs
6onmax avatarvitestonmax/nuxt-skillsUse when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.3.2Kskills.sh installs