frontend-designer
Frontend Designer
A comprehensive skill for frontend designers and developers to build beautiful, accessible, and performant user interfaces with modern best practices.
What This Skill Does
Helps frontend designers/developers with:
- Component Design & Development - Build reusable, accessible components
- Design Systems - Implement tokens, patterns, and documentation
- Responsive Design - Mobile-first, fluid layouts
- Accessibility (WCAG 2.1) - Inclusive design patterns
- Modern CSS - Flexbox, Grid, custom properties
- Performance Optimization - Fast, efficient frontends
- Framework Patterns - React, Vue, Svelte best practices
- Design-to-Code - Figma to production workflows
Why This Skill Matters
More from jamesrochabrun/skills
trading-plan-generator
Generate comprehensive trading plans with risk management, position sizing, entry/exit strategies, and performance tracking to trade with discipline and consistency.
850prd-generator
Generate comprehensive Product Requirements Documents (PRDs) for product managers. Use this skill when users ask to "create a PRD", "write product requirements", "document a feature", or need help structuring product specifications.
753apple-hig-designer
Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.
734math-teacher
Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to advanced calculus.
495swiftui-animation
This skill provides comprehensive guidance for implementing advanced SwiftUI animations, transitions, matched geometry effects, and Metal shader integration. Use when building animations, view transitions, hero animations, or GPU-accelerated effects in SwiftUI apps for iOS and macOS.
445leetcode-teacher
Interactive LeetCode-style teacher for technical interview preparation. Generates coding playgrounds with real product challenges, teaches patterns and techniques, supports Python/TypeScript/Kotlin/Swift, and provides progressive difficulty training for data structures and algorithms.
267