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
129
.opencode/skills/templates/htmx-template.html
Normal file
129
.opencode/skills/templates/htmx-template.html
Normal file
@@ -0,0 +1,129 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="space-y-6">
|
||||
<!-- Header Section -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body p-4 md:p-6">
|
||||
<h1 class="card-title text-2xl">Page Title</h1>
|
||||
<p class="text-sm opacity-70">Page description</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTMX Content Section with Loading State -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body p-4 md:p-6">
|
||||
<h2 class="card-title text-xl mb-4">Section Title</h2>
|
||||
|
||||
<!-- HTMX Dynamic Content -->
|
||||
<div id="dynamic-content"
|
||||
hx-get="/api/v1/endpoint/html"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
class="min-h-[100px] flex items-center justify-center">
|
||||
<!-- Loading spinner (shown until HTMX loads content) -->
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions Section -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body p-4 md:p-6">
|
||||
<h2 class="card-title text-xl mb-4">💡 Quick Actions</h2>
|
||||
|
||||
<!-- Desktop: Grid Layout (visible on >= md) -->
|
||||
<div class="hidden md:grid md:grid-cols-3 gap-3">
|
||||
<button onclick="openCreateModal()"
|
||||
class="btn btn-success gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<button onclick="openEditModal()"
|
||||
class="btn btn-warning gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<a href="/another-page" class="btn btn-accent gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
Go to Page
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: Mini Cards Row (visible on < md) -->
|
||||
<div class="grid grid-cols-3 gap-2 md:hidden">
|
||||
<button onclick="openCreateModal()"
|
||||
class="flex flex-col items-center gap-1 p-3 rounded-xl bg-success text-success-content hover:brightness-95 active:scale-95 transition-all shadow-md">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
<span class="text-xs font-medium">Create</span>
|
||||
</button>
|
||||
|
||||
<button onclick="openEditModal()"
|
||||
class="flex flex-col items-center gap-1 p-3 rounded-xl bg-warning text-warning-content hover:brightness-95 active:scale-95 transition-all shadow-md">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-medium">Edit</span>
|
||||
</button>
|
||||
|
||||
<a href="/another-page"
|
||||
class="flex flex-col items-center gap-1 p-3 rounded-xl bg-accent text-accent-content hover:brightness-95 active:scale-95 transition-all shadow-md">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
<span class="text-xs font-medium">Go</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Section (Mobile-only) -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body py-4">
|
||||
<!-- Header with expand indicator (clickable on mobile only) -->
|
||||
<div class="flex items-center justify-between cursor-pointer md:cursor-default"
|
||||
onclick="toggleSection()" id="section-header">
|
||||
<h2 class="card-title text-xl mb-2">📊 Collapsible Section</h2>
|
||||
<span class="expand-indicator badge badge-outline badge-sm opacity-60 hover:opacity-100 cursor-pointer transition-opacity md:hidden">
|
||||
<span class="indicator-text">+</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible content (hidden on mobile by default) -->
|
||||
<div id="section-content"
|
||||
class="min-h-[100px] hidden md:block">
|
||||
<p>This content is collapsible on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript for collapsible section -->
|
||||
<script>
|
||||
function toggleSection() {
|
||||
// Only toggle on mobile (< md breakpoint)
|
||||
if (window.innerWidth >= 768) return;
|
||||
|
||||
const content = document.getElementById('section-content');
|
||||
const indicator = document.querySelector('#section-header .indicator-text');
|
||||
|
||||
if (content.classList.contains('hidden')) {
|
||||
content.classList.remove('hidden');
|
||||
indicator.textContent = '−';
|
||||
} else {
|
||||
content.classList.add('hidden');
|
||||
indicator.textContent = '+';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user