Add CLAUDE.md with standing frontend design instructions#3
Open
lukej01 wants to merge 12 commits into
Open
Conversation
Encodes all principles from the Frontend Design Toolkit as operating instructions: aesthetic-first workflow, OKLCH design tokens, named aesthetic presets, motion/a11y rules, polish pipeline, and decision matrices for theming, testing, and docs currency. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Added missing sections: UI/UX Intelligence (Gestalt, Fitts, Hick's Law), Framework Skills (React 19/18, Tailwind v4, shadcn), Deploy & Preview, Recommended Stacks, and full Motion Audit Checklist. Now mirrors the global ~/.claude/CLAUDE.md so instructions apply in every chat and repo. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Removed verbose prose, redundant install commands, and bloated examples while keeping all 10 sections, decision matrices, and every actionable rule. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Rebuilt around producing mind-blowing UI: mesh gradients, glow effects, magnetic buttons, scroll-triggered reveals, tilt cards, text scramble, parallax, cursor trails, gradient text, fluid typography. Includes a done-checklist: would this stop someone scrolling? https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Now targets dark luxury WebGL aesthetic: particle systems, mouse-reactive 3D depth, scroll-driven animations, custom cursors, Lenis smooth scroll, magnetic buttons, spotlight glow, cinematic load sequences, grain texture, glass cards. Checklist: would this win Awwwards SOTD? https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Corrected the entire direction — site is warm editorial luxury (sand/cream bg, thin serif, floating tilted image cards) not dark/cyberpunk. Now encodes: Cormorant Garamond pairing, floating card parallax+mouse system, word-by-word reveals, Lenis smooth scroll, mix-blend-mode cursor, magnetic buttons, warm OKLCH palette, grain texture, timed load sequence. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Obsidian Assembly was the quality bar not the style to copy. Now encodes the craft (smooth scroll, word reveals, cursor lag, parallax depth, hover reactions, magnetic buttons, OKLCH tokens) applied to whatever aesthetic fits each project. Aesthetic chosen per project from 12 named options. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Removed mandatory effect checklists. Now sets the standard (Awwwards level) and lists effects as inspiration to draw from, not requirements. Each project chooses its own approach — the quality is constant, the execution varies. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Hard NEVER/ALWAYS rules enforce the quality standard. Five quality tests must pass before anything ships. Effects list stays as creative inspiration to pick from, not a checklist. Aesthetic chosen per project. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
Stripped all code blocks, verbose prose, redundant words. Same strict NEVER/ALWAYS rules, 5 quality tests, 12 aesthetics, full effects inspiration list — compressed to minimum readable form. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
When asked for specific effects, execute exactly as requested at the same standard. No effect is off-limits across CSS/JS/Canvas/WebGL/SVG. Vague requests get a bold creative choice. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
When asked for UI, pick an aesthetic and go. Vague requests = creative freedom. Never stall with clarifying questions. https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Encodes all principles from the Frontend Design Toolkit as operating instructions: aesthetic-first workflow, OKLCH design tokens, named aesthetic presets, motion/a11y rules, polish pipeline, and decision matrices for theming, testing, and docs currency.
https://claude.ai/code/session_017ggBPbki5bwiHpFnqpSZ5U