Initial commit with translated description

2026-03-29 09:49:52 +08:00
commit 2696296533
8 changed files with 409 additions and 0 deletions
--- a/SKILL.md
+++ b/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`
--- a/_meta.json
+++ b/_meta.json
@@ -0,0 +1,6 @@
+{
+  "ownerId": "kn73vp5rarc3b14rc7wjcw8f8580t5d1",
+  "slug": "frontend",
+  "version": "1.0.2",
+  "publishedAt": 1771458614727
+}
--- a/animation.md
+++ b/animation.md
@@ -0,0 +1,51 @@
+# 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; }
+}
+```
--- a/colors.md
+++ b/colors.md
@@ -0,0 +1,53 @@
+# 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.
--- a/examples.md
+++ b/examples.md
@@ -0,0 +1,60 @@
+# Examples — Frontend
+
+## Landing Page
+
+**Prompt:**
+```
+Build a SaaS landing page for an AI writing tool.
+Dark theme, editorial typography. Sections: hero
+with animated demo, features grid, pricing table,
+FAQ accordion, footer with newsletter signup.
+```
+
+**Design choices:**
+- Tone: Editorial/Magazine
+- Font: Cabinet Grotesk (display) + Plus Jakarta Sans (body)
+- Color: Near-black bg (#0c0c0c), warm white text, accent copper
+- Memorable: Full-bleed hero with scroll-reveal text
+
+## Dashboard
+
+**Prompt:**
+```
+Create an analytics dashboard. Sidebar navigation,
+header with search and user menu. Main area: stats
+cards row, line chart, data table with pagination.
+Light theme, clean and professional.
+```
+
+**Design choices:**
+- Tone: Utilitarian/Clean
+- Layout: 240px fixed sidebar, fluid main
+- Components: shadcn/ui cards, recharts for graphs
+- Data table: tanstack-table with sorting/filtering
+
+## Checkout Form
+
+**Prompt:**
+```
+Build a multi-step checkout form. Steps: cart review,
+shipping address, payment method, confirmation.
+Progress indicator, back/next navigation, form
+validation with inline errors.
+```
+
+**Design choices:**
+- Stepped progress bar at top
+- React Hook Form + Zod for validation
+- Preserve all input on navigation
+- Optimistic feedback on submission
+
+## Pre-Implementation Checklist
+
+- [ ] Typography distinctive (not Inter/Roboto)
+- [ ] Color follows 70-20-10
+- [ ] Background has depth
+- [ ] One memorable element
+- [ ] Mobile-first responsive
+- [ ] Focus states visible
+- [ ] Loading states for async
+- [ ] Error recovery paths
--- a/mobile.md
+++ b/mobile.md
@@ -0,0 +1,45 @@
+# Mobile-First Patterns — Frontend
+
+## Breakpoints
+
+```css
+/* Mobile first — enhance upward */
+@media (min-width: 640px) { /* sm: tablet */ }
+@media (min-width: 768px) { /* md: landscape tablet */ }
+@media (min-width: 1024px) { /* lg: laptop */ }
+@media (min-width: 1280px) { /* xl: desktop */ }
+```
+
+## Layout Transformations
+
+| Pattern | Desktop | Mobile |
+|---------|---------|--------|
+| Hero with image | 2-column grid | Stack, image below |
+| Feature grid | 3-4 columns | Single column |
+| Sidebar + content | Side-by-side | Sheet/drawer |
+| Data tables | Full table | Card view |
+| Multi-column forms | Side-by-side | Stack vertically |
+
+## Touch Targets
+
+- Minimum **44x44px** for all interactive elements
+- **8px minimum** spacing between targets
+- Swipe actions need visual hints
+
+## Font Scaling
+
+```css
+@media (max-width: 768px) {
+  .hero-title { font-size: 32px; }
+  .section-title { font-size: 24px; }
+}
+```
+
+## Common Fixes
+
+| Issue | Fix |
+|-------|-----|
+| Hero grid breaks | Use flex instead of grid on mobile |
+| Horizontal scroll | Set `overflow-x: hidden` on body |
+| Tiny touch targets | Add padding, not just visual size |
+| Text overflow | Use `break-words` and fluid typography |
--- a/stack.md
+++ b/stack.md
@@ -0,0 +1,55 @@
+# Stack & Tooling — Frontend
+
+## Recommended Stack
+
+| Layer | Choice | Why |
+|-------|--------|-----|
+| Framework | Next.js 14+ | RSC, file routing, Vercel deploy |
+| Language | TypeScript | Catch errors early, better DX |
+| Styling | Tailwind CSS | Utility-first, design tokens built-in |
+| Components | shadcn/ui | Accessible, customizable, not a dependency |
+| Animation | Framer Motion | Declarative, performant |
+| Forms | React Hook Form + Zod | Type-safe validation |
+| State | Zustand or Jotai | Simple, no boilerplate |
+
+## Project Structure
+
+```
+src/
+├── app/                 # Next.js App Router
+│   ├── layout.tsx
+│   ├── page.tsx
+│   └── [feature]/
+├── components/
+│   ├── ui/              # shadcn/ui components
+│   └── [feature]/
+├── lib/
+│   ├── utils.ts         # cn(), formatters
+│   └── api.ts
+├── hooks/
+├── styles/
+│   └── globals.css
+└── config/
+    └── site.ts
+```
+
+## Essential Utils
+
+```typescript
+// lib/utils.ts
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+```
+
+## shadcn/ui Setup
+
+```bash
+npx shadcn@latest init
+npx shadcn@latest add button card dialog
+```
+
+Most used: Button, Card, Dialog, Accordion, Tabs, Sheet, NavigationMenu.
--- a/typography.md
+++ b/typography.md
@@ -0,0 +1,40 @@
+# Typography — Frontend
+
+## Font Selection
+
+**AVOID**: Inter, Roboto, Arial, Open Sans — overused, generic
+
+**USE** distinctive fonts:
+
+| Use Case | Recommendations |
+|----------|-----------------|
+| Display/Headlines | Clash Display, Cabinet Grotesk, Satoshi, Playfair Display |
+| Body Text | Plus Jakarta Sans, Instrument Sans, General Sans |
+| Monospace | JetBrains Mono, IBM Plex Mono, Fira Code |
+
+## Size Scale
+
+Use dramatic jumps, not timid increments:
+
+```css
+fontSize: {
+  'base': '1rem',       /* 16px */
+  '2xl': '1.5rem',      /* 24px */
+  '4xl': '2.5rem',      /* 40px */
+  '5xl': '3.5rem',      /* 56px — hero */
+  '6xl': '4.5rem',      /* 72px — statement */
+}
+```
+
+## Hierarchy Rules
+
+1. **One hero size per page** — don't compete for attention
+2. **Body text 16-18px minimum** — readability
+3. **Line height 1.5-1.7 for body** — dense for headlines (1.1-1.2)
+4. **Max width 65-75 characters** — optimal reading measure
+
+## Pairing Strategy
+
+- Contrast weights: thin display + bold body
+- Contrast styles: serif headlines + geometric sans body
+- Never use more than 2 font families