nexu-io/open-design
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
npx skills add https://github.com/nexu-io/open-design --skill "skills/frontend-design"Quick start
Install it or open the source, trigger it with a clear task, then follow the source workflow.
npx skills add https://github.com/nexu-io/open-design --skill "skills/frontend-design"Use frontend-design to help me with: [describe your task]. Before you begin, tell me what input you need, the steps you will follow, and the expected output.
5 key workflow steps, examples, and cautions are distilled below.
Continue to the workflowDirect answers
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
It is most relevant to independent site workflows. Confirm the original prerequisites before using it in production.
SkillSignal detected this source-specific command: npx skills add https://github.com/nexu-io/open-design --skill "skills/frontend-design". Inspect the repository and command before running it.
The upstream source does not declare a dedicated Agent platform.
No obvious permission action was detected by the static rules. This is not proof that the Skill is safe.
This page combines upstream documentation with deterministic repository, quality, and static-risk signals. It is not described as a manual test or security review.
SkillSignal brief
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
Useful in these contexts
Core capabilities
Distilled from the source
About 3 min · 5 sections
Understand the brief before choosing the look.
Identify the audience, primary job, domain, and emotional tone.
Note any technical constraints: framework, existing styles, accessibility, performance, export target, or responsive requirements.
If the repo already has design tokens, components, screenshots, or a DESIGN.md, use those as the source of truth.
Commit to one specific aesthetic direction.
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Compare before choosing
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
Find the bugs a diff can actually ship: TypeScript, React, Next.js, OWASP, accessibility, SEO, database, and deploy-risk review. Return findings, not a grade.
Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "anim
Adapted from Anthropic's official
frontend-designskill for Open Design.
Use this skill when the user asks to build or improve a frontend interface: a website, landing page, dashboard, application screen, HTML/CSS artifact, React/Vue/Svelte component, or a visual redesign of an existing UI.
The goal is not just "make it nicer." The goal is to ship working frontend code with a clear design point of view, strong craft, and enough product detail that the result feels designed for the user's actual context.
Understand the brief before choosing the look.
DESIGN.md, use those as the source of truth.Commit to one specific aesthetic direction.
Design the real interface, not a placeholder poster.
Build production-grade frontend code.
Refine visual craft.
Self-review before final delivery.
When Open Design provides an active design system, treat it as the product's brand contract. Use the injected color, typography, layout, and component guidance first, then apply this skill's frontend craft rules where the design system is silent.
When Open Design injects craft references such as typography, color, and anti-ai-slop, apply those checks before finishing. If the user's brand guidance conflicts with a generic craft rule, the user's brand guidance wins.
web-artifactsThis skill is adapted from Anthropic's official skills repository. See LICENSE.txt in this folder for the upstream Apache-2.0 license terms.