feature-ui_skill

Overview

This skill implements UI components, layouts, interactions, animations, responsive behavior, and accessibility for new features. It provides a practical checklist and verification approach to ensure components are reusable, performant, and accessible. Use it to produce consistent, production-ready UI pieces that match design intent and development standards.

How this skill works

I inspect component structure, props, state, and separation of concerns to confirm single responsibility and reusability. I validate layouts across breakpoints, spacing, typography, and overflow behavior against design specs. I test interactions, loading states, transitions, and gesture handling for performance and feedback. I run accessibility checks for semantics, ARIA, keyboard navigation, contrast, and screen reader compatibility.

When to use it

• Building new UI components for features or pages
• Converting designs from designers into code
• Auditing existing components for accessibility or responsiveness
• Adding interactions, animations, or loading states
• Preparing components for reuse in a shared library

Best practices

• Define clear component hierarchy and composition patterns before coding
• Type and document all props/inputs and separate container vs presentational logic
• Keep components single-responsibility and manage state locally or via explicit stores
• Follow design tokens for consistent typography, spacing, and colors
• Test responsivity across breakpoints and validate overflow/scroll scenarios
• Include keyboard, focus, ARIA attributes, and screen reader announcements early

Example use cases

• Implementing a new modal/dialog with focus management, animations, and ARIA roles
• Building a responsive card grid with consistent spacing and skeleton loading states
• Creating an interactive form component that validates, announces errors, and manages focus
• Converting a prototype interaction (drag/swipe) into a performant, touch-friendly component
• Refactoring a component for reuse and adding docs and typed props for a component library