フロントエンドデザインを包括的に強化するスキル。タイポグラフィ、カラー、モーションなどの7つの専門リファレンスと、監査・ポリッシュ・レビューなどの20のコマンドを備え、アンチパターンリストでAIツールが高品質なUIを生成するようガイドします。Claude CodeやCursorなど10のプラットフォームに対応。

4.8(955)

115.0K

userscripts

develop-userscripts

by @xixu-me

このスキルは、TampermonkeyやScriptCatなどの主要なプラットフォーム向けブラウザユーザースクリプトの開発、デバッグ、パッケージング、公開に特化しています。バックグラウンドスクリプト、cronジョブ、設定管理、購読ワークフローの作成と保守を含む、ユーザースクリプトの完全なライフサイクルをカバーし、開発者がブラウザにカスタム機能や自動化タスクを効率的に追加できるようにします。

4.8(20)

109.6K

web-development

next-best-practices

by @vercel-labs

ファイル規約、RSC境界、データパターン、非同期API、メタデータ、エラー処理などを含むNext.jsのベストプラクティスを提供し、Next.jsアプリケーション開発を最適化します。

4.7(2.0K)

91.9K

design-systems

stitch-design-taste

by @leonxlnx

Google Stitch向けに最適化されたセマンティックデザインシステムを生成し、フロントエンドエンジニアリング仕様を記述的なデザイン言語に変換して、画面生成品質を向上させます。

4.7(20)

51.4K

webpack

web-artifacts-builder

by @anthropics

Webプロジェクトの成果物を構築および管理する能力を習得し、AIコーディングエージェントがフロントエンドリソースを効率的にパッケージ化および最適化し、デプロイされたWebアプリケーションの優れた安定したパフォーマンスを保証します。

4.7(856)

50.7K

frontend-design

teach-impeccable

by @pbakaus

Impeccableは、AIが質の高いベストプラクティスに沿ったフロントエンドデザインを生成するのを支援するAIスキルです。23のコマンドとアンチパターンルールを提供し、タイポグラフィ、色彩、モーション、空間レイアウト、インタラクション、レスポンシブデザイン、UXライティングを網羅し、デザインの効率と品質向上を目指します。

4.7(1.7K)

50.4K

generative-art

algorithmic-art

by @anthropics

アルゴリズムとプログラミング技術を駆使して芸術作品を生成する能力を持ち、AIコーディングエージェントがUI/UXデザインにおいてユニークでダイナミックな視覚要素を作成し、ユーザーエクスペリエンスを向上させます。

4.7(984)

45.8K

web-development

react:components

by @google-labs-code

Reactコンポーネントの開発と管理に焦点を当て、再利用可能で高性能なUIコンポーネントを構築するためのガイダンスとベストプラクティスを提供します。

4.7(1.0K)

44.4K

tailwind-css

tailwind-design-system

by @wshobson

Tailwind CSSデザインシステム向けに、インテリジェントな自動化とマルチエージェントオーケストレーション機能を提供し、デザイナーが統一されたユーザーインターフェースを効率的に構築・管理できるよう支援します。

4.7(1.1K)

43.8K

react-native

building-native-ui

by @expo

ExpoプロジェクトでネイティブUIを構築するためのAIエージェントスキルセット。インテリジェントなアシスタンスを提供し、モバイル開発者がクロスプラットフォームのユーザーインターフェースを効率的に設計・実装できるよう支援します。

4.7(984)

43.0K

ui-design

gpt-taste

by @leonxlnx

Awwwards 受賞作品で訓練されたフロントエンドデザインエンジニア、高品質で偏りのないウェブデザインとコードを生成。

4.7(13)

40.5K

react

vercel-react-view-transitions

by @vercel-labs

このスキルは、ReactおよびNext.jsアプリケーションでスムーズでネイティブ感のあるビュー遷移アニメーションを実装するのに役立ちます。ReactのView Transition APIを活用し、ページ遷移、コンポーネントの出入り、共有要素、方向性ナビゲーションアニメーションをサポートします。<ViewTransition>コンポーネントと`next/link`の`transitionTypes`プロパティを使用することで、開発者はさまざまな複雑なアニメーション効果を簡単に作成でき、ユーザーエクスペリエンスを向上させ、すぐに使えるCSSアニメーションレシピも提供します。

4.6(20)

39.7K

css

css-animations

by @heygen-com

HyperFrames 用の CSS アニメーションアダプターパターン。CSS キーフレーム、アニメーション遅延、フィルモードを決定論的にシークし、プレビューとレンダリングを可能にします。ループ、マスク、微妙なパララックスなどのシンプルで固定期間の装飾的な動きに最適です。

4.6(120)

38.2K

animation

animejs

by @heygen-com

