@dedesfr/prompter 0.8.0 → 0.8.1

package/skills/ui-ux-pro/references/component-patterns.md

@@ -0,0 +1,255 @@
+# Component Patterns — UI Interaction Best Practices
+
+Reference for designing common UI components with proper states, accessibility, and interaction patterns. Load when designing or reviewing specific components.
+
+---
+
+## Buttons
+
+### Hierarchy
+
+Every interface needs a clear button hierarchy:
+
+| Level | Name | Use Case | Visual Treatment |
+|---|---|---|---|
+| 1 | Primary | Main action per section/page | Filled, brand color, high contrast |
+| 2 | Secondary | Supporting actions | Outlined or muted fill |
+| 3 | Tertiary / Ghost | Low-priority actions, cancel | Text-only or very subtle background |
+| 4 | Destructive | Delete, remove, irreversible | Red/danger color, confirm pattern |
+| 5 | Icon-only | Compact actions (close, menu, edit) | Icon with tooltip, adequate touch target |
+
+### Required States
+
+Every button must handle:
+- **Default** — Resting state
+- **Hover** — Subtle background/shadow change (desktop)
+- **Focus** — Visible ring/outline for keyboard users (2px offset, contrasting color)
+- **Active/Pressed** — Slightly darker, subtle depression
+- **Disabled** — Reduced opacity (0.5-0.6), no pointer events, `aria-disabled`
+- **Loading** — Spinner or dots replacing text, button disabled during action
+
+### Sizing
+
+| Size | Height | Padding (x) | Font Size | Use Case |
+|---|---|---|---|---|
+| sm | 32px | 12px | 13-14px | Dense UI, table actions, tag actions |
+| md | 40px | 16px | 14-15px | Standard forms, toolbars |
+| lg | 48px | 24px | 16px | Hero CTAs, mobile-first interfaces |
+
+### Accessibility
+- Minimum touch target: 44×44px (even if visual size is smaller, pad the clickable area)
+- Always include accessible label (text content or `aria-label` for icon buttons)
+- Don't rely on color alone — icons or text should reinforce meaning
+
+---
+
+## Forms
+
+### Input Fields
+
+**Required states:**
+- Default — Clear border, label above
+- Focus — Highlighted border (brand color), optional subtle shadow
+- Filled — Same as default but with content
+- Error — Red/danger border, error message below, `aria-invalid="true"`
+- Disabled — Muted background, reduced opacity
+- Read-only — No border/minimal border, text appears as content
+
+**Layout rules:**
+- Label above input (not beside, not as placeholder)
+- Placeholder text is supplementary, never the only label
+- Error messages appear below the input, in context
+- Help text appears below label or below input, not as tooltip
+- Group related fields (name + email, street + city + state)
+
+**Sizing:**
+
+| Size | Height | Font Size | Use Case |
+|---|---|---|---|
+| sm | 32px | 13-14px | Dense forms, admin panels |
+| md | 40px | 14-15px | Standard forms |
+| lg | 48px | 16px | Landing pages, mobile |
+
+### Select / Dropdown
+
+- Show current selection in the trigger
+- Keyboard navigation: arrow keys, type-ahead, Enter to select, Escape to close
+- Long lists: include search/filter
+- Multi-select: use checkboxes inside dropdown, show count or tags in trigger
+
+### Checkbox & Radio
+
+- Minimum 44×44px touch target (including label)
+- Label always to the right of the indicator
+- Checkbox: independent selections (multi-select)
+- Radio: mutually exclusive within a group
+- Indeterminate checkbox state for "select all" with partial selection
+
+### Form Validation
+
+- **Inline validation**: Validate on blur (not on every keystroke)
+- **Submit validation**: Validate all fields, focus the first error, scroll if needed
+- **Error messaging**: Specific ("Email must include @") not generic ("Invalid input")
+- **Success feedback**: Brief confirmation, then move on — don't celebrate trivial actions
+
+---
+
+## Cards
+
+### When to Use
+- Displaying a collection of items with mixed content (image + text + actions)
+- Content that can be browsed and compared
+- NOT for single content blocks or sequential content (use sections instead)
+
+### Anatomy
+1. **Media area** (optional) — Image, video, or illustration at top or left
+2. **Header** — Title, subtitle, metadata
+3. **Body** — Description or summary content
+4. **Footer** (optional) — Actions, tags, or secondary metadata
+
+### Interaction Patterns
+- **Clickable card**: Entire card is a link, hover shows elevation change
+- **Card with actions**: Card is not clickable, specific buttons/links inside are
+- **Never both**: Don't make the whole card clickable AND have buttons inside it
+
+### States
+- Default, Hover (if clickable), Selected (in a selection context), Loading (skeleton)
+
+---
+
+## Navigation
+
+### Top Navigation (Navbar)
+
+- Logo/brand on the left
+- Primary nav items horizontally centered or right-aligned
+- Active page indicator: bold text, underline, or background highlight
+- Mobile: hamburger menu (3 lines) → slide-out or full-screen overlay
+- Sticky/fixed: include subtle shadow or border when scrolled
+- Max 5-7 primary items; overflow into "More" dropdown
+
+### Sidebar Navigation
+
+- Collapsible for more content space
+- Active item: filled background with brand color, or left border accent
+- Group items with section headers
+- Icons + labels in expanded state, icons-only in collapsed state with tooltips
+- Scroll independently from main content
+
+### Breadcrumbs
+
+- Show current location in hierarchy
+- Each segment is a link except the current page
+- Separator: `/` or `>` or chevron icon
+- Truncate long paths: show first, `...`, last 2 segments
+
+### Tabs
+
+- Horizontal for 2-5 options, vertical for 5+ or when labels are long
+- Active tab: bold/colored text + bottom border (horizontal) or left border (vertical)
+- Tab content switches without page reload
+- Keyboard: arrow keys to switch, Tab to enter content area
+- Don't nest tabs within tabs
+
+---
+
+## Modals & Dialogs
+
+### When to Use
+- Confirming destructive actions
+- Short forms that don't warrant a new page (login, quick edit)
+- Displaying focused content that blocks the main flow
+
+### When NOT to Use
+- Displaying information that could be inline
+- Long forms or multi-step flows (use a page instead)
+- Welcome messages or tutorials (use onboarding flows)
+
+### Anatomy
+- **Overlay/backdrop**: Semi-transparent dark (rgba(0,0,0,0.4-0.6))
+- **Container**: Centered, max-width 480-640px, adequate padding (24-32px)
+- **Header**: Title + close button (X) in top-right
+- **Body**: Content area, scrollable if content overflows
+- **Footer**: Action buttons (primary right, cancel left)
+
+### Interaction
+- Escape key closes the modal
+- Clicking backdrop closes (for non-critical modals) or doesn't (for confirmations)
+- Focus trapped inside modal (Tab cycles through modal elements only)
+- Return focus to trigger element on close
+- Prevent body scroll while modal is open
+
+---
+
+## Tables
+
+### Best Practices
+- Align text left, numbers right
+- Header row: bold, subtle background, sticky on scroll
+- Zebra striping OR subtle horizontal borders (not both)
+- Minimum row height: 48px for touch, 36px for dense desktop
+- Sortable columns: show sort indicator (arrow up/down)
+- Pagination or virtual scroll for large datasets
+
+### Responsive
+- Priority columns stay visible, secondary columns hide on mobile
+- Alternative: card-based layout on mobile instead of table
+- Horizontal scroll as a last resort (wrap in a scroll container with shadow indicators)
+
+---
+
+## Feedback & Status
+
+### Toast / Snackbar
+- Brief messages (1-2 lines), auto-dismiss after 4-6 seconds
+- Position: bottom-center or top-right
+- Types: success (green), error (red), warning (amber), info (blue/neutral)
+- Include dismiss action and optional undo for destructive actions
+- Stack new toasts, don't replace existing ones
+
+### Empty States
+- Illustration or icon (purposeful, not decorative)
+- Clear headline: what this area is for
+- Description: why it's empty
+- CTA: how to populate it
+- Don't just show a blank white space
+
+### Loading States
+- **Skeleton screens** (preferred): Gray placeholder shapes matching content layout
+- **Spinner**: Only for short, indeterminate waits (< 3 seconds expected)
+- **Progress bar**: For determinate operations with known duration
+- **Inline loading**: Button spinner, input loading indicator
+
+### Error States
+- Page-level: Friendly message + illustration, retry button, link to support
+- Inline: Red border, error text below the field, `aria-invalid`
+- Network: "Something went wrong" with retry, not a technical error dump
+- 404: Helpful redirect suggestions, search, home link
+
+---
+
+## Accessibility Essentials
+
+### Color & Contrast
+- Body text: 4.5:1 contrast ratio minimum (WCAG AA)
+- Large text (18px+ or 14px+ bold): 3:1 minimum
+- Interactive elements: 3:1 against adjacent colors
+- Don't use color as the only indicator — pair with icons, text, or patterns
+
+### Keyboard Navigation
+- All interactive elements focusable via Tab
+- Visible focus indicator (not just browser default — design a custom one)
+- Logical tab order matching visual layout
+- Escape closes overlays, Enter activates buttons/links
+
+### Screen Readers
+- Meaningful alt text for informational images
+- Empty alt (`alt=""`) for decorative images
+- Proper heading hierarchy (h1 → h2 → h3, no skipping)
+- ARIA labels for icon-only buttons and complex widgets
+- Live regions for dynamic content updates (toast notifications, form errors)
+
+### Motion
+- Respect `prefers-reduced-motion` — disable or simplify animations
+- No auto-playing video or audio without user control
+- Avoid rapid flashing (3 flashes per second max)

