UI/UX design intelligence. 84 styles, 161 palettes, 73 font pairings, 25 charts, 17 stacks (React, Next.js, Vue, Nuxt.js, Nuxt UI, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, Three.js). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Sito one-page statico (HTML + CSS + JavaScript vanilla, nessun framework) per l'Agriturismo La Morò di Frassanito (Otranto, LE): ristorante serale di cucina salentina e punto vendita di prodotti agricoli autoprodotti.
Il sito comunica solo ristorazione + vendita prodotti. Non c'è alcun riferimento a camere o pernottamento.
LA-MORO/
├── index.html ← tutte le sezioni della pagina
├── css/style.css ← stile, palette, animazioni, responsive
├── js/main.js ← intro, menù mobile, parallax, reveal
├── assets/images/ ← foto e logo (vedi sotto)
│ ├── logo.svg ← logo (ricostruito, vedi "Logo")
│ ├── favicon.svg ← icona scheda browser (oliva + ramoscello)
│ └── *.jpg ← foto piatti/ambiente (placeholder da sostituire)
├── scripts/gen_placeholders.py ← rigenera i placeholder (facoltativo)
└── README.md
Apri semplicemente index.html col browser, oppure avvia un mini server
(consigliato, così la mappa e i font si caricano correttamente):
cd LA-MORO
python3 -m http.server 8080
# poi apri http://localhost:8080
Le foto vivono in assets/images/ con nomi parlanti. Al momento sono
placeholder color oliva: per pubblicare le foto vere ti basta
sovrascrivere il file mantenendo lo stesso nome — non devi toccare l'HTML.
| File | Dove appare | Formato consigliato |
|---|---|---|
hero-giardino-sera.jpg | Sfondo Hero (giardino con lucine) | orizzontale, ~1920×1080 |
chisiamo-ingresso.jpg | Chi siamo (insegna tra le fioriere) | ~1200×900 |
antipasto-fritti-misti.jpg | Menù · Antipasti | quadrata ~900×900 |
involtini-brace-rosmarino.jpg | Menù · Dalla brace | quadrata |
orecchiette-cime-rapa.jpg | Menù · Primi | quadrata |
tagliatelle-ceci.jpg | Menù · Primi | quadrata |
pollo-brace-limone.jpg | Menù · Secondi | quadrata |
grigliata-mista.jpg | Menù · Secondi | quadrata |
parmigiana-melanzane.jpg | Menù · Il classico | quadrata |
semifreddo-caffe.jpg | Menù · Il dolce | quadrata |
bombette-preparazione.jpg | Dietro le quinte | orizzontale |
prodotti-punto-vendita.jpg | Sfondo sezione Prodotti | orizzontale |
ambiente-lucine-sera.jpg | Ambiente (sera) | orizzontale |
ambiente-tramonto-ombrelloni.jpg | Ambiente (tramonto) | verticale ~800×1200 |
og-cover.jpg | Anteprima social (WhatsApp/Facebook) | 1200×630 |
Consigli:
.jpg con .webp nel src dell'immagine dentro index.html.alt="" (testo descrittivo) se cambia il soggetto:
serve per accessibilità e Google.Per rigenerare i placeholder (se ti servono di nuovo):
pip install Pillow
python3 scripts/gen_placeholders.py
Il file assets/images/logo.svg è una ricostruzione fedele del logo
(scritta "Agriturismo La Morò" con il ramoscello d'ulivo e l'oliva nera), perché
il logo.png originale non era incluso tra i file forniti.
Per usare il logo ufficiale basta:
assets/images/logo.png.index.html sostituire le occorrenze di assets/images/logo.svg con
assets/images/logo.png (sono 3: header, intro, footer).Il logo compatto per il mobile e la favicon usano favicon.svg (solo oliva +
ramoscello): puoi sostituirlo con una versione ridotta del logo ufficiale.
Tutti i testi sono direttamente dentro index.html, dentro le rispettive
<section> (ognuna ha un id parlante: #chi-siamo, #menu, #prodotti,
#ambiente, #contatti). Apri il file con un editor di testo e modifica il
contenuto tra i tag. Da aggiornare sicuramente:
+39 000 000 0000 (compare 2 volte: link tel: e testo)
e inserisci il numero reale. Togli anche la nota (inserire numero reale).href="#":
sostituisci # con gli URL reali dei profili.La mappa è un iframe di Google Maps che non richiede API key. Nella sezione
"Come trovarci" di index.html trovi:
<iframe src="https://www.google.com/maps?q=Agriturismo+La+Mor%C3%B2+Frassanito+Otranto&output=embed" ...>
Per cambiare posizione, sostituisci il testo dopo q= con l'indirizzo o le
coordinate (spazi = +, caratteri accentati codificati, es. ò = %C3%B2).
Aggiorna anche il pulsante "Apri in Google Maps" poco sopra, che usa lo
stesso indirizzo nel parametro query=.
npx claudepluginhub antonio-de-santis-dev/la-moroComprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
This skill should be used when users need to generate ideas, explore creative solutions, or systematically brainstorm approaches to problems. Use when users request help with ideation, content planning, product features, marketing campaigns, strategic planning, creative writing, or any task requiring structured idea generation. The skill provides 30+ research-validated prompt patterns across 14 categories with exact templates, success metrics, and domain-specific applications.
Develop, test, build, and deploy Godot 4.x games with Claude Code. Includes GdUnit4 testing, web/desktop exports, CI/CD pipelines, and deployment to Vercel/GitHub Pages/itch.io.
A growing collection of Claude-compatible academic workflow bundles. Covers scientific figures, manuscript writing and polishing, reviewer assessment, citation retrieval, data availability, paper reading, literature search, response letters, paper-to-PPTX conversion, and evidence-grounded Chinese invention patent drafting. Rules are organized as reusable skill folders with explicit workflows and quality checks.
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
Consult multiple AI coding agents (Gemini, OpenAI, Grok, Perplexity, plus codex, antigravity, and grok CLIs when installed) to get diverse perspectives on coding problems