---
name: valec3/ui-design-concepts
source: https://app.decimal.ai/s/valec3-ui-design-concepts@1/SKILL.md
source_sha256: b506cb700443
---

# UI Design Concepts

## Overview

**UI Design Concepts IS the definition of Application Structure, User Flow, and Functional Capabilities.**

This skill is for describing **WHAT the app does and HOW it works**, not just how it looks. It focuses on Navigation structure, Module breakdown, User Interactions, and Business Logic flows.

**Core Principle:** Functionality First. Describe the sidebar modules, dashboard widgets, and modal interactions before mentioning colors.

## When to Use

**Use this skill when:**
- Defining **Application Architecture** and Module Breakdown
- Describing **User Journeys**, Business Logic, and Conditional Flows
- Specifying **Navigational Structures** (Sidebar vs Topbar, Breadcrumbs)
- Defining **Interaction Models** (Modals, Drawers, Toasts, Empty States)
- The user asks for "How it works" or "What features it has"

**Don't use when:**
- The user needs specific Tailwind classes or CSS variables (use `ui-prompt-generation`)
- You are writing the code yourself
- Exact pixel perfection is required

## Core Pattern

**Before (Vague):**
> "Make it look cool and modern."

**After (Standardized):**
> **[Agent quietly generates `results/concept.txt`]**
> "Design Concept: Modern SaaS Dashboard
> - **Aesthetic**: Minimalist & Professional (Ref: `design-references.md`).
> - **Layout**: Bento Grid (Ref: `visual-patterns.md`).
> - **Key Flow**: Optimistic UI updates with toast notifications (Ref: `ux-patterns.md`).
> - **Inspiration**: Linear's dark mode, high contrast, subtle borders."

## Implementation

**CRITICAL RULE: OUTPUT MUST BE A PLAIN TEXT `.txt` FILE IN `results/`.**
**NEVER** use Markdown syntax (no `#`, no `**`, no `[ ]`, no code blocks) inside the `.txt` file.
**ALWAYS** use clean Plain Text formatting:
- Use UPPERCASE for section headers.
- Use indentation for hierarchy.
- Use simple text labels.

### Phase 1: Inspiration & Reference
1.  **Analyze Request**: What is the *feeling*? (Professional, Playful, Luxury?).
2.  **Load Assets (MANDATORY)**: You **MUST** use `view_file` on these files:
    -   `assets/design-references.md` (Find the aesthetic archetypes)
    -   `assets/visual-patterns.md` (Select layout compositions)
    -   `assets/ux-patterns.md` (Define interaction behaviors)
    -   `assets/section-library.md` (Assemble page structure)

### Phase 2: Synthesis
Combine the selected elements into a cohesive narrative.
-   **Visual Style**: Define the mood (e.g., "Glassmorphism with heavy blur").
-   **Composition**: Describe how elements "sit" on the page (e.g., "Masonry grid").
-   **Motion**: Describe how things move (e.g., "Staggered fade-ins").

### Phase 3: Delivery
1.  **Write File**: Save the narrative to `results/<descriptive-name>.txt`.
2.  **Notify**: Tell the user "Concept generated: `results/<filename>.txt`".

## Common Mistakes

### ❌ Being Technical
**Bad**: "Use `border-radius: 8px`."
**Good**: "The modal must strictly close when clicking the backdrop to allow quick exit."
**Fix**: If you are writing numbers or describing "vibes", swtich skills. Describe **BEHAVIOR**.

### ❌ Name-Dropping Without Context
**Bad**: "Make it like Apple."
**Good**: "Apple-style aesthetic: heavy use of white space, large typography, and premium product photography."
**Fix**: Explain *why* the reference works using `design-references.md`.

### ❌ Chat Dump
**Bad**: Outputting the concept narrative in the chat window.
**Good**: Silent file generation.
**Fix**: Ensure `results/` is the target.

## Quick Reference

| Asset | Purpose |
| :--- | :--- |
| **`design-references.md`** | **REQUIRED**. Styles, vibes, and real-world inspirations. |
| **`visual-patterns.md`** | **REQUIRED**. Layouts, grids, and component styles. |
| **`ux-patterns.md`** | **REQUIRED**. Interactions, flows, and behaviors. |
| **`section-library.md`** | Ready-made sections to build pages fast. |