frontend-implementation_skill

Overview

This skill provides practical frontend implementation guidance for building UI with React, Vue, and Angular using modern web technologies. It focuses on component patterns, form handling, accessibility, responsive design, and validation commands for development workflows. Use it to ensure components are testable, accessible, and production-ready.

How this skill works

The skill inspects task tags and technical requirements to suggest component structure, state management, and styling approaches. It provides concrete validation commands (test, build, lint, start) and success criteria to confirm readiness. It highlights common blockers, offers debugging steps, and supplies short code patterns for components and forms.

When to use it

• Implementing or updating UI components tagged frontend, ui, react, vue, or angular
• Building forms with validation and submission handling
• Integrating APIs and handling loading/error states
• Ensuring accessibility and responsive behavior across breakpoints
• Preparing code for CI: tests, linting, type checks, and production build

Best practices

• Follow mobile-first responsive design and component composition
• Test user-facing behavior (interactions, content, accessibility) not implementation details
• Always include ARIA labels, keyboard navigation, focus indicators, and contrast checks
• Use environment variables for API URLs and avoid hardcoding
• Handle loading, error, and empty states explicitly; provide fallbacks

Example use cases

• Create a React functional profile component that fetches user data with loading and error states
• Build a login form using React Hook Form or controlled inputs with client-side validation and ARIA attributes
• Convert design tokens into CSS modules or styled-components for consistent theming
• Mock API responses locally when backend endpoints are not available to unblock frontend work
• Write component tests that simulate user events and assert visible results