Commit Graph
24 Commits
Author SHA1 Message Date
Paul Bakaus d85efab51f Refine homepage layout: install, Stay updated, Changelog/FAQ, Visual Mode
- Restructure install section into a split primary card with the
  recommended path on the left and other install methods on the right
- Drop the prefix toggle UI; bundle name is now baked into data-bundle
- Balance the Stay updated step as paired Substack iframe + X follow card
  with matching height, border, and treatment
- Pair Changelog and FAQ side-by-side on desktop with a centered divider
  and shared border-top; section nav highlights both when in view
- Tone down the Visual Mode demo by removing side-tab borders, stacked
  card icons, and tiny body text so the overlay reads cleanly
- Refine the Chrome extension callout: drop the pill badge, use an
  editorial eyebrow above the title, enlarge the thumbnail
- Exclude private evals/ directory from version control
2026-04-07 18:37:08 -07:00
Paul BakausandClaude Opus 4.6 03a4433dcc Restructure narrative: Foundation, Language, Antidote, Visual Mode
Major site restructure reflecting Impeccable's expanded value prop:
- 01 The Foundation: 7 design dimensions, 212 guidelines grid
- 02 The Language: merged periodic table + Commands in Action
- 03 The Antidote: moved from position 1, anti-patterns + gallery
- 04 Visual Mode: live iframe embed of detection overlay demo
- Composite demo page combining purple gradients + side-tab cards
- Updated hero copy (212 guidelines, 22 commands)
- 7-item sticky nav, backward-compat anchor aliases

Detection overlay improvements:
- Staggered entrance animation (80ms per element)
- Banner slides in from top
- Skip body/html from overlay targeting (fixes scrollbar bug)
- Banner overflow: hidden + maxWidth: 100vw
- CLAUDE.md: document that browser script is generated, never edit directly

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 19:56:29 -07:00
Paul BakausandClaude Opus 4.6 3f7b5fd8bf Redesign Antidote section: card stack gallery, tabbed patterns, new skills
Replace the sliding accordion with a 3D card stack for Gallery of Shame
(bottom-right deck offset with scroll/button nav). Patterns now use clean
pill tabs with single-column Don't/Do layout in a white container.

Also scaffolds two new skills: /validate (fast visual validation after UI
changes) and /craft (guided feature design through user interview).

Fixes detection count from 25 to 24, changes badge from "Deterministic"
to "New!".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 09:59:11 -07:00
Paul BakausandClaude Opus 4.6 bdc23f02c7 Redesign Antidote section: horizontal disclosure, gallery sidebar, detection callout
- Replace tabbed pattern viewer with animated horizontal disclosure
  (inspired by jh3y/XJWNMOO): CSS Grid column transitions, hover to
  expand, rotated vertical labels, icon anchored at bottom
- Don't/Do toggle in each panel (defaults to Don't)
- Gallery of Shame as 2-column thumbnail sidebar beside the disclosure
- Detection callout as horizontal strip below
- Responsive: stacks at 1060px, gallery becomes 3-col grid
- Remove all em dashes from anti-pattern text (AI slop tell)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 16:52:11 -07:00
Paul BakausandClaude Opus 4.6 685728b992 Redesign install section as two-step flow with Substack newsletter
Restructure the Install section into a "Get Started" two-step flow:
1. Install the skills (npx as primary, alternatives collapsible)
2. Stay up to date (embedded Substack subscribe form)

