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.

Guidelines

Fast and efficient. Load only required data, render charts appropiately, ...
Prefer minimal, monochrome, monospace fonts, high contrast, sharp rectangles, utilitarian layout designs. Consider datasheet and control panel style if match.
Use semantic HTML, modern CSS
As vanilla as possible (no React or other frameworks)
Accesible

Workflow

Read through my preferred styles, reources, and links first. If needed, clone GitHub repos into /tmp and dig into the most relevant ones.
Inspect the project: framework, existing components, theme, assets, vibes, and constraints.
Define the design read: surface type, audience, user task, brand/product register, aesthetic direction, and justified signature moves. Ask clarifying questions if needed.
Plan before code: content hierarchy, responsive layout, palette, typography, spacing, radius, motion, states, accessibility, and real asset needs. Reject generic AI-default patterns.
Implement production-quality UI with semantic HTML, maintainable CSS/JS, consistent design-system conventions, real content/assets, clear copy, visible focus, keyboard support, contrast, and reduced-motion handling.
Verify in browser and code: desktop/mobile, overflow, states, forms, loading/empty/error/success, interaction feedback, performance, accessibility, and build/lint/tests when available.
Iterate from screenshots and self-critique until the interface feels intentional, distinctive, usable, and shippable. Present what changed, what was checked, and any remaining limitations.

Más de este repositorio

mismo repositorio

qmd

davidgasquez/dotfiles

Search local markdown knowledge bases, notes, and docs with qmd. Use when users ask to research on local notes, retrieve documents semantically, or mentions qmd access.

2026-07-1459

skill-writer

davidgasquez/dotfiles

Guide for creating effective skills

2026-07-1259

explain-diff-html

davidgasquez/dotfiles

Use when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output.

2026-07-1059

grill

davidgasquez/dotfiles

Interview the user relentlessly about a plan or design.

2026-07-1059

improve-writing

davidgasquez/dotfiles

Write and edit prose in a plain style: simple everyday words, complete sentences, no dashes, no jargon, no analogies, no filler, and full clear explanations. Use this whenever the user ask you to draft or revise documents, reports, summaries, README files, research notes, commit and PR descriptions. Also use it whenever the user asks to simplify, clean up, tighten, reword, or make writing clearer or easier to read.

2026-07-1059

pdf

davidgasquez/dotfiles

Use when tasks involve reading or reviewing PDF files. Extract text directly or do visual checks by rendering pages when layout or suspected missing data.

2026-07-1059

name	frontend
description	Resources and guidelines for awesome frontend UX and design.
disable-model-invocation	true

Guidelines

Fast and efficient. Load only required data, render charts appropiately, ...
Prefer minimal, monochrome, monospace fonts, high contrast, sharp rectangles, utilitarian layout designs. Consider datasheet and control panel style if match.
Use semantic HTML, modern CSS
As vanilla as possible (no React or other frameworks)
Accesible

Workflow

Read through my preferred styles, reources, and links first. If needed, clone GitHub repos into /tmp and dig into the most relevant ones.
Inspect the project: framework, existing components, theme, assets, vibes, and constraints.
Define the design read: surface type, audience, user task, brand/product register, aesthetic direction, and justified signature moves. Ask clarifying questions if needed.
Plan before code: content hierarchy, responsive layout, palette, typography, spacing, radius, motion, states, accessibility, and real asset needs. Reject generic AI-default patterns.
Implement production-quality UI with semantic HTML, maintainable CSS/JS, consistent design-system conventions, real content/assets, clear copy, visible focus, keyboard support, contrast, and reduced-motion handling.
Verify in browser and code: desktop/mobile, overflow, states, forms, loading/empty/error/success, interaction feedback, performance, accessibility, and build/lint/tests when available.
Iterate from screenshots and self-critique until the interface feels intentional, distinctive, usable, and shippable. Present what changed, what was checked, and any remaining limitations.