mcpField
N
ns-code-frontend-design

ns-code-frontend-design

github.com/nextstage-brasilDesign & UI054 installsUpdated 5d ago
Repository

About ns-code-frontend-design

ns-code-frontend-design is a skill for designing and implementing frontend pages, layouts, and component libraries. It guides work from auditing existing UI and setting a visual direction through responsive implementation and accessibility checks.

Key features

  1. 01Audits existing UI and project conventions
  2. 02Applies design briefs and visual tokens
  3. 03Plans hierarchy, states, and responsive layouts
  4. 04Implements focused frontend changes
  5. 05Checks keyboard focus, contrast, and motion

Use cases

  1. 01Building a new page or component library
  2. 02Refreshing the visual design of existing screens
  3. 03Applying a design brief to frontend work

Install

Copy the command and run it in a terminal.

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

After installing, type/ns-code-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

Details

From the project README

Frontend Design

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

Harness discovery

See ../ns-harness/references/harness-discovery.md. Read {harness_root}/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
{harness_root}/rules/*frontend*Project conventions

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

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-code-reviewer for MR gates
  • Ignoring project CSS/component conventions when they exist

Comments

Markdown supported