MCPInstall

frontend-design

by jwyniaFrontend & Design

Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.

Installs
2.3K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/jwynia/agent-skills --skill frontend-design
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads frontend-design automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Frontend Design

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. This skill combines design philosophy guidance with practical TypeScript tooling for analyzing existing designs and generating design system artifacts.

Core Principle: Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

When to Use This Skill

Use when:

  • Building web components, pages, or applications
  • Auditing existing CSS for design inconsistencies
  • Extracting design tokens from legacy codebases
  • Generating color palettes and typography systems
  • Creating component templates across frameworks
  • Checking accessibility compliance for design elements

Don't use when:

  • Simple text content changes
  • Backend-only work
  • Non-visual functionality

Prerequisites

  • Deno runtime (for script execution)
  • Optional: Existing CSS/design files for analysis
  • Optional: Design tokens file for reference

Quick Start

This skill operates in three modes:

1. Analyze Mode

Audit existing styles, extract tokens, check accessibility.

# Audit CSS for design patterns and inconsistencies
deno run --allow-read scripts/analyze-styles.ts styles.css

# Extract design tokens from existing CSS
deno run --allow-read scripts/extract-tokens.ts ./src --format css

# Check accessibility (contrast, focus states)
deno run --allow-read scripts/analyze-accessibility.ts component.tsx

2. Specify Mode

Create JSON specifications defining what to generate. See assets/ for schema examples.

3. Generate Mode

Create palettes, typography systems, tokens, and components.

# Generate a color palette
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm

# Generate typography system
deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"

# Generate design tokens file
deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/

# Generate a component
deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind

Instructions

Phase 1: Analysis (Optional but Recommended)

Before creating new designs, audit existing code to understand current patterns.

1a. Style Analysis

Analyze CSS files to identify colors, typography, spacing, and inconsistencies:

deno run --allow-read scripts/analyze-styles.ts <input> [options]

Options:
  --tokens <file>    Compare against existing design tokens
  --pretty           Pretty-print JSON output
  --format <type>    Output format: json (default), summary

Output includes:

  • Color usage inventory with hex normalization
  • Typography patterns (fonts, sizes, weights)
  • Spacing value distribution
  • Inconsistencies and recommendations

1b. Token Extraction

Extract design tokens from CSS files into standardized formats:

deno run --allow-read scripts/extract-tokens.ts <input> [options]

Options:
  --format <type>    Output: css, scss, tailwind, style-dictionary, tokens-studio
  --output-css       Also output CSS variables file

1c. Accessibility Audit

Check design-related accessibility issues:

deno run --allow-read scripts/analyze-accessibility.ts <input> [options]

Options:
  --format <type>    Output: json, summary
  --level <AA|AAA>   WCAG conformance level (default: AA)

Checks include:

  • Color contrast ratios
  • Focus indicator presence
  • Touch target sizes
  • Motion preference respect

Phase 2: Generation

2a. Color Palette Generation

Generate cohesive color palettes from seed colors or themes:

deno run --allow-read --allow-write scripts/generate-palette.ts [options] <output>

Options:
  --seed <color>     Primary seed color (hex)
  --theme <type>     warm, cool, neutral, vibrant, muted, dark, light
  --style <type>     minimalist, bold, organic, corporate, playful
  --shades           Generate 50-950 shade scale
  --semantic         Generate success/warning/error colors
  --contrast <lvl>   Target contrast: AA (default), AAA
  --format <type>    css, scss, tailwind, tokens, json

Example specification (palette-spec.json):

{
  "seedColors": {
    "primary": "#2563eb",
    "accent": "#f59e0b"
  },
  "theme": "cool",
  "generateShades": true,
  "generateSemantics": true,
  "contrastTarget": "AA",
  "outputFormat": "css"
}

2b. Typography System Generation

Generate typography systems with font stacks and scales:

deno run --allow-read --allow-write scripts/generate-typography.ts [options] <output>

Options:
  --display <font>   Display/heading font family
  --body <font>      Body text font family
  --mono <font>      Monospace font family
  --scale <type>     minor-second, major-second, minor-third, major-third, perfect-fourth, golden-ratio
  --base <px>        Base font size (default: 16)
  --line-height      tight, normal, relaxed
  --responsive       Generate responsive breakpoints
  --format <type>    css, scss, tailwind, tokens

