Skill: ivangdavila/frontend (version 1.0.2)

--- name: Frontend Design slug: frontend version: "1.0.2" homepage: https://clawic.com/skills/frontend description: Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI. changelog: "Renamed to better reflect design-focused capabilities and guidance." metadata: {"clawdbot":{"emoji":"🖥️","requires":{"bins":[]},"os":["linux","darwin","win32"]}} --- ## When to Use User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish. ## Quick Reference | Topic | File | |-------|------| | Stack & tooling | `stack.md` | | Typography rules | `typography.md` | | Color systems | `colors.md` | | Mobile patterns | `mobile.md` | | Animation | `animation.md` | | Examples | `examples.md` | ## Core Rules ### 1. Mobile-First Always - Start with mobile layout, enhance upward - Every grid must collapse to single column - Touch targets minimum 44x44px - Test on real devices, not just simulators ### 2. Typography Matters - Avoid generic fonts (Inter, Roboto, Arial) - Use dramatic size jumps (2x+), not timid increments - Body text 16-18px minimum - See `typography.md` for specific recommendations ### 3. Color with Purpose - 70-20-10 rule: primary, secondary, accent - Commit to light OR dark — no muddy mid-grays - Never solid white backgrounds — add depth - See `colors.md` for CSS variables and patterns ### 4. Feedback on Every Interaction - Acknowledge taps within 100ms - Optimistic updates for instant feel - Loading states for operations >1s - Preserve user input on errors ### 5. Accessibility Non-Negotiable - Color contrast 4.5:1 (text), 3:1 (UI) - Focus states on all interactive elements - Semantic HTML (nav, main, section, article) - Keyboard navigation works for everything ### 6. Performance from Start - Lazy load below-fold content - Image placeholders prevent layout shift - Code split heavy components - Target LCP <2.5s, CLS <0.1 ### 7. One Memorable Element - Every page needs one unforgettable design choice - Typography treatment, hero animation, unusual layout - Timid designs fail — commit to an aesthetic ## Frontend Traps | Trap | Consequence | Fix | |------|-------------|-----| | Generic fonts | Looks like every other site | Use distinctive fonts | | Solid white backgrounds | Flat, lifeless | Add gradients, grain, depth | | Mobile as afterthought | Broken for 60% of users | Mobile-first always | | Form error clears input | User rage | Preserve input, highlight error | | No loading states | User thinks broken | Show progress immediately | | Timid type scale | No visual hierarchy | Use 2x+ jumps for headlines | ## Scope This skill ONLY: - Provides frontend patterns and guidelines - Recommends stack and tooling choices - Guides responsive implementation This skill NEVER: - Makes network requests - Accesses user data - Stores any information ## Security & Privacy This skill is read-only guidance. No data is collected, sent, or stored. ## Feedback - If useful: `clawhub star frontend` - Stay updated: `clawhub sync`

path: animation.md
content: # Animation — Frontend

## Priority

One orchestrated page load > scattered micro-interactions.

## High-Impact Moments

1. **Staggered hero reveals** — content fades in sequence
2. **Scroll-triggered sections** — elements enter on scroll
3. **Hover state surprises** — scale, shadow, color shift
4. **Page transitions** — smooth route changes

## Framer Motion Example

```tsx
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

<motion.div variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.div key={i} variants={item} />)}
</motion.div>
```

## Timing Guidelines

| Type | Duration |
|------|----------|
| Interactions (hover, click) | 150-300ms |
| Transitions (page, modal) | 300-500ms |
| Complex sequences | 500-800ms total |

## Accessibility

Always respect `prefers-reduced-motion`:

```css
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
```


path: colors.md
content: # Color & Theme — Frontend

## CSS Variables Setup

```css
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --accent: 210 40% 96%;
  --destructive: 0 84% 60%;
  --border: 214.3 31.8% 91.4%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}
```

## Color Rules

1. **70-20-10**: Primary 70%, secondary 20%, accent 10%
2. **Commit to light OR dark** — no muddy mid-grays
3. **High contrast CTAs** — buttons must pop
4. **Semantic colors**: red=destructive, green=success, yellow=warning

## Backgrounds

**AVOID**: Solid white (#fff) or plain gray

**USE**:
- Subtle gradients: `bg-gradient-to-br from-slate-50 to-slate-100`
- Noise/grain texture overlay
- Glassmorphism with backdrop-blur

```css
/* Grain overlay */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,...");
  opacity: 0.03;
  pointer-events: none;
}
```

## Dark Theme

Always define both themes. Use CSS variables so switching is automatic.


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)