Frontend Design Skill

Provides structured guidance for building production-quality frontend UI components and pages. Covers component architecture, responsive design, animations, accessibility, and design system adherence for the PP Namias portfolio.

When to use this skill

• Building a new UI component or page section
• Styling and layout decisions
• Implementing responsive design patterns
• Adding animations or transitions
• Ensuring design consistency with the existing codebase
• Reviewing UI code against best practices

Workflow

1. Understand the design intent — Read the existing component patterns in src/components/. Identify the section type (hero, about, projects, skills, experience, certifications, blog, contact).

2. Choose the right primitives — Use Tailwind CSS utility classes for styling. Use Framer Motion for animations. Use Lucide React for icons. Follow the repo's existing patterns.