Salgadoia Web Design Engineer Pro

Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-

5 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add Luispitik/salgadoia-web-design-engineer-pro --skill salgadoia-web-design-engineer-pro
Manual install
git clone --depth 1 https://github.com/Luispitik/salgadoia-web-design-engineer-pro.git /tmp/salgadoia-web-design-engineer-pro
mkdir -p ~/.claude/skills
cp -r /tmp/salgadoia-web-design-engineer-pro/. ~/.claude/skills/salgadoia-web-design-engineer-pro

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Web Design Engineer Pro

Skill para crear webs profesionales de principio a fin con previsualización visual real antes de comprometerse con un estilo. Diseñada para usuarios sin conocimientos técnicos: el usuario describe su negocio, ve los estilos en su navegador, elige clicando, y la skill construye y entrega.

---

## Identidad operativa

Eres **Director de Arte e Ingeniero Frontend Senior** simultáneamente.

- **Director de Arte**: toma TODAS las decisiones estéticas. Define la dirección visual antes de escribir una línea de código. Sin esa decisión, nada avanza.
- **Ingeniero Frontend Senior**: ejecuta esa visión con código limpio, accesible y rápido.

**Regla de precedencia**: ante conflicto estético vs. técnico, gana la estética salvo imposibilidad técnica real. En ese caso, propón la alternativa más cercana y documenta el trade-off en una línea.

**El usuario nunca debe sentir que está usando una skill**. Para él/ella, simplemente describió un negocio y Claude construyó su web.

---

## Stack lock-in (no negociable)

| Herramienta | Versión mínima | Razón |
|---|---|---|
| Node.js | 20.9+ | Next.js 16 lo exige |
| Next.js | 16.1.1+ | App Router, async params, proxy.ts, Cache Components, fixes CVE 2025-66478 |
| React | 19.2+ | Auto-instalado por Next.js 16 |
| TypeScript | 5.7+ | Mejor inferencia con async params |
| Tailwind CSS | v4 | Directiva `@theme` en CSS, no `tailwind.config.ts` |
| shadcn CLI | latest | Registry-based components |
Read the full skill on GitHub

Details

Skill name
salgadoia-web-design-engineer-pro
Repository
Luispitik/salgadoia-web-design-engineer-pro
Repo updated
26 April 2026

FAQ

What does the Salgadoia Web Design Engineer Pro skill do?

Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-

How do I install the Salgadoia Web Design Engineer Pro skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Luispitik/salgadoia-web-design-engineer-pro --skill salgadoia-web-design-engineer-pro. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Salgadoia Web Design Engineer Pro popular?

It lives in Luispitik/salgadoia-web-design-engineer-pro, which has 5 GitHub stars and 2 forks.

Related skills

Screenshot to Design System

6

WCF900905/screenshot-to-design-system

Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette extraction, or component library generation from a reference image.

Frontend & Design

Quasar Vue3

5

felixyakubov91/claude-quasar

Comprehensive Quasar Framework (v2) and Vue 3 development assistance. Use this skill when working with Quasar projects, components, plugins, directives, composables, CLI configuration, or building apps (SPA, SSR, PWA, Electron, Capacitor, Cordova, Browser Extensions). Triggers on Quasar-specific questions, quasar.config.js, Q-prefixed components (QBtn, QInput, QTable, etc.), Quasar CLI commands, or Vue 3 Composition API with Quasar.

Frontend & Design

Art Director

5

NewenergyEric/art-director-skill

Help art directors turn references, taste and samples into a shareable project pack, then guide teammates and agents to create, review and deliver consistent components. Use for art-direction setup, visual systems, multi-category production and revisions in games, UI and campaigns.

Frontend & Design

Qiaomu Tldraw Skill

6

joeseesun/qiaomu-tldraw-skill

Official-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、 创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.

Frontend & Design

Frontend

5

adamholter/frontend-skill

Always read anytime you're making any UI the user will see, whether that's a one-off HTML file or a tool they're building. Any visual artifact at all.

Frontend & Design

Oh My Design

6

favorPotato/oh-my-design

Use this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.