login
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
apple-reminders @moltbot

Manage Apple Reminders via the `remindctl` CLI on macOS (list, add, edit, complete, delete)....

β˜… 65,001
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.