- Elevate npx command as the sole primary install method
- Collapse Claude Code marketplace and manual ZIP into expandable alternatives
- Replace hidden prefix toggle with prominent radio card selector
- Download button dynamically updates label based on prefix choice
- Add Substack newsletter embed (impeccablestyle.substack.com)
- Add newsletter link to footer alongside blog link
- Normalize button styles for consistency (square corners for actions)
- Add newsletter icon assets (SVG + PNG) for Substack branding

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-27 13:03:30 -07:00
Paul BakausandClaude Opus 4.6 8d1937d3c9 Homepage UX improvements from design critique
- Add floating bottom section nav (appears after hero, hides at footer)
- Fix hero split comparison to default 50/50 instead of 70/30
- Remove duplicate "Works with" badges from Install section
- Periodic table: restore compact elements, add inline hover tooltips
- Truncate command descriptions in Commands section for scannability
- Collapse older changelog entries behind "View older releases"
- Add GitHub star count (13.3k) next to repo link
- Fix meta theme-color to match light mode
- Reduce hero top padding, update section 03 subtitle
- Clean up footer: remove redundant tagline and anchor links
- Fix divider line accumulation in changelog and FAQ sections
- Center glass terminal vertically in viewport

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 19:22:12 -07:00
Paul BakausandClaude Opus 4.6 6ca80f81a1 Harden pattern rendering and clipboard in app.js
Simplified to substantive changes only (no whitespace reformatting):
- Add escapeHtml() for API-derived text in pattern tab/panel rendering
- Add CSS.escape() + null guard for tab panel selector lookup
- Add clipboard fallback for non-HTTPS / older browsers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 16:02:40 -07:00
everforge ca43d5ccf7 Escape API-driven text before injecting it into tab/panel markup to reduce XSS risk, and add a robust clipboard fallback plus safer tab panel selection for edge-case category names. 2026-03-24 09:58:59 -05:00
Paul BakausandClaude Opus 4.6 ee7eeae301 Restore prefix toggle for i- prefixed skill bundles
Re-adds the toggle in the install section that lets users download bundles
with all user-invokable skills prefixed with i- (e.g. /i-audit) to avoid
naming conflicts. Build now produces both unprefixed and prefixed variants
for all providers and universal ZIP.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 10:04:53 -08:00
Paul BakausandClaude Opus 4.6 0981be5ba5 Universal install flow, merge Copilot/Antigravity, remove prefix toggle (v2.1.0)
- Merge Copilot & Antigravity into single agents transform (.agents/skills/)
- Remove prefix toggle and prefixed build pass (6 ZIPs → 6, down from 12)
- Add universal ZIP assembling all 5 provider directories
- Redesign install section with glass terminal UI (npx, plugin, ZIP)
- Fix Claude Code command to valid /plugin marketplace add
- Fix Antigravity logo to antigravity.google
- Rename "AI tool"/"AI coding tools" → "AI harness"/"AI harnesses" throughout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 14:41:16 -08:00
Paul BakausandClaude Opus 4.5 067eb4f235 Address HN feedback: remove dark mode, case studies, simplify support
- Remove dark mode toggle and all dark theme CSS
- Remove case studies/before-after section (controversial examples)
- Simplify support section to single "buy me a coffee" button
- Fix hero and antidote section padding to align with other sections
- Use overflow-x: clip instead of hidden to preserve position:sticky

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 09:58:00 -08:00
Paul BakausandClaude Opus 4.5 6b77213f91 Redesign hero, add theme toggle, fix dark mode
- Remove GPU-intensive shader from hero section
- Combine hero with problem section for immediate impact
- Add before/after demo directly in first viewport
- Move "works with" logos inline with CTA
- Remove redundant "Common AI defaults" tags

- Add three-way theme toggle (light/system/dark)
- Persist theme preference to localStorage
- Position toggle in bottom-right corner

- Fix dark mode throughout:
  - Update glass terminal and source window backgrounds
  - Add CSS custom properties for framework category colors
  - Muted dark backgrounds with brighter text for cards

- Replace smooth scroll with instant jump for anchor links
- Remove Lenis smooth scroll library dependency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-11 14:37:46 -08:00
Paul BakausandClaude Opus 4.5 79d06b61ab Add Claude Code plugin marketplace support
- Create .claude-plugin/marketplace.json and plugin.json for marketplace install
- Add install command UI to website download card
- Update .gitignore to ignore entire dist/ folder (generated files)
- Remove tracked dist/ files from repository

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-09 14:24:53 -08:00
Paul BakausandClaude Opus 4.5 3083f8addc Add prefixed command option to avoid conflicts
Users can now toggle "Prefix commands with /i-" in the download section
to get bundles with all commands prefixed (e.g., /i-audit instead of /audit).
This helps avoid conflicts with existing custom commands.

Build system changes:
- Transformers now accept optional prefix/outputSuffix parameters
- Build generates both unprefixed and i-prefixed variants
- ZIP bundles created for both variants

