Frontend Design
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Iván
@ivangdavila
Install
$ openclaw skills install @ivangdavila/frontendWhen 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.mdfor 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.mdfor 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
Related skills
Frontend Design
@ahump20Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Ui Ux Pro Max
@ahump20UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
UI/UX Pro Max
@xobi667UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
SuperDesign
@mpociotExpert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Frontend Design
@iammarcellusCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifact...
Frontend Design
@michaelmonetizedCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.