frontend-dev

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