UI changes:
- Add toggle switch to download section
- Toggle controls which bundle variant gets downloaded
- Styled to match existing design language

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 20:06:36 -08:00
Paul BakausandClaude Opus 4.5 af21bf2d34 Add tabbed case studies, CLAUDE.md, and various improvements
- Convert "See It In Action" section to tabbed interface for space efficiency
- Add CLAUDE.md with project instructions for CSS build process
- Update README with additional documentation
- Enhance glass terminal component
- Add new API handlers and server routes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 18:08:04 -08:00
Paul BakausandClaude Opus 4.5 97c83fc51a Add animated mesh gradient hero with overlay content
- Add @paper-design/shaders for WebGL mesh gradient effect
- Create hero-shader.js with liquid ink gradient (grayscale palette)
- Add overlay content: title, tagline, and CTA on shader
- Update hero section structure and styling
- Fix accessibility: gallery dot buttons, toggle ARIA attributes
- Fix undefined --color-terracotta CSS variable
- Update distribution structure for Codex/Cursor skills

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 17:46:49 -08:00
Paul BakausandClaude Opus 4.5 ecc4857204 Harden accessibility and add resilience improvements
- Add skip-to-content link for keyboard navigation (WCAG 2.4.1)
- Add ARIA labels to download buttons and periodic table elements
- Convert periodic table from divs to semantic buttons with keyboard support
- Add focus-visible styles to all interactive elements
- Implement WAI-ARIA tabs pattern for pattern categories with arrow key nav
- Add global prefers-reduced-motion support in CSS and JavaScript
- Fix touch gesture trapping in split-compare (allows vertical scroll)
- Add error states with retry button for API failures
- Add underlines to links for non-color identification (WCAG 1.4.1)
- Respect reduced motion preference in Lenis smooth scroll and hero canvas

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-16 14:02:30 -08:00
Paul BakausandClaude Opus 4.5 5d65154dee Fix: Restore public directory from accidental regression
Commit 3d9f4ae accidentally reverted public/app.js and public/css/main.css
(plus other files) to old versions. This broke the site because:
- app.js imported from deleted files (commands.js, skills.js)
- main.css lost 1200+ lines of Renaissance redesign (split comparison, etc.)

Restored from commit 343e342 which had the working frontend.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-16 13:38:19 -08:00
Paul BakausandClaude Opus 4.5 3d9f4ae5df Fill in all sub-skill reference files with non-obvious design guidance
- typography.md: vertical rhythm math, modular scale, distinctive fonts, font loading
- color-and-contrast.md: OKLCH, tinted grays, gray-on-color warning, pure gray/black
- motion-design.md: quart/quint/expo curves, bounce/elastic warning, stagger formula
- spatial-design.md: 4pt base, gap over margin, card restraint, no nested cards
- responsive-design.md: content-driven breakpoints, clamp formula, pointer queries
- interaction-design.md: focus-visible, optimistic updates, inert/popover APIs
- ux-writing.md: button labels, error formula, empty states, redundant copy

Updated patterns.md with:
- Pure gray warning (not just black/white)
- Bounce/elastic easing anti-pattern
- Redundant copy anti-pattern

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-16 10:34:42 -08:00
Paul BakausandClaude Opus 4.5 343e342d52 Add periodic table visualization and URL hash tracking
- Replace subway map with periodic table of commands
- Info panel shows command details on hover
- Click element to jump to command in Commands section
- URL hash updates as you scroll between sections
- Direct linking to sections works
- Fix spacing issues in solution section

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-15 18:27:52 -08:00
Paul Bakaus 6987e6e160 more fixes 2025-12-15 16:55:21 -08:00
Paul BakausandClaude Opus 4.5 2181137d04 Consolidate skills + add patterns source file
Major changes:
- Consolidate 8 design skills into single frontend-design skill with 7 reference files
- Add source/patterns.md as single source of truth for patterns/antipatterns
- Patterns are merged into skill during build, served via API for website
- Website now dynamically renders both "What TO Do" and "What NOT to Do" sections
- Update build system to handle directory-based skills with references
- Add /api/patterns endpoint to server
- Refactor website with new Antidote section layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-15 14:08:30 -08:00
Paul Bakaus 1bdb3ea17a Redesign website with interactive demos and improved layout
- Add interactive before/after demos for all skills (UX Writing, Spatial Design, Motion Design, Typography, Interaction Design, Color & Contrast, Responsive Design)
- Implement tabbed demo navigation for skills with multiple examples
- Refactor app.js into modular JS files (skills.js, commands.js, data.js, skill-demos.js, command-demos.js, demo-toggles.js)
- Add new CSS modules (skill-demos.css, workflow.css, problem-section.css, solution-section.css)
- Redesign commands section with sidebar nav matching skills layout
- Replace large download buttons with compact icon buttons
- Fix gray-on-pink color clashing throughout UI
- Remove frontend-design skill (Anthropic's work, not ours)
- Format skill names properly (e.g., 'UX Writing' not 'ux-writing')
- Remove redundant 'Combines Well With' from skills
- Add 'The Problem' and 'The Solution' sections to homepage
- Various CSS fixes for buttons, backgrounds, and spacing
2025-12-06 12:33:00 -08:00
Paul Bakaus 89d179143b stubs and website 2025-11-16 18:52:23 -08:00