スキル
UI デザイン、レスポンシブレイアウト、タイポグラフィ、フロントエンド開発に役立つ AI エージェントのスキルを探せます。ログイン不要で、すべてのスキルを閲覧し、説明を読み、インストール用プロンプトをエージェントにコピーできます。
スキルを読み込み中…
Taste Skill
Taste Skill by Leonxlnx: a community frontend design framework for AI coding agents. This is the project overview; choose the Frontend Design skill for the actual SKILL.md. The current v2 release is experimental.
Taste Skill — Frontend Design (v2 experimental)
The actual design-taste-frontend Skill from Taste Skill. Guides AI coding agents through frontend briefs, design direction, redesign audits and pre-flight checks. Community project; v2 is experimental.
Framer Skills — Convert Prompt (community)
A community Framer Skill that converts React, Tailwind, Next.js or HTML/CSS prompts into prompts for a Framer agent, preserving design intent and native editability. Not an official Framer Skill or the Framer Motion animation library.
Framer Skills — Sync Styles (community)
A community Framer Skill for transferring a codebase’s explicit colors, text styles and icons into a Framer project. Requires the official framer skill and a connected project; not an official Framer package or Framer Motion.
Claude Motion — Motion Design (community toolkit)
The motion-design Skill from whaleyxbt/claude-motion: frame-based motion graphics, easing, typography and scene continuity with Remotion. Community toolkit, not Anthropic’s built-in Claude Motion feature. Requires the repository’s timeline and supporting code.
Genjutsu Skill — Cast
Genjutsu’s Cast Skill for UI motion, micro-interactions and creative coding across Web, Jetpack Compose and SwiftUI. Requires the shared skills/_jutsu modules. Use the upstream full-bundle or plugin installation instructions.
Agency Grid Layout Minimal
Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
Ambient Section Particles
Add a restrained particle atmosphere inside one section with configurable shapes, density, gravity, wind, sway, rotation, recycling or settling, pointer disturbance, visibility pausing, responsive limits, and reduced-motion fallbacks. Use for petals, leaves, snow, sparks, confetti, dots, paper, icons, or brand fragments that support a section's mood without obscuring content.
Animation On Scroll
Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
Animation Systems for Product-Grade Web Motion
Guides designing and implementing tasteful, high-performance product-grade web animation systems inspired by Stripe, Linear, Apple, and Vercel.
Apple Design
Master Apple's principles for fluid interfaces, physical motion, and tactile UI through springs, interruption, and spatial consistency on the web.
Atmosphere Background
Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.
Aura Asset Images for Design Mockups
Guides using Aura’s asset library to source Unsplash-style images plus recommended crops and resolutions for design and marketing use.
Background Grid WebGL
Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.
Baseline UI
Enforces opinionated UI standards for typography, spacing, performance, and accessibility to eliminate AI-generated interface slop.
Beautiful Shadows
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation across cards, controls, and modals.
Blue Cloudy Clean Modern
Create a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.
Blue Laser Clean Glass Layout
Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.
Book Serif Index
Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.
Bright Green Tech System WebGL
Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.
Cinematic GSAP Lenis Motion System
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.
Cinematic Scroll Storytelling
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
Clean Minimal Beige Light Mode
Create a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.
cobe.js Lightweight WebGL Globe Skill
Implement a lightweight interactive WebGL globe with cobe.js, including responsive canvas setup, markers, interaction, and React/Next.js integration.
より良いAIデザインのワークフローを作る
エージェントスキルは、特定のタスク向けの再利用可能な手順セットです。UIデザインスキルは、レイアウト、余白、タイポグラフィ、視覚的な一貫性を導きます。フロントエンドスキルは、その方向性をレスポンシブなインターフェースに落とし込みます。プロジェクトとコーディングエージェントの能力に合う手順を選んでください。
スキルの使い方
ライブラリを閲覧するか、デザインのタスクで検索してください。スキルを開いて説明を読み、「エージェントにコピー」でインストール用プロンプトを用意できます。ログインは不要です。エージェントにインストールを依頼する前に、詳細ページで元の GitHub ソースを確認してください。互換性やインストール手順はスキルによって異なります。
完成されたビジュアルの出発点をお探しですか？こちらの ウェブサイトテンプレートとUIデザインプロンプト を見るか、 プロンプトパックとメンバーシップ.