Add skill authoring guidelines and website design audit skill
Establishes standards for creating and organizing AI agent skills in AGENTS.md and provides a reference implementation for performing technical and visual website design audits.
This commit is contained in:
241
audit-website-design/TEMPLATE.md
Normal file
241
audit-website-design/TEMPLATE.md
Normal file
@@ -0,0 +1,241 @@
|
||||
# Design Audit: [Site Name]
|
||||
|
||||
**URL**: [full URL]
|
||||
**Date audited**: [YYYY-MM-DD]
|
||||
**Domain**: [domain]
|
||||
|
||||
---
|
||||
|
||||
## 1. Overall Impression & Identity
|
||||
|
||||
- **Visual style/mood**: [e.g., minimal, playful, corporate, brutalist, luxury, tech-forward]
|
||||
- **Target industry/niche**:
|
||||
- **Emotional response on first load**:
|
||||
- **Unifying design concept/theme**:
|
||||
- **One-sentence summary**:
|
||||
|
||||
---
|
||||
|
||||
## 2. Layout & Structure
|
||||
|
||||
- **Layout pattern**: [single column, multi-column, grid-based, asymmetric]
|
||||
- **Max content width**: [e.g., `1200px`, `1440px`, full-bleed]
|
||||
- **Whitespace approach**: [tight/dense or generous/airy]
|
||||
- **Section structure**: [how the page is divided into blocks]
|
||||
- **Header**: [sticky/fixed, transparent, navigation type, height]
|
||||
- **Footer**: [fat with columns, minimal, CTA-focused]
|
||||
- **Sidebar**: [yes/no, position]
|
||||
- **Content containment**: [cards, dividers, background color shifts, borders]
|
||||
- **Grid system**: [12-col, CSS Grid, masonry, Flexbox, custom]
|
||||
- **Full-width vs boxed sections**: [pattern]
|
||||
- **Visual hierarchy**: [what draws eye 1st -> 2nd -> 3rd]
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
|
||||
- **Primary heading font**: [name, weight, style]
|
||||
- **Body font**: [name, weight, style]
|
||||
- **Accent/display fonts**: [name — if any]
|
||||
- **Font pairing strategy**: [e.g., serif + sans-serif, mono + sans]
|
||||
- **Font delivery method**: [Google Fonts URL / Adobe Fonts / self-hosted]
|
||||
- **Heading sizes**:
|
||||
- H1: [size, weight]
|
||||
- H2: [size, weight]
|
||||
- H3: [size, weight]
|
||||
- H4-H6: [sizes if used]
|
||||
- **Body text**: [size, line-height]
|
||||
- **Letter spacing**: [notable values and where applied]
|
||||
- **Text transform**: [uppercase headings, small-caps, etc.]
|
||||
- **Font weights used**: [list: light/regular/medium/semibold/bold/black]
|
||||
- **Link styling**: [color, underline, hover behavior]
|
||||
- **Text alignment patterns**: [left-aligned body, centered headings, etc.]
|
||||
- **Emphasis conventions**: [bold for X, italic for Y]
|
||||
- **Responsive font scaling**: [approach if identifiable — fluid clamp(), breakpoint steps]
|
||||
|
||||
---
|
||||
|
||||
## 4. Color Palette
|
||||
|
||||
- **Primary brand color**: [hex — description and usage]
|
||||
- **Secondary color(s)**: [hex — description and usage]
|
||||
- **Accent/highlight color(s)**: [hex — description and usage]
|
||||
- **Background colors**:
|
||||
- Main background: [hex]
|
||||
- Alternating sections: [hex values]
|
||||
- Card/surface: [hex]
|
||||
- **Text colors**:
|
||||
- Headings: [hex]
|
||||
- Body text: [hex]
|
||||
- Muted/secondary text: [hex]
|
||||
- **Link colors**: [default hex, hover hex, visited if different]
|
||||
- **Border/divider colors**: [hex values]
|
||||
- **Gradients**: [full CSS value — colors, direction, where applied]
|
||||
- **Dark mode**: [supported yes/no — if yes, list key dark palette values]
|
||||
- **Contrast notes**: [any accessibility observations]
|
||||
- **Section separation via color**: [how alternating backgrounds create rhythm]
|
||||
|
||||
### CSS Custom Properties
|
||||
|
||||
```css
|
||||
/* Paste relevant :root custom properties here */
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Imagery & Media
|
||||
|
||||
- **Photography style**: [lifestyle, abstract, product shots, editorial, AI-generated]
|
||||
- **Image treatment**: [filters, overlays, duotone, B&W, rounded corners, masks]
|
||||
- **Illustration style**: [flat, 3D, hand-drawn, isometric — if used]
|
||||
- **Icon style**: [outlined, filled, duotone, custom]
|
||||
- **Icon library**: [Heroicons, Lucide, FontAwesome, Phosphor, custom SVGs — if identifiable]
|
||||
- **Icon size and stroke weight**: [if determinable]
|
||||
- **Video usage**: [hero background, embedded, autoplay, none]
|
||||
- **Image formats**: [WebP, AVIF, SVG, PNG, JPG]
|
||||
- **Common aspect ratios**: [16:9, 4:3, 1:1, etc.]
|
||||
- **Image masking/cropping**: [circles, rounded rects, blobs, custom shapes]
|
||||
- **Decorative elements**: [blobs, patterns, grain/noise, geometric shapes, lines]
|
||||
- **Favicon**: [style description]
|
||||
|
||||
---
|
||||
|
||||
## 6. Components & UI Patterns
|
||||
|
||||
### Buttons
|
||||
|
||||
- **Shape/border-radius**: [value — rounded, pill `9999px`, square]
|
||||
- **Sizes**: [small, medium, large — dimensions if determinable]
|
||||
- **Variants**: [filled, outline, ghost, text-only]
|
||||
- **Padding**: [value if determinable]
|
||||
- **Hover state**: [color shift, shadow, scale, underline, etc.]
|
||||
- **CTA examples**: [exact button text observed, e.g., "Get Started", "Try Free"]
|
||||
|
||||
### Cards
|
||||
|
||||
- **Shadow**: [box-shadow CSS value]
|
||||
- **Border**: [color, width, style]
|
||||
- **Border radius**: [value]
|
||||
- **Padding**: [value]
|
||||
- **Background**: [color]
|
||||
- **Hover behavior**: [lift, glow, border change, shadow increase]
|
||||
|
||||
### Navigation
|
||||
|
||||
- **Desktop style**: [horizontal links, dropdowns, mega-menu, tabs]
|
||||
- **Mobile pattern**: [hamburger, bottom nav, slide-out drawer]
|
||||
- **Active state**: [underline, color, background, bold]
|
||||
- **Breadcrumbs**: [yes/no, style]
|
||||
|
||||
### Forms
|
||||
|
||||
- **Input style**: [border color/width, background, height/padding, border-radius]
|
||||
- **Labels**: [floating, above input, inline, placeholder-only]
|
||||
- **Focus state**: [border color, shadow, outline]
|
||||
- **Validation style**: [inline error, color change, icon]
|
||||
|
||||
### Other Components
|
||||
|
||||
- **Modals/dialogs**: [overlay color, border-radius, animation, backdrop blur]
|
||||
- **Badges/tags/pills**: [colors, size, border-radius]
|
||||
- **Tooltips**: [style, trigger method]
|
||||
- **Tables**: [style, striped rows, borders]
|
||||
- **Accordions/tabs**: [style, transition, indicator]
|
||||
- **Testimonials/reviews**: [layout — carousel, grid, single quote, avatar usage]
|
||||
- **Pricing tables**: [layout, toggle, feature comparison style]
|
||||
- **Progress indicators**: [bars, steps, percentages, dots]
|
||||
- **Alert/notification bars**: [top banner, toast, inline, colors]
|
||||
|
||||
---
|
||||
|
||||
## 7. Animation & Interaction
|
||||
|
||||
- **Page load**: [fade-in, stagger, skeleton loaders, none]
|
||||
- **Scroll-triggered**: [parallax, reveal on scroll, slide-in, fade-up]
|
||||
- **Hover effects**: [links, buttons, cards, images — describe each]
|
||||
- **Page transitions**: [instant, fade, slide, none]
|
||||
- **Micro-interactions**: [toggle switches, like buttons, form feedback, copy buttons]
|
||||
- **Cursor**: [default, custom cursor, pointer changes]
|
||||
- **Loading states**: [spinner, skeleton, shimmer, progress bar]
|
||||
- **Easing style**: [snappy/fast, smooth/gentle, bouncy/elastic]
|
||||
- **Timing**: [typical duration values — e.g., 150ms for hovers, 300ms for reveals]
|
||||
- **Animation library**: [Framer Motion, GSAP, AOS, Lottie, CSS-only, View Transitions API]
|
||||
- **Overall feel**: [subtle and polished, dramatic and bold, minimal/none]
|
||||
|
||||
---
|
||||
|
||||
## 8. Spacing & Rhythm
|
||||
|
||||
- **Base spacing unit**: [e.g., 4px, 8px]
|
||||
- **Spacing scale**: [e.g., 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
|
||||
- **Section padding (vertical)**: [typical top/bottom values]
|
||||
- **Card/grid gap**: [typical values]
|
||||
- **Heading-to-body margin**: [value]
|
||||
- **Paragraph spacing**: [value]
|
||||
- **Overall density**: [tight/compact, balanced, open/spacious]
|
||||
|
||||
---
|
||||
|
||||
## 9. Responsive & Breakpoints
|
||||
|
||||
- **Breakpoint values**: [list all found, e.g., 640px, 768px, 1024px, 1280px]
|
||||
- **Design approach**: [mobile-first or desktop-first]
|
||||
- **Layout changes**:
|
||||
- Mobile (<768px): [description]
|
||||
- Tablet (768-1024px): [description]
|
||||
- Desktop (>1024px): [description]
|
||||
- **Mobile navigation**: [hamburger, bottom nav, slide-out, full-screen overlay]
|
||||
- **Elements hidden/shown**: [what changes by breakpoint]
|
||||
- **Typography scaling**: [how sizes change]
|
||||
- **Grid/image reflow**: [how columns collapse]
|
||||
|
||||
---
|
||||
|
||||
## 10. Technical Stack
|
||||
|
||||
- **CSS approach**: [Tailwind, Bootstrap, custom CSS, CSS Modules, styled-components, Emotion]
|
||||
- **JS framework**: [React, Next.js, Vue, Nuxt, Astro, Svelte, SvelteKit, vanilla, jQuery]
|
||||
- **CMS**: [WordPress, Webflow, Sanity, Contentful, Shopify, Strapi — if identifiable]
|
||||
- **Hosting indicators**: [Vercel, Netlify, AWS, Cloudflare Pages, GitHub Pages]
|
||||
- **Font delivery**: [Google Fonts (URL), Adobe Fonts, self-hosted]
|
||||
- **Notable libraries**: [Swiper, Framer Motion, GSAP, Three.js, Lottie, Radix UI, Headless UI]
|
||||
- **Analytics/tracking**: [Google Analytics, Plausible, Segment, Hotjar, etc.]
|
||||
- **Performance patterns**: [lazy loading, image optimization (WebP/AVIF), code splitting, prefetching]
|
||||
- **Build tooling hints**: [Webpack chunks, Vite, Turbopack — from script/asset naming patterns]
|
||||
|
||||
---
|
||||
|
||||
## 11. SEO & Meta Presentation
|
||||
|
||||
- **Page title**: `[exact title text]`
|
||||
- **Title format pattern**: [e.g., "Page Title — Brand" or "Brand | Page"]
|
||||
- **Meta description**: `[exact text]`
|
||||
- **Open Graph tags**:
|
||||
- og:title: `[value]`
|
||||
- og:description: `[value]`
|
||||
- og:image: [URL or description]
|
||||
- og:type: [value]
|
||||
- twitter:card: [value]
|
||||
- **URL structure**: [pattern, e.g., `/blog/post-slug`, `/products/category/item`]
|
||||
- **Heading hierarchy**: [proper H1 -> H2 -> H3 nesting? any issues?]
|
||||
- **Canonical URL**: [present yes/no, value]
|
||||
- **Structured data**: [JSON-LD types, microdata — if found]
|
||||
|
||||
---
|
||||
|
||||
## 12. Brand Voice in Design
|
||||
|
||||
- **Copy tone**: [casual, formal, playful, authoritative, witty, technical, empathetic]
|
||||
- **CTA wording style**: [list examples: "Get Started", "Start Free Trial", "Let's Go"]
|
||||
- **Text-to-visual ratio**: [text-heavy, visual-heavy, balanced]
|
||||
- **Social proof usage**: [client logos, testimonials, stats/numbers, trust badges, case studies]
|
||||
- **Design personality**: [friendly rounded shapes, sharp corporate lines, hand-crafted feel, etc.]
|
||||
|
||||
---
|
||||
|
||||
## 13. Unique & Standout Features
|
||||
|
||||
- [List anything unconventional or signature about this design]
|
||||
- [Creative uses of scroll, layout, or interaction]
|
||||
- [Notable "wow" moments or delightful details]
|
||||
- [What distinguishes this site from generic templates]
|
||||
Reference in New Issue
Block a user