← ClaudeAtlas

frontend-ui-refinementlisted

Refine existing web interfaces and simplify their behavioral tests. Use for layout, theme, floating layers, scrolling, loading or feedback inconsistencies, editor state or draft loss across view switches, and pruning redundant UI tests. Follow the approved reference or established design system. Not for greenfield design, full redesigns, backend-only logic, or directory restructuring.
reagin/agent-skills · ★ 0 · Web & Frontend · score 62
Install: claude install-skill reagin/agent-skills
# Frontend UI Refinement Improve the requested interface within its existing visual language. Prefer removing conflicting styles, duplicate state, and unnecessary UI over adding another layer of customization. For test-only cleanup, inspect existing scenarios and the behavior they protect; use the verification guidance below without redesigning the interface. ## Ground the Change For interface work, inspect the user's reference, affected components, neighboring examples, and shared tokens. Confirm the visible problem in the relevant state when a browser is available. Separate an observed mismatch from an inferred cause. Identify the styles or state that own the behavior before editing. A local hover issue rarely needs a global redesign; a shared token error may need a shared fix. Ask only when missing intent would materially change the result. Use the existing primitives, icons, and styling approach. Do not introduce a design system, animation dependency, cache framework, or directory migration for a small refinement. ## Keep the Visual Contract Coherent | Area | Inspect and resolve | | --- | --- | | Theme | Trace saved preference, system appearance, first paint, and application initialization. Use one appearance policy for login, loading, and content; preserve explicit user settings. | | Floating surfaces | Identify the scroll owner, containing block, clipping, and stacking. Preserve the approved material; use blur only when the design calls for it. Apply that materi