# Ns Frontend Design

> (NS) Distinctive production UI — layout, typography, motion, polish; avoids AI-slop aesthetics. Use when building/refining pages, components, dashboards, KPI/analytics views, charts, forms, design-brief work, or better UI/UX — even if they do not say "design". Load docs/context/design-brief.md when present. Do NOT use for backend-only, requirements writing, or full SDD (ns-spec-driven).

- Skill: `nextstage-brasil/ns-frontend-design` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add nextstage-brasil/ns-frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nextstage-brasil/ns-frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: Apache-2.0
- Author: nextstage-brasil (https://skillmd.com/u/nextstage-brasil)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nextstage-brasil/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

| File | When |
| ---- | ---- |
| `docs/context/design-brief.md` | Always check first — tokens, typography, motion |
| `docs/context/stack-confirmed.md` | Framework and CSS approach |
| `.nextstage-harness/rules/*frontend*` | Project conventions |
| `references/react-analytics-ui.md` | React stack + KPIs, charts, timelines, tables, sources, alerts |

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