SKILL GUIDE
Designing Frontend
Build or improve interfaces within the product’s visual language. Reuse components, design interaction states, and check responsiveness and accessibility.
designing-frontendOn this page
When to use it
- You are creating or revising a page, component, form, or navigation.
- An interface needs clearer hierarchy, responsive behavior, or accessible controls.
- You need to handle loading, empty, error, and success states consistently.
Workflow
Understand the product and existing UI
Identify the user goal, content priorities, devices, and constraints. Inspect components, tokens, typography, and interaction conventions.
Define a focused UI intent
Choose page regions, hierarchy, density, primary interactions, and responsive behavior before editing.
Reuse and implement
Compose suitable existing primitives and semantic tokens. Keep changes within the requested interface.
Design the important states
Handle focus, loading, empty, errors, success, and disabled behavior. Keep feedback close to the affected control.
Inspect the real result
Verify layout at relevant widths, keyboard navigation, semantics, and visual hierarchy. Run project checks and disclose any unavailable preview.
Practical use cases and prompts
Improving an interface
An existing form has unclear hierarchy and inconsistent feedback on narrow screens.
Use designing-frontend. Improve this form using the existing components and tokens. Clarify field grouping and action hierarchy, preserve behavior, and handle validation, loading, and success states. Inspect mobile and desktop rendering and verify keyboard access.Expected output: A coherent responsive form with accessible controls and verified interaction states.
Make navigation work on mobile
Desktop navigation needs an accessible compact layout.
Use designing-frontend. Adapt the existing navigation for mobile while preserving current-location cues and important links. Reuse the project’s dialog or drawer primitives. Verify focus containment, Escape, focus return, and responsive rendering.Expected output: Usable mobile navigation with predictable keyboard and focus behavior.
Design useful empty and error states
A data view has only been designed for successful populated results.
Use designing-frontend. Add empty, loading, and error states to this data view using existing primitives. Explain each state and provide a useful recovery action. Preserve entered values and verify the rendered states at narrow and desktop widths.Expected output: Consistent states that communicate what happened and how the user can continue.
Expected outputs
- An implemented interface that fits the existing visual language and supports the requested task.
- Relevant interaction states, responsive layouts, and accessible controls.
- A report of reused components, visual and keyboard checks, project checks, and unverified areas.
Requirements and optional helpers
- A coding agent with Agent Skills support and permission to read the target repository.
- Access to the target product’s existing UI, components, tokens, and design constraints.
- Browser or preview access is strongly recommended for visual verification. Code checks alone do not establish UI quality.
Frontend inventory inspector
Optional inspect-frontend.mjs needs Node.js 18+ and accepts --root. It reports frontend indicators for one package at a time; it cannot judge visual quality and does not replace browser checks.
Installation
Open a terminal in your target project and install this package. Project scope is the default; choose your agent when prompted.
npx skills add https://github.com/GiovanniL30/ai-skills/tree/main/skills --skill designing-frontendRefresh your agent session, confirm the skill is available, and give it a concrete task. Keep the whole package, including references and helpers.
Choose an agent and installation scope →Source and focused references
This guide summarizes the original package. Read its complete workflow and supporting references on GitHub.
Read the original SKILL.md ↗