home / skills / shotaiuchi / dotclaude / feature-ui

feature-ui skill

safe

This skill helps implement UI components for new features, ensuring responsive layouts, accessible interactions, and consistent design across apps.

npx playbooks add skill shotaiuchi/dotclaude --skill feature-ui

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.7 KB

---
name: feature-ui
description: >-
  UI component implementation. Apply when building user interface
  components, layouts, interactions, animations, responsive design,
  and accessibility for new features.
user-invocable: false
---

# UI Implementer Implementation

Build user interface components for new features.

## Implementation Checklist

### Component Structure
- Define component hierarchy and composition pattern
- Verify props/inputs are properly typed and documented
- Check for proper separation of container and presentational logic
- Ensure component reusability and single responsibility
- Validate state management within components

### Layout & Responsiveness
- Implement layouts following design specifications
- Verify responsive behavior across breakpoints
- Check for proper spacing, alignment, and grid usage
- Ensure consistent typography and color usage
- Validate overflow and scroll behavior

### Interactions & Animations
- Implement user interactions (click, hover, drag, swipe)
- Verify loading states and skeleton screens
- Check transition and animation performance
- Ensure proper feedback for user actions
- Validate gesture handling and touch targets

### Accessibility
- Verify semantic HTML and ARIA attributes
- Check keyboard navigation and focus management
- Ensure sufficient color contrast ratios
- Validate screen reader compatibility
- Check for proper form labels and error announcements

## Output Format

Report implementation status:

| Status | Description |
|--------|-------------|
| Complete | Fully implemented and verified |
| Partial | Implementation started, needs remaining work |
| Blocked | Cannot proceed due to dependency or decision needed |
| Skipped | Not applicable to this feature |

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

FAQ

What status values should I use in reports?

Use Complete, Partial, Blocked, or Skipped to reflect implementation progress and blockers.

How do I verify accessibility quickly?

Start with semantic HTML, keyboard navigation, focus order, color contrast checks, and a screen reader pass; automate where possible with linters and axe.