100 lines
3.0 KiB
Markdown
100 lines
3.0 KiB
Markdown
|
---
|
||
|
|
name: Frontend Design
|
||
|
|
slug: frontend
|
||
|
|
version: "1.0.2"
|
||
|
|
homepage: https://clawic.com/skills/frontend
|
||
|
|
description: "使用React、Next.js、Tailwind CSS进行前端开发。"
|
||
|
|
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`
|