Type scales:

ScaleRatioCharacter
minor-second1.067Subtle, conservative
major-second1.125Balanced, professional
minor-third1.200Clear hierarchy
major-third1.250Strong presence
perfect-fourth1.333Bold, impactful
golden-ratio1.618Dramatic, artistic

2c. Design Token Generation

Generate comprehensive design token files in multiple formats:

deno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>

Specification structure:

{
  "name": "my-design-system",
  "tokens": {
    "color": { "primary": "#2563eb", "secondary": "#64748b" },
    "spacing": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" },
    "typography": {
      "fontFamilies": { "display": "Playfair Display", "body": "Inter" },
      "fontSizes": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" }
    },
    "shadow": { "sm": "0 1px 2px rgba(0,0,0,0.05)" },
    "border": { "radius": { "sm": "0.25rem", "md": "0.5rem" } },
    "animation": { "duration": { "fast": "150ms", "normal": "300ms" } }
  },
  "outputFormats": ["css", "scss", "tailwind", "ts"]
}

2d. Component Generation

Generate component templates with design-focused styling:

deno run --allow-read --allow-write scripts/generate-component.ts [options] <output-dir>

Options:
  --name <name>      Component name (required)
  --type <type>      button, card, input, modal, navigation, hero, custom
  --framework <fw>   react, vue, svelte, html
  --styling <type>   css, tailwind, css-modules, styled-components, emotion
  --aesthetic <type> minimal, bold, organic, brutalist, glassmorphism, neumorphism
  --animation <lvl>  none, subtle, expressive
  --dark-mode        Include dark mode support
  --tokens <file>    Use design tokens file

Framework output examples:

React with Tailwind:

export function Button({ variant = 'primary', children }: ButtonProps) {
  return (
    <button className="px-4 py-2 rounded-lg font-medium transition-all">
      {children}
    </button>
  );
}

Vue with scoped CSS:

<template>
  <button :class="['btn', `btn--${variant}`]"><slot /></button>
</template>
<script setup lang="ts">
defineProps<{ variant?: 'primary' | 'secondary' }>();
</script>
<style scoped>.btn { /* styles */ }</style>

Svelte:

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
</script>
<button class="btn btn--{variant}"><slot /></button>
<style>.btn { /* styles */ }</style>

Examples

Example 1: Audit and Modernize Legacy CSS

# 1. Analyze existing styles
deno run --allow-read scripts/analyze-styles.ts ./legacy/styles.css --pretty > audit.json

# 2. Extract tokens from the analysis
deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css

# 3. Generate improved palette from dominant color
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css

Example 2: Create Design System from Scratch

# 1. Generate color palette
deno run --allow-read --allow-write scripts/generate-palette.ts \
  --seed "#8b5cf6" --theme vibrant --shades --semantic --format css colors.css

# 2. Generate typography system
deno run --allow-read --allow-write scripts/generate-typography.ts \
  --display "Space Grotesk" --body "Inter" --scale major-third --responsive --format css typography.css

# 3. Generate comprehensive tokens
deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/

Example 3: Generate Component Library

# Generate button component for React with Tailwind
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Button --framework react --styling tailwind --aesthetic bold ./components/

# Generate card component for Vue with CSS modules
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/

# Generate input for Svelte
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Input --framework svelte --styling css --aesthetic minimal ./components/

Example 4: Accessibility Check Before Launch

# Audit all components
deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary

Script Reference

ScriptPurposePermissions
analyze-styles.tsAudit CSS for patterns and inconsistencies--allow-read
extract-tokens.tsExtract design tokens from CSS--allow-read
analyze-accessibility.tsCheck design accessibility--allow-read
generate-palette.tsGenerate color palettes--allow-read --allow-write
generate-typography.tsGenerate typography systems--allow-read --allow-write
generate-tokens.tsGenerate multi-format tokens--allow-read --allow-write
generate-component.tsGenerate framework components--allow-read --allow-write

Design Philosophy

