<Devsly/>
NotebookLM Watermark Remover
Remove the NotebookLM watermark from PDF slide exports — free, unlimited, and 100% in your browser.
View
NotebookLM Video Watermark Remover
Remove the NotebookLM watermark from every frame of your MP4 and auto-trim the end card — free and unlimited.
View
Gemini Watermark Remover
Remove the Gemini (Veo) sparkle watermark from every frame of your AI-generated MP4 — free and unlimited.
View
MCP https://devsly.io/mcp MCP Tools Best Skills API Docs
Devsly

Keyboard Shortcuts

Navigation

Quick Search
⌘ / Ctrl + K
Toggle Dark Mode
⌘ / Ctrl + D
Close Dialogs
Esc

Tool Actions

Execute / Process
⌘ / Ctrl + Enter
Clear Input
⌘ / Ctrl + Shift + C
Copy Output
⌘ / Ctrl + Shift + X

Editor

Select All
⌘ / Ctrl + A
Undo
⌘ / Ctrl + Z
Redo
⌘ / Ctrl + Shift + Z

Updated 7mo ago

by lotfb86

web-design-skills

Claude Code skills for building world-class websites — 7 interconnected skills covering design philosophy, responsive patterns, themes, and full website rebuild pipelines

Works with
  • Claude
View on GitHub (opens in a new tab)

20 GitHub stars (20)

Steady at 20 stars — no new stars in the 1 day since Nov 12.

  • 8 skills (8 skills found in its SKILL.md files)
  • 7 forks (7 forks)
  • 7mo ago last update (Last updated 7mo ago)

Install

Skills CLI

npx skills add lotfb86/web-design-skills

Asks which skills and agents to install. Just one: npx skills add lotfb86/web-design-skills --skill frontend-design — add -g for every project.

Claude Code

git clone https://github.com/lotfb86/web-design-skillscp -r "web-design-skills/01-frontend-design" ~/.claude/skills/

Copies the frontend-design skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.

Plugin

/plugin marketplace add lotfb86/web-design-skills

Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.

Skills can run code on your machine — read the SKILL.md first.

What it does

In the author's own words, from each skill's SKILL.md.

  • frontend-design

    Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

    01-frontend-design/SKILL.md on GitHub (opens in a new tab)

  • responsive-design

    Responsive web design sub-skill. Provides mobile-first layout patterns, CSS Grid/Flexbox strategies, responsive images, fluid typography, container queries, and breakpoint systems. Pull this in whenever building or reviewing UI that must work across mobile, tablet, desktop, and large screens. Triggers on: "make it responsive", "responsive design", "mobile-first", "breakpoints", "fluid layout", or…

    02-responsive-design/SKILL.md on GitHub (opens in a new tab)

  • web-design-guidelines

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

    03-web-design-guidelines/SKILL.md on GitHub (opens in a new tab)

  • theme-factory

    Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

    04-theme-factory/SKILL.md on GitHub (opens in a new tab)

  • website-rebuild

    Full website rebuild agent. Takes an existing website URL and rebuilds it from scratch into a world-class, SEO-optimized, WCAG AA accessible, visually stunning website using Astro + Tailwind CSS, deployed to Vercel via GitHub. Executes a rigorous 14-phase process: brand extraction, content scraping, SEO audit, design audit, rebuild planning, full build with design system, copy optimization, 3 QA…

    05-website-rebuild/SKILL.md on GitHub (opens in a new tab)

  • local-business-rebuild

    Build a stunning new website for a local business prospect. Adapted from the full website-rebuild skill but optimized for speculative local business pitches. 10-phase process: brand extraction, SEO audit, design audit, rebuild plan, full build with design system, copy optimization, combined QA, pre-deploy checklist, and output to monorepo. Uses scraped content from prospect-scrape as input. No to…

    06-local-business-rebuild/SKILL.md on GitHub (opens in a new tab)

  • azerbaijan-website-build

    Build premium tri-lingual websites from scratch for Azerbaijani businesses. Handles data gathering (website scrape, social media, or interview), brand development, and full Astro + Tailwind build with AZ/RU/EN language support.

    07-azerbaijan-website-build/SKILL.md on GitHub (opens in a new tab)

  • design-system-generator

    Generate a structured DESIGN.md file for any business or project. Produces a machine-readable design system specification that build pipelines consume during code generation. Based on VoltAgent/awesome-design-md format.

    08-design-system-generator/SKILL.md on GitHub (opens in a new tab)

Review before you install

A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.