AgentSkillsCN

frontend-dev

运用React、TailwindCSS、shadcn、Framer Motion以及专业图标，打造专业且现代的前端界面。

SKILL.md
--- frontmatter
name: frontend-dev
description: Frontend development skill for creating professional, modern UIs with React, TailwindCSS, shadcn, Framer Motion, and professional icons
license: MIT
compatibility: opencode
metadata:
  audience: developers
  workflow: frontend

Frontend Development Skill

Technologies

  • •React/Next.js for component architecture
  • •TailwindCSS for styling
  • •shadcn/ui for component library
  • •Framer Motion for animations
  • •Professional icon libraries (lucide-react, heroicons, etc.)

UI Standards

  • •Avoid excessive purple gradient UI - use sparingly if at all
  • •NEVER use emojis in UI - use professional icons only
  • •Create professional, modern interfaces
  • •Match quality standards of https://www.awwwards.com/
  • •Ensure responsive design
  • •Prioritize accessibility (WCAG 2.1)
  • •Optimize performance (Core Web Vitals)
  • •UI must NOT look AI-generated

Color Guidelines

  • •Use color schemes as specified by the user
  • •Gradients can be used sparingly for accents
  • •Avoid overusing gradients - keep design clean and professional
  • •Ensure proper contrast ratios
  • •Support dark mode when requested

Before Implementation

  1. •Use context7 to look up component documentation
  2. •Use gh_grep to find real-world implementation examples
  3. •Check shadcn component API for correct props
  4. •Review TailwindCSS docs for utility classes
  5. •Refer to Framer Motion docs for animation patterns

Component Patterns

  • •Compound components for complex UIs
  • •Controlled vs uncontrolled patterns
  • •Proper error boundaries
  • •Loading states with skeletons
  • •Optimistic updates
  • •Server components vs client components (Next.js)

Icon Usage

  • •lucide-react for general icons
  • •heroicons for alternative icon styles
  • •react-icons for comprehensive icon sets
  • •Use icons that match the design language
  • •Ensure consistent icon sizing