HyperFrames向け（むけ）Anime.jsアダプターパターン。HyperFramesコンポジション内（ない）でAnime.jsアニメーションやタイムラインを作成（さくせい）し、`window.__hfAnime`に登録（とうろく）することで、アニメーションをシーク駆動（くどう）で決定論的（けっていろんてき）に制御（せいぎょ）します。Anime.jsの例（れい）をレンダリングセーフなHyperFrames HTMLに変換（へんかん）する際（さい）にも使用（しよう）できます。

4.6(120)

37.4K

shadcn-ui

by @google-labs-code

このスキルは、Shadcn UIに関する専門的なガイダンスを提供し、フロントエンド開発者がこのUIライブラリに基づいたアプリケーションを効率的に統合・構築できるよう支援し、美しいインターフェース、完全な機能、スムーズなユーザーエクスペリエンスを保証します。

4.6(844)

36.9K

tailwind

by @heygen-com

このスキルは、HyperFrames コンポジションに Tailwind CSS v4.2 ブラウザランタイムを統合するための必須パターンを提供します。`hyperframes init --tailwind` を使用したプロジェクトの構築、ユーティリティクラスの記述、CSSファーストの v4 テーマトークンの定義、v3 と v4 の構文の違いの理解をガイドします。また、スタイルの欠落のデバッグや、本番環境で安定したレンダリングのために Tailwind を CSS にコンパイルすべき時期を理解するのに役立ち、確定的で信頼性の高いスタイリングを保証します。

4.6(120)

36.9K

threejs

three

by @heygen-com

HyperFrames用のThree.jsおよびWebGLアダプターパターン。決定論的なThree.jsシーン、WebGLキャンバスレイヤー、AnimationMixerタイムライン、カメラモーション、シェーダー駆動のビジュアル、またはHyperFramesのhf-seekイベントに応答するキャンバスレンダリングを作成する際に使用します。

4.6(120)

36.8K

web-animations

waapi

by @heygen-com

HyperFrames (ハイパーフレームズ) 向けの Web Animations API (WAAPI) アダプターパターン。`element.animate()` モーション、`Animation currentTime` シーキング、`document.getAnimations()`、`KeyframeEffect` タイミング、フィルモード、または HyperFrames で決定論的 (けっていろんてき) にレンダリングする必要があるネイティブブラウザアニメーションを作成する際に使用します。

4.6(120)

36.7K

next.js-caching

next-cache-components

by @vercel-labs

Next.js 16のキャッシュコンポーネントを紹介します。PPR、キャッシュディレクティブ、キャッシュライフサイクル、キャッシュタグ、再検証タグが含まれます。

4.6(604)

30.8K

expo-updates

upgrading-expo

by @expo

このスキルセットは、Expoプロジェクトのアップグレードプロセスを支援するために特別に設計されたAIエージェント機能を提供し、バージョン移行と互換性処理を簡素化し、モバイルアプリが新バージョンへスムーズに移行することを保証します。

4.6(572)

30.0K

frontend

imagegen-frontend-web

by @leonxlnx

このスキルは、プレミアムでコンバージョンを意識したウェブサイトデザインのリファレンス画像を生成するための、エリートなフロントエンド画像ディレクションツールです。各セクションごとに1枚の独立した横長画像を生成するという厳格なルールに従い、多様な構成、様々なCTA、ヒーローセクションのスケールを確保しつつ、視覚的な一貫性を保ちます。ランディングページ、マーケティングサイト、製品コンプに最適化されており、開発者やコーディングモデルが正確に再現可能です。

4.6(120)

27.2K

vue

by @antfu

Vueフレームワークを活用してフロントエンド開発を行い、AIエージェントがインタラクティブなユーザーインターフェースとシングルページアプリケーションを効率的に構築できるようにします。

4.6(540)

23.1K

markdown-conversion

baoyu-markdown-to-html

by @JimLiu

MarkdownからHTMLへ：WeChat公式アカウントテーマ、コード構文ハイライト、引用脚注の自動生成、複数のタイポグラフィテーマをサポートします。

4.6(192)

22.7K

vue

vue-best-practices

by @hyf0

Vueフロントエンド開発のベストプラクティスを習得し、AIエージェントが効率的で保守可能、かつ業界標準に準拠したVueアプリケーションコードを作成できるようにします。

4.6(576)

22.1K

dom-manipulation

use-dom

by @expo

DOM操作に関連するAIエージェントスキルセットを提供し、フロントエンド開発者がExpoプロジェクトでUI要素を効率的に処理するのを支援します。

4.6(358)

21.5K

nextjs

next-upgrade

by @vercel-labs

Next.jsプロジェクトを最新バージョンにアップグレードするようユーザーを案内し、最新機能とパフォーマンス最適化を活用し、開発効率を向上させます。

