Design skills

Design Skills

Agent skills for design and WordPress work, each linked to its original GitHub repository.

363 entries

SortMost installed A to Z

Skill · Web design and UXCSS Border Gradient Skill for AI Coding Agentsboraoztunc/skillsThe css-border-gradient skill teaches an AI coding agent to add subtle gradient-border edges to cards, modals and buttons without a loud glow or rainbow effect.414GitHub stars Skill · Web design and UXCSS Expert Skill: Modern Flexbox, Grid and Container Queriesrightnow-ai/openfangThe css-expert skill from OpenFang gives an AI coding agent a compact CSS rulebook covering flexbox versus grid, custom property tokens, container queries, cascade layers, fluid type and common layout...18.2KGitHub stars Skill · Web design and UXCSS Native Skill: 12 Animation Principles in Pure CSSdylantarre/animation-principlesThe css-native skill gives an AI coding agent a CSS snippet for each of Disney's 12 animation principles, plus a timing reference table and the key CSS properties.102GitHub stars Skill · Web design and UXDark Mode Design Expert Skill: Tokens, Elevation, Contrastcuriositech/some_claude_skillsThe dark-mode-design-expert skill teaches an AI agent three-tier color tokens, tonal elevation instead of shadows, moderate contrast targets and flash-free theme switching, with a weather and ocean worked example.243GitHub stars Skill · Web design and UXDark Mode Design Skill: Surfaces and ContrastOwl-Listener/designer-skillsThe dark-mode-design skill adapts an existing palette to dark surfaces, using lighter shades for elevation, off-white text and a 10 to 20 percent saturation cut.2.8KGitHub stars Skill · Web design and UXDashmotion Skill: Animated Flow and Architecture Diagramscsthink/dashmotionDashmotion turns plain English or Mermaid into one self contained HTML and SVG file where dashed connectors flow and light dots travel through the system like requests.174GitHub stars Skill · Web design and UXData Visualization Mastery Skill: Charts and Dashboardsphazurlabs/sumiThe data-visualization-mastery skill gives an AI coding agent 50+ chart types with selection criteria, dashboard composition, KPI cards, data tables, accessible presentation and React code with Recharts, D3 and Nivo.55GitHub stars Skill · Web design and UXDecision-First Dashboard Skill: Fewer KPIs, Clearer Decisionsfourleaf13-hue/decision-first-dashboardThe decision-first-dashboard skill makes an AI coding agent ask whether a dashboard is warranted, confirm the decision and action, then route metrics by role into the first view.52GitHub stars Skill · Web design and UXDesign Accessibility Auditor Skill: WCAG 2.1 Contrast Checkscuriositech/some_claude_skillsThe design-accessibility-auditor skill has an AI coding agent calculate WCAG 2.1 contrast, check touch targets and focus indicators, and write an audit report with specific fixes.244GitHub stars Skill · Web design and UXDesign Auditor Skill: UI Audits with Three Gradesborghei/Claude-SkillsThe design-auditor skill runs a 12 category UI and UX audit on static HTML and CSS, then gives three separate grades for design, AI slop and accessibility.875GitHub stars Skill · Web design and UXDesign Better Skill: UX Heuristics for UI Codebuildgreatproducts/builder-osThe design-better skill gives an AI coding agent 50 numbered UX and UI heuristics plus a pre-flight checklist, so generated interfaces are designed and not only functional.227GitHub stars Skill · Web design and UXDesign Brief Skill: Interview Before You Buildjulianoczkowski/designer-skillsThe design-brief skill interviews you, scans your codebase and saves a structured DESIGN_BRIEF.md under .design, so an AI coding agent builds from decisions and not guesses.576GitHub stars

Turn what your agent designs into a real WordPress site

Use skills like this to get better HTML, CSS and JS from your agent, then publish the result as editable WordPress.

I have a Figma designTurn it into editable WordPress I built it with an AI toolLovable, v0, Bolt, Claude and more I have HTML, CSS and JSBring a build into WordPress I want to design in WordPressComposer, the AI visual editor

Browse the directory

Skills, MCP servers, comparisons, alternatives and guides for design to WordPress work.

Design Skills

Agent skills that sharpen design, layout and polish.

Explore NowDesign MCPs

MCP servers that connect your AI to design tools.

Explore NowCompare

AI and design tools side by side, with a verdict.

Explore NowAlternatives

Ranked alternatives to the tools you already know.

Explore NowSolutions

Step-by-step routes from a design or AI build to WordPress.