dotfiles/.config/opencode/skills/frontend-design/SKILL.md

name, description, permalink

name	description	permalink
frontend-design	Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.	opencode-config/skills/frontend-design/skill

Frontend Design

When to Load

Load this skill when the task involves building, redesigning, or significantly styling a frontend component, page, or application. Triggers include: user requests for UI/UX implementation, wireframe-to-code work, visual redesigns, and new web interfaces.

Design Thinking Checklist

Before writing code, answer these:

1. Purpose — What problem does this interface solve? Who is the audience?
2. Brand / product context — Does the project have existing design tokens, a style guide, or brand constraints? Follow them first; extend only where gaps exist.
3. Aesthetic direction — Commit to a clear direction (e.g., brutally minimal, maximalist, retro-futuristic, editorial, organic, luxury, playful, industrial). Intentionality matters more than intensity.
4. Differentiation — Identify the single most memorable element of the design.
5. Constraints — Note framework requirements, performance budgets, and accessibility targets (WCAG AA minimum).

Implementation Checklist

• Produce production-grade, functional code (HTML/CSS/JS, React, Vue, etc.)
• Ensure the result is visually cohesive with a clear aesthetic point of view
• Respect accessibility: semantic HTML, sufficient contrast, keyboard navigation, focus management
• Respect performance: avoid heavy unoptimized assets; prefer CSS-only solutions for animation where practical
• Use CSS variables for color/theme consistency
• Match implementation complexity to the aesthetic vision — maximalist designs need elaborate effects; minimal designs need precision and restraint

Aesthetic Guidance

• Typography — Choose distinctive, characterful fonts. Pair a display font with a refined body font. Avoid defaulting to the same choices across projects; vary intentionally.
• Color & Theme — Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Vary between light and dark themes across projects.
• Motion — Prioritize high-impact moments: a well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use CSS animations where possible; use a motion library (e.g., Motion) for complex sequences. Include scroll-triggered and hover effects when they serve the design.
• Spatial Composition — Explore asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space, or controlled density.
• Backgrounds & Atmosphere — Build depth with gradient meshes, noise textures, geometric patterns, layered transparencies, shadows, grain overlays, or other contextual effects rather than defaulting to flat solid colors.

Avoid converging on the same fonts, color schemes, or layout patterns across generations. Each design should feel context-specific and intentional.

TDD & Verification

Frontend code changes follow the project's TDD default policy. When the skill is loaded alongside test-driven-development:

• Write or update component/visual tests before implementation when a test harness exists.
• If no frontend test harness is available, state the exception and describe alternative verification (e.g., manual browser check, screenshot comparison).
• Satisfy verification-before-completion requirements before claiming the work is done.