How do I install the Ns Frontend Design skill?

Run npx skillmds@latest add nextstage-brasil/ns-frontend-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ns Frontend Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ns Frontend Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ns Frontend Design free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under Apache-2.

Who published Ns Frontend Design?

nextstage-brasil (@nextstage-brasil) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ns Frontend Design by nextstage-brasil

Name: Ns Frontend Design
Author: nextstage-brasil

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

File contents

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

Audit — screenshot or read existing UI patterns in the codebase; note framework (React, Vue, Blade, etc.).
Anchor — apply design-brief.md or establish a minimal direction (type scale, spacing, accent, motion level).
Design — composition, hierarchy, states (hover, focus, empty, error), responsive breakpoints.
Implement — minimal diff; match project file structure and naming.
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

---name: ns-frontend-designdescription: (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).license: Apache-2.0---# Frontend DesignShip **distinctive, production-grade UI** — not interchangeable template aesthetics.## Session bootSee `../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)## Workflow1. **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-drivenWhen 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

Frequently asked questions