frontend-enhancer

Files (12)

• SKILL.md
• animations.css · assets/
• button-variants.tsx · assets/
• card-variants.tsx · assets/
• input-variants.tsx · assets/
• layout-feature-grid.tsx · assets/
• layout-hero-section.tsx · assets/
• utils-cn.ts · assets/
• index.js
• package.json
• color_palettes.md · references/
• design_principles.md · references/

SKILL.md (first lines)

# Frontend Enhancer

Transform web applications into visually polished, human-designed experiences.

## Prerequisite: Research First

For a new design direction, run `ui-research` first so choices come from real reference products rather than default styles; the specific defaults to avoid are under "Avoiding the AI Look". See [UI Inspiration Sources](../_shared/UI_INSPIRATION_SOURCES.md).

---

## When to Use

**Use for:**

- Improving styling and visual design
- Creating responsive layouts
- Adding animations and transitions
- Selecting color schemes
- Building modern UI patterns
- Enhancing aesthetics

**Don't use when:**

- Need inspiration first → use `ui-research` first
- UX flow design → use `generic-ux-designer`
- Code architecture → use `generic-feature-developer`
- Code review → use `generic-code-reviewer`

**Foundational References:**

- [UI Inspiration Sources](../_shared/UI_INSPIRATION_SOURCES.md) - Research sources
- [Design Patterns](../_shared/DESIGN_PATTERNS.md) - Visual tokens

## Research-Driven Enhancement Workflow

1. **Research** - Use `ui-research` skill first (5-10 examples minimum)
2. **Assess** - Identify current gaps against research findings
3. **Plan** - Define direction based on inspiration analysis
4. **Foundation** - Set up colors, spacing, animations in theme
5. **Apply** - Implement with human polish (not defaults)
6. **Anti-AI Check** - Verify no generic AI patterns
7. **Refine** - Test responsiveness, verify accessibility
8. **Review** - Check hierarchy, consistency, performance

## Color Palette Selection

| Palette         | Use Case                    |
| --------------- | --------------------------- |
| Corporate Blue  | Business apps, SaaS         |
| Vibrant Purple  | Creative tools, portfolios  |
| Minimalist Gray | Clean, sophisticated        |
| Warm Sunset     | Consumer apps, e-commerce   |
| Ocean Fresh     | Health, finance apps        |
| Dark Mode       | Developer tools, dashboards |

Each palette needs: Primary, Secondary, Accent, Background, Foreground, Muted, Success, Warning, Error

## Component Patterns

### Buttons

- Variants: primary, secondary, outline, ghost, danger
- Sizes: sm, md, lg
- States: loading, disabled

### Cards

- Variants: default, bordered, elevated, interactive
- Subcomponents: Header, Title, Description, Content, Footer

### Forms

- Clear focus states
- Validation feedback
- Helper text
- Required indicators

## Animation Guidelines

**GPU-Accelerated Only:**

```css
/* ✅ DO animate */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ AVOID */
margin-top: -4px;
height: 100px;
```

**Duration Guidelines:**

- Micro-interactions: 100-200ms
- Transitions: 200-300ms
- Complex animations: 300-500ms

**Accessibility:**

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
```

## Responsive Strategy

| Breakpoint | Min Width | Target       |
| ---------- | --------- | ------------ |
| base       | 0         | Mobile       |
| sm         | 640px     | Large phones |
| md         | 768px     | Tablets      |
| lg         | 1024px    | Laptops      |
| xl         | 1280px    | Desktops     |

## Accessibility Checklist

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude