为 Claude 内置的生成式 UI 提供设计系统和指南——即 show_widget 工具，可在 claude.ai 对话中内联渲染交互式 HTML/SVG 小部件。此技能提供了完整的 Anthropic “Imagine” 设计系统，使 Claude 无需先调用 read_me 即可生成高质量的小部件。
此技能为 Claude 提供了完整的生成式 UI 设计系统和指南，专门用于 show_widget 工具，该工具能够在 claude.ai 对话中直接内联渲染交互式 HTML 和 SVG 小部件。它封装了 Anthropic 的 “Imagine” 设计系统，使 Claude 能够直接生成高质量、美观的视觉元素，而无需在每次生成前读取相关知识。该技能适用于多种视觉内容创建场景，包括数据可视化、交互式图表、仪表盘、流程图、线框图、交互式说明器以及任何超出纯文本或 Markdown 的视觉输出。当用户提出“展示”、“可视化”、“绘制”、“图表”、“仪表盘”、“流程图”、“小部件”、“交互式”、“线框图”、“演示”或“解释 X 的工作原理”（附带视觉元素）等请求，或希望以视觉方式展示金融数据、创建对比网格、构建包含滑块、开关或实时更新显示的工具时，此技能会被触发。它通过在标准 Markdown 和代码生成之上提供一致的设计规范和指导原则，确保了生成的 UI 组件具有高度的可用性和视觉一致性。
npx skills add https://github.com/himself65/finance-skills/tree/main/skills/generative-uiInstalled? Explore more 图像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
为 Claude 内置的生成式 UI 提供设计系统和指南——即 show_widget 工具，可在 claude.ai 对话中内联渲染交互式 HTML/SVG 小部件。此技能提供了完整的 Anthropic “Imagine” 设计系统，使 Claude 无需先调用 read_me 即可生成高质量的小部件。当用户要求可视化数据、创建交互式图表、构建仪表盘、渲染图表、绘制流程图、展示线框图、创建交互式说明器或生成任何超出纯文本或 Markdown 的视觉内容时，请使用此技能。触发词包括：“展示”、“可视化”、“绘制”、“图表”、“仪表盘”、“图表（流程图）”、“小部件”、“交互式”、“线框图”、“演示”、“解释 X 的工作原理”（带视觉元素），或任何要求视觉/交互输出的请求。当用户希望以视觉方式展示金融数据、创建对比网格，或构建包含滑块、开关或实时更新显示的工具时，也会触发此技能。
This repo contains 5 individual skills — each has its own dedicated page.
Check the current status of the Strait of Hormuz — shipping transit data, oil price impact, stranded vessels, insurance risk levels, diplomatic developments, and global trade impact. Use this skill whenever the user asks about the Strait of Hormuz, Hormuz chokepoint, Persian Gulf shipping risk, oil transit disruption, war risk premium in the Gulf, Middle East shipping routes, tanker traffic through Hormuz, oil supply chain risk, or geopolitical risk affecting energy markets. Triggers include: "Hormuz status", "Strait of Hormuz", "is Hormuz open", "shipping through the Gulf", "oil chokepoint", "Persian Gulf tanker traffic", "war risk premium", "Hormuz crisis", "energy supply chain risk", "oil transit disruption", "Middle East shipping", any mention of Hormuz or Persian Gulf in context of oil, shipping, or geopolitical risk.
Generate an interactive options payoff curve chart with dynamic parameter controls. Use this skill whenever the user shares an options position screenshot, describes an options strategy, or asks to visualize how an options trade makes or loses money. Triggers include: any mention of butterfly, spread (vertical/calendar/diagonal/ratio), straddle, strangle, condor, covered call, protective put, iron condor, or any multi-leg options structure. Also triggers when a user pastes strike prices, premiums, expiry dates, or says things like "show me the payoff", "draw the P&L curve", "what does this trade look like", or uploads a screenshot from a broker (IBKR, TastyTrade, Robinhood, etc). Always use this skill even if the user only provides partial info — extract what you can and use defaults for the rest.
Analyze stock correlations to find related companies and trading pairs. Use when the user asks about correlated stocks, related companies, sector peers, trading pairs, or how two or more stocks move together. Triggers: "what correlates with NVDA", "find stocks related to AMD", "correlation between AAPL and MSFT", "what moves with", "sector peers", "pair trading", "correlated stocks", "when NVDA drops what else drops", "stocks that move together", "beta to", "relative performance", "supply chain partners", "correlation matrix", "co-movement", "related tickers", "sympathy plays", "semiconductor peers", "hedging pair", "realized correlation", "rolling correlation", or any request about stocks that move in tandem or inversely. Also triggers for well-known pairs like AMD/NVDA, GOOGL/AVGO, LITE/COHR. If only one ticker is provided, infer the user wants correlated peers.
Read Twitter/X for financial research using opencli (read-only). Use this skill whenever the user wants to read their Twitter feed, search for financial tweets, view bookmarks, look up user profiles, or gather market sentiment from Twitter/X. Triggers include: "check my feed", "search Twitter for", "show my bookmarks", "who follows", "look up @user", "what's trending about", "market sentiment on Twitter", "what are people saying about AAPL", "recent tweets from @elonmusk", "show me @user's posts", "fintwit", any mention of Twitter/X in context of reading financial news or market research. This skill is READ-ONLY — it does NOT support posting, liking, retweeting, or any write operations.
Fetch financial and market data using the yfinance Python library. Use this skill whenever the user asks for stock prices, historical data, financial statements, options chains, dividends, earnings, analyst recommendations, or any market data. Triggers include: any mention of stock price, ticker symbol (AAPL, MSFT, TSLA, etc.), "get me the financials", "show earnings", "what's the price of", "download stock data", "options chain", "dividend history", "balance sheet", "income statement", "cash flow", "analyst targets", "institutional holders", "compare stocks", "screen for stocks", or any request involving Yahoo Finance data. Always use this skill even if the user only provides a ticker — infer intent from context.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.