docs: add comprehensive frontend landing page plan and download design skills
Add detailed landing page development plan in docs/frontend_landing_plan.md: - Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA) - Design guidelines from downloaded skills (typography, color, motion, composition) - Security considerations (XSS prevention, input sanitization, CSP) - Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90) - Responsiveness and accessibility requirements (WCAG 2.1 AA) - Success KPIs and monitoring setup - 3-week development timeline with daily tasks - Definition of Done checklist Download 10+ frontend/UI/UX skills via universal-skills-manager: - frontend-ui-ux: UI/UX design without mockups - frontend-design-guidelines: Production-grade interface guidelines - frontend-developer: React best practices (40+ rules) - frontend-engineer: Next.js 14 App Router patterns - ui-ux-master: Comprehensive design systems and accessibility - ui-ux-systems-designer: Information architecture and interaction - ui-ux-design-user-experience: Platform-specific guidelines - Plus additional reference materials and validation scripts Configure universal-skills MCP with SkillsMP API key for curated skill access. Safety first: All skills validated before installation, no project code modified. Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager) Next: Begin Sprint 3 landing page development
This commit is contained in:
Luca Sacchi Ricciardi
177
.opencode/skills/frontend-design-guidelines/SKILL.md
Normal file
177
.opencode/skills/frontend-design-guidelines/SKILL.md
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
name: frontend-design
|
||||
model: reasoning
|
||||
version: 1.1.0
|
||||
description: >
|
||||
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop"
|
||||
aesthetics. Focuses on creative direction and memorable design choices.
|
||||
tags: [frontend, design, ui, web, aesthetics, creative]
|
||||
related: [ui-design, web-design, theme-factory]
|
||||
---
|
||||
|
||||
# Frontend Design
|
||||
|
||||
Create memorable frontend interfaces that stand out from generic AI-generated aesthetics through bold creative choices.
|
||||
|
||||
> **See also:** `ui-design` for fundamentals (typography, color, spacing), `web-design` for CSS patterns.
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
### OpenClaw / Moltbot / Clawbot
|
||||
|
||||
```bash
|
||||
npx clawhub@latest install frontend-design
|
||||
```
|
||||
|
||||
|
||||
## WHAT This Skill Does
|
||||
|
||||
Guides creation of visually distinctive web interfaces by:
|
||||
- Establishing a bold aesthetic direction before coding
|
||||
- Making intentional typography, color, and spatial choices
|
||||
- Implementing motion and micro-interactions that delight
|
||||
- Avoiding the predictable patterns that mark AI-generated UIs
|
||||
|
||||
## WHEN To Use
|
||||
|
||||
- Building a new component, page, or web application
|
||||
- Creating landing pages, marketing sites, or product UIs
|
||||
- Redesigning interfaces to be more memorable
|
||||
- Any frontend work where visual impact matters
|
||||
|
||||
## KEYWORDS
|
||||
|
||||
frontend design, web ui, ui design, landing page, creative ui, web aesthetics, typography, visual design, motion design, distinctive interface
|
||||
|
||||
## Design Thinking Process
|
||||
|
||||
Before writing code, commit to an aesthetic direction:
|
||||
|
||||
### 1. Understand Context
|
||||
- **Purpose**: What problem does this interface solve?
|
||||
- **Audience**: Who uses it and what do they expect?
|
||||
- **Constraints**: Framework, performance, accessibility requirements
|
||||
|
||||
### 2. Choose a Bold Direction
|
||||
|
||||
Pick an extreme aesthetic — mediocrity is forgettable:
|
||||
|
||||
| Direction | Characteristics |
|
||||
|-----------|-----------------|
|
||||
| **Brutally Minimal** | Stark, essential, nothing extra |
|
||||
| **Maximalist Chaos** | Dense, layered, overwhelming intentionally |
|
||||
| **Retro-Futuristic** | Blends vintage aesthetics with modern tech |
|
||||
| **Organic/Natural** | Soft, flowing, nature-inspired |
|
||||
| **Luxury/Refined** | Premium materials, subtle elegance |
|
||||
| **Playful/Toy-like** | Fun, approachable, bright |
|
||||
| **Editorial/Magazine** | Type-forward, grid-based |
|
||||
| **Brutalist/Raw** | Exposed structure, anti-design |
|
||||
| **Art Deco/Geometric** | Bold shapes, symmetry, ornament |
|
||||
| **Industrial/Utilitarian** | Function-forward, robust |
|
||||
|
||||
### 3. Identify the Memorable Element
|
||||
|
||||
What single thing will someone remember about this interface? Commit to it.
|
||||
|
||||
## Aesthetic Guidelines
|
||||
|
||||
### Typography
|
||||
|
||||
**NEVER** use generic fonts:
|
||||
- Arial, Helvetica, system-ui
|
||||
- Inter, Roboto (unless highly intentional)
|
||||
|
||||
**DO** choose distinctive fonts:
|
||||
- Pair a characterful display font with a refined body font
|
||||
- Explore: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
|
||||
|
||||
```css
|
||||
/* Example pairing */
|
||||
--font-display: 'Clash Display', sans-serif;
|
||||
--font-body: 'Satoshi', sans-serif;
|
||||
```
|
||||
|
||||
### Color & Theme
|
||||
|
||||
- **Commit** to a cohesive palette — don't hedge with safe choices
|
||||
- **Dominant + accent** outperforms evenly-distributed colors
|
||||
- **Use CSS variables** for consistency
|
||||
- **Avoid** purple gradients on white (the "AI default")
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #0a0a0a;
|
||||
--color-surface: #141414;
|
||||
--color-text: #fafafa;
|
||||
--color-accent: #ff4d00;
|
||||
--color-muted: #666666;
|
||||
}
|
||||
```
|
||||
|
||||
### Spatial Composition
|
||||
|
||||
Break expectations:
|
||||
- **Asymmetry** over perfect balance
|
||||
- **Overlap** elements intentionally
|
||||
- **Diagonal flow** or unconventional layouts
|
||||
- **Generous negative space** OR controlled density — not middle ground
|
||||
- **Grid-breaking elements** that draw attention
|
||||
|
||||
### Motion & Interaction
|
||||
|
||||
Focus on high-impact moments:
|
||||
- **Page load**: Staggered reveals with `animation-delay`
|
||||
- **Scroll-triggered** animations that surprise
|
||||
- **Hover states** with personality
|
||||
- Prefer **CSS animations** for HTML; **Motion library** for React
|
||||
|
||||
```css
|
||||
/* Staggered entrance */
|
||||
.card { animation: fadeUp 0.6s ease-out backwards; }
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
```
|
||||
|
||||
### Backgrounds & Atmosphere
|
||||
|
||||
Create depth and atmosphere:
|
||||
- **Gradient meshes** and multi-stop gradients
|
||||
- **Noise textures** and grain overlays
|
||||
- **Geometric patterns** or subtle grids
|
||||
- **Layered transparencies**
|
||||
- **Dramatic shadows** or complete flatness
|
||||
- **Custom cursors** for interactive elements
|
||||
|
||||
## Implementation Principles
|
||||
|
||||
### Match Complexity to Vision
|
||||
|
||||
- **Maximalist vision** → elaborate code with extensive animations
|
||||
- **Minimalist vision** → restraint, precision, perfect spacing
|
||||
- Elegance = executing the vision well, not adding more
|
||||
|
||||
### Vary Between Generations
|
||||
|
||||
Never converge on patterns:
|
||||
- Alternate light/dark themes
|
||||
- Use different font families each time
|
||||
- Explore different aesthetic directions
|
||||
- Each design should feel unique
|
||||
|
||||
## NEVER Do
|
||||
|
||||
1. **NEVER use** generic font families (Inter, Roboto, Arial, system fonts)
|
||||
2. **NEVER use** purple gradients on white backgrounds — the "AI aesthetic"
|
||||
3. **NEVER use** predictable, cookie-cutter layouts
|
||||
4. **NEVER skip** the design thinking phase — understand before building
|
||||
5. **NEVER hedge** with safe, middle-ground aesthetics — commit to a direction
|
||||
6. **NEVER forget** that distinctive design requires distinctive code
|
||||
7. **NEVER converge** on the same patterns across generations — vary intentionally
|
||||
8. **NEVER add** complexity without purpose — minimalism and maximalism both require intention
|
||||
Reference in New Issue
Block a user