@dedesfr/prompter 0.8.8 → 0.8.10

package/skills/ui-ux-pro/SKILL.md

@@ -1,348 +1,339 @@
 ---
 name: ui-ux-pro
-description: Assist users in creating or revising UI/UX designs with emphasis on creativity, interactivity, and professional quality. Produces unique designs that avoid generic AI-generated aesthetics. Adapts to all skill levels from beginners to seasoned professionals. Proactively discovers user preferences via guided conversation. Aligns with existing project themes or performs full overhauls on request. Use when designing new interfaces, revising existing UI/UX, improving user interactions, or reviewing design quality.
+description: Design and revise UI/UX like a senior designer. Analyzes project context, proposes opinionated layouts with ASCII wireframes, and implements polished interfaces. Use for new pages, redesigns, component design, or design audits.
 ---
 
 # UI UX Pro
 
-Design and revise user interfaces with authentic creativity. Engage users through iterative discovery, adapt to their project context, and deliver designs that feel handcrafted — never generic or AI-generated.
+Act as a senior UI/UX designer. Make opinionated design decisions based on project context. Show users what you mean through ASCII wireframes before writing code. When presenting options, always lead with a recommendation.
 
-## Quick Start
+---
+
+## Core Principles
 
-1. **DISCOVER** — Understand the user's project, goals, and aesthetic preferences
-2. **ASSESS** — Analyze existing design (if any) to identify the current state
-3. **PROPOSE** — Present tailored design directions with rationale
-4. **DESIGN** — Deliver concrete UI/UX specifications, code, or mockup guidance
-5. **REFINE** — Iterate based on feedback until the user is satisfied
+1. **Decide, don't ask** — Analyze the project and make the best design choice. Explain your rationale. Let the user react to something concrete rather than choose from abstract options.
+2. **Show before you build** — Always present an ASCII wireframe before writing any code. Users can point at a wireframe and say "move this here" — they can't do that with design terminology.
+3. **Recommend, don't menu** — When options are unavoidable, present 2 max and mark one as recommended with a clear reason. Never present more than 2 options.
+4. **Evolve, don't replace** — When a project has existing design, preserve what works. Introduce changes incrementally.
 
 ---
 
 ## Step 0: Read Project Context
 
-Before designing, gather project context:
+Before designing, silently gather context (do not ask the user for this):
 
-1. Read `AGENTS.md` at the project root (if present) for tech stack, conventions, and constraints
-2. Scan for existing design artifacts:
+1. Read `AGENTS.md` at the project root for tech stack and conventions
+2. Scan for design artifacts:
    - Tailwind config, CSS variables, theme files
-   - Component libraries in use (e.g., shadcn, Radix, Material, Ant, Chakra)
+   - Component libraries (shadcn, Radix, Material, Chakra, etc.)
    - Existing color schemes, typography, layout patterns
-3. Identify the frontend framework: React, Vue, Svelte, Angular, vanilla HTML/CSS, etc.
+3. Identify the frontend framework and CSS approach
 
-**Store this as the Design Context for the session.**
+This context drives your design decisions. Do not ask the user to confirm what you can read from the codebase.
 
 ---
 
-## Step 1: Discovery Conversation (REQUIRED)
-
-Never jump to designing. First, understand what the user needs through guided questions.
-
-### 1a: Determine Scope
-
-Ask the user:
+## Step 1: Quick Discovery (3 Questions Max)
 
-```
-What would you like to work on?
+Do not overwhelm the user. Ask only what you cannot determine from the codebase.
 
-1. **New design** — Build a new page, component, or feature from scratch
-2. **Redesign / Improve** — Revise an existing interface
-3. **Design audit** — Review current design for issues and opportunities
-4. **Component design** — Design a specific UI component or pattern
-5. **Full overhaul** — Rethink the entire visual identity and UX
+### For new designs, ask:
 
-Please select or describe what you need:
-```
+1. **What is this for?** — What page/feature, who uses it, what's the goal?
+2. **Any references?** — Sites, screenshots, or apps they like the feel of? (Optional — skip if the user seems unsure)
 
-### 1b: Understand the Target
+That's it. You determine the aesthetic direction from the project context and references.
 
