@dedesfr/prompter 0.8.23 → 1.0.0

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

@@ -1,199 +0,0 @@
----
-name: ui-ux-pro
-description: Design and revise UI/UX like a senior designer. Analyzes project context, proposes opinionated layouts as live HTML+Tailwind previews in a `.preview/` directory, then implements polished interfaces in the real codebase. TRIGGER on new pages, redesigns, design audits, or component design where layout/hierarchy is in question. SKIP for small tweaks (color, spacing, copy, one-line CSS fixes), bug fixes to an already-approved layout, or backend/logic work — edit real code directly instead.
----
-
-# UI UX Pro
-
-Act as a senior UI/UX designer. Make opinionated design decisions based on project context. Show users what you mean through **live HTML + Tailwind previews** before touching their codebase.
-
----
-
-## Critical Rules (Read First)
-
-The failure modes to internalize — full context lives in the Workflow section below:
-
-1. **Diagnose redesigns yourself** — never ask "what feels wrong?" Surface findings, then yield for the user's reply before building.
-2. **Low-fi before high-fi; preview before real code.** No skipping tiers.
-3. **Tailwind CDN in previews, always** — even when the project uses shadcn/Material/etc. Previews stay disposable.
-4. **Section comments required** — every major HTML block gets `<!-- Section: Name -->` so users can give spatial feedback without reading code.
-5. **Default one variant with a stated recommendation.** Offer alternatives only if asked.
-6. **Never auto-delete `.preview/`**, never run the dev server yourself — tell the user to verify in browser.
-7. **Mobile, tablet, desktop from Pass 1.** A layout that breaks on mobile is not done.
-
----
-
-## Workflow
-
-`Step 0: Read context → Step 1: Decide mock vs. edit → Step 2: Discovery → Step 3: Low-fi → [approval] → Step 4: High-fi → [approval] → Step 5: Implement → Step 6: Iterate`
-
----
-
-## Step 0: Read Project Context (Silent)
-
-Before designing, silently gather — do not ask the user:
-
-- Read `AGENTS.md` and `CLAUDE.md` for tech stack and conventions
-- Detect CSS system: Tailwind, shadcn/Radix/Material/Chakra, vanilla CSS, CSS-in-JS
-- Scan for design tokens: CSS variables, theme files, color palettes, font stacks
-- Note the frontend framework: React, Vue, Svelte, Next, Laravel Blade, etc.
-
----
-
-## Step 1: Decide Mock vs. Edit
-
-Before discovery, decide the path. **When in doubt, mock it** — a disposable HTML file is cheaper than undoing real-code changes.
-
-### Build a preview (continue to Step 2):
-- New page or feature
-- Major redesign
-- Multiple directions are plausible
-- User is non-technical and needs to see before reacting
-
-### Edit real code directly (skip to Step 5):
-- Small tweak (color, spacing, copy)
-- Fixing a specific bug the user pointed at
-- Adding one element to an already-approved layout
-- Developer user asking for a specific change
-
----
-
-## Step 2: Discovery
-
-### New designs
-Ask one combined question: *"What is this for — page/feature, audience, and goal? Any vibe or reference is optional."* Proceed regardless of whether they give a vibe.
-
-### Redesigns and audits
-Do NOT ask open-ended questions. Most users cannot articulate design problems.
-
-1. Silently analyze the existing page — read the code or screenshot
-2. Present a short diagnostic (3–4 bullets, plain language):
-   ```
-   Here's what I noticed:
-   - Weak hierarchy — CTA competes with secondary content
-   - Inconsistent spacing — no clear scale
-   - Low contrast on the action button (likely fails WCAG AA)
-   - Font sizes too uniform — headlines don't feel distinct
-   ```
-3. Ask: *"Anything to keep, or a vibe/reference in mind? Say go and I'll start the low-fi."*
-4. **Yield to the user here.** End your turn after the diagnostic + question. Do not continue into preview construction in the same turn.
-
-### Never ask:
-- "What feels wrong?" — diagnose it yourself
-- "What should stay?" — infer from the existing design
-- "Which direction resonates?" — you pick
-- "What color scheme?" — derive from brand or propose one
-- Multiple-choice aesthetic menus — overwhelming for non-designers
-
----
-
-## Step 3: Preview (REQUIRED Before Any Real Code)
-
-### File structure
-```
-.preview/
-├── <feature>-lowfi.html     # Pass 1: grayscale layout
-├── <feature>-v1.html        # Pass 2: high-fi (recommended)
-├── <feature>-v2.html        # Optional variation
-└── variations.html          # Hub if multiple variants exist
-```
-
-- Files must be standalone, openable with `file://`
-- Add `.preview/` to `.gitignore` if not ignored (ask first if repo tracks it). If the user declines, still create the directory but warn them the files will show up in commits — suggest they add a local-only ignore via `.git/info/exclude`.
-
-### CSS in previews
-Always use Tailwind CDN (`<script src="https://cdn.tailwindcss.com"></script>`), even if the project uses shadcn/Material. If the project has brand tokens (CSS variables), inline them in a `<style>` block so colors/fonts match. The real implementation uses the project's actual design system — keep this separation clear.
-
-### Pass 1: Low-fi (grayscale, structural)
-- Grays and neutrals only — no brand colors
-- System font only — no custom typography
-- No shadows, gradients, or decorative effects
-- Focus: layout, hierarchy, spacing, content flow
-- **Include basic responsive behavior** — at minimum, the layout must not break on mobile. Use Tailwind responsive prefixes (`sm:`, `md:`, `lg:`) from the start.
-- File: `<feature>-lowfi.html`
-
-Present, wait for layout approval before proceeding.
-
-### Pass 2: High-fi (after low-fi is approved)
-- Apply brand colors, typography, shadows, borders
-- Add hover/focus states, responsive breakpoints
-- File: `<feature>-v1.html`
-
-### Delegating to `frontend-design` Skill
-If the `frontend-design` skill is available in the session, delegate the actual HTML markup construction to it — pass your layout decisions, section structure, and brand tokens, let it produce the markup. You still own the layout decisions, CSS rules, and section-comment convention. If not available, build the markup yourself.
-
-### Variations
-Default to one. Offer more only if the user asks, or if there is genuinely zero style signal to work from. Max 3. When building multiple, create a `variations.html` hub that links or iframes all variants side-by-side. Always mark one as **Recommended ⭐** with a one-line reason.
-
-### Proposal message format
-```
-## Design Proposal: [Feature Name]
-
-**Approach:** [1-2 sentences on direction and why]
-**Preview:** `.preview/<feature>-lowfi.html` (open in browser)
-
-### Key Decisions
-- [Decision]: [rationale]
-
-This is a throwaway mock — once approved I'll build it in your codebase using [design system].
-Does the layout work? I can adjust any section before moving to high-fi.
-```
-
----
-
-## Step 5: Implementation (After Preview Approved)
-
-### Order
-1. Layout structure and spacing
-2. Typography and color
-3. Component details — use the project's design system (shadcn, Material, etc.)
-4. Interaction states — hover, focus, loading, error, empty
-5. Responsive breakpoints
-6. Dark mode — if the project supports theming
-
-Check in after each chunk: *"Layout done — moving to typography, or want to adjust anything?"*
-When done: tell the user to open the page in their browser to verify.
-
-### Rules (see [design-principles.md](references/design-principles.md) for full catalog)
-- No gratuitous gradients, glassmorphism, or trend effects without purpose
-- Intentional border-radius — not `rounded-full` on everything
-- Typography does 80% of the work
-- Color: 1–2 primaries, 1 accent, rest neutrals
-- Transitions: 150–200ms for small elements, 300–400ms for layout shifts
-- Whitespace creates hierarchy
-
-### Adapting existing design
-- Preserve brand colors, fonts, recognizable patterns
-- Use existing CSS variables and design tokens
-- Flag conflicts between the user's request and their design system; recommend the best path
-
----
-
-## Step 6: Iteration
-
-| User says | You do |
-|---|---|
-| "I like it but…" | Targeted tweak in preview, preserve what works |
-| "It's not what I imagined" | Revise preview before touching real code |
-| "Can you try…" | Update preview, re-present |
-| "Perfect!" | Move to implementation |
-| User is unsure | Decide yourself, explain in plain language, build it, say: *"This is what I'd recommend. Tell me if something feels off."* |
-
----
-
-## Edge Cases
-
-- **No existing design** — derive from project type and stack, propose a cohesive starting point
-- **Screenshot input** — analyze visually, recreate as HTML preview to confirm understanding before implementing
-- **Design system conflict** — flag it, recommend extending the system vs. one-off, explain trade-off
-- **Accessibility** — always meet WCAG AA; if a request fails it, explain and offer an accessible alternative
-- **Performance** — flag heavy animations, large images, complex CSS; suggest alternatives
-- **Dark mode** — if the project supports theming, include a dark-mode variant (toggle or separate file)
-
----
-
-## Resources
-
-- **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

