프론트엔드 및 풀스택 개발을 위한 라이브 프리뷰 기능. 웹 페이지, 프론트엔드 앱, 풀스택 프로젝트, 또는 모든 웹 UI를 구축할 때 사용하세요.
이 스킬은 개발자가 AI 에이전트를 사용하여 프론트엔드 또는 풀스택 웹 애플리케이션을 빌드하는 동안, 브라우저에서 바로 결과물을 실시간으로 미리볼 수 있는 라이브 프리뷰 환경을 제공합니다. React, Vue, Vite, 정적 HTML, Express, FastAPI 등 브라우저에서 볼 수 있는 결과물을 생성하는 모든 프레임워크를 지원합니다. 또한, 개발한 앱을 커뮤니티에 공개하거나 배포하여 공개 인터넷에서 접근 가능한 미리보기 링크를 공유하는 기능도 포함되어 있어, 빠른 프로토타이핑과 협업에 매우 유용합니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 코딩 에이전트에서 사용하도록 설계되었습니다.
npx skills add https://github.com/starchild-ai-agent/official-skills/tree/main/skills/preview-dev프론트엔드 및 풀스택 개발을 위한 라이브 프리뷰입니다. 사용자가 웹 페이지, 프론트엔드 앱, 풀스택 프로젝트, 또는 모든 웹 UI(React, Vue, Vite, 정적 HTML, Express, FastAPI 등 브라우저에서 볼 수 있는 결과물을 생성하는 모든 프레임워크 포함)를 구축하려는 경우 사용하세요. 또한 사용자가 프리뷰를 공개 인터넷에 배포, 게시, 또는 공유하려는 경우(커뮤니티 게시)에도 사용하세요.
This repo contains 20 individual skills — each has its own dedicated page.
Preview panel and iframe diagnostics: registry, ports, paths, blank screens. Use when a preview tab is broken or missing (e.g. white screen, tab disappeared, 404 on assets, preview not loading, list running services).
Register a custom LLM endpoint with your own API key for chat in Starchild. Use when adding a personal Anthropic, OpenAI, Grok, Qwen, DeepSeek, NEAR AI, or Venice key as a chat model (e.g. add my Claude key, register DeepSeek).
Interactive web charts: line, bar, candle, scatter, with HTML and screenshot output. Use when visualizing data for analysis or BI (e.g. plot BTC vs gold last year, bar chart of revenue by quarter, compare two return series).
Generate TradingView-style candlestick charts with indicators. Use when the user wants a visual chart, price visualization, or technical analysis plot.
Connect a ChatGPT or Codex subscription via OAuth device-code login. Use when the user wants to sign in with their ChatGPT Plus, Pro, or Team account (e.g. "use my Codex subscription", "log in with ChatGPT").
Code specialist for writing, debugging, and technical implementation. Use when the user needs code written, bugs fixed, files edited, or features built.
Crypto spot prices, OHLC charts, market discovery, and global stats. Use when looking up coin prices, market caps, trending coins, sector rankings, or comparing tokens (e.g. BTC price, ETH chart, top gainers).
Crypto derivatives data: funding rates, open interest, liquidations, long/short ratios. Use when researching perp markets, tracking Hyperliquid whale positions, or comparing ETF flows (e.g. BTC funding, ETH OI, liquidation heatmap).
Share or open-source any project the user has built — a running preview/service, a project directory, a dashboard, or scripts. Use whenever the user wants to publish, share, make public, list, distribute, deploy publicly, or open-source something. Three independent actions — publish_preview (allocate a public URL for a running service), list_in_dashboard (show it on the public Project Dashboard for discovery), open_source (push project source to the community GitHub repo). Do NOT search the filesystem for publish-related code or write custom deploy/upload scripts — this skill is the single entry point.
Composio gateway: act on 1000+ connected apps like Gmail, Slack, GitHub, Calendar. Use when the user wants to act in a connected SaaS app (e.g. send Gmail, create Notion page, add Calendar event, open a GitHub issue).
Trade perp futures, spot, and RWA on Hyperliquid DEX with up to asset max leverage. Use when placing perp or spot orders, setting TP/SL, or moving funds on Hyperliquid (e.g. long BTC 5x, sell ETH, deposit USDC, set stop).
Agent onboarding for Orderly Network - omnichain perpetual futures infrastructure, MCP server, skills, and developer quickstart
End-to-end project engineering: design, incremental build, verify, debug systematically. Use when building software, dashboards, scheduled jobs, or web apps the user has asked for (e.g. build a price monitor, daily summary task, ship an API).
Scaffold new skills with valid frontmatter, directory layout, and a starter SKILL.md. Use when building a new reusable workflow or wrapping a new API (e.g. create a kalshi skill, scaffold an API helper, start a charting skill).
Search, install, and publish skills across official, community, and global registries. Use when finding or sharing skills (e.g. install a "funding rate" skill, list installed skills, publish my custom skill to the registry).
Build 16:9 slide decks as HTML, exported to PDF (not PowerPoint format). Use when making a deck, presentation, or pitch (e.g. 10-slide pitch deck for X, training course on Y, quarterly results presentation).
Telegram bot binding: create the bot, connect to Starchild, verify, troubleshoot. Use when setting up Telegram delivery (e.g. add my TG bot, bot binding code, fix "telegram not pushing", whitelist a TG username).
Stocks, forex, and commodities prices: real-time quotes and historical bars. Use when looking up traditional-market prices (e.g. AAPL quote, EUR/USD chart, gold price, SPY history). Not for crypto.
Twitter/X data: fetch tweets, search, user profiles, followers, replies, trends. Use for any x.com or twitter.com URL or lookup (e.g. summarize this tweet, recent posts by @vitalikbuterin, search $SOL min_faves:50).
Onboarding script for first-time Starchild users: positioning, quick wins, discovery. Use when the user is new or vague (e.g. "what can you do", "I don't know where to start", first session with no context, generic hello).
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".