Ns Frontend Design

Frontend Design

Ship distinctive, production-grade UI — not interchangeable template aesthetics.

Session boot

See ../ns-harness/references/session-boot.md. Read .nextstage-harness/rules/architecture-rules.md and layer-specific frontend rules when present.

Context to load

If design-brief.md is missing, infer stack from architecture rules and ask one focused question on brand direction before large UI work.

When the stack is React and the work includes dashboards or analytics UI, read references/react-analytics-ui.md before implementing — default chart library: Recharts.

When to use

• New pages, layouts, or component libraries
• Visual refresh of existing screens
• Design-brief alignment or token application
• Reducing "generic AI UI" (purple gradients, identical card grids)

Workflow

1. Audit — screenshot or read existing UI patterns in the codebase; note framework (React, Vue, Blade, etc.).
2. Anchor — apply design-brief.md or establish a minimal direction (type scale, spacing, accent, motion level).
3. Design — composition, hierarchy, states (hover, focus, empty, error), responsive breakpoints.
4. Implement — minimal diff; match project file structure and naming.
5. Verify — keyboard focus, contrast, reduced-motion respect.

See references/anti-slop.md and references/checklist.md.

Principles

• One strong visual idea per screen — not every trend at once.
• Typography carries hierarchy — do not rely on color alone.
• Motion with purpose — micro-interactions for feedback, not decoration loops.
• Accessible by default — semantic HTML, labels, focus rings.

Integration with ns-spec-driven

When invoked from the SDD face skill, stay scoped to UI tasks — do not expand into requirements or task generation.

Forbidden

• Backend API design or database schema
• Replacing ns-reviewer for MR gates
• Ignoring project CSS/component conventions when they exist