81 Commits

Author SHA1 Message Date
Ghaida Zahran 694855b124 Standardize subpage hero and section vertical rhythm
Consistent padding, font-size, and max-width across all subpage heroes.
Remove desktop padding-left overrides and dead first-of-type rule.
Symmetric section padding throughout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 03:17:28 -07:00
Ghaida Zahran 18a85ae14e Philosopher callout: remove top margin, bottom margin matches sections 2026-04-16 02:58:52 -07:00
Ghaida Zahran 8b0c1748b1 Redesign hero How to Use link as button with adjacent description
Solid accent button "See Intent in action" with muted description
text beside it instead of the previous full-width banner link.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:56:04 -07:00
Ghaida Zahran 5143709eb5 Add How to Use link in homepage hero
Prominent call-to-action between the lede and install blocks:
"See it in action — follow a project from first question to
engineering handoff" with accent background and arrow icon.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:54:44 -07:00
Ghaida Zahran fb608109d7 Fix P0-P2 issues from comprehensive review
P0 fixes:
- Panel full-screen on mobile, 2/3 width on desktop (769px+)
- Focus trap: Tab/Shift+Tab constrained to panel while open
- Focus return: closing panel restores focus to trigger button
- Dialog semantics: role=dialog, aria-modal, aria-labelledby

P1 fixes:
- Parser: --- horizontal rules now render as <hr> (44 instances fixed)
- Parser: indented sub-list items (  - item) now recognized as list items
- Parser: HTML entities escaped before inline markdown (fixes <100ms etc)
- Parser: # heading syntax supported within output blocks

P2 fixes:
- Visual diagrams have role=img with descriptive aria-label
- Table separator regex handles trailing whitespace and colons
- <hr> styled in step-output (border-top, vertical margin)
- Removed redundant gap: 0 on blueprint-lane-nodes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:49:38 -07:00
Ghaida Zahran dd699f8221 Darken panel overlay to 0.5 opacity 2026-04-16 02:39:39 -07:00
Ghaida Zahran 211534a402 Match panel top padding to side padding (s8) 2026-04-16 02:39:07 -07:00
Ghaida Zahran 316b7aa374 Align decision gates to flow nodes using CSS grid
Replace flex layout + percentage margins with a grid that shares
columns between the flow track and the gates row. Photo flagged
aligns under Capture, Price anomaly aligns under Details.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:38:33 -07:00
Ghaida Zahran f276cd40cc Polish: wider panel, 72px bottom padding, encoded visual system
- Panel width: 2/3 viewport with 960px max
- Panel body: 72px bottom padding
- Visual diagram CSS: documented design token system (containers,
  nodes, labels, connectors, metrics) for consistent output
- Flow nodes use flex layout to scale within container
- Removed redundant text-based site map from organize output
- Tightened spacing throughout all three diagram types

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:36:30 -07:00
Ghaida Zahran 71cb3f3932 Add inline visual diagrams for journey, blueprint, and organize
- Journey: horizontal flow diagram showing 5-step posting flow with
  decision gates and metrics
- Blueprint: service blueprint with frontstage/backstage/support swim
  lanes, service boxes, and lines of interaction/visibility/support
- Organize: tab bar mockup with site map tree showing all 5 branches
  and their children
- Visuals render inline at top of output panel before text content

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:32:20 -07:00
Ghaida Zahran 1ae2c48276 Clean prose: reduce em dashes and 'not X' constructions
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 02:18:09 -07:00
Ghaida Zahran 7a2457473e Wider panel, bottom padding, prominent headings, visible bullets
- Panel width increased to 52vw for content breathing room
- Panel body bottom padding increased to s16
- Bold-only paragraphs styled as section headings (larger font, top margin)
- Explicit list-style: disc/decimal on ul/ol inside step-output

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 01:56:38 -07:00
Ghaida Zahran 5451d8778c Replace accordion with slide-in panel for skill outputs
- Remove details/summary accordion pattern
- Add right-side slide panel triggered by "See what /skill produced"
- Panel has close button, escape key, overlay click to dismiss
- Hidden output content rendered at build time, populated into panel via JS
- Panel scrolls independently, body scroll locked when open

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 01:53:45 -07:00
Ghaida Zahran 529b0fd9a2 Deepen showcase outputs to match real skill artifact depth
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 01:47:55 -07:00
Ghaida Zahran d558c4990d Fix markdown parser: proper list/table/paragraph handling
- Rewrite simpleMarkdown as line-by-line parser instead of block-based
- Handles unordered lists, ordered lists, tables, and paragraphs correctly
- Bold standalone lines no longer merge into adjacent lists
- Add table styling for step-output blocks
- Fix philosopher callout vertical spacing

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 01:30:55 -07:00
Ghaida Zahran a0672c85ac Fix parser ghost section and philosopher callout rendering
- Filter whitespace-only blocks in showcase parser to prevent empty section
- Replace simpleMarkdown with block-aware parser that handles paragraphs,
  lists, and numbered lists without creating empty <p> tags