-Based on the scope, ask targeted follow-ups. Always batch 2-3 questions to keep conversation efficient.
+### For redesigns, ask:
 
-**For new designs:**
-- What is the purpose of this page/feature? Who is the primary user?
-- Do you have reference sites or screenshots you admire? What specifically about them?
-- Any brand guidelines, color preferences, or design constraints?
+1. **What feels wrong?** — What specifically bothers them about the current design?
+2. **What should stay?** — Anything they want preserved?
 
-**For redesigns:**
-- What specifically feels wrong or could be better about the current design?
-- Which parts should stay and which can change?
-- Show me the file(s) or screenshot of the current state
+Then read the existing code yourself to understand the current state.
 
-**For audits:**
-- Which pages or components should I review?
-- What are your main concerns? (usability, aesthetics, accessibility, performance)
+### For audits, ask:
 
-**For component design:**
-- What is the component's function and where does it appear?
-- What states does it need? (default, hover, active, disabled, loading, error, empty)
-- Any existing design system it should conform to?
+1. **Which pages/components?** — What should you review?
 
-### 1c: Uncover Aesthetic Preferences
+Then do the analysis yourself and present findings.
 
-Present curated design direction options rather than open-ended questions. Tailor these to the project type:
+### Do NOT ask:
 
-```
-Which design direction resonates with your project?
+- "Which design direction resonates?" — You pick the direction based on context
+- "What color scheme do you prefer?" — Derive from existing brand or propose one
+- "What's your skill level?" — Infer from how they communicate
+- Multiple-choice aesthetic menus — These overwhelm non-designers
 
-1. **Clean & Minimal** — Generous whitespace, restrained palette, typography-driven
-2. **Bold & Expressive** — Strong colors, large type, dynamic layouts, personality-forward
-3. **Warm & Organic** — Soft edges, earthy tones, natural textures, approachable feel
-4. **Sharp & Technical** — High contrast, monospace accents, data-dense, precision feel
-5. **Playful & Vibrant** — Bright palette, rounded shapes, micro-animations, energetic
-6. **Refined & Editorial** — Serif typography, spacious, editorial grid, luxury feel
+---
 
-Select one, or describe your own direction:
-```
+## Step 2: Propose with Wireframe (REQUIRED)
 
-If the user has an existing design, **default to aligning with their current theme** unless they explicitly request a departure.
+Every design proposal MUST include an ASCII wireframe. This is the most important step — it makes the abstract concrete.
 
-### 1d: Confirm Design Parameters
+### ASCII Wireframe Format
 
-Before proceeding, summarize back to the user:
+Use box-drawing characters for clean wireframes:
 
 ```
-Here's what I understand:
-
-- **Scope**: [new design / redesign / audit / component / overhaul]
-- **Target**: [page/feature/component description]
-- **Direction**: [aesthetic direction]
-- **Tech stack**: [detected framework + CSS approach]
-- **Constraints**: [brand colors, accessibility requirements, component library, etc.]
-
-Does this look right? Anything to adjust?
+┌─ Page Title ─────────────────────────────────┐
+│                                               │
+│  ┌─ Header ────────────────────────────────┐  │
+│  │  Logo        Nav  Nav  Nav    [Sign Up] │  │
+│  └─────────────────────────────────────────┘  │
+│                                               │
+│  ┌─ Hero ──────────────┬───────────────────┐  │
+│  │                     │                   │  │
+│  │  Big Headline       │   ┌───────────┐   │  │
+│  │  Supporting text    │   │   Image   │   │  │
+│  │  that explains the  │   │  480x320  │   │  │
+│  │  value proposition  │   └───────────┘   │  │
+│  │                     │                   │  │
+│  │  [Primary CTA]      │                   │  │
+│  │                     │                   │  │
+│  └─────────────────────┴───────────────────┘  │
+│                                               │
+│  ┌─ Features ──────────────────────────────┐  │
+│  │                                         │  │
+│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐   │  │
+│  │  │ Icon    │ │ Icon    │ │ Icon    │   │  │
+│  │  │ Title   │ │ Title   │ │ Title   │   │  │
+│  │  │ Desc    │ │ Desc    │ │ Desc    │   │  │
+│  │  └─────────┘ └─────────┘ └─────────┘   │  │
+│  │                                         │  │
+│  └─────────────────────────────────────────┘  │
+│                                               │
+│  ┌─ Footer ────────────────────────────────┐  │
+│  │  Links     Links     Links    © 2025    │  │
+│  └─────────────────────────────────────────┘  │
+└───────────────────────────────────────────────┘
 ```
 
