From 2696296533188f049d9e831a37af9e55d881e458 Mon Sep 17 00:00:00 2001 From: zlei9 Date: Sun, 29 Mar 2026 09:49:52 +0800 Subject: [PATCH] Initial commit with translated description --- SKILL.md | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++ _meta.json | 6 ++++ animation.md | 51 ++++++++++++++++++++++++++ colors.md | 53 +++++++++++++++++++++++++++ examples.md | 60 +++++++++++++++++++++++++++++++ mobile.md | 45 +++++++++++++++++++++++ stack.md | 55 ++++++++++++++++++++++++++++ typography.md | 40 +++++++++++++++++++++ 8 files changed, 409 insertions(+) create mode 100644 SKILL.md create mode 100644 _meta.json create mode 100644 animation.md create mode 100644 colors.md create mode 100644 examples.md create mode 100644 mobile.md create mode 100644 stack.md create mode 100644 typography.md diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..2f07b90 --- /dev/null +++ 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` diff --git a/_meta.json b/_meta.json new file mode 100644 index 0000000..c685f7c --- /dev/null +++ b/_meta.json @@ -0,0 +1,6 @@ +{ + "ownerId": "kn73vp5rarc3b14rc7wjcw8f8580t5d1", + "slug": "frontend", + "version": "1.0.2", + "publishedAt": 1771458614727 +} \ No newline at end of file diff --git a/animation.md b/animation.md new file mode 100644 index 0000000..15524dd --- /dev/null +++ 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 } +} + + + {items.map(i => )} + +``` + +## 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; } +} +``` diff --git a/colors.md b/colors.md new file mode 100644 index 0000000..ba6cec3 --- /dev/null +++ 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. diff --git a/examples.md b/examples.md new file mode 100644 index 0000000..8dd172a --- /dev/null +++ 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 diff --git a/mobile.md b/mobile.md new file mode 100644 index 0000000..8e144b0 --- /dev/null +++ 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 | diff --git a/stack.md b/stack.md new file mode 100644 index 0000000..241825b --- /dev/null +++ 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. diff --git a/typography.md b/typography.md new file mode 100644 index 0000000..942bc56 --- /dev/null +++ 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