- Change philosopher callout from <p set:html> to <div set:html> to avoid
  nested paragraph tags

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 01:21:05 -07:00
Ghaida Zahran b6f447f7ea Add How to Use page styles and responsive layout 2026-04-16 01:07:32 -07:00
Ghaida Zahran 66ac764b83 Add How to Use page template with showcase rendering 2026-04-16 01:06:30 -07:00
Ghaida Zahran f5a5fc97bc Add How to Use to site navigation 2026-04-16 01:04:53 -07:00
Ghaida Zahran 84b67369d7 Add Nearby showcase content for How to Use page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 01:04:09 -07:00
Ghaida Zahran d21e07aa81 Add showcase content parser for How to Use page
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-16 00:57:24 -07:00
Ghaida Zahran 56ead751db Use card layout for anti-patterns on tablet, nav tagline alignment
Raise the patterns page card-to-table breakpoint from 768px to 1024px
so tablets and small laptops get the card layout instead of a cramped
table. Add 2px padding-top to nav tagline for baseline alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-15 19:42:43 -07:00
Ghaida Zahran cd758f03b1 Fix skill category label widths to be uniform on desktop
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-15 02:32:56 -07:00
Ghaida Zahran 5ad2af0838 Fix copy buttons: add execCommand fallback and error handling
navigator.clipboard.writeText() can silently fail on some browsers
even over HTTPS. Added textarea-based fallback and .catch() handler.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:44:14 -07:00
Ghaida Zahran 6cac4a16e2 Remove hero left padding on desktop
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:40:08 -07:00
Ghaida Zahran 996afc16f0 Agents: Sage spans lifecycle width, footer credit, cleanup
- Sage box in Project Lifecycle spans full width of the flow, not the page
- Remove unused Sage card styles from table refactor
- Add "Made by Ghaida" with link to footer
- Sage stays in the agent table as a regular row

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:38:38 -07:00
Ghaida Zahran 88247a080c Add OG preview image and meta tags for social sharing
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:24:51 -07:00
Ghaida Zahran 4fdffe3eb5 Website polish: install UX, anti-patterns page, copy buttons
Install section:
- Replace broken install-skill command with /plugin marketplace add
- Add npx skills add --all as cross-platform install method
- Side-by-side layout for install methods on desktop
- Copy-to-clipboard buttons with check animation
- "Then open /plugin" followup text
- Manual download link to GitHub releases

Anti-patterns page:
- Rename from "Anti-Pattern Catalog" to "Anti-Patterns"
- Sidebar category navigation on desktop (sticky)
- Dropdown filter on mobile (native select)
- Mobile cards instead of table rows
- Severity badge inline with title on mobile
- Fixed table column widths (table-layout: fixed)
- Reduced severity badge font-weight

General:
- Fix code-block box-in-box CSS specificity issue
- Hero install group equal padding (s24 top/bottom)
- Drop hero left padding on tablet breakpoint (1024px+)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:05:04 -07:00
Ghaida Zahran 48c47a2c5f Fix hero padding: equal vertical spacing, drop left offset on tablet
- Even top/bottom padding (s24) on desktop hero
- Move hero left padding to 1024px+ breakpoint so tablet range uses full width

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 17:12:34 -07:00
Ghaida Zahran 9b1572c235 Fix nav alignment: center all elements, hide tagline on mobile, tighten icon gap
- Changed nav-brand from baseline to center alignment (fixes tagline 2.5px offset)
- Hide tagline on mobile, show at 769px+ breakpoint
- Remove 32px gap between action icons on desktop
- Add 4px top padding to tagline, nav links, and icons for optical weight balance

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 17:07:41 -07:00
Ghaida Zahran 6c08de9f73 Strip nav alignment to minimum: center on inner, baseline on brand
Removed all extra rules (nav-inner > *, margin-top nudge).
nav-inner centers children. nav-brand baseline-aligns text internally.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 13:06:37 -07:00
Ghaida Zahran 623abbcee6 Fix nav: center everything in 56px, nudge tagline baseline to match wordmark
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 12:54:52 -07:00
Ghaida Zahran 94e79e4df8 Fix nav alignment: baseline for text, center for icons
nav-inner uses baseline alignment so wordmark, tagline, and
nav links all share the same text baseline. nav-actions uses
align-self: center to vertically center icons independently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 12:08:38 -07:00
Ghaida Zahran 4317d1f460 Fix nav alignment: stretch children to full height, center content within
All nav-inner children stretch to 56px, then center their own content.
Eliminates misalignment from different-height children centering independently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 12:05:39 -07:00
Ghaida Zahran 836ddba200 Fix nav alignment: center everything, no baseline tricks
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 11:33:12 -07:00
Ghaida Zahran 7c5652b80d Fix nav alignment: remove competing alignment strategies
Removed translateY(1px) SVG nudge, min-height on nav links,
and simplified nav-brand to last baseline with line-height: 1.
Everything centers via nav-inner align-items: center.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 11:13:32 -07:00
Ghaida Zahran cc01a6e47a Fix asset paths for custom domain designwithintent.ai
Site has custom domain, so base must be "/" not "/intent".
Updated Astro config site URL, removed /intent prefix from
all JS script src paths. CSS and JS now load from root.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 11:11:40 -07:00
Ghaida Zahran ade6b3eb17 Remove CSP meta tag — was blocking font loading on GitHub Pages
The Content-Security-Policy connect-src 'self' blocked preload
fetches for external font stylesheets. CSP should be configured
at the hosting level (HTTP headers), not as a meta tag when
external resources are needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 09:14:40 -07:00
Ghaida Zahran 068055f0dd Rename build assets dir from _assets to assets
Underscore-prefixed directories can be ignored by GitHub Pages
Jekyll processing. Removed the underscore to prevent CSS 404s.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 09:05:58 -07:00
Ghaida Zahran 3d1a9e832d Add GitHub Actions workflow for Astro site deployment
GitHub Pages was trying to build with Jekyll. This adds:
- Astro build + deploy workflow triggered on pushes to docs/, skills/, agents/
- .nojekyll file to disable Jekyll processing

