The typeset skill universally recommended fluid sizing via clamp(),
but no major app design system (Material, Polaris, Primer, Carbon)
uses fluid type in product UI. Now recommends fixed rem scales for
app UIs and reserves fluid type for marketing/content page headings.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The divider uses a fixed CSS angle (skewX(-10deg)) but the clip-path
mask used a fixed percentage offset (skewOffset=8), which only matches
at one specific aspect ratio. Now computes skewOffset dynamically from
the container's actual dimensions via ResizeObserver.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Install section tip now mentions re-running the same command to update
- New FAQ entry: "How do I update to the latest version?" covering
npx skills, Claude Code plugin marketplace, and manual ZIP
- Notes that .impeccable.md is preserved across updates
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New in v1.5.0:
- 3 new skills: /typeset, /arrange, /overdrive (beta)
- Shared Context Gathering Protocol with .impeccable.md
- teach-impeccable writes provider-agnostic context
- Deep linking to commands (#cmd-overdrive etc.)
- JS-powered demo infrastructure with live laser signature
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Starts the response with a distinctive speed-line banner
to set the tone for the skill.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new mandatory sections in the skill:
1. Propose Before Building — must present 2-3 directions with
trade-offs and get user confirmation before writing code. This
skill has the highest misfire potential.
2. Iterate with Browser Automation — must use browser tools to
visually verify effects and iterate. Complex effects never work
on the first try.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Skill changes:
- Remove real-time collaboration section (product decision, not UI)
- Remove service workers / offline-first (product decision)
- Remove SharedArrayBuffer (too niche)
- Replace "application architecture" section with "performance-critical
UI" — focused on making existing features feel fast
- Add explicit note: this skill enhances how UI FEELS, not what a
product DOES
Beta label:
- Add betaCommands list to data.js
- Show BETA badge on /overdrive in command palette
- Show β symbol on periodic table element
- Show BETA badge on cheatsheet page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Typeset: make the before worse (all text same size/color = no
hierarchy) and the after more dramatic (bigger heading, more size
contrast). The transformation should be instantly visible on hover.
Arrange: fix heading split (eyebrow+heading was a typeset change,
not arrange) — keep it as a single heading to stay on-brand.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Demo:
- Laser-etched "Paul Bakaus" signature drawn in real-time on dark
surface, adapted from pbakaus/shaders laser-precision
- Two-canvas architecture: persistent burn canvas + cleared-per-frame
spark overlay to prevent pixel accumulation
- Smooth quadraticCurveTo rendering for fluid signature strokes
- Sparks with motion trails, multi-layer tip glow
Infrastructure:
- Add init() support for command demos — JS can now execute after
demo HTML is inserted into the DOM
- Fix split-compare retriggerAnimations to not destroy canvas elements
(clone-and-replace for CSS-only demos, individual retrigger when
canvas is present)
- Add deep linking to commands (#cmd-overdrive etc.) with hash
tracking and initial load support
- Remove auto-#hero hash — hero is the default state
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The demo must be purely visual (hover slider reveals after state,
no clicking). New demo shows standard rectangular card vs organic
blob-shaped composition — the visual difference is instant and
communicates "beyond normal CSS" without animation or interaction.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The original was an effects-only skill biased toward creative
portfolios and visual spectacle. The rewrite addresses:
1. Scope: now covers ALL forms of technical ambition — performance
(virtual scrolling, WASM, Web Workers), interaction patterns
(View Transitions on dialogs, spring physics), real-time collab
(WebSockets, SharedArrayBuffer), and data visualization — not
just shaders and particles.
2. Browser support: removed Houdini Paint API (Chromium-only),
removed navigator.vibrate() (Safari never shipped, Firefox
dropped), added support notes for each technology tier.
3. Bias corrections: removed creative-portfolio-only framing,
removed "pick ONE hero moment" dogma, added examples for
functional UI (tables, forms, dialogs) and app architecture.
4. Structure: organized toolkit by what you're trying to achieve
(make transitions cinematic, push performance boundaries) not
by technology name.
5. Demo: replaced purple gradient AI slop with a structural
before/after showing view-transition-name on project cards.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New skill that pushes interfaces past conventional limits with
bleeding-edge browser APIs: WebGPU shaders, scroll-driven animations,
View Transitions, generative art, spring physics, and more.
Key design decisions:
- Strong "when to use / when not to" guardrails
- Progressive enhancement is non-negotiable
- "Pick ONE hero moment" philosophy — restraint in choosing where
- The extraordinary/gimmicky line defined explicitly
- prefers-reduced-motion respect required
Also updates all counts to 20 commands across website, docs, and
plugin metadata.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace prescriptive 4pt px grid with flexible guidance (framework
scales, rem tokens, custom systems — consistency matters, not values)
- Add Flex vs Grid guidance — don't default to Grid when Flex is simpler
- Soften hierarchy advice: fewest dimensions needed, not "combine all"
- Remove margin-left optical trick (confusing, too niche)
- Remove touch target advice (belongs in /adapt and /audit)
- Add qualifier to icon centering (only adjust if confident)
- Fix position hierarchy to be about reading flow awareness, not rules
- Change hero metric from NEVER to nuanced DON'T (legitimate for real
data, problematic as default template)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add to data.js (process steps, categories, relationships)
- Add to framework-viz.js (periodic table symbols and numbers)
- Create before/after demos for both commands
- Update command count 17→19 across all locations:
index.html, cheatsheet.html, README, NOTICE, AGENTS,
plugin.json, marketplace.json
- Add critique→typeset/arrange in relationship flow
- Add "Adding New Skills" checklist to CLAUDE.md so future
skill additions don't miss any locations
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two new skills that expose frontend-design's typography and spatial
design references as actionable, diagnostic workflows:
- /typeset: assess and improve font choices, hierarchy, sizing, weight
consistency, and readability (closes#26)
- /arrange: assess and improve layout, spacing, visual rhythm, and
grid structure
Both follow the established skill pattern (assess → plan → execute →
verify) with MANDATORY PREPARATION and context gathering.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The AI was inferring context from the codebase instead of running
teach-impeccable on cold start. Two changes:
1. Protocol in frontend-design now explicitly says "you cannot infer
context by reading the codebase" and marks teach-impeccable as
REQUIRED, not just suggested
2. Every skill's MANDATORY PREPARATION now reinforces: "if no design
context exists yet, you MUST run teach-impeccable first"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Normalize already has its own "Discover the design system" step in
its Plan section that handles this. No need to duplicate it in the
preparation block.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
"What's essential vs nice-to-have" is product prioritization, not
design context. The protocol already covers audience and use cases.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Moves the protocol from a separate reference file directly into
frontend-design's main SKILL.md to avoid two-level indirection
(skill → frontend-design → reference file) that could cause the
AI to miss it. Also fixes leftover "shipping timeline" in the
built polish output.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Centralizes the duplicated ~15-line MANDATORY PREPARATION blocks from
10 skills into a single shared reference file in frontend-design. Since
all skills already depend on frontend-design, the protocol is
automatically available without build system changes.
Key changes:
- New reference: frontend-design/reference/context-gathering.md with
3-tier gathering: check instructions → check .impeccable.md → auto-
invoke teach-impeccable
- teach-impeccable now writes to .impeccable.md (provider-agnostic),
optionally also to the provider config file
- 8 existing MANDATORY PREPARATION blocks replaced with 1-line pointers
- 4 skills that lacked context gathering now have it (adapt, clarify,
polish, normalize)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
critique:
- Add MANDATORY PREPARATION block with context gathering and
{{ask_instruction}} — it was the only skill with a MANDATORY
PREPARATION section in other skills that lacked one
- Enforce frontend-design skill loading with "Do NOT proceed until..."
onboard:
- Add MANDATORY PREPARATION block — same gap as critique, onboard
jumped straight to assessment without gathering context first
- Add frontend-design skill loading
delight:
- Replace cliched loading messages ("Herding pixels", "Teaching robots
to dance", "Consulting the magic 8-ball") with product-specific
examples — these are exactly the kind of AI-generated copy the
suite's own anti-slop philosophy warns against
- Add explicit WARNING against these cliched patterns
- Change "Checkboxes that bounce" to "scale pulse" — bounce easing
contradicts the suite's consistent stance against bounce/elastic
curves (documented in motion-design reference and every skill
that mentions easing)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The contributor guide had fallen behind the codebase in several ways:
- Documented source/commands/ which no longer exists (skills-only now)
- Only described 4 providers (Cursor, Claude Code, Gemini, Codex) —
added Agents, Kiro, OpenCode, Pi
- Cursor described as "no frontmatter support" but it now uses Agent
Skills with YAML frontmatter
- "What Gets Generated" diagram showed old command-based output paths
- Build system described as "single ~170-line script" but is now modular
(scripts/lib/transformers/*.js)
- Referenced dist/ as committed but it's now gitignored
- Key Functions list missing 4 transformer functions
- Source Format missing user-invokable and args fields
- Referenced npm instead of bun in troubleshooting
- Added OpenCode provider support
- Added Pi provider support
- Recategorized /onboard as an enhancement command
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Project name was "impeccable-style" but the actual CF Pages project
is "impeccable", causing deploy failures.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Downloaded all provider logos locally to public/assets/ to eliminate
external dependency on logo.dev API, which was hitting rate limits.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add first-class Pi (pi.dev) provider with transformer, tests, and build integration
- Fix CODEOWNERS username (@paulbakaus → @pbakaus)
- Add missing providers to issue/PR templates (Copilot, Kiro, OpenCode, Pi)
- Add Pi and OpenCode logos to homepage hero and install sections
- Move /onboard from "system" to "enhancement" category
- Update README and DEVELOP.md with all supported providers
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Created opencode transformer in scripts/lib/transformers/opencode.js
- Added opencode placeholders to scripts/lib/utils.js
- Integrated opencode into build.js and universal assembly
- Updated README.md and scripts/lib/transformers/index.js with OpenCode support
Paul BakausandClaude Opus 4.6
AliFozooni
Rahul JordasheandClaude Opus 4.6
GlacierPhonk
Dylan
hamshad
Vaishnav Gunjari