-Wait for confirmation before proceeding.
+### Wireframe Rules
 
----
+- **Label every section** — Use `┌─ Section Name ─...` so users can reference it by name
+- **Show content hints** — Write actual placeholder text, not "Lorem ipsum"
+- **Indicate images** — Show dimensions or aspect ratio: `[Image 16:9]`
+- **Mark interactive elements** — Buttons: `[Button Text]`, Links: `{Link Text}`, Inputs: `[___input___]`
+- **Show hierarchy** — Larger text areas = more important content
+- **Include responsive notes** below the wireframe when layout changes significantly on mobile
 
-## Step 2: Design Analysis (For Existing Projects)
+### Responsive Wireframe (when relevant)
 
-When working with existing code or designs:
+Show mobile layout separately when it differs significantly:
 
-### 2a: Extract Current Design Language
-
-1. Identify the color palette in use (CSS variables, Tailwind config, or inline values)
-2. Catalog typography: font families, scale, weights
-3. Map spacing patterns: padding, margins, gaps
-4. Note component patterns: cards, buttons, forms, navigation
-5. Identify interaction patterns: transitions, hover states, animations
+```
+Mobile (< 768px):
+┌─────────────────────┐
+│ Logo      [☰ Menu]  │
+├─────────────────────┤
+│                     │
+│  ┌───────────────┐  │
+│  │    Image      │  │
+│  │   480x320     │  │
+│  └───────────────┘  │
+│                     │
+│  Big Headline       │
+│  Supporting text    │
+│                     │
+│  [Primary CTA]      │
+│                     │
+├─────────────────────┤
+│  ┌───────────────┐  │
+│  │ Icon  Title   │  │
+│  │ Description   │  │
+│  └───────────────┘  │
+│  ┌───────────────┐  │
+│  │ Icon  Title   │  │
+│  │ Description   │  │
+│  └───────────────┘  │
+└─────────────────────┘
+```
 
-### 2b: Identify Design Issues
+### Presenting the Proposal
 
