changes

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

@@ -0,0 +1,48 @@
+---
+name: frontend-design
+description: 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.
+permalink: 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.