Back to marketplace

interface-design

A Claude skill focused on interface-design best practices for AI-generated interfaces.

Designstandard
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Should my analytics dashboard have a sidebar or top navigation for filters?”
Beforegeneric AI agent
Both options can work depending on your needs. Sidebars give you more vertical space for a long list of filters and navigation options. Top navigation saves horizontal space and keeps everything in view. You might consider your screen size, how many filters you have, and what's most important. Sidebars are often easier to hide on mobile. I'd suggest looking at what other analytics tools do and testing both with users. Which do you think makes sense for your use case?
Afterwith interface-design
LAYOUT DECISION: Sidebar vs. Top Nav for Analytics Dashboard

SIDEBAR (RECOMMENDED)
Pros:
• Vertical filter real estate: room for 20+ filter chips without wrapping
• Persistent context: users always see available filters, don't forget options
• Mobile-friendly: collapses to hamburger at < 768px
• Quick filter scanning: list vs. horizontal hunt

Cons: Takes 240px horizontal space on desktop

TOP NAV (AVOID)
Pros: Saves horizontal space
Cons:
• Filters wrap at 1024px resolution (common for split-screen analysts)
• Higher cognitive load: users forget filter options after scrolling
• Mobile becomes cramped and hard to toggle

DECISION MATRIX
| Use case | Winner | Why |
| Complex reports (5+ filters) | Sidebar | Discoverability wins |
| Mobile-first product | Sidebar | Collapse pattern proven |
| Desktop-only, space constrained | Top nav | Only if < 4 filters |

CONCRETE: Use sidebar with collapsible sections (Filters, Date Range, Segments). Default expanded for power users, remember state in localStorage.

About this skill

name: interface-design description: Use when A Claude skill focused on interface-design best practices for AI-generated interfaces.

interface-design

Part of the same skill family covered in the Claude Skills for Designers (Part 2).

What you get

  • Interface-design guidance for Claude-built interfaces.

Customize your output

  • N/A

Example output

N/A

Best for

Designers/developers refining visual UI layout and structure.

SKILL.md preview

SKILL.md
---
name: interface-design
description: Use this skill when applying interface-design best practices to an AI-generated interface, so the result reads as considered rather than templated.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - standard
---

# interface-design

Applies interface-design best practices specifically to AI-generated interfaces, correcting the common failure modes of default, unconsidered output.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More design skills

View all Design skills →

shadcn/ui Skill

The official shadcn/ui component-library skill for Claude.

Design

UI UX Pro Max

A Claude skill that adds design intelligence for multi-platform UI/UX builds.

Design

UI Polish Slash Commands

Add 20 plus verb-first commands like /polish, /quieter, /bolder, /delight, /critique to any Claude Code UI project.

Design

Motion Polish Pass

Add Emil Kowalski-style animation and micro-interaction guidance to any Claude Code UI pass.

Design