# Ns Frontend Design

> (NS) Distinctive production UI — layout, typography, motion, polish; avoids AI-slop aesthetics.

(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).

- Page: https://ss33.ai/skills/nextstage-brasil/ns-frontend-design-66529620274
- Publisher: nextstage-brasil
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: Apache-2.0
- Source: https://github.com/nextstage-brasil/skills/blob/675a1dee012a4e25d7bd7648a6572a6d03e48883/skills/ns-frontend-design/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/nextstage-brasil/ns-frontend-design-66529620274

# 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