Avoid generic "AI slop" aesthetics. See references/design-philosophy.md for detailed guidance.

Key principles:

  • Typography: Choose distinctive fonts, not defaults (avoid Arial, Inter, Roboto)
  • Color: Dominant colors with sharp accents, not timid palettes
  • Motion: Orchestrated reveals over scattered micro-interactions
  • Composition: Asymmetry, overlap, grid-breaking elements
  • Texture: Gradients, noise, patterns - not flat solid colors

Never converge on:

  • Purple gradients on white backgrounds
  • System fonts or overused families
  • Predictable card-based layouts
  • Cookie-cutter Bootstrap aesthetics

Common Issues

"CSS parsing failed"

  • Ensure valid CSS syntax
  • SCSS/PostCSS may need preprocessing first

"Color contrast check failed"

  • Check for CSS variables that couldn't be resolved
  • Provide the actual color values or tokens file

"Unknown framework"

  • Supported: react, vue, svelte, html
  • Check spelling and lowercase

"Token format not supported"

  • Supported: css, scss, tailwind, style-dictionary, tokens-studio, json, ts

Additional Resources

  • references/design-philosophy.md - Detailed anti-slop aesthetics guide
  • references/token-formats.md - Design token format specifications
  • references/framework-templates.md - Framework-specific patterns
  • assets/*.json - JSON schema files for specifications

Related Skills

  • web-search - Research design inspiration and trends
  • research-workflow - Deep dive into design systems

FAQ

What does the frontend-design skill do?

Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.

How do I install frontend-design?

Run npx skills add https://github.com/jwynia/agent-skills --skill frontend-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frontend-design/ (personal) or .claude/skills/frontend-design/ (project).

Which AI agents can use frontend-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is frontend-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains frontend-design?

It is published by jwynia in jwynia/agent-skills. It has 2,322 recorded installs.

More from jwynia/agent-skills

View all →

presentation-design

jwynia/agent-skills

Design and evaluate presentations that communicate effectively. Use when designing a presentation, creating slides, getting presentation feedback, structuring a talk, or reviewing slides. Keywords: presentation, slides, talk, PowerPoint, Keynote, reveal.js.

Docs & Writing2.5K installs

requirements-analysis

jwynia/agent-skills

Diagnose requirements problems and guide discovery of real needs and constraints

AI & Agents2.3K installs

godot-best-practices

jwynia/agent-skills

Guide AI agents through Godot 4.x GDScript coding best practices including scene organization, signals, resources, state machines, and performance optimization. This skill should be used when generating GDScript code, creating Godot scenes, designing game architecture, implementing state machines, object pooling, save/load systems, or when the user asks about Godot patterns, node structure, or GDScript standards. Keywords: godot, gdscript, game development, signals, resources, scenes, nodes, state machine, object pooling, save system, autoload, export, type hints.

Code Quality & Workflow2.1K installs

web-search-tavily

jwynia/agent-skills

Search the web using Tavily API for high-quality, AI-optimized results with advanced filtering options. Use when you need structured search results, domain filtering, relevance scores, or AI-generated answer summaries. Requires TAVILYAPIKEY. Keywords: tavily, advanced search, filtered search, domain filtering, relevance scoring.

Productivity & Automation1.1K installs

godot-asset-generator

jwynia/agent-skills

Generate game assets using AI image generation APIs (DALL-E, Replicate, fal.ai) and prepare them for Godot. Covers the full art pipeline from concept art and style guides to final sprites, sprite sheets, and import configuration. This skill should be used when creating game art, generating sprites, making tilesets, creating UI elements, or preparing assets for Godot import. Keywords: game assets, AI art, DALL-E, Replicate, fal.ai, sprite sheet, tileset, Godot, pixel art, character sprite, game art, texture, animation frames.

Media & Creative1K installs

document-to-narration

jwynia/agent-skills

Convert written documents to narrated video scripts with TTS audio and word-level timing. Use when preparing essays, blog posts, or articles for video narration. Outputs scene files, audio, and VTT with precise word timestamps. Keywords: narration, voiceover, TTS, scenes, audio, timing, video script, spoken.

Media & Creative974 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs