nexu-io/web-design-guidelines
Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
npx skills add https://github.com/nexu-io/open-design/tree/main/skills/web-design-guidelinesWeb design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
This repo contains 5 individual skills — each has its own dedicated page.
Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured 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.
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.
Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design.
Manage Zenodo research artifacts, automate deposits, and generate citable DOIs directly from Claude Code or OpenClaw using this Zenodo REST API skill.
Agent Skill for BOS mobile product page design across Kiro and Claude Code.
Codex skill for Playwright-based responsive UI audits across desktop, tablet, iPad, and mobile.
A Claude skill that generates framework-anchored project roadmaps for product designers.
Containerise the AECA agentic workflow system with a single command. Multi-phase CI/CD pipeline: validate, build wheel, generate Dockerfile & compose, build production image.
Explore Claude Code CLI source code for learning, analysis, and TypeScript Bun CLI tool design