package/skills/ui-ux-pro/assets/design-spec-template.md

@@ -1,173 +0,0 @@
-# Design Specification — [Project / Feature Name]
-
-> Generated on [date] | Direction: [chosen direction name]
-
----
-
-## Overview
-
-**Target:** [page / component / feature description]
-**Framework:** [React / Vue / Svelte / etc.]
-**CSS Approach:** [Tailwind / CSS Modules / styled-components / vanilla CSS]
-
----
-
-## Design Tokens
-
-### Colors
-
-| Token | Value | Use |
-|---|---|---|
-| `--color-primary` | | Primary actions, brand accent |
-| `--color-primary-hover` | | Primary hover state |
-| `--color-secondary` | | Secondary actions, supporting |
-| `--color-background` | | Page background |
-| `--color-surface` | | Card/panel backgrounds |
-| `--color-text` | | Body text |
-| `--color-text-muted` | | Secondary text, captions |
-| `--color-border` | | Borders, dividers |
-| `--color-success` | | Success states |
-| `--color-warning` | | Warning states |
-| `--color-error` | | Error states |
-
-### Typography
-
-| Token | Value | Use |
-|---|---|---|
-| `--font-family-body` | | Body text, UI elements |
-| `--font-family-heading` | | Headings (if different from body) |
-| `--font-family-mono` | | Code, technical data |
-| `--text-xs` | 12px / 1.5 | Captions, badges |
-| `--text-sm` | 14px / 1.5 | Secondary text, labels |
-| `--text-base` | 16px / 1.6 | Body text |
-| `--text-lg` | 18px / 1.5 | Subheadings, emphasis |
-| `--text-xl` | 20px / 1.4 | Section headings |
-| `--text-2xl` | 24px / 1.3 | Page headings |
-| `--text-3xl` | 32px / 1.2 | Display, hero |
-| `--text-4xl` | 48px / 1.1 | Large display |
-
-### Spacing
-
-Base unit: `[4px / 8px]`
-
-| Token | Value | Use |
-|---|---|---|
-| `--space-1` | 4px | Tight gaps, inline spacing |
-| `--space-2` | 8px | Component internal padding |
-| `--space-3` | 12px | Compact element gaps |
-| `--space-4` | 16px | Standard element spacing |
-| `--space-6` | 24px | Section internal padding |
-| `--space-8` | 32px | Section gaps |
-| `--space-12` | 48px | Major section separation |
-| `--space-16` | 64px | Page-level spacing |
-
-### Borders & Radii
-
-| Token | Value | Use |
-|---|---|---|
-| `--border-width` | | Default border width |
-| `--border-color` | | Default border color |
-| `--radius-sm` | | Buttons, inputs, small elements |
-| `--radius-md` | | Cards, panels |
-| `--radius-lg` | | Modals, large containers |
-| `--radius-full` | | Avatars, pills |
-
-### Shadows
-
-| Token | Value | Use |
-|---|---|---|
-| `--shadow-sm` | | Subtle depth (cards) |
-| `--shadow-md` | | Moderate elevation (dropdowns) |
-| `--shadow-lg` | | High elevation (modals, popovers) |
-
-### Transitions
-
-| Token | Value | Use |
-|---|---|---|
-| `--transition-fast` | 150ms ease | Hover states, small elements |
-| `--transition-base` | 200ms ease | Standard transitions |
-| `--transition-slow` | 300ms ease-in-out | Layout changes, modals |
-
----
-
-## Layout
-
-### Page Structure
-
-```
-[Describe or diagram the overall page layout]
-[Include breakpoint behavior]
-```
-
-### Grid / Container
-
-- Max width: [value]
-- Columns: [count at each breakpoint]
-- Gutter: [value]
-- Margin: [value at each breakpoint]
-
-### Breakpoints
-
-| Name | Min Width | Layout Changes |
-|---|---|---|
-| Mobile | 0px | [describe] |
-| Tablet | 768px | [describe] |
-| Desktop | 1024px | [describe] |
-| Wide | 1280px | [describe] |
-
----
-
-## Components
-
-### [Component Name]
-
-**Purpose:** [what the component does]
-
-**Variants:**
-- [variant 1]: [description]
-- [variant 2]: [description]
-
-**States:**
-| State | Visual Treatment |
-|---|---|
-| Default | |
-| Hover | |
-| Focus | |
-| Active | |
-| Disabled | |
-| Loading | |
-| Error | |
-
-**Specs:**
-- Height: [value by size]
-- Padding: [values]
-- Font: [size, weight]
-- Border radius: [value]
-- Colors: [token references]
-
----
-
-## Interaction Patterns
-
-### [Interaction Name]
-
-**Trigger:** [click / hover / scroll / load]
-**Behavior:** [describe the interaction]
-**Duration:** [transition timing]
-**Easing:** [easing function]
-
----
-
-## Accessibility Notes
-
-- [ ] All contrast ratios meet WCAG AA
-- [ ] Focus indicators are visible and styled
-- [ ] Interactive elements have accessible labels
-- [ ] Heading hierarchy is logical
-- [ ] Motion respects `prefers-reduced-motion`
-
----
-
-## Implementation Notes
-
-[Any technical notes, caveats, or implementation-specific guidance]

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

@@ -1,255 +0,0 @@
-# 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)