4.6(283)

20.8K

nextjs

nextjs-app-router-patterns

by @wshobson

Next.js App Routerパターンに焦点を当て、フロントエンド開発にインテリジェントな自動化とマルチエージェントオーケストレーション機能を提供し、ルーティング管理を最適化します。

4.6(385)

18.4K

opentui

by @msmps

OpenTUIプラットフォームを使用してターミナルユーザーインターフェース（TUI）を構築し、意思決定ツリーを通じて適切なフレームワークとコンポーネントを選択します。

4.5(49)

15.4K

vueuse

vueuse-functions

by @antfu

Vue.js/NuxtプロジェクトでVueUseコンポーザブル関数を適切に適用し、簡潔で保守可能な機能を構築します。

4.5(340)

15.3K

chat-ui

by @inferen-sh

フロントエンドチャットUI開発に特化し、APIを通じてAgentにインタラクション機能を提供し、ユーザーフレンドリーな対話体験を構築します。

4.5(560)

14.0K

ai-agent-ui

agent-ui

by @inferen-sh

フロントエンドAgentユーザーインターフェース開発に特化し、APIを通じてAgentに視覚的なインタラクション機能を提供し、ユーザー操作体験を向上させます。

4.5(556)

13.9K

ui-widgets

widgets-ui

by @inferen-sh

フロントエンドウィジェット（Widgets）ユーザーインターフェース開発に特化し、APIを通じてAgentに豊富なインタラクティブコンポーネントを提供し、アプリケーション機能を強化します。

4.5(556)

13.9K

ui-tools

tools-ui

by @inferen-sh

フロントエンドツールユーザーインターフェース開発に特化し、APIを通じてAgentに様々なツールを統合・表示する機能を提供し、作業効率を向上させます。

4.5(556)

13.9K

animation

gsap-core

by @greensock

GSAPコアアニメーションエンジンの専門家。トゥイーンアニメーション、イージング関数、スタッガードアニメーション、タイムライン制御を扱います。

4.5(52)

13.4K

vue.js-debugging

vue-debug-guides

by @hyf0

Vueフロントエンドデバッグガイドを習得し、AIエージェントがVueアプリケーションの問題を迅速に特定・解決し、コード品質と安定性を確保できるようにします。

4.5(381)

13.3K

wcag

web-accessibility

by @supercent-io

このスキルは、新しいUIコンポーネントのアクセシブルな設計と開発に焦点を当て、既存システムにおけるアクセシビリティの問題を特定・修正するためのアクセシビリティ監査を実施し、ユーザーエクスペリエンスを確保します。

4.5(508)

12.7K

clerk-auth

clerk-nextjs-patterns

by @clerk

ClerkとNext.jsの統合パターンに焦点を当て、AIスキルを活用して開発効率を高め、ユーザー認証と管理プロセスを簡素化します。

4.5(32)

12.4K

chrome-devtools

by @github

Chrome開発者ツールを活用してフロントエンドのデバッグ、パフォーマンス分析、品質保証を行い、AIエージェントがウェブアプリケーションを最適化するのを支援します。

4.5(335)

12.1K

performance

gsap-performance

by @greensock

GSAPのパフォーマンス最適化の専門家。60fpsの滑らかなアニメーションを実現し、レイアウトと描画のオーバーヘッドを削減し、カクつきの問題を解決します。

4.5(85)

12.1K

gsap

gsap-timeline

by @greensock

GSAPタイムラインの専門家。多段階のシーケンスアニメーションと並行アニメーションを調整し、キーフレーム式の複雑なアニメーション編成を実現します。

4.5(89)

12.0K

electron.js

electron

by @vercel-labs

Chrome DevToolsプロトコルを介してプロキシブラウザを使用し、VS Code、SlackなどのElectronデスクトップアプリケーションを自動化します。

4.5(472)

11.8K

nuxt

nuxt-ui

by @nuxt

@nuxt/ui v4を利用してユーザーインターフェースを構築し、125以上のアクセシブルなVueコンポーネントを提供して開発を加速します。

4.5(26)

11.8K

gsap

gsap-plugins

by @greensock

GSAPプラグイン使用の専門家。スクロール、ドラッグ、SVG、テキスト、物理効果、カスタムイージングなどの高度な機能を網羅します。

4.5(57)

11.8K

pinia

by @antfu

PiniaはVueの公式状態管理ライブラリで、型安全で拡張性があり、ストアの定義、状態、ゲッター、アクションの処理に使用します。

4.5(278)

11.7K

gsap

gsap-utils

by @greensock

GSAPユーティリティ関数の専門家。数学計算、配列操作、単位変換、値マッピングなどのアニメーション補助機能を扱います。

4.5(104)

11.7K

AI フロントエンドエンジニアリング