Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
jwynia avatar

Frontend Design

jwynia/agent-skills

  • 2.3k installs
  • 133 repo stars
  • Updated February 24, 2026
  • jwynia/agent-skills

frontend-design creates distinctive UIs via Deno scripts for CSS audit, token extraction, palette, typography, and component generation.

About

The frontend-design skill combines design philosophy with Deno scripts to analyze existing CSS and generate palettes, typography, tokens, and framework components that avoid generic AI aesthetics. Core principle demands a clear aesthetic direction executed with precision, whether maximalist or minimal. Three modes cover Analyze for style and accessibility audits, Specify via JSON specs in assets, and Generate for palettes, typography scales, tokens, and React Vue Svelte or HTML components. Prerequisites require Deno with allow-read and allow-write permissions. Analyze scripts inventory colors, typography, spacing inconsistencies, extract tokens to css scss tailwind or style-dictionary formats, and check WCAG AA or AAA contrast, focus, touch targets, and motion preferences. Generate scripts support seed colors, themes warm cool neutral vibrant muted dark light, type scales from minor-second through golden-ratio, and component templates with aesthetic variants minimal bold organic brutalist glassmorphism or neumorphism. Skip for backend-only work or simple text edits. Teams invoke it when building web UIs, auditing legacy CSS, or bootstrapping design systems with intentional visual.

  • Analyze, Specify, and Generate modes with Deno TypeScript scripts.
  • Audit CSS colors, typography, spacing, and accessibility contrast.
  • Generate palettes, typography scales, tokens, and multi-framework components.
  • Aesthetic variants: minimal, bold, organic, brutalist, glassmorphism, neumorphism.
  • Core principle: intentional aesthetic direction, not generic AI slop.

Frontend Design by the numbers

  • 2,297 all-time installs (skills.sh)
  • +2 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #132 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

frontend-design capabilities & compatibility

Capabilities
css style analysis and inconsistency detection · token extraction to multiple output formats · palette and typography system generation · multi framework component template generation · wcag contrast and focus accessibility checks
Use cases
frontend · ui design · web design
From the docs

What frontend-design says it does

Choose a clear aesthetic direction and execute it with precision.
SKILL.md
npx skills add https://github.com/jwynia/agent-skills --skill frontend-design

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2.3k
repo stars★ 133
Security audit3 / 3 scanners passed
Last updatedFebruary 24, 2026
Repositoryjwynia/agent-skills ↗

How do I build or audit a frontend with cohesive tokens, accessibility, and a deliberate aesthetic instead of generic AI styling?

Create distinctive production-grade frontend UIs with Deno tooling for style audit, token extraction, palette generation, typography, and component templates.

Who is it for?

Web UI work in React, Vue, Svelte, or HTML with Deno tooling for design system artifacts.

Skip if: Skip for backend-only changes, simple copy edits, or non-visual functionality.

When should I use this skill?

User asks for frontend design, color palette, typography system, design tokens, or CSS accessibility audit.

What you get

Analyzed style report or generated palette, typography, tokens, and framework component files with WCAG checks.

  • component source files
  • validated JSON spec

By the numbers

  • Supports 7 component type enums in JSON schema
  • Component name maxLength 64 with PascalCase pattern

Files

SKILL.mdMarkdownGitHub ↗

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

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

How it compares

Pick this over generic frontend-design aesthetics skills when you have a JSON schema and need repeatable component file generation per framework.

FAQ

What runtime is required?

Deno with --allow-read and --allow-write for analyze-styles, extract-tokens, generate-palette, and generate-component scripts.

Which frameworks are supported for components?

React, Vue, Svelte, and vanilla HTML with css, tailwind, css-modules, styled-components, or emotion styling.

Should I analyze before generating?

Analysis is optional but recommended to understand existing patterns before creating new tokens or components.

Is Frontend Design safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Design & UI/UXuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.