Requires GitHub Pages source set to "GitHub Actions" in repo settings.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:15:21 -07:00
Ghaida Zahran 5ea9233d53 Fix all remaining Medium and Low audit issues
Medium:
- #9: Added h2 heading to patterns page for heading hierarchy
- #11: Added Content-Security-Policy meta tag
- #12: (already fixed in prior commit)

Low:
- #13: Added defer to nav.js script
- #14: Wrapped Nav in header landmark
- #15: Dark mode font-weight 350 → 300 (valid weight in loaded font)
- #16: Added @media prefers-color-scheme dark CSS fallback
- #17: Wrapped pattern-filter.js in DOMContentLoaded

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran f0752a89f7 Fix all Critical and High audit issues
Critical:
- #1: Install nav link 404 — added trailing slash

High:
- #2: ARIA tabs — changed role="tab" to role="button" on pattern filters
- #3: Blueprint-mark contrast — #a0a0b8 → #74748c (light), #44445a → #5c5c78 (dark)
- #4: Critical severity badge contrast — #dc2626 → #b91c1c
- #5: Render-blocking fonts — async load with preload + media=print swap
- #6: Missing preconnect — added cdn.fontshare.com and fonts.googleapis.com
- #7: External links — added target="_blank" rel="noopener noreferrer"

Medium (also fixed):
- #8: Deleted stale src/styles/global.css
- #10: Added Install link to mobile menu
- #12: Dark mode --fg-muted — #7878a0 → #8888b0 for AA compliance

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran 6da9915657 Add GitHub icon link to nav actions
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran 030e394642 Match gap between Install link and theme toggle to nav-links gap
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran a85eeacf5d Refactor to mobile-first responsive CSS
Base styles are now mobile. Desktop overrides in @media (min-width: 769px).
- Section: single column base, two-column on desktop
- Nav: hamburger visible base, links on desktop
- Hero/skills-hero: no left padding base, offset on desktop
- Principles: single column base, 2-col on desktop
- nav-actions gap: var(--s8) on desktop
- page-pad: 24px base, 48px on desktop
- Fixed stray closing brace syntax error

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran 22a2c9d317 Optical alignment fix for nav icons, user principle updates
Nav icons nudged 1px down with transform for optical centering.
User updated principle titles/copy (not overridden).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran a4ef0675d0 Fix nav icon alignment: wrap brand in baseline container
Wordmark + tagline in .nav-brand with align-items: baseline.
Nav-inner back to align-items: center so icons center vertically.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 08:13:32 -07:00
Ghaida Zahran 2ed733760d Create CNAME 2026-04-14 07:57:28 -07:00
Ghaida Zahran 78d8dfebf9 Fix nav icon alignment: align-self center on nav-actions
Icons were inheriting baseline alignment from parent. Actions
container now centers itself vertically independent of text baseline.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 07:05:00 -07:00
Ghaida Zahran c665894a80 Fix wordmark-tagline gap to exactly var(--s3)
Removed nav-inner gap, use explicit margins instead so
wordmark-tagline spacing is controlled independently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 07:04:38 -07:00