Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

hierarchy-color-and-tone

Use this skill when constructing visual hierarchy through color and tone (value, contrast, saturation) — picking which elements get full-color emphasis and which recede into greys, building a tone ladder, and deciding when color should *be* the hierarchy versus when it should *support* a size/weight hierarchy. Trigger when picking the primary color, building a neutral palette, designing a status badge system, or fixing a UI where color is "too loud" or "too flat." Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

652 repo starsObserved in 1 repos
Design
GitHub

visual-docs-diagrams

Design and review visual content for developer documentation, including screenshots, architecture diagrams, boxes-and-arrows diagrams, flowcharts, swimlanes, video decisions, accessibility, performance, annotations, and visual maintenance. Use when creating or auditing diagrams, screenshots, visual explanations, or media in technical docs.

652 repo starsObserved in 1 repos
Design
GitHub

hello-ui

已进入显式 UI 工作流、宿主全局模式下的 UI 任务、已初始化项目的视觉变更、设计系统改造或需要视觉验收时使用；在通用 UI 基线之上补充项目契约执行、设计系统映射与视觉验证。

638 repo starsObserved in 1 repos
Design
GitHub

loading-empty-error-states

Design the three states every data UI forgets. Use for any component that fetches or lists data.

638 repo starsObserved in 1 repos
Design
GitHub

scroll-world-video

Kubeez's own skill for building an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand, generated end-to-end on the Kubeez platform. As the visitor scrolls, a pre-rendered camera flies forward from one scene into the next with NO cuts, one continuous connected flight (Emons-style isometric diorama world, or any art direction you pick). The skill interviews the user for the topic, story beats/sections, and brand kit, then generates cohesive scenes plus seamless forward-glide transitions with the Kubeez MCP (get_models, generate_media) and wires a portable, framework-agnostic scroll-scrub engine. Use when the user wants a "3D world" / "browse-through-the-industry" hero, a scroll cinematic, a diorama landing, or to turn a business into a scrollable Kubeez world.

632 repo starsObserved in 1 repos
Design
GitHub

krea-api

Generate images via Krea.ai API (Flux, Imagen, Ideogram, Seedream, etc.)

629 repo starsObserved in 4 repos
Design
GitHub

pinak-frontend-guru

Expert UI/UX and React performance auditor (PinakBot persona). Use when a user needs a "deep audit" of their frontend code, wants to "make it pro", or needs advice on both React performance and Web design best practices. Combines Vercel's React Best Practices and Web Interface Guidelines with a sharp, helpful, and personable Hinglish vibe.

629 repo starsObserved in 2 repos
Design
GitHub

cube-layout

在 @newlifex/cube-vue 框架中新增、注册或切换页面布局。 当用户说"新增布局"、"自定义布局"、"修改布局"、"切换布局"、"使用 XXX 布局"时使用。 包含布局组件创建、框架注册、应用使用的完整流程。

629 repo starsObserved in 1 repos
Design
GitHub

excalidraw-flowchart

Create Excalidraw flowcharts from descriptions. Use when user asks to "create a flowchart", "draw a diagram", "visualize a process", "make a flow diagram", "architecture diagram", or discusses workflow/process visualization. Supports DSL, DOT/Graphviz, and JSON formats.

629 repo starsObserved in 1 repos
Design
GitHub

infographic-weather

Generate a TV-style weather infographic with a location-specific seasonal background. Use when the user asks for a visual weather forecast or a weather infographic for a specific address.

629 repo starsObserved in 1 repos
Design
GitHub