Improving Web Interfaces
Use this for implementation craft after Designing Interfaces
has locked the visual direction. It is not a second design authority.
Workflow
- Read the applicable sections of implementation.md.
- Preserve the locked tokens, hierarchy, and component roles; improve one user-facing
path at a time. Make a design more decisive through hierarchy, proportion, density, and
copy before adding colors, effects, or new components.
For copy, density, onboarding, or tone tuning, read
interface-copy.md and
refinement-modes.md.
- When the existing system cannot express the intended direction, name the precise token
or component addition and get approval before expanding the system.
- Use motion only to explain state, spatial change, or feedback. Respect reduced motion.
- Check keyboard use, focus visibility, semantics, and contrast before visual polish.
- Build loading, error, empty, permission, and read-only states alongside the primary path;
preserve user input on recoverable failure and leave room for localized text.
- Give every action and recovery state specific, user-facing copy. Name destructive outcomes,
explain errors in plain language, and make the next action clear.
- Render the result and compare it to the reference lock using
rendering-chromium-to-png.
Boundaries
Design Cluster
This is the build companion, not an isolated workflow. Keep the work connected to
designing-interfaces for direction,
reviewing-web-interfaces for evidence,
extracting-design-systems for proven reuse,
optimizing-react-interfaces for measured
React performance, and testing-web-interfaces
for regression proof.
References
- Implementation guidance and source map
1---2name: improving-web-interfaces3description: Improves web interfaces after design direction is locked.4---56# Improving Web Interfaces78Use this for implementation craft after [Designing Interfaces](../designing-interfaces/SKILL.md)9has locked the visual direction. It is not a second design authority.1011## Workflow12131. Read the applicable sections of [implementation.md](references/implementation.md).142. Preserve the locked tokens, hierarchy, and component roles; improve one user-facing15 path at a time. Make a design more decisive through hierarchy, proportion, density, and16 copy before adding colors, effects, or new components.17 For copy, density, onboarding, or tone tuning, read18 [interface-copy.md](../designing-interfaces/references/interface-copy.md) and19 [refinement-modes.md](../designing-interfaces/references/refinement-modes.md).203. When the existing system cannot express the intended direction, name the precise token21 or component addition and get approval before expanding the system.224. Use motion only to explain state, spatial change, or feedback. Respect reduced motion.235. Check keyboard use, focus visibility, semantics, and contrast before visual polish.246. Build loading, error, empty, permission, and read-only states alongside the primary path;25 preserve user input on recoverable failure and leave room for localized text.267. Give every action and recovery state specific, user-facing copy. Name destructive outcomes,27 explain errors in plain language, and make the next action clear.288. Render the result and compare it to the reference lock using29 [rendering-chromium-to-png](../rendering-chromium-to-png/SKILL.md).3031## Boundaries3233- Prefer existing primitives and tokens over introducing a parallel component system.34- Do not add animation, cards, gradients, or decorative effects without a user/task role.35- Route React runtime performance work to36 [optimizing-react-interfaces](../optimizing-react-interfaces/SKILL.md).37- Route an evidence-backed review to38 [reviewing-web-interfaces](../reviewing-web-interfaces/SKILL.md).39- Route repeated, mature patterns to40 [extracting-design-systems](../extracting-design-systems/SKILL.md).41- Route browser and component regression coverage to42 [testing-web-interfaces](../testing-web-interfaces/SKILL.md).4344## Design Cluster4546This is the build companion, not an isolated workflow. Keep the work connected to47[designing-interfaces](../designing-interfaces/SKILL.md) for direction,48[reviewing-web-interfaces](../reviewing-web-interfaces/SKILL.md) for evidence,49[extracting-design-systems](../extracting-design-systems/SKILL.md) for proven reuse,50[optimizing-react-interfaces](../optimizing-react-interfaces/SKILL.md) for measured51React performance, and [testing-web-interfaces](../testing-web-interfaces/SKILL.md)52for regression proof.5354## References5556- [Implementation guidance and source map](references/implementation.md)
socketdev