package/skills/ui-ux-pro/references/design-principles.md

@@ -0,0 +1,167 @@
+# Design Principles — Anti-AI Aesthetic & Authentic Design Craft
+
+Reference for producing designs that feel human-crafted, intentional, and unique. Load this when implementing designs or reviewing design quality.
+
+---
+
+## Anti-AI-Look Patterns
+
+AI-generated designs share recognizable traits. Avoid these to produce authentic work.
+
+### Layout Anti-Patterns
+
+| AI Trap | Why It Feels Generic | Do Instead |
+|---|---|---|
+| Perfect 3-column symmetry for everything | Real content isn't symmetric | Vary column widths, use 2-col or asymmetric grids |
+| Every section is full-width hero + centered text | Repetitive rhythm, no visual variety | Mix layout types: sidebar, offset, editorial, split |
+| Giant hero with headline + subtitle + CTA on every page | Cookie-cutter template feel | Match the hero to content importance — some pages don't need one |
+| Everything centered on the page | Monotonous visual flow | Use left-aligned text with intentional center/right accents |
+| Equal spacing everywhere | Flat, robotic rhythm | Vary spacing to create grouping and breathing room |
+| Card grids with identical card sizes | Catalog/stock feel | Vary card sizes, feature one, use masonry or editorial layouts |
+
+### Color Anti-Patterns
+
+| AI Trap | Why It Feels Generic | Do Instead |
+|---|---|---|
+| Blue-to-purple gradient as primary | Overused AI default | Choose a palette rooted in the brand or project's personality |
+| Neon accent on dark background | "Tech startup template" look | Use muted, sophisticated accents — or bold ones with restraint |
+| Using 6+ colors with equal prominence | Visual noise, no hierarchy | 1-2 primary colors, 1 accent, rest neutrals |
+| Gradient backgrounds on every section | Decorative without purpose | Use solid colors; reserve gradients for specific emphasis |
+| Pure black (#000) text on pure white (#fff) | Harsh contrast, screen glare | Use near-black (#1a1a1a–#2d2d2d) on off-white (#f8f8f8–#fafafa) |
+| Colored shadows (purple/blue box-shadows) | Trendy but rarely appropriate | Neutral shadows unless the brand specifically calls for it |
+
+### Typography Anti-Patterns
+
+| AI Trap | Why It Feels Generic | Do Instead |
+|---|---|---|
+| Using Inter/Poppins/Montserrat for everything | Ubiquitous AI defaults | Consider the project's personality — serif for editorial, geometric sans for tech, humanist for approachable |
+| Only 2 sizes: heading and body | Flat hierarchy | Use a proper type scale (e.g., 12/14/16/20/24/32/48) |
+| All text in the same weight | No emphasis, everything competes | Use 2-3 weights (regular, medium, bold) with clear purpose |
+| ALL CAPS EVERYWHERE | Aggressive, hard to read | Reserve caps for small labels, buttons, or overlines |
+| Giant display text with no supporting content | Empty visual calories | Size should match content importance |
+
+### Component Anti-Patterns
+
+| AI Trap | Why It Feels Generic | Do Instead |
+|---|---|---|
+| border-radius: 9999px on everything | Bubbly, toy-like | Choose 1-2 radius values that match the design's tone (4-8px for sharp, 12-16px for soft) |
+| Glassmorphism / frosted glass everywhere | Trend over function | Use glass effects sparingly where depth communication is needed |
+| Drop shadows on everything | Visual heaviness, everything "floats" | Shadow only elements that conceptually need elevation (modals, dropdowns, cards on hover) |
+| Outlined icon + outlined button + outlined card | Everything is a border, nothing has weight | Mix filled and outlined treatments for hierarchy |
+| Decorative blob SVGs or wave dividers | Instant AI template identifier | Use geometric shapes with purpose, or no decoration at all |
+| Stock illustration people with purple skin | Unmistakable AI/startup template | Use photography, custom illustration, or no illustration |
+
+### Interaction Anti-Patterns
+
+| AI Trap | Why It Feels Generic | Do Instead |
+|---|---|---|
+| Everything has a hover scale(1.05) | Bouncy, distracting | Reserve scale for interactive cards; use color/shadow changes for most hover states |
+| 0.3s ease on everything | Sluggish, indiscriminate | Use faster transitions (150-200ms) for small elements, slower (300-400ms) for layout changes |
+| Fade-in-up on scroll for every element | Scroll-jacking, animation fatigue | Animate only key content on first appearance; let secondary content be static |
+| Loading spinners as the only loading state | No context about what's loading | Use skeleton screens, progressive content reveal, or inline loading indicators |
+
+---
+
+## Authentic Design Principles
+
+### 1. Content-First Hierarchy
+
+Design serves content, not the other way around.
+
+- Read the actual content before choosing layout
+- Size elements proportional to their importance
+- Use whitespace to group related content and separate sections
+- Ask: "What should the user see first, second, third?"
+
+### 2. Intentional Contrast
+
+Every visual difference should communicate something.
+
+- **Size contrast** — Headings vs. body, featured vs. standard items
+- **Weight contrast** — Bold labels vs. regular values, strong CTAs vs. subtle links
+- **Color contrast** — Primary actions vs. secondary, active states vs. default
+- **Space contrast** — Tight groups of related items, generous gaps between sections
+- **Density contrast** — Dense data areas vs. breathing hero/summary areas
+
+### 3. Systematic but Not Robotic
+
+Use systems (type scale, spacing scale, color tokens) but break them intentionally.
+
+- Establish a base grid (4px or 8px) but don't snap everything mechanically
+- Use your type scale but occasionally break it for display/hero moments
+- Maintain consistent component patterns but allow contextual variations
+
+### 4. Typography Does the Heavy Lifting
+
+Most visual hierarchy comes from type, not decoration.
+
+- Establish a clear scale: body → subhead → section head → page title → display
+- Use weight and size together: a 14px bold label and a 16px regular body text create clear hierarchy without needing different colors
+- Line-height matters: tighter for headings (1.1-1.3), looser for body (1.5-1.7)
+- Letter-spacing: slightly positive for small caps/labels, zero or negative for large display text
+
+### 5. Color as Communication
+
+Color should mean something, not just decorate.
+
+- **Brand color** — Primary actions, key elements, brand identity
+- **Semantic color** — Success (green), warning (amber), error (red), info (blue)
+- **Neutral palette** — Background, text, borders, dividers (this is 80% of your palette)
+- **Accent** — Sparingly, to draw attention to one thing
+
+### 6. Space Creates Meaning
+
+Proximity and spacing communicate relationships.
+
+- Items close together = related
+- Items far apart = separate concepts
+- Consistent internal padding = belonging to the same container
+- Asymmetric margins = visual rhythm and movement
+
+---
+
+## Design Quality Checklist
+
+Use this to evaluate designs before presenting to the user:
+
+### Visual Hierarchy
+- [ ] The most important element is visually dominant
+- [ ] There is a clear reading order (F-pattern or Z-pattern where appropriate)
+- [ ] Headings form a logical scale (not random sizes)
+- [ ] CTAs are visually distinct from surrounding content
+
+### Typography
+- [ ] Body text is 16px+ for readability
+- [ ] Line length is 45-75 characters for body text
+- [ ] Heading/body font pairing is intentional
+- [ ] No more than 3 font weights in active use
+
+### Color
+- [ ] Palette has 2 or fewer primary/accent colors
+- [ ] Text:background contrast meets WCAG AA (4.5:1 for body, 3:1 for large text)
+- [ ] Color is not the only indicator of state (icons, text, or shape also signal)
+- [ ] Neutral palette has enough range (light bg, medium borders, dark text)
+
+### Spacing & Layout
+- [ ] Spacing follows a consistent scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
+- [ ] Related elements are grouped with tighter spacing
+- [ ] Sections have comfortable breathing room
+- [ ] Layout works at mobile, tablet, and desktop widths
+
+### Components
+- [ ] Interactive elements have visible hover/focus states
+- [ ] Buttons have clear hierarchy (primary, secondary, tertiary/ghost)
+- [ ] Form inputs have labels, placeholders are not used as labels
+- [ ] Empty states, loading states, and error states are designed
+
+### Interaction
+- [ ] Transitions are fast (150-200ms) and purposeful
+- [ ] Hover states indicate interactivity without being distracting
+- [ ] Focus indicators are visible for keyboard navigation
+- [ ] Animations don't block user interaction
+
+### Authenticity
+- [ ] Design doesn't match common template/AI patterns listed above
+- [ ] Layout has visual variety (not repeating the same section format)
+- [ ] Decoration (if any) serves a purpose
+- [ ] The design reflects the project's unique personality

package/src/cli/index.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('prompter')
     .description('Enhance prompts directly in your AI coding workflow')
-    .version('0.8.0');
+    .version('0.8.1');
 
 program
     .command('init')