Communitygithub.com

starchild-ai-agent/preview-dev

Frontend- & Fullstack-Entwicklung mit Live-Vorschau. Verwende diese Fähigkeit, wenn der Benutzer eine Webseite, eine Frontend-App, ein Fullstack-Projekt oder eine Web-UI erstellen möchte – einschließlich React, Vue, Vite, statischem HTML, Express, FastAPI oder jedem Framework, das ein im Browser anzeigbares Ergebnis liefert. Auch geeignet, wenn der Benutzer eine Vorschau im öffentlichen Internet bereitstellen, veröffentlichen oder teilen möchte (Community-Veröffentlichung).

Was ist preview-dev?

Diese Fähigkeit ermöglicht es KI-Agenten, Frontend- und Fullstack-Webentwicklung mit einer Live-Vorschau durchzuführen. Sie ist ideal für Szenarien, in denen Benutzer Webseiten, Frontend-Anwendungen, Fullstack-Projekte oder beliebige Web-UI-Elemente erstellen möchten – unabhängig davon, ob sie React, Vue, Vite, statisches HTML, Express, FastAPI oder ein anderes Framework verwenden, das browserfähige Ergebnisse produziert. Darüber hinaus unterstützt die Fähigkeit das Deployment, die Veröffentlichung oder das Teilen einer Vorschau im öffentlichen Internet (Community-Publishing). Dies ist besonders nützlich für schnelles Prototyping, kollaborative Entwicklung und das Präsentieren von Arbeitsschritten in Echtzeit. Die Fähigkeit funktioniert nahtlos mit verschiedenen KI-Agentenplattformen wie Claude Code, Cursor und Codex und bietet eine einheitliche Schnittstelle für Entwicklung, Test und Bereitstellung.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/starchild-ai-agent/official-skills/tree/main/skills/preview-dev
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht preview-dev?

Frontend- und Fullstack-Entwicklung mit Live-Vorschau. Verwende diese Fähigkeit, wenn der Benutzer eine Webseite, eine Frontend-App, ein Fullstack-Projekt oder eine Web-UI erstellen möchte – einschließlich React, Vue, Vite, statischem HTML, Express, FastAPI oder jedem Framework, das ein im Browser anzeigbares Ergebnis liefert. Auch geeignet, wenn der Benutzer eine Vorschau im öffentlichen Internet bereitstellen, veröffentlichen oder teilen möchte (Community-Veröffentlichung).

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

starchild-ai-agent/browser-preview

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).

starchild-ai-agent/byok-custom-model

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).

starchild-ai-agent/chart

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).

starchild-ai-agent/charting

Generate TradingView-style candlestick charts with indicators. Use when the user wants a visual chart, price visualization, or technical analysis plot.

starchild-ai-agent/chatgpt-codex-onboarding

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").

starchild-ai-agent/coder

Code specialist for writing, debugging, and technical implementation. Use when the user needs code written, bugs fixed, files edited, or features built.

starchild-ai-agent/coingecko

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).

starchild-ai-agent/coinglass

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).

starchild-ai-agent/community-publish

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.

starchild-ai-agent/composio

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).

starchild-ai-agent/hyperliquid

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).

starchild-ai-agent/orderly-onboarding

Agent onboarding for Orderly Network - omnichain perpetual futures infrastructure, MCP server, skills, and developer quickstart

starchild-ai-agent/project-builder

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).

starchild-ai-agent/skill-creator

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).

starchild-ai-agent/skillmarketplace

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).

starchild-ai-agent/slide-creator

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).

starchild-ai-agent/tg-bot-binding

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).

starchild-ai-agent/twelvedata

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.

starchild-ai-agent/twitter

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).

starchild-ai-agent/user-onboarding

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).

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

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".

community

mattpocock/prototype

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.

community

mattpocock/grill-me

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".

community