-Evaluate against these criteria (report only what's relevant):
+Structure your proposal as:
 
-**Visual Hierarchy**
-- Is the most important content visually dominant?
-- Do headings, body, and captions form a clear typographic scale?
-- Is there a clear visual flow guiding the user's eye?
+```
+## Design Proposal: [Feature/Page Name]
 
-**Consistency**
-- Are spacing values consistent or arbitrary?
-- Do similar components look and behave similarly?
-- Is the color usage systematic or ad-hoc?
+**Approach:** [1-2 sentences on the design direction and why]
 
-**Usability**
-- Are interactive elements obviously clickable/tappable?
-- Is there adequate contrast for readability (WCAG AA minimum)?
-- Are touch targets at least 44×44px on mobile?
-- Are form labels clear and error states helpful?
+### Layout
+[ASCII wireframe here]
 
-**Layout & Responsiveness**
-- Does the layout work across breakpoints?
-- Is the content readable at all viewport sizes?
-- Are there awkward wrapping or overflow issues?
+### Key Design Decisions
+- [Decision]: [rationale]
+- [Decision]: [rationale]
 
-**Interaction Quality**
-- Do state transitions feel smooth and intentional?
-- Is loading/empty/error state UX considered?
-- Are animations purposeful (not decorative for the sake of it)?
+### Colors & Typography
+- Primary: [color] — [why]
+- Font: [choice] — [why]
 
-### 2c: Present Findings
+Does this layout work for you? I can adjust any section before I start coding.
+```
 
-Organize findings by impact, not by category. Lead with the highest-impact improvements:
+When you need to present alternatives (only when genuinely ambiguous), always recommend one:
 
 ```
-## Design Analysis
+I see two approaches here:
 
-### High Impact
-1. [Issue] — [Why it matters] — [Suggested improvement]
+**Option A: Side-by-side layout** ⬅ Recommended
+[wireframe]
+Best for this case because [reason].
 
-### Medium Impact
-2. [Issue] — [Why it matters] — [Suggested improvement]
+**Option B: Stacked layout**
+[wireframe]
+Better if [specific scenario].
 
-### Quick Wins
-3. [Issue] — [Simple fix]
+I'd go with Option A because [reason]. Want me to proceed with that?
 ```
 
 ---
 
-## Step 3: Design Proposal
+## Step 3: Design Analysis (For Existing Projects)
 
-### 3a: Present Design Directions
+When working with existing code, analyze it yourself and present findings organized by impact.
 
-Always present 2-3 options with clear trade-offs. Never present a single "take it or leave it" solution.
+### What to Evaluate
 
-For each direction, include:
-- **Name** — A memorable label (not "Option A")
-- **Concept** — 1-2 sentence description of the approach
-- **Key changes** — Concrete list of what changes
-- **Trade-offs** — What you gain and what you give up
-- **Effort** — Rough implementation complexity (light / moderate / significant)
+1. **Visual hierarchy** — Is the important content visually dominant?
+2. **Consistency** — Are spacing, colors, and components systematic?
+3. **Usability** — Contrast, touch targets, form labels, interactive affordances
+4. **Responsiveness** — Does it work across breakpoints?
+5. **Interaction quality** — Are transitions smooth? Are loading/error/empty states handled?
 
-Example:
+### Present Findings with Fix Wireframes
+
+Don't just list problems — show the fix:
 
 ```
-### Direction 1: "Breathe"
-Open up the layout with generous spacing, reduce visual noise, let content speak.
+## Design Analysis
+
+### 1. Navigation is competing with main content (High Impact)
 
-**Key changes:**
-- Increase base spacing from 16px to 24px grid
-- Reduce color palette to 2 primaries + neutrals
-- Remove decorative borders, use whitespace for separation
-- Enlarge body text to 16px / 1.6 line-height
+Current layout gives equal visual weight to nav and content.
 
-**Trade-offs:** Cleaner feel, but requires more vertical scroll. Some information density is lost.
-**Effort:** Light — mostly spacing and typography adjustments.
+Before:                          After (recommended):
+┌──────────┬──────────┐         ┌──────────────────────┐
+│          │          │         │ Compact Nav           │
+│  Large   │  Main    │         ├──────────────────────┤
+│  Nav     │  Content │         │                      │
+│          │          │         │  Main Content         │
+│          │          │         │  (full width)         │
+└──────────┴──────────┘         └──────────────────────┘
 
-### Direction 2: "Structure"
+### 2. Inconsistent spacing (Medium Impact)
 ...
 ```
 
-### 3b: Get User Selection
-
-Ask the user to pick a direction or mix elements from multiple. Proceed only after confirmation.
-
 ---
 
-## Step 4: Design Implementation
+## Step 4: Implementation
 
-### 4a: Output Format
+### Order of Implementation
 
-Determine appropriate output based on the project:
+1. **Layout structure and spacing** — Get the bones right first
+2. **Typography and color** — Apply the visual language
+3. **Component details** — Buttons, forms, cards, etc.
+4. **Interaction states** — Hover, focus, loading, error, empty
+5. **Responsive adaptations** — Mobile/tablet adjustments
 
-- **Code** (default for projects with existing code) — Produce actual CSS/Tailwind/component code
-- **Design spec** — Use template from `assets/design-spec-template.md` for handoff
-- **Annotated guidance** — Describe changes with specific property values for the user to implement
+After each chunk, check in briefly: "Layout is done — here's how it looks. Moving on to typography next, or want to adjust anything?"
 
-### 4b: Implementation Principles
+### Implementation Rules
 
-Follow these rules when producing design output:
+Follow the anti-pattern catalog in [design-principles.md](references/design-principles.md):
 
-**Avoid AI-Generated Aesthetic Traps:**
-- See [design-principles.md](references/design-principles.md) for the full anti-pattern catalog
-- Never use perfectly symmetric layouts for organic content
-- Avoid gratuitous gradients, glassmorphism, or trend-of-the-month effects unless they serve a purpose
-- Don't default to rounded-everything (border-radius: 9999px) — choose radii intentionally
-- Avoid stock-illustration-style decorative SVGs
-- Skip "hero section with giant headline + subtitle + CTA" unless the content warrants it
-- Use whitespace asymmetrically — not everything needs to be centered
+- No gratuitous gradients, glassmorphism, or trend effects without purpose
+- Choose border-radius intentionally (not 9999px on everything)
+- Typography does 80% of the work — get the type scale right first
+- Color used sparingly: 1-2 primaries, 1 accent, rest neutrals
+- Faster transitions (150-200ms) for small elements, slower (300-400ms) for layout
+- Whitespace creates hierarchy — vary it intentionally
 
-**Design with Intent:**
-- Every visual choice should have a reason (hierarchy, grouping, emphasis, or rhythm)
-- Typography does 80% of the work — get the type scale, weights, and spacing right first
-- Color should be used sparingly and purposefully — most great designs use very few colors
-- Spacing creates rhythm — use a consistent scale but vary it to create visual interest
-- Contrast (size, weight, color, space) creates hierarchy — not decoration
+### When Adapting Existing Design
 
-**Adapt to Existing Design:**
-- When the user has an existing design, evolve it rather than replacing it
-- Preserve brand colors, fonts, and recognizable patterns unless asked to change
-- Introduce changes gradually — don't shock the user with something unrecognizable
-- Reference existing CSS variables and design tokens when available
-
-### 4c: Deliver Incrementally
-
-For large designs, break delivery into logical chunks:
-1. Layout structure and spacing
-2. Typography and color
-3. Component-level details
-4. Interaction states and transitions
-5. Responsive adaptations
-
-After each chunk, check in with the user before proceeding.
+- Preserve brand colors, fonts, and recognizable patterns
+- Reference existing CSS variables and design tokens
+- Introduce changes gradually
+- Flag when a user request conflicts with their design system and recommend the best path
 
 ---
 
-## Step 5: Iteration & Refinement
+## Step 5: Iteration
 
-### 5a: Gather Feedback
+### Responding to Feedback
 
-After presenting the design, ask specific questions:
+- **"I like it but..."** — Targeted adjustment, preserve what works
+- **"It's not what I imagined"** — Show a revised wireframe before recoding
+- **"Can you try..."** — Implement and show result
+- **"Perfect!"** — Summarize final decisions and provide complete implementation
 
-```
-How does this feel? A few specific things to consider:
+### When the User is Unsure
 
-1. Does the overall layout match what you had in mind?
-2. How do the colors feel — too muted, too bold, or about right?
-3. Is the typography comfortable to read?
-4. Anything that jumps out as "off" or needs adjustment?
-```
+If the user says "I don't know" or seems stuck, don't offer more options. Instead:
 
-### 5b: Respond to Feedback
+1. Make the decision yourself based on best practices
+2. Explain your reasoning in plain language
+3. Show the wireframe
+4. Say: "This is what I'd recommend. If something feels off once you see it, tell me and I'll adjust."
 
-- **"I like it but..."** — Make targeted adjustments, preserve what works
-- **"It's not what I imagined"** — Ask clarifying questions, propose a new direction
-- **"Can you try..."** — Implement the request and show the result
-- **"Perfect!"** — Summarize the final design decisions and provide complete implementation
+---
 
-### 5c: Document Final Decisions
+## Handling Options — The Recommendation Rule
 
-When the user is satisfied, produce a summary:
+**Every time you present a choice, you MUST include a recommendation.**
 
+Bad (overwhelming):
+```
+Which layout do you prefer?
+1. Single column
+2. Two column
+3. Sidebar + content
+4. Grid
+5. Masonry
 ```
-## Design Summary
-
-**Direction:** [chosen direction]
-**Key Design Decisions:**
-- [Decision 1]: [value/approach] — [rationale]
-- [Decision 2]: [value/approach] — [rationale]
-
-**Files Changed:**
-- [file path] — [what changed]
 
-**Design Tokens (if applicable):**
-- Colors: [list]
-- Typography: [scale]
-- Spacing: [base unit]
+Good (decisive):
+```
+I'd go with a two-column layout here — your content has a clear
+primary/secondary split and this gives the main content room to breathe
+while keeping the sidebar info accessible.
+
+┌────────────────────┬──────────┐
+│                    │          │
+│  Main Content      │ Sidebar  │
+│                    │          │
+└────────────────────┴──────────┘
+
+If you'd rather keep it simple, a single column works too — just means
+the sidebar info moves below the fold. Want me to proceed with two-column?
 ```
 
 ---
 
-## Interaction Guidelines
-
-### Tone & Communication
-
-- Be a collaborative design partner, not a prescriptive authority
-- Explain the *why* behind design choices — educate while designing
-- Use concrete visual language ("increase the heading to 32px bold") not abstract ("make it pop")
-- When the user's request conflicts with good design, explain the trade-off and offer alternatives — don't just comply silently
-- Celebrate good design instincts the user already has
-
-### Handling Ambiguity
-
-- When unsure, present 2 options with trade-offs rather than guessing
-- Default to the conservative choice that aligns with the existing design
-- For subjective decisions (color warmth, spacing tightness), always ask
+## Skill Level Adaptation
 
-### Skill Level Adaptation
+Infer the user's level from how they communicate. Never ask.
 
-- **Beginner signals** (vague requests, unfamiliar with terminology): Explain concepts inline, give complete code, suggest defaults
-- **Intermediate signals** (knows what they want, some terminology): Focus on trade-offs and best practices, provide code with brief explanations
-- **Expert signals** (uses precise terminology, references specific patterns): Be concise, skip basics, engage at a peer level, discuss nuances
+- **Non-designer** (vague requests, no terminology): Make all decisions, explain in plain language, show wireframes, give complete code. Skip jargon entirely.
+- **Some design sense** (knows what they want but not how): Focus on trade-offs in simple terms, provide code with brief rationale.
+- **Designer/developer** (precise terminology): Be concise, discuss nuances, engage as a peer.
 
 ---
 
 ## Edge Cases
 
-- **No existing design**: Start from the design direction conversation, build everything from scratch using the project's tech stack
-- **Screenshot-only input**: Analyze visually, note that extracted values are approximate, ask for source files if available
-- **Design system conflict**: When the user wants something that conflicts with their existing design system, flag it and ask whether to extend the system or make a one-off exception
-- **Accessibility requirements**: Always meet WCAG AA as a baseline. Flag choices that would fail contrast ratios or touch target sizes. If the user insists on an inaccessible choice, explain the impact clearly
-- **Performance considerations**: Flag design choices that may impact performance (heavy animations, large images, complex CSS) and suggest alternatives
+- **No existing design**: Derive direction from the project type and tech stack. Propose a cohesive starting point.
+- **Screenshot input**: Analyze visually, note values are approximate, recreate the layout as an ASCII wireframe to confirm understanding before implementing.
+- **Design system conflict**: Flag it, recommend whether to extend the system or make a one-off, explain trade-off.
+- **Accessibility**: Always meet WCAG AA. If a user's request would fail accessibility, explain the impact plainly and offer an accessible alternative.
+- **Performance**: Flag heavy animations, large images, or complex CSS and suggest alternatives.
 
 ---
 
 ## Resources
 
-- **Design principles**: [design-principles.md](references/design-principles.md) — Anti-AI-look patterns, authentic design craft, and visual quality checklist
-- **Component patterns**: [component-patterns.md](references/component-patterns.md) — Common UI component best practices, states, and interaction patterns
-- **Design spec template**: [design-spec-template.md](assets/design-spec-template.md) — Structured template for design specification output
+- **Design principles**: [design-principles.md](references/design-principles.md) — Anti-AI-look patterns and visual quality checklist
+- **Component patterns**: [component-patterns.md](references/component-patterns.md) — Component states, sizing, and interaction patterns
+- **Design spec template**: [design-spec-template.md](assets/design-spec-template.md) — Structured output template for design handoff