Initial commit with translated description

SKILL.md

@@ -0,0 +1,99 @@
+---
+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`