OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add jwynia/agent-skills --skill frontend-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.
npx skills add jwynia/agent-skills --skill 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.
Use when:
Don't use when:
This skill operates in three modes:
Audit existing styles, extract tokens, check accessibility.
Create JSON specifications defining what to generate. See assets/ for schema examples.
Create palettes, typography systems, tokens, and components.
Before creating new designs, audit existing code to understand current patterns.
Analyze CSS files to identify colors, typography, spacing, and inconsistencies:
Output includes:
Extract design tokens from CSS files into standardized formats:
Check design-related accessibility issues:
Checks include:
Generate cohesive color palettes from seed colors or themes:
Example specification (palette-spec.json):
Generate typography systems with font stacks and scales:
Type scales:
| Scale | Ratio | Character |
|---|---|---|
| minor-second | 1.067 | Subtle, conservative |
| major-second | 1.125 | Balanced, professional |
| minor-third | 1.200 | Clear hierarchy |
| major-third | 1.250 | Strong presence |
| perfect-fourth | 1.333 | Bold, impactful |
| golden-ratio | 1.618 | Dramatic, artistic |
Generate comprehensive design token files in multiple formats:
Specification structure:
Generate component templates with design-focused styling:
Framework output examples:
React with Tailwind:
Vue with scoped CSS:
Svelte:
| Script | Purpose | Permissions |
|---|---|---|
analyze-styles.ts | Audit CSS for patterns and inconsistencies | --allow-read |
extract-tokens.ts | Extract design tokens from CSS | --allow-read |
analyze-accessibility.ts | Check design accessibility | --allow-read |
generate-palette.ts | Generate color palettes | --allow-read --allow-write |
generate-typography.ts | Generate typography systems | --allow-read --allow-write |
generate-tokens.ts | Generate multi-format tokens | --allow-read --allow-write |
generate-component.ts | Generate framework components | --allow-read --allow-write |
Avoid generic "AI slop" aesthetics. See references/design-philosophy.md for detailed guidance.
Key principles:
Never converge on:
"CSS parsing failed"
"Color contrast check failed"
"Unknown framework"
"Token format not supported"
references/design-philosophy.md - Detailed anti-slop aesthetics guidereferences/token-formats.md - Design token format specificationsreferences/framework-templates.md - Framework-specific patternsassets/*.json - JSON schema files for specificationsweb-search - Research design inspiration and trendsresearch-workflow - Deep dive into design systems# 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 tailwinddeno 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), summarydeno 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 filedeno run --allow-read scripts/analyze-accessibility.ts <input> [options]
Options:
--format <type> Output: json, summary
--level <AA|AAA> WCAG conformance level (default: AA)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{
"seedColors": {
"primary": "#2563eb",
"accent": "#f59e0b"
},
"theme": "cool",
"generateShades": true,
"generateSemantics": true,
"contrastTarget": "AA",
"outputFormat": "css"
}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, tokensdeno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>{
"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"]
}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 fileexport function Button({ variant = 'primary', children }: ButtonProps) {
return (
<button className="px-4 py-2 rounded-lg font-medium transition-all">
{children}
</button>
);
}<template>
<button :class="['btn', `btn--${variant}`]"><slot /></button>
</template>
<script setup lang="ts">
defineProps<{ variant?: 'primary' | 'secondary' }>();
</script>
<style scoped>.btn { /* styles */ }</style><script lang="ts">
export let variant: 'primary' | 'secondary' = 'primary';
</script>
<button class="btn btn--{variant}"><slot /></button>
<style>.btn { /* styles */ }</style># 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# 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/# 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/# Audit all components
deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary