frontend-design

Stars1

Forks0

UpdatedApril 27, 2026 at 16:23

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, pages, dashboards, or styling web UI.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

wtsi-hgi

wtsi-hgi/agentskills

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend-design
description	Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, pages, dashboards, or styling web UI.

Build distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

Purpose/audience. What problem does this interface solve?
Tone. Pick a strong direction: brutally minimal, maximalist, retro- futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial, etc. Use for inspiration but make it your own.
Differentiation. What makes this UNFORGETTABLE?

Execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

Aesthetics

Typography: Distinctive, characterful fonts. NEVER generic (Arial, Inter, Roboto, system fonts). Pair a display font with a refined body font.
Color: Cohesive palette via CSS variables. Dominant colors with sharp accents > timid, evenly-distributed palettes.
Motion: CSS-first animations; Motion library for React. Focus on high- impact moments (staggered page-load reveals, surprising hover states).
Layout: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
Atmosphere: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.

NEVER: overused fonts, cliche purple-on-white gradients, predictable layouts, cookie-cutter components. No two designs should look the same. Vary themes, fonts, aesthetics across generations.

Match implementation complexity to vision: maximalist needs elaborate code; minimalist needs restraint and precision.

Project Integration

When building for a specific project, also read the project's conventions skill for tech stack, component patterns, and styling rules.

Visual Verification

For UI changes where success is perceptual, verify the rendered result in a real browser. Source CSS checks, class-name checks, and jsdom computed styles are not enough on their own.
Test light/dark modes through the same mechanism the application uses in production. With Tailwind v4, confirm generated utilities and theme variables actually respond at runtime before tuning colours or specificity.
Prefer screenshot or focused pixel/contrast assertions for borders, focus rings, selection states, hover states, and animation end states. Compare the visible element against its own fill and nearby surfaces, not just token names or raw CSS declarations.

More from this repository

same repository

bugfix

wtsi-hgi/agentskills

Orchestrates standalone or caller-batched bug fixes via implementor and reviewer subagents using TDD. Handles bugs and verified review findings sequentially, tracks them in a dated checklist, and commits each fix without disrupting a surrounding PR-resolution batch.

2026-07-111

pr-resolver

wtsi-hgi/agentskills

Resolve GitHub PR review comments from humans and Copilot, including reviews already auto-requested or in progress. Use for verified comment resolution, sequential bugfix batching, one-push CI/Copilot cycles, and SHA-aware waits that avoid stale-event loops.

2026-07-111

go-conventions

wtsi-hgi/agentskills

Shared conventions for Go projects. Copyright boilerplate, code quality, GoConvey testing, architecture, and commands. Referenced by go-implementor, go-reviewer, and workflow skills.

2026-07-111

go-implementor

wtsi-hgi/agentskills

Go TDD implementation workflow. References implementation-principles, go-conventions, testing-principles, and agent-conduct.

2026-07-111

go-reviewer

wtsi-hgi/agentskills

Review Go implementations against spec acceptance tests. References implementation-principles, go-conventions, testing-principles, and agent-conduct.

2026-07-111

implementation-principles

wtsi-hgi/agentskills

Shared cross-language delivery workflow and guidance for implementing the simplest sufficient solution, maximizing reuse of existing code, and avoiding speculative abstractions, dependencies, and refactors. Use when implementing or reviewing code in any language.

2026-07-111

name	frontend-design
description	Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building web components, pages, dashboards, or styling web UI.

Build distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.

Design Thinking

Before coding, commit to a BOLD aesthetic direction:

Purpose/audience. What problem does this interface solve?
Tone. Pick a strong direction: brutally minimal, maximalist, retro- futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial, etc. Use for inspiration but make it your own.
Differentiation. What makes this UNFORGETTABLE?

Execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

Aesthetics

Typography: Distinctive, characterful fonts. NEVER generic (Arial, Inter, Roboto, system fonts). Pair a display font with a refined body font.
Color: Cohesive palette via CSS variables. Dominant colors with sharp accents > timid, evenly-distributed palettes.
Motion: CSS-first animations; Motion library for React. Focus on high- impact moments (staggered page-load reveals, surprising hover states).
Layout: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
Atmosphere: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.

NEVER: overused fonts, cliche purple-on-white gradients, predictable layouts, cookie-cutter components. No two designs should look the same. Vary themes, fonts, aesthetics across generations.

Match implementation complexity to vision: maximalist needs elaborate code; minimalist needs restraint and precision.

Project Integration

When building for a specific project, also read the project's conventions skill for tech stack, component patterns, and styling rules.

Visual Verification

For UI changes where success is perceptual, verify the rendered result in a real browser. Source CSS checks, class-name checks, and jsdom computed styles are not enough on their own.
Test light/dark modes through the same mechanism the application uses in production. With Tailwind v4, confirm generated utilities and theme variables actually respond at runtime before tuning colours or specificity.
Prefer screenshot or focused pixel/contrast assertions for borders, focus rings, selection states, hover states, and animation end states. Compare the visible element against its own fill and nearby surfaces, not just token names or raw CSS declarations.