design
0
design-system
Panda CSSベースのデザインシステム管理。カラーパレット（OKLCH）、セマンティックトークン、スペーシング、フォントサイズ、レシピ（コンポーネントバリアント）の追加・更新・検証を行う。packages/panda-config/配下のデザイントークンを管理し、型安全なスタイル定義をサポート。
TakakiAraki09
content-media
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
design
0
universal-industry
Use when designing animations for any industry or when industry-specific guidelines do not apply
dylantarre
content-media
design
0
ux-iconography
Icon usage patterns using Material Symbols v3. Use when adding icons to buttons, navigation, or status indicators. Covers sizing, accessibility, animations, and color integration with project tokens.
matthewharwood
content-media
design
0
css-tokens
Provides foundational CSS design tokens (custom properties) for typography, spacing, colors, borders, z-index, and transitions. Use when setting up a base token system for a web project.
schalkneethling
content-media
design
0
photographer-testino
Generate images in Mario Testino's glamorous vibrant style. Use when users ask for Testino style, high fashion glamour, bold saturated colors, warm luxurious photography, dynamic sensual energy.
bluewaves-creations
content-media
design
0
repo-logo-generator
Generate minimalist logos for GitHub repositories via OpenRouter. A thin proxy skill with logo-optimized prompts. Use when asked to "generate a logo", "create repo logo", or "make a project logo".
tsilva
content-media
design
0
diagram-formatting
Ensures ASCII/box-drawing diagrams follow consistent formatting standards.
neilpeterson
content-media
design
0
tower-visuals
Provides rules and patterns for drawing machine-based tower visuals using p5.js primitives. Use when designing or modifying tower rendering to use geometric shapes instead of sprites.
LuluFur
content-media
design
0
awesomealgorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
slavochek2
content-media
design
0
ui-clone
Pixel-perfect UI cloning from screenshots or reference pages. Use when users ask to replicate, clone, or recreate a UI from an image, screenshot, or reference website. Triggers on keywords like "复刻", "clone", "replicate", "recreate UI", "像素级还原", "照着这个做", or when a screenshot is provided with implementation intent.
SammySnake-d
content-media
design
0
professional-ui-design
Erstellt professionelle, konsistente UI-Designs für HTML-Formulare. Vermeidet generische AI-Ästhetik, nutzt mutige Design-Entscheidungen und Access-typische Business-Anwendungs-Optik.
DerGueni
content-media
design
0
section-backgrounds
Apply branding guidelines to page sections after style cleanup. Implements 60-30-10 color rule, alternates section backgrounds, and ensures visual hierarchy. Use for each page after running remove-inline-styles.
deomiarn
content-media
design
0
design-system
Billboard-inspired design patterns for implementing UI components with video grids, chart layouts, and editorial typography
Atemndobs
content-media
design
0
implementing-hit-testing
Enables mouse event reception for WPF FrameworkElement using DrawingContext by drawing transparent backgrounds. Use when custom-drawn elements don't receive mouse events.
christian289
content-media
design
0
wireframe-builder
Web/アプリの画面ワイヤーフレーム（構造・レイアウト・導線）をASCII図とMarkdown注釈で作成するSkill。 「ワイヤーフレームを作って」「画面構成を設計して」「画面のレイアウトを考えて」「UI構造を整理して」「画面の骨組みを作って」 「wireframeを書いて」「画面設計して」「ラフを作って」などの依頼で発動する。 出力はASCIIワイヤーフレーム + 画面注釈（状態・制約・挙動）のMarkdown。モックアップ（見た目重視）やプロトタイプ（動作検証）とは異なる。
lilpacy
content-media
design
0
m3-expressive-visualizer
Material 3 Expressiveに準拠し、指定された5つのパレット（Primary〜Quinary）を構成要素別に適用して決算グラフを描画します。
Yoshi-Dai-1
content-media
design
0
catppuccin-theming
Apply Catppuccin color palettes to configs, stylesheets, and terminal themes. This skill should be used when creating or modifying CSS themes, terminal color schemes, shell prompts (Starship, etc.), or any configuration that requires consistent Catppuccin colors. Covers all four official flavors (Latte, Frappe, Macchiato, Mocha) plus ZK's custom variants (rose, sage, grape, honey, blueberry).
SyntaxAsSpiral
content-media
design
0
frontend-css
Write and maintain CSS using consistent methodology (Tailwind, BEM, CSS modules, utility classes) while following the project's design system and avoiding framework overrides. Use this skill when writing CSS styles, applying CSS classes, working with CSS frameworks, or implementing visual designs. When editing CSS files (`.css`, `.scss`, `.sass`), applying Tailwind utility classes, using CSS modules, or styling components. When maintaining design tokens, creating design systems, or ensuring visual consistency. When working with colors, spacing, typography, or any visual styling in stylesheets or component files.
dpietersz
content-media
design
0
implementing-2d-graphics
Implements WPF 2D graphics using Shape, Geometry, Brush, and Pen classes. Use when building vector graphic UIs, icons, charts, or diagrams in WPF applications.
christian289
content-media
design
0
visual-test-figma
Compare implementation screenshot with Figma design for visual testing
rayzru
content-media
design
0
ui-design-system
UI guidelines following the "Engineered Hardware" aesthetic.
ArtisanClarinets
content-media
design
0
svg
Create precise, production-ready SVG graphics for technical and business contexts (diagrams, P&IDs, HMI/SCADA widgets, process flow visuals, PowerPoint/Office illustrations, UI icons, annotations). Use when the user asks to generate, edit, standardize, optimize, or export SVG artwork; convert requirements (dimensions, scale, line weights, layers, symbols) into clean SVG markup; or produce multiple layout/variant files (editable vs outlined text, light/dark, monochrome).
tazomatalax
content-media
design
0
component-from-capture
画像キャプチャ（直接貼り付けまたはファイルパス指定）から既存のWindows Forms風Astroコンポーネントを組み合わせて画面ページを自動生成します。UIデザインを解析し、レイアウト、色、サイズ、テキストを再現した画面を作成します。
ntaksh42
content-media
design
0
material-design
Google Material Design 3 (Material You) に基づいたUIデザイン。動的カラーシステム、アダプティブデザイン、アクセシビリティ重視。UIコンポーネント作成時に使用。Use when "Material You", "Material Design", "Google style", "マテリアルデザイン" と言われた時。
YusukeTsunoda
content-media