mcpField
N
ns-frontend-design

ns-frontend-design

github.com/nextstage-brasilDesign & UI0131 installsUpdated 1w ago
Repository

About ns-frontend-design

ns-frontend-design is a frontend skill for building or refreshing distinctive, production-grade interfaces. It guides developers through project-specific design context, visual hierarchy, responsive states, implementation, and accessibility checks.

Key features

  1. 01Audit existing UI and project patterns
  2. 02Apply design briefs and visual tokens
  3. 03Design responsive layouts and interface states
  4. 04Implement scoped frontend changes
  5. 05Check keyboard access, contrast, and motion

Use cases

  1. 01Creating a new page or component library
  2. 02Refreshing an existing screen
  3. 03Applying a design brief to a UI
  4. 04Building React analytics interfaces

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nextstage-brasil/skills --skill ns-frontend-design

After installing, type/ns-frontend-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

evals/
evals.json
references/
anti-slop.md
checklist.md
react-analytics-ui.md

Details

From the project README

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

FileWhen
docs/context/design-brief.mdAlways check first — tokens, typography, motion
docs/context/stack-confirmed.mdFramework and CSS approach
.nextstage-harness/rules/*frontend*Project conventions
references/react-analytics-ui.mdReact 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

Comments

Markdown supported