dev-frontend-ui-implementation

What it does and when to use it

Use to implement/review frontend UI, routing, state, API integration, responsive layout, accessibility, and browser behavior.

How it works

1. Steps
2. Output
3. Do not

---
name: dev-frontend-ui-implementation
description: Use to implement/review frontend UI, routing, state, API integration, responsive layout, accessibility, and browser behavior.
metadata:
  version: "0.3"
  updated: "2026-06-12"
---

# Frontend UI implementation workflow

Use this workflow when building or changing a user-facing frontend experience.

## Steps

1. Read the existing UI system.
   - Framework
   - Routing
   - Component patterns
   - Styling system
   - Icons
   - State management
   - Tests
   - Existing visual language

2. Define the user workflow.
   - Main task
   - Empty/loading/error states
   - Permissions and disabled states
   - Mobile and desktop behavior
   - API assumptions

3. Implement within the system.
   - Reuse local components and tokens.
   - Keep text inside containers at all target widths.
   - Use familiar controls and icons where possible.
   - Preserve keyboard navigation and semantic markup.

4. Validate.
   - Typecheck/lint/build
   - Unit or component tests
   - Browser smoke test for meaningful UI changes
   - Screenshot checks across desktop and mobile when layout risk is nontrivial

5. Review integration.
   - API data shape
   - Error handling
   - Performance and bundle impact
   - Accessibility and focus behavior

## Output

Return:

1. User-visible change
2. Component/state/API impact
3. Files changed
4. Validation run
5. UI risks or follow-ups

## Do not

- Do not create a landing page when the task calls for an app/tool experience.
- Do not introduce a new visual style if the repo already has one.
- Do not skip real browser validation for substantial UI changes.

Versions

The database has no other skills named dev-frontend-ui-implementation.

Identical content appears in 1 other GitHub folders. We show one copy with the highest score.

Database snapshot: 13.11.2026 · package version 5fc35fb52825 (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 90briefbound-frontend-engineering
  Use when an aligned UI contract or established project pattern needs production frontend implementation across components, layouts, interaction states, responsive behavior, accessibility, or runtime browser verification; do not use when the primary uncertainty is product…
• 100uw-analyze-frontend
  Use when analyzing frontend/UI layer including components, state management, routing, and API integration (optional - skip if no frontend exists)
• 90frontend-engineering
  Build, refactor, or review accessible, responsive web frontends using React, TypeScript, and other modern frameworks. Use for UI architecture, component design, routing, forms, state, API integration, browser behavior, performance, and visual quality.
• 90frontend-ui-engineering
  Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone. Triggers: "build UI", "component", "responsive", "design system", "frontend", "layout".
• 96dev-code-frontend
  一句话生成项目·前端编码。按设计实现前端界面(React/Vue/纯HTML)。Use when 前端编码/写前端.
• 95tl-dev-fe
  Frontend TDD development from task specifications. Use when: develop frontend, implement UI, create UI components, build pages, write frontend code for UC, or the user says "/nacl:tl-dev-fe UC###". Note: For backend tasks use /nacl:tl-dev-be, for TECH tasks use /nacl:tl-dev.