# Frontend Design

> Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.

- Skill: `itseffi/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add itseffi/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itseffi/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: itseffi (https://skillmd.com/u/itseffi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/itseffi/frontend-design

---


# Frontend Design

Use this skill to design frontend behavior and UI structure before or alongside implementation.

## The Process

### Step 1: Define UX objective

Capture:
- user goal
- primary user flow
- success state and failure states

### Step 2: Specify UI architecture

Define:
- screen/layout structure
- component hierarchy
- state model (loading, empty, error, success)

### Step 3: Specify design system decisions

Set:
- typography and spacing rules
- color/contrast constraints
- interaction patterns

### Step 4: Specify responsive and accessibility requirements

Include:
- breakpoints and behavior changes
- keyboard navigation expectations
- ARIA/semantic requirements
- contrast and focus visibility requirements

### Step 5: Define implementation handoff

Provide:
- component list and props/state contract
- acceptance criteria
- verification checklist

## Output Format

```markdown
# [Feature Name] Frontend Design Spec

## UX Objective
- User goal:
- Primary flow:
- Success/failure states:

## UI Architecture
- Layout:
- Component hierarchy:
- State model:

## Responsive Behavior
- Desktop:
- Tablet:
- Mobile:

## Accessibility Requirements
- Keyboard:
- Semantics/ARIA:
- Contrast/focus:

## Handoff
- Components to implement:
- Acceptance criteria:
- Verification checklist:
```

## Quality Bar

- Design decisions must map to user goals
- Accessibility section is mandatory
- Handoff must be implementable without extra interpretation

## When to Use

Use this skill when the task directly matches the workflow described above.

## When Not to Use

Do not use this skill when the request is unrelated, low-stakes, or better handled by a simpler direct response.