web design skills

ConardLi/garden-skills

Skill Claude CodeCodex

A tool for turning source material—such as a web page, PDF, DOCX, Markdown file, text, screenshot, or pasted content—into a single offline HTML article.

ConardLi/garden-skills

Skill Claude CodeCodex

A skill for generating or editing images with GPT Image 2 across local, host-provided, or advisory setups.

ConardLi/garden-skills

Skill Claude CodeCodex

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…

agiwhitelist/auteur

Skill Claude CodeCodex

Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route…

xiaopu-ai/web-design

Skill Claude CodeCodex

A web design workflow for turning a brief, reference website, screenshot, or keywords into a design specification and then web code. It covers visual style, page structure, interaction, responsive layouts, and motion.

ZachArticulateV/designer-pro-and-seo

Skill Claude CodeCodex

Run a competitive research pass on a target site and its top competitors, producing a structured competitive-intelligence report — brand snapshot, competitor scoring, white-space gaps, and keyword landscape — plus a build brief that feeds the design and SEO workflow. Uses the Firecrawl MCP for deep multi-page scraping…

ZachArticulateV/designer-pro-and-seo

Skill Claude CodeCodex

SERP-overlap semantic topic clustering for content architecture — groups keywords into hub-and-spoke clusters (one pillar + supporting spokes) with an internal-link matrix and intent labels. The free path clusters keywords by actual shared Google results (SERPs acquired via WebSearch, clustered deterministically by…

ZachArticulateV/designer-pro-and-seo

Skill Claude CodeCodex

Git-for-SEO — capture baselines of on-page SEO-critical elements and diff against them to catch regressions a deploy introduced (title changed, canonical flipped, noindex added, schema removed). Stores baselines in a local SQLite history so you can compare and trend over time. Trigger when the user says "SEO drift"…

succtorlin/fantastic-ui

Skill Claude CodeCodex

Design and build "instrument-grade" UI — marketing pages AND in-product surfaces (app pages, dashboards, panels, subpanels) that read like the product itself, not like a template. Distilled from the sectorRRG "The Instrument" landing redesign: dark editorial ground, single-accent color discipline, serif display +…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Design-engineering micro-detail pass for interfaces that already work but feel unrefined. Applies concrete CSS/JS rules for hover/active/focus states, transition timing and easing, enter/exit animations, stagger patterns, layered shadows, border-vs-shadow elevation, nested border-radius, optical alignment, typography…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Best practices for building programmatic videos in React with Remotion v4+. Use when the user mentions "Remotion", "video in React", "programmatic video", "render a video from code", "generate an MP4 from React components", or wants data-driven, templated, or automated video production. Covers the frame-based mental…

Gekkos-tech/agency-os

Skill Claude CodeCodex

Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".

deveshpunjabi/modern-frontend-skill

Skill Claude CodeCodex

How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a…

Samin12/claude-club-motion-library-skill

Skill Claude CodeCodex

Use when designing or building animated websites, landing pages, mobile apps, page sections, motion backgrounds, gradients, or design systems. Searches and applies the Claude Club library of 547 responsive motion recipes, including all 341 owner-authorized MotionSites prompts, matching HTML previews, imagery…

liberastudio-mx/skill-web-design

Skill Claude CodeCodex

Visual and aesthetic design direction for web and UI. LIBERA Studio synthesis of impeccable design laws + high-end-visual-design pattern catalog. Self-contained for first-pass direction; optional deep-dive references if skill-web-design repository is available. Covers brand and product registers, OKLCH color strategy…

billythekidz/apple-design-skill

Skill Claude CodeCodex

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

billythekidz/apple-design-skill

Skill Claude CodeCodex

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

worldofhacks/alex-style

Skill Claude CodeCodex

Use when building or styling any web UI — landing pages, hero sections, dashboards, components, marketing sites — or when the user asks for beautiful, animated, or polished design, UI animations, animated backgrounds, gradients, icons, smooth scrolling, or design inspiration. Also use before reaching for the web to…

bryntay/a1-mcp

Skill Claude CodeCodex

Answer a design question with evidence from real websites instead of taste — type scale, spacing, container width, palette, or "what do sites like this actually do". Use when the user asks how big a heading should be, how much padding a section needs, what a kind of site normally looks like, or asks for design…

bryntay/a1-mcp

Skill Claude CodeCodex

Build a page section in code using the values measured off a real site rather than guessing them from a screenshot. Use when the user wants to recreate, adapt or take inspiration from a hero, pricing table, FAQ, testimonial or any other section they have seen.

bryntay/a1-mcp

Skill Claude CodeCodex

Connect the A1 Gallery MCP server and check it is working. Use when the plugin is first installed, when a tool returns 401 accountrequired, or when the user asks why A1 tools are not available.