How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

ns-frontend-design - Skill

Name: ns-frontend-design
Author: nextstage-brasil

Imported from nextstage-brasil/skills (skills/ns-frontend-design/SKILL.md). Install upstream with npx skills add nextstage-brasil/skills --skill ns-frontend-design. Copyright stays with the author (Apache-2.0).

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

Install ns-frontend-design and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "nextstage-brasil-skills-ns-frontend-design", "kind": "skill", "name": "ns-frontend-design", "description": "(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).", "publisher": "nextstage-brasil", "version": "1.0.0", "capabilities": { "domains": [ "data_analysis", "marketing" ], "tags": [ "skill-md", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "(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)." ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/nextstage-brasil/skills", "path": "skills/ns-frontend-design/SKILL.md", "ref": "HEAD", "url": "https://github.com/nextstage-brasil/skills/blob/HEAD/skills/ns-frontend-design/SKILL.md", "key": "nextstage-brasil/skills/skills/ns-frontend-design/SKILL.md" }, "license": "Apache-2.0" }, "instructions": "# Frontend Design\n\nShip **distinctive, production-grade UI** — not interchangeable template aesthetics.\n\n## Session boot\n\nSee `../ns-harness/references/session-boot.md`. Read `.nextstage-harness/rules/architecture-rules.md` and layer-specific frontend rules when present.\n\n## Context to load\n\n| File | When |\n| ---- | ---- |\n| `docs/context/design-brief.md` | Always check first — tokens, typography, motion |\n| `docs/context/stack-confirmed.md` | Framework and CSS approach |\n| `.nextstage-harness/rules/*frontend*` | Project conventions |\n| `references/react-analytics-ui.md` | React stack + KPIs, ", "cost": { "context_tokens": 583 } }

ns-frontend-design

About

Frontend Design

Session boot

Context to load

When to use

Workflow

Principles

Integration with ns-spec-driven

Forbidden

Install ns-frontend-design and it becomes one more candidate the router can pick - when it fits.

What it costs to adopt - in engineering time.

One base URL

No vendor lock-in

Failover built in

Use it

Manifest

Reviews