Skip to content

docs: add design guidelines to frontend-development skill #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kr1shap merged 3 commits into from
Mar 12, 2026
Merged

docs: add design guidelines to frontend-development skill #93

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3951ba
Initial plan
Copilot Mar 12, 2026
e4cf336
docs: add design guidelines section to frontend-development skill
Copilot Mar 12, 2026
caec4b1
docs: fix American spelling in frontend-development skill
Copilot Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .github/skills/frontend-development.skill.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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鈥攂ut 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鈥攕pacing, 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鈥攗nless 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/`.
Expand Down