smyrna-pergamum / web-design-skills

Web Design Skills

Skills that teach AI coding agents a complete visual style: rules, section patterns, interactions and a checklist, each with a live reference site. Plain SKILL.md folders for Claude, ChatGPT / Codex, Cursor, Copilot, Gemini CLI and any agent that reads Markdown.

/plugin marketplace add smyrna-pergamum/web-design-skills
Paper notebook landing page: lowercase serif headline and a tilted navy passport-style notebook cover

paper-notebook-landing

Warm paper-notebook landing pages: cream paper, chunky soft serif, handwritten notes, sticky notes, a notebook that opens as you scroll, comic strips.

landing pagescroll animationTR · EN · DE
Live demo Skill
Noir gradient law firm website: black page, bronze Lady Justice statue and a huge uppercase headline with a fire-gradient word

noir-gradient-law

Law-firm and advisory sites: pure black, bronze statue photography, a yellow-orange-red fire gradient, duotone-halftone photos and a 3D review carousel.

law firmdarkEN · TR
Live demo Skill
WebGL portal studio website: glowing teal ring with light arms and an ASCII disc beside a thin uppercase monospace headline

portal-webgl-studio

Immersive studio sites: a full-screen three.js portal behind monospace UI, film grain, a 3D glass project gallery and an ask-me-anything terminal.

studioWebGLEN · TR
Live demo Skill
Point cloud matrix tech website: a city made of white points over falling green characters, with a large headline

pointcloud-matrix-tech

Tech and AI product sites: a framed graphite sheet, matrix rain background, magnetic cursor and a point-cloud hero that follows the mouse.

tech / AIWebGLEN · TR
Live demo Skill
Dark neumorphic fintech website: a lowercase serif headline beside an embossed credit card on soft relief rings

neumorphic-club-fintech

Fintech and membership sites in two-material neumorphism: dark page, light relief cards, a cursor-driven light, engraved scroll text and a slide-to-join control.

fintechneumorphismEN · TR
Live demo Skill
Cyber brutalist security website: a dark 3D padlock closed in amber light above the line Your privacy. Your control.

scroll-lock-cyber-brutalism

Privacy and security product sites: hairline grid, amber light and a 3D padlock the visitor closes by scrolling. The example is the real Kilit Messenger site.

securityWebGLEN · TR
Live demo Skill
Gravity lens space website: a pale page with a large rounded dark window showing a glowing black hole

gravity-lens-space

Cinematic space sites: a WebGL black-hole lens, hover video previews, a floating astronaut and headlines that react to the cursor.

space / filmWebGL · videoEN · TR
Live demo Skill
Immersive 3D network website: a sphere of glowing nodes and edges around a glass core, with a large uppercase headline

network-journey-webgl

Immersive scroll-driven 3D product sites built to production standards: one WebGL world, HUD tags, particle morphs, quality tiers and tests. The example is the real LANORA site.

WebGLSvelteKitLighthouse 95+
Live demo Skill
Dark grid website: a glowing node topology around example.org with a large glowing headline

aperture-topology-story

Developer-tool and OSINT product sites: a glowing node topology, then a scroll story where an aperture opens onto a light paper workspace and cards act out the workflow. The example is the real OSINT-Book site.

SVGScroll storyEN/TR
Live demo Skill
Travel-themed homepage: navy hero over a plane-wing video, an orange plane cursor and a paper boarding pass form

flight-path-roadmap

Gamified travel-style homepages: the cursor becomes a plane, scrolling flies it through numbered gates with a HUD, miles and unlock toasts, then lands. Boarding-pass hero, ticket pricing, departures board, travel extras, travel-fund section.

Scroll storyGamificationVideo loopsEN
Live demo Skill
Dark editorial homepage: giant headline with an outlined word, an orange planet in orbits and floating paper cards

orbit-poster-editorial

Editorial poster homepages: giant tight type, a mouse-reactive planet with floating paper cards, and real photos printed into posters in grayscale multiply, with colour on hover.

EditorialPhoto blendingMouse parallaxEN
Live demo Skill
Paper-white page where a park video plays only inside the giant letters FIT VITA

knockout-quest-app

Gamified app landing pages: a video inside a giant knockout wordmark that the scroll zooms into, a sticky phone tour of real screenshots, playable daily quests with XP and confetti, and a sound studio with music, nature sounds and radio.

App landingGamificationVideo + soundEN
Live demo Skill
Black hero with a mosaic of glyphs in PDF Werkstatt's fonts and a scanned page turning into a searchable one

glyph-bench-sheets

Product sites for PDF and document tools: a hero made of glyphs in the app's own fonts, a scan-to-searchable slider, white sheets over a dark bench, a rail of tool cards, live tool demos and a type card for every bundled font.

Product siteExperimental typeLive demosEN
Live demo Skill
Newspaper front page with the Today's Gazette masthead, a section nav between rules, a lead story and an opinion sidebar

broadsheet-daily-news

Classic newspaper sites that read like print: serif masthead, double rules, lead story, ruled columns and an opinion sidebar, with sections, search, a reader dialog, shareable story links and saved stories in one HTML file.

News & magazineEditorialNo backendEN
Live demo Skill
Wortschatz Karten landing page with a waving flash-card mascot in rubber-hose style in front of red, orange, yellow and blue rings

rubber-hose-cartoon-app

Playful product pages in the style of old theatrical cartoons: an original rubber-hose mascot in front of a ring target, boiling ink lines, starburst numbers, a cartoon TV, a squash-and-stretch flip card, wooden crates and an iris-in download.

App landingCartoonLearningEN
Live demo Skill
More styles coming soon.