frontend-design

Estrelas1

Forks0

Atualizado27 de abril de 2026 às 16:23

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

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Fonte

wtsi-hgi

wtsi-hgi/agentskills

Abrir repositório GitHub Ver repositórios do creator

Download

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·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.

Mais deste repositório

mesmo repositório

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.