From f3951ba975f569a213aa924e7ecb4460d9a727e6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 12 Mar 2026 04:05:07 +0000 Subject: [PATCH 1/3] Initial plan From e4cf336b2ee7e850d40fd4c837d57ef67d077ead Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 12 Mar 2026 04:06:17 +0000 Subject: [PATCH 2/3] docs: add design guidelines section to frontend-development skill Co-authored-by: kr1shap <197449439+kr1shap@users.noreply.github.com> --- .github/skills/frontend-development.skill.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.github/skills/frontend-development.skill.md b/.github/skills/frontend-development.skill.md index 53f9aca..c7fcc87 100644 --- a/.github/skills/frontend-development.skill.md +++ b/.github/skills/frontend-development.skill.md @@ -33,6 +33,13 @@ This project's frontend uses **Next.js 16 (App Router)**, **React 19**, **TypeSc 3. Provide `aria-label` or `aria-labelledby` on icon-only buttons and non-text content. 4. Respect `prefers-reduced-motion` (Framer Motion's `useReducedMotion` is already in use). +## Design Guidelines + +1. **Creative freedom**: If no specific design direction is provided, you have creative latitude—but your designs must feel consistent with the existing website's visual language (colours, typography, spacing, component patterns). Explore the current pages for reference before introducing new styles. +2. **Responsiveness**: Every UI change must be fully responsive across all screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`) and test layouts at each breakpoint. +3. **Figma specs take priority**: When a Figma link is supplied, follow it precisely—spacing, colours, typography, component structure, and interaction states should all match the provided design. +4. **No generic AI/vibe-coded aesthetics**: Avoid designs characterised by heavy purplish/blue-purple gradients, excessive glassmorphism, oversized rounded corners, or other trendy but context-free visual treatments—unless those patterns are already established in the current site design. + ## Refactoring & Decoupling 1. Identify duplicated TSX patterns and extract them into shared components under `components/`. From caec4b17a0db89308ed1347c8b5c6cfcee40499a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 12 Mar 2026 04:06:52 +0000 Subject: [PATCH 3/3] docs: fix American spelling in frontend-development skill Co-authored-by: kr1shap <197449439+kr1shap@users.noreply.github.com> --- .github/skills/frontend-development.skill.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/skills/frontend-development.skill.md b/.github/skills/frontend-development.skill.md index c7fcc87..900f571 100644 --- a/.github/skills/frontend-development.skill.md +++ b/.github/skills/frontend-development.skill.md @@ -35,10 +35,10 @@ This project's frontend uses **Next.js 16 (App Router)**, **React 19**, **TypeSc ## Design Guidelines -1. **Creative freedom**: If no specific design direction is provided, you have creative latitude—but your designs must feel consistent with the existing website's visual language (colours, typography, spacing, component patterns). Explore the current pages for reference before introducing new styles. +1. **Creative freedom**: If no specific design direction is provided, you have creative latitude—but your designs must feel consistent with the existing website's visual language (colors, typography, spacing, component patterns). Explore the current pages for reference before introducing new styles. 2. **Responsiveness**: Every UI change must be fully responsive across all screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`) and test layouts at each breakpoint. -3. **Figma specs take priority**: When a Figma link is supplied, follow it precisely—spacing, colours, typography, component structure, and interaction states should all match the provided design. -4. **No generic AI/vibe-coded aesthetics**: Avoid designs characterised by heavy purplish/blue-purple gradients, excessive glassmorphism, oversized rounded corners, or other trendy but context-free visual treatments—unless those patterns are already established in the current site design. +3. **Figma specs take priority**: When a Figma link is supplied, follow it precisely—spacing, colors, typography, component structure, and interaction states should all match the provided design. +4. **No generic AI/vibe-coded aesthetics**: Avoid designs characterized by heavy purplish/blue-purple gradients, excessive glassmorphism, oversized rounded corners, or other trendy but context-free visual treatments—unless those patterns are already established in the current site design. ## Refactoring & Decoupling