spark-ui
codeweb-dev/spark-ui
An agent skill for discovering, installing, and composing expressive React components from the Spark UI shadcn-compatible source registry.
Overview
This skill instructs AI coding agents on how to correctly locate, inspect, and add signature motion-rich components (such as dynamic islands, animated gradients, number tickers, and interactive pets) from the Spark UI source registry into a React project. It provides comprehensive workflows for validation, local path imports, Tailwind CSS v4 styling rules, and safe supply-chain execution.
Capabilities
- ▸Installs components from the official Spark UI registry using the shadcn CLI
- ▸Guides component import paths and local source customization
- ▸Provides rules for composing interactive widgets, image trails, and animated backgrounds
- ▸Enforces project validation via linting and type checking
Best for
Adding animated UI primitives like shimmering text, masonry grids, or tactile highlights into a Next.js application using shadcn., Guiding an AI agent to install and properly compose complex UI components like a live Spotify card or a dynamic island., Ensuring components adhere to semantic design tokens, TypeScript standards, and reduced-motion guidelines.
Works with
実タスクにどれだけ役立つか(機能の豊富さ・用途の明確さ)。 — AIによるcapabilities/use-cases解析
実装・指示の品質。 — AIによるSKILL.md/README解析
リポジトリがどれだけ活発に保守されているか。 — GitHub 最終push日時の新しさ
ドキュメントの充実度・分かりやすさ。 — README/独自要約の情報量
危険・不審な挙動が無いか。 — AIによるセキュリティレビュー
ありふれたラッパーではない独自性。 — AIによる独自性判定
コミュニティの採用度。 — GitHub Stars/Forks(対数スケール)
対応AIエージェントの広さ。 — AIによる対応エージェント判定
ライセンス不明/制限あり(Red)のSkillは総合スコアに0.85倍の補正を適用します。 ランキングはこのScoreのみで決まり、広告で変わりません。 算出方法の詳細 →
Security considerations
Reminds users to inspect registry items via `shadcn view` prior to installation and prohibits sending project secrets or environment variables to external registry endpoints.
Categories
Summary and analysis are original content generated by AI Skills Rank. The skill's source text is not reproduced here — view it on the linked repository.