itseffi 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
# [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.