skills.rest
Hey-Viswa
Hey-ViswaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

semrush-design-skill

Convert vague product requirements into Semrush design-system-aligned UI specifications.

Updated Apr 11, 2026
Search Tags:#typography#consistency#frontend#design-system#ui-patterns#component-design#semrush
One-click install
npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill semrush-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: semrush-design-skill
Source: https://github.com/Hey-Viswa/-claude-design-system-skills/tree/main/design_system_skills/semrush-design-skill
Command: npx skills add https://github.com/Hey-Viswa/-claude-design-system-skills --skill semrush-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Semrush design-system patterns help teams translate product goals into a consistent, implementation-ready UI that matches Semrush conventions, reducing design drift and rework.

Core Features & Use Cases

  • Propose UI structure (layout, information density, and sections) aligned with Semrush patterns.
  • Recommend typography, spacing, color tokens, and interaction states to ensure cross-page consistency.
  • Use Case: When designing dashboards or marketing pages, guide component choices and behavior across screens to accelerate delivery.

Quick Start

Describe a Semrush-aligned UI for a dashboard including layout, typography, and components.

Frequently Asked Questions about semrush-design-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to align UI components with Semrush design-system patterns?▼

To align UI components with Semrush design-system patterns, translate product requirements into layout, typography, and color token specifications. This ensures consistent cross-page decisions for dashboards and marketing pages, reducing design drift.

How do I convert product requirements into UI specifications for frontend teams?▼

Converting product requirements into UI specifications involves defining layout structures, spacing, and interaction states. This process yields implementation-ready guidance for React or Next.js frontend teams to build consistent interfaces.

Can I use this approach to design responsive dashboards and marketing pages?▼

Yes, you can design responsive dashboards and marketing pages by applying Semrush conventions. It guides component choices, information density, and behavior across screens to accelerate frontend delivery.

Does this design-system guidance work with React and Next.js?▼

This design-system guidance provides implementation-ready specifications tailored for React and Next.js. It defines typography, color tokens, and interaction states so frontend teams can build UI components that match Semrush conventions.

How do I ensure typography and color consistency across multiple interface designs?▼

Ensure typography and color consistency by applying standardized design tokens and UI patterns. Recommending specific spacing and interaction states maintains visual alignment across all dashboards and marketing pages.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

enhance-prompt

Transform vague UI prompts into structured Stitch-ready prompts with frontmatter and design-system context.

Official
Intermediate
MBarry01MBarry01

frontend-patterns

Guide React and Next.js engineers in implementing reusable UI patterns with TypeScript examples.

Community
Intermediate
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
betaTridentbetaTrident

stitch-design-taste

Generate semantic design system specifications for AI-driven UI generation.

Community
Intermediate