Description
This is where the work gets real. You've got your design system, you've got your component plan — now build.
Redesign at least 3 components from the Juice Shop frontend. Use GitHub Copilot and the frontend-design skill to generate code, iterate on designs, and push toward production quality. These aren't throwaway prototypes. Every component should be responsive, accessible, and visually polished. Think about hover states, transitions, focus indicators, and how things look on a phone screen.
The difference between a good component and a great one is in the details that most people skip.
Objectives
- Redesign at least 3 frontend components using GitHub Copilot and the
frontend-design skill
- Ensure each component is responsive across screen sizes
- Implement accessibility best practices (keyboard navigation, ARIA attributes, sufficient color contrast)
- Apply the design system defined in F-01 consistently across all components
Success Criteria
- At least 3 UI components redesigned with modern styling
- GitHub Copilot and the
frontend-design skill used during implementation
- Components are responsive (tested at mobile, tablet, and desktop breakpoints)
- Accessibility addressed: keyboard navigable, proper ARIA labels, meets WCAG color contrast requirements
- Design system applied consistently (colors, typography, spacing match F-01 definitions)
Learning Resources