Connexion
mblode

design-ui

by @mblode in Data & Analytics
9
0
# Install this skill:
npx skills add mblode/agent-skills --skill "design-ui"

Install specific skill from multi-skill repository

# Description

Design direction and visual system for web UI. Use to choose layout, typography, colour, and overall aesthetic for product (SaaS/admin/data-heavy) or marketing/brand experiences.

# SKILL.md

name: design-ui
description: Design direction and visual system for web UI. Use to choose layout, typography, colour, and overall aesthetic for product (SaaS/admin/data-heavy) or marketing/brand experiences.

UI Design

Choose the right track and follow its guidance.

Pick a track

  • Product UI (SaaS/admin/data-heavy): read product-ui.md.
  • Marketing/brand/creative: read marketing-ui.md.

Cross-skill baselines

  • Use ui-animation for motion; use audit-ui for accessibility and final QA.
  • Use implement-frontend for React/TypeScript implementation standards.
  • Use design-in-code.md for low-fi planning and layout-first workflow.

# Related Skills

moltbot
goplaces @moltbot

Query Google Places API (New) via the goplaces CLI for text search, place details, resolve, and...

★ 65,001
moltbot
notion @moltbot

Notion API for creating and managing pages, databases, and blocks.

★ 65,001
moltbot
things-mac @moltbot

Manage Things 3 via the `things` CLI on macOS (add/update projects+todos via URL scheme;...

★ 65,001

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.