Initial commit from agent
This commit is contained in:
45
skills/software/frontend-ui-implementation.md
Normal file
45
skills/software/frontend-ui-implementation.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# Frontend UI Implementation
|
||||
|
||||
## Purpose
|
||||
|
||||
Guide interface implementation that balances correctness, usability, clarity, performance, and consistency with the existing product experience.
|
||||
|
||||
## When to use
|
||||
|
||||
- Building or updating pages, components, and interactions
|
||||
- Implementing client-side state or view logic
|
||||
- Adjusting layout, form flows, states, and visual feedback
|
||||
- Shipping UI changes tied to product behavior
|
||||
|
||||
## Inputs to gather
|
||||
|
||||
- Existing design system, component patterns, and styling conventions
|
||||
- User flow, content requirements, and responsive constraints
|
||||
- State, API, and error/loading behavior tied to the UI
|
||||
- Current tests, stories, screenshots, or acceptance criteria if available
|
||||
|
||||
## How to work
|
||||
|
||||
- Preserve the established visual language unless the task explicitly calls for a new direction.
|
||||
- Design for the full experience: loading, empty, error, success, and edge states.
|
||||
- Keep interaction logic understandable and avoid overengineering small UI behavior.
|
||||
- Use content, hierarchy, and spacing intentionally so the UI communicates clearly.
|
||||
- Validate on the most important screen sizes or states that the repository can reasonably support.
|
||||
|
||||
## Output expectations
|
||||
|
||||
- A functional UI change that is coherent visually and behaviorally
|
||||
- Clear notes on user-facing behavior and state handling
|
||||
- Verification appropriate to the stack, such as tests, stories, or manual checks
|
||||
|
||||
## Quality checklist
|
||||
|
||||
- The UI is understandable without hidden assumptions.
|
||||
- Important states are handled, not just the happy path.
|
||||
- Visual and code patterns fit the existing app.
|
||||
- Accessibility, responsiveness, and copy quality are considered.
|
||||
|
||||
## Handoff notes
|
||||
|
||||
- Mention any UX debts, unresolved visual questions, or browser/device gaps that remain.
|
||||
- Pair with UX review or product copy when usability or wording is central to the task.
|
||||
Reference in New Issue
Block a user