@cubis/foundry 0.3.71 → 0.3.72

package/workflows/powers/frontend-design/POWER.md

@@ -2,420 +2,221 @@
 ---
 inclusion: manual
 name: frontend-design
-description: Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
-allowed-tools: Read, Write, Edit, Glob, Grep, Bash
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use when building pages, dashboards, or applications. Generates polished code that avoids generic AI aesthetics.
+license: Apache-2.0
+metadata:
+  author: cubis-foundry
+  version: "3.0"
+compatibility: Claude Code, Codex, GitHub Copilot, Gemini CLI
 ---
 
-# Frontend Design System
+# Frontend Design
 
-> **Philosophy:** Every pixel has purpose. Restraint is luxury. User psychology drives decisions.
-> **Core Principle:** THINK, don't memorize. ASK, don't assume.
+## Purpose
 
----
-
-## 🎯 Selective Reading Rule (MANDATORY)
-
-**Read REQUIRED files always, OPTIONAL only when needed:**
-
-| File | Status | When to Read |
-|------|--------|--------------|
-| [ux-psychology.md](ux-psychology.md) | 🔴 **REQUIRED** | Always read first! |
-| [color-system.md](color-system.md) | ⚪ Optional | Color/palette decisions |
-| [typography-system.md](typography-system.md) | ⚪ Optional | Font selection/pairing |
-| [visual-effects.md](visual-effects.md) | ⚪ Optional | Glassmorphism, shadows, gradients |
-| [animation-guide.md](animation-guide.md) | ⚪ Optional | Animation needed |
-| [motion-graphics.md](motion-graphics.md) | ⚪ Optional | Lottie, GSAP, 3D |
-| [decision-trees.md](decision-trees.md) | ⚪ Optional | Context templates |
-
-> 🔴 **ux-psychology.md = ALWAYS READ. Others = only if relevant.**
-
----
-
-## 🔧 Runtime Scripts
-
-**Execute these for audits (don't read, just run):**
-
-| Script | Purpose | Usage |
-|--------|---------|-------|
-| `scripts/ux_audit.py` | UX Psychology & Accessibility Audit | `python scripts/ux_audit.py <project_path>` |
-
----
-
-## ⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
-
-> **STOP! If the user's request is open-ended, DO NOT default to your favorites.**
-
-### When User Prompt is Vague, ASK:
-
-**Color not specified?** Ask:
-> "What color palette do you prefer? (blue/green/orange/neutral/other?)"
-
-**Style not specified?** Ask: 
-> "What style are you going for? (minimal/bold/retro/futuristic/organic?)"
-
-**Layout not specified?** Ask:
-> "Do you have a layout preference? (single column/grid/asymmetric/full-width?)"
-
-### ⛔ DEFAULT TENDENCIES TO AVOID (ANTI-SAFE HARBOR):
-
-| AI Default Tendency | Why It's Bad | Think Instead |
-|---------------------|--------------|---------------|
-| **Bento Grids (Modern Cliché)** | Used in every AI design | Why does this content NEED a grid? |
-| **Hero Split (Left/Right)** | Predictable & Boring | How about Massive Typography or Vertical Narrative? |
-| **Mesh/Aurora Gradients** | The "new" lazy background | What's a radical color pairing? |
-| **Glassmorphism** | AI's idea of "premium" | How about solid, high-contrast flat? |
-| **Deep Cyan / Fintech Blue** | Safe harbor from purple ban | Why not Red, Black, or Neon Green? |
-| **"Orchestrate / Empower"** | AI-generated copywriting | How would a human say this? |
-| Dark background + neon glow | Overused, "AI look" | What does the BRAND actually need? |
-| **Rounded everything** | Generic/Safe | Where can I use sharp, brutalist edges? |
+Guide creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Synthesize design thinking, visual direction, and implementation into working code with exceptional attention to aesthetic details, accessibility, and creative choices. Serve both technical and non-technical users with clear communication about design decisions.
 
-> 🔴 **"Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."**
+## When to Use
 
----
-
-## 1. Constraint Analysis (ALWAYS FIRST)
-
-Before any design work, ANSWER THESE or ASK USER:
-
-| Constraint | Question | Why It Matters |
-|------------|----------|----------------|
-| **Timeline** | How much time? | Determines complexity |
-| **Content** | Ready or placeholder? | Affects layout flexibility |
-| **Brand** | Existing guidelines? | May dictate colors/fonts |
-| **Tech** | What stack? | Affects capabilities |
-| **Audience** | Who exactly? | Drives all visual decisions |
-
-### Audience → Design Approach
-
-| Audience | Think About |
-|----------|-------------|
-| **Gen Z** | Bold, fast, mobile-first, authentic |
-| **Millennials** | Clean, minimal, value-driven |
-| **Gen X** | Familiar, trustworthy, clear |
-| **Boomers** | Readable, high contrast, simple |
-| **B2B** | Professional, data-focused, trust |
-| **Luxury** | Restrained elegance, whitespace |
-
----
-
-## 2. UX Psychology Principles
-
-### Core Laws (Internalize These)
+- Building web components, pages, artifacts, posters, or applications
+- Designing layouts, choosing visual direction, or selecting typography
+- Creating dashboards, landing pages, marketing sites, or SaaS interfaces
+- Reviewing interface clarity, visual hierarchy, or interaction patterns
+- Styling or beautifying existing web UI that looks generic or templated
+- Making color system decisions (palettes, dark mode, contrast)
+- Adding motion, animation, or micro-interactions to an interface
+- Designing component states (hover, active, disabled, loading, error, empty)
 
-| Law | Principle | Application |
-|-----|-----------|-------------|
-| **Hick's Law** | More choices = slower decisions | Limit options, use progressive disclosure |
-| **Fitts' Law** | Bigger + closer = easier to click | Size CTAs appropriately |
-| **Miller's Law** | ~7 items in working memory | Chunk content into groups |
-| **Von Restorff** | Different = memorable | Make CTAs visually distinct |
-| **Serial Position** | First/last remembered most | Key info at start/end |
+## Instructions
 
-### Emotional Design Levels
+### Step 1 — Understand the Context
 
-```
-VISCERAL (instant)  → First impression: colors, imagery, overall feel
-BEHAVIORAL (use)    → Using it: speed, feedback, efficiency
-REFLECTIVE (memory) → After: "I like what this says about me"
-```
+Before writing code, ask or infer:
 
-### Trust Building
+1. **Purpose** — What problem does this interface solve? Who uses it?
+2. **Brand** — Is there an existing brand system, style guide, or named brand (e.g. "Anthropic", client guidelines, hex palette) to follow? If yes, load `references/brand-presets.md` and use `/brand` to apply it before choosing aesthetic direction.
+3. **Tone** — If no brand system exists, pick a bold aesthetic direction: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. There are many flavors. Pick one and commit.
+4. **Constraints** — Technical requirements (framework, performance, a11y level, browser support).
+5. **Differentiation** — What makes this UNFORGETTABLE? What's the one thing someone will remember?
 
-- Security indicators on sensitive actions
-- Social proof where relevant
-- Clear contact/support access
-- Consistent, professional design
-- Transparent policies
+Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
 
----
-
-## 3. Layout Principles
-
-### Golden Ratio (φ = 1.618)
-
-```
-Use for proportional harmony:
-├── Content : Sidebar = roughly 62% : 38%
-├── Each heading size = previous × 1.618 (for dramatic scale)
-├── Spacing can follow: sm → md → lg (each × 1.618)
-```
-
-### 8-Point Grid Concept
+When communicating with non-technical users: explain design decisions in plain language. Say "this font pairing creates a sense of professionalism" rather than "I used a sans-serif display font with a serif body font." Show the reasoning, not the jargon.
 
-```
-All spacing and sizing in multiples of 8:
-├── Tight: 4px (half-step for micro)
-├── Small: 8px
-├── Medium: 16px
-├── Large: 24px, 32px
-├── XL: 48px, 64px, 80px
-└── Adjust based on content density
-```
+### Step 2 — Commit to a Design Direction
 
-### Key Sizing Principles
+Implement working code that is:
 
-| Element | Consideration |
-|---------|---------------|
-| **Touch targets** | Minimum comfortable tap size |
-| **Buttons** | Height based on importance hierarchy |
-| **Inputs** | Match button height for alignment |
-| **Cards** | Consistent padding, breathable |
-| **Reading width** | 45-75 characters optimal |
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
 
----
+Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
 
-## 4. Color Principles
+### Step 3 — Apply Aesthetics Guidelines
 
-### 60-30-10 Rule
+For each domain, follow the DO/DON'T guidance below. Load the corresponding reference file when deeper expertise is needed.
 
-```
-60% → Primary/Background (calm, neutral base)
-30% → Secondary (supporting areas)
-10% → Accent (CTAs, highlights, attention)
-```
+**Typography** → see `references/typography.md`
 
-### Color Psychology (For Decision Making)
+- DO: Use a modular type scale with fluid sizing (clamp)
+- DO: Vary font weights and sizes to create clear visual hierarchy
+- DO: Choose fonts that are beautiful, unique, and interesting — pair a distinctive display font with a refined body font
+- DON'T: Use overused fonts — Inter, Roboto, Arial, Open Sans, system defaults
+- DON'T: Use monospace typography as lazy shorthand for "technical/developer" vibes
+- DON'T: Put large icons with rounded corners above every heading
 
-| If You Need... | Consider Hues | Avoid |
-|----------------|---------------|-------|
-| Trust, calm | Blue family | Aggressive reds |
-| Growth, nature | Green family | Industrial grays |
-| Energy, urgency | Orange, red | Passive blues |
-| Luxury, creativity | Deep Teal, Gold, Emerald | Cheap-feeling brights |
-| Clean, minimal | Neutrals | Overwhelming color |
+**Color & Theme** → see `references/color-and-contrast.md`
 
-### Selection Process
+- DO: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes
+- DO: Tint neutrals toward the brand hue for subconscious cohesion
+- DON'T: Use gray text on colored backgrounds — use a shade of the background color instead
+- DON'T: Use pure black (#000) or pure white (#fff) — always tint; pure values never appear in nature
+- DON'T: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
+- DON'T: Default to dark mode with glowing accents — it looks "cool" without requiring actual design decisions
 
-1. **What's the industry?** (narrows options)
-2. **What's the emotion?** (picks primary)
-3. **Light or dark mode?** (sets foundation)
-4. **ASK USER** if not specified
+**Layout & Space** → see `references/spatial-design.md`
 
-For detailed color theory: [color-system.md](color-system.md)
+- DO: Create visual rhythm through varied spacing — tight groupings, generous separations
+- DO: Use fluid spacing with clamp() that breathes on larger screens
+- DO: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis
+- DON'T: Wrap everything in cards — not everything needs a container
+- DON'T: Nest cards inside cards — visual noise, flatten the hierarchy
+- DON'T: Use identical card grids — same-sized cards with icon + heading + text, repeated endlessly
+- DON'T: Center everything — left-aligned text with asymmetric layouts feels more designed
+- DON'T: Use the same spacing everywhere — without rhythm, layouts feel monotonous
 
----
+**Visual Details**
 
-## 5. Typography Principles
+- DO: Use intentional, purposeful decorative elements that reinforce brand
+- DON'T: Use glassmorphism everywhere — blur effects and glass cards used decoratively rather than purposefully
+- DON'T: Use rounded rectangles with generic drop shadows — safe, forgettable
+- DON'T: Use sparklines as decoration — tiny charts that convey nothing meaningful
+- DON'T: Use modals unless there's truly no better alternative
 
-### Scale Selection
+**Motion** → see `references/motion-design.md`
 
-| Content Type | Scale Ratio | Feel |
-|--------------|-------------|------|
-| Dense UI | 1.125-1.2 | Compact, efficient |
-| General web | 1.25 | Balanced (most common) |
-| Editorial | 1.333 | Readable, spacious |
-| Hero/display | 1.5-1.618 | Dramatic impact |
+- DO: Use motion to convey state changes — entrances, exits, feedback
+- DO: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
+- DO: For height animations, use grid-template-rows transitions instead of animating height directly
+- DON'T: Animate layout properties (width, height, padding, margin) — use transform and opacity only
+- DON'T: Use bounce or elastic easing — they feel dated and tacky
 
-### Pairing Concept
+**Interaction** → see `references/interaction-design.md`
 
-```
-Contrast + Harmony:
-├── DIFFERENT enough for hierarchy
-├── SIMILAR enough for cohesion
-└── Usually: display + neutral, or serif + sans
-```
+- DO: Use progressive disclosure — start simple, reveal sophistication through interaction
+- DO: Design empty states that teach the interface, not just say "nothing here"
+- DO: Make every interactive surface feel intentional and responsive
+- DON'T: Repeat the same information — redundant headers, intros that restate the heading
+- DON'T: Make every button primary — use ghost buttons, text links, secondary styles; hierarchy matters
 
-### Readability Rules
+**Responsive** → see `references/responsive-design.md`
 
-- **Line length**: 45-75 characters optimal
-- **Line height**: 1.4-1.6 for body text
-- **Contrast**: Check WCAG requirements
-- **Size**: 16px+ for body on web
+- DO: Use container queries (@container) for component-level responsiveness
+- DO: Adapt the interface for different contexts — don't just shrink it
+- DON'T: Hide critical functionality on mobile — adapt the interface, don't amputate it
 
-For detailed typography: [typography-system.md](typography-system.md)
+**UX Writing** → see `references/ux-writing.md`
 
----
+- DO: Make every word earn its place
+- DON'T: Repeat information users can already see
 
-## 6. Visual Effects Principles
+### Step 4 — Run the AI Slop Test
 
-### Glassmorphism (When Appropriate)
+Before delivering, review: if you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
 
-```
-Key properties:
-├── Semi-transparent background
-├── Backdrop blur
-├── Subtle border for definition
-└── ⚠️ **WARNING:** Standard blue/white glassmorphism is a modern cliché. Use it radically or not at all.
-```
+A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
 
-### Shadow Hierarchy
+Review the DON'T guidelines above — they are the fingerprints of AI-generated work. Also check for these anti-patterns:
 
-```
-Elevation concept:
-├── Higher elements = larger shadows
-├── Y-offset > X-offset (light from above)
-├── Multiple layers = more realistic
-└── Dark mode: may need glow instead
-```
+- Bento grids (modern cliché)
+- Hero splits with image/text 50-50 (predictable)
+- Mesh/Aurora gradients (lazy atmosphere)
+- Deep cyan / fintech blue (safe harbor color)
+- Gradient text for "impact" — especially on metrics or headings
 
-### Gradient Usage
+### Step 5 — Verify Accessibility
 
-```
-Harmonious gradients:
-├── Adjacent colors on wheel (analogous)
-├── OR same hue, different lightness
-├── Avoid harsh complementary pairs
-├── 🚫 **NO Mesh/Aurora Gradients** (floating blobs)
-└── VARY from project to project radically
-```
+Do not treat visual polish as a substitute for accessibility:
 
-For complete effects guide: [visual-effects.md](visual-effects.md)
+1. Confirm color contrast ratios meet WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text)
+2. Verify all interactive elements are keyboard-navigable
+3. Add appropriate ARIA attributes where semantic HTML is insufficient
+4. Ensure motion respects `prefers-reduced-motion`
+5. Test focus states are visible and intentional
 
----
+### Step 6 — Explain Decisions to the User
 
-## 7. Animation Principles
+When delivering, explain:
 
-### Timing Concept
+- What aesthetic direction was chosen and why
+- Key design decisions the user should understand
+- What trade-offs were made (performance, browser support, complexity)
+- What to change if the user wants to adjust the direction
 
-```
-Duration based on:
-├── Distance (further = longer)
-├── Size (larger = slower)
-├── Importance (critical = clear)
-└── Context (urgent = fast, luxury = slow)
-```
+Use plain language. Avoid unexplained jargon. If the user is non-technical, lead with the visual impact and emotional tone, not the implementation details.
 
-### Easing Selection
+## Output Format
+
+Deliver:
+
+1. **Working code** — Production-grade HTML/CSS/JS, React, Vue, Svelte, or framework-specific code
+2. **Design rationale** — Brief explanation of aesthetic direction, key choices, and trade-offs
+3. **Accessibility notes** — Contrast ratios checked, keyboard navigation verified, ARIA attributes applied
+4. **Next steps** — What to iterate on, what commands to run for refinement (see Commands section)
 
-| Action | Easing | Why |
-|--------|--------|-----|
-| Entering | Ease-out | Decelerate, settle in |
-| Leaving | Ease-in | Accelerate, exit |
-| Emphasis | Ease-in-out | Smooth, deliberate |
-| Playful | Bounce | Fun, energetic |
+## References
+
+Load only what the current step needs.
+
+| File                               | Load when                                                                                                                             |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `references/typography.md`         | Task involves font selection, type scale, font loading, or text hierarchy decisions.                                                  |
+| `references/color-and-contrast.md` | Task involves palette selection, dark mode, OKLCH color, contrast ratios, or tinted neutrals.                                         |
+| `references/spatial-design.md`     | Task involves grid systems, spacing rhythm, container queries, or layout composition.                                                 |
+| `references/motion-design.md`      | Task involves animation timing, easing curves, staggered reveals, or reduced motion support.                                          |
+| `references/interaction-design.md` | Task involves form design, focus management, loading states, or progressive disclosure patterns.                                      |
+| `references/responsive-design.md`  | Task involves mobile-first design, fluid layouts, container queries, or adaptive interfaces.                                          |
+| `references/ux-writing.md`         | Task involves button labels, error messages, empty states, or microcopy decisions.                                                    |
+| `references/ux-psychology.md`      | Task involves cognitive load, decision architecture, trust building, or emotional design principles.                                  |
+| `references/brand-presets.md`      | Task involves applying existing brand guidelines, a named brand system (e.g. Anthropic), or converting a hex palette into CSS tokens. |
 
-### Performance
+## Commands
 
-- Animate only transform and opacity
-- Respect reduced-motion preference
-- Test on low-end devices
+17 specialized commands for targeted design operations. Each command focuses on a specific design concern and can be applied to a whole page or a specific element.
 
-For animation patterns: [animation-guide.md](animation-guide.md), for advanced: [motion-graphics.md](motion-graphics.md)
+| Command             | Purpose                                                                                                             |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `/audit`            | Run technical quality checks: accessibility, performance, responsive behavior                                       |
+| `/critique`         | UX design review: hierarchy, clarity, emotional resonance, user flow                                                |
+| `/normalize`        | Align with design system standards: tokens, spacing, typography consistency                                         |
+| `/polish`           | Final pass before shipping: micro-details, alignment, visual refinement                                             |
+| `/distill`          | Strip to essence: remove unnecessary complexity, simplify without losing character                                  |
+| `/clarify`          | Improve unclear UX copy: labels, instructions, error messages, empty states                                         |
+| `/optimize`         | Performance improvements: image sizes, render-blocking, bundle impact                                               |
+| `/harden`           | Error handling, i18n readiness, edge cases, defensive UI patterns                                                   |
+| `/animate`          | Add purposeful motion: transitions, micro-interactions, state changes                                               |
+| `/colorize`         | Introduce strategic color: palette refinement, accent placement, contrast fixes                                     |
+| `/bolder`           | Amplify timid designs: stronger hierarchy, more contrast, bigger gestures                                           |
+| `/quieter`          | Tone down overwhelming designs: reduce noise, increase whitespace, simplify                                         |
+| `/delight`          | Add moments of joy: easter eggs, satisfying interactions, personality                                               |
+| `/extract`          | Pull into reusable components: identify patterns, create component API                                              |
+| `/adapt`            | Adapt for different devices: responsive breakpoints, touch targets, viewport optimization                           |
+| `/onboard`          | Design onboarding flows: first-run experience, empty states, progressive disclosure                                 |
+| `/teach-impeccable` | One-time setup: gather project design context, save preferences for future sessions                                 |
+| `/brand`            | Apply or enforce a specific brand identity: convert guideline colors to CSS tokens, set typography, verify contrast |
 
----
+Usage: Most commands accept an optional argument to focus on a specific area (e.g., `/audit header`, `/polish checkout-form`).
 
-## 8. "Wow Factor" Checklist
-
-### Premium Indicators
-
-- [ ] Generous whitespace (luxury = breathing room)
-- [ ] Subtle depth and dimension
-- [ ] Smooth, purposeful animations
-- [ ] Attention to detail (alignment, consistency)
-- [ ] Cohesive visual rhythm
-- [ ] Custom elements (not all defaults)
-
-### Trust Builders
-
-- [ ] Security cues where appropriate
-- [ ] Social proof / testimonials
-- [ ] Clear value proposition
-- [ ] Professional imagery
-- [ ] Consistent design language
-
-### Emotional Triggers
-
-- [ ] Hero that evokes intended emotion
-- [ ] Human elements (faces, stories)
-- [ ] Progress/achievement indicators
-- [ ] Moments of delight
-
----
-
-## 9. Anti-Patterns (What NOT to Do)
-
-### ❌ Lazy Design Indicators
-
-- Default system fonts without consideration
-- Stock imagery that doesn't match
-- Inconsistent spacing
-- Too many competing colors
-- Walls of text without hierarchy
-- Inaccessible contrast
-
-### ❌ AI Tendency Patterns (AVOID!)
-
-- **Same colors every project**
-- **Dark + neon as default**
-- **Purple/violet everything (PURPLE BAN ✅)**
-- **Bento grids for simple landing pages**
-- **Mesh Gradients & Glow Effects**
-- **Same layout structure / Vercel clone**
-- **Not asking user preferences**
-
-### ❌ Dark Patterns (Unethical)
-
-- Hidden costs
-- Fake urgency
-- Forced actions
-- Deceptive UI
-- Confirmshaming
-
----
-
-## 10. Decision Process Summary
-
-```
-For EVERY design task:
-
-1. CONSTRAINTS
-   └── What's the timeline, brand, tech, audience?
-   └── If unclear → ASK
-
-2. CONTENT
-   └── What content exists?
-   └── What's the hierarchy?
-
-3. STYLE DIRECTION
-   └── What's appropriate for context?
-   └── If unclear → ASK (don't default!)
-
-4. EXECUTION
-   └── Apply principles above
-   └── Check against anti-patterns
-
-5. REVIEW
-   └── "Does this serve the user?"
-   └── "Is this different from my defaults?"
-   └── "Would I be proud of this?"
-```
-
----
-
-## Reference Files
-
-For deeper guidance on specific areas:
-
-- [color-system.md](color-system.md) - Color theory and selection process
-- [typography-system.md](typography-system.md) - Font pairing and scale decisions
-- [visual-effects.md](visual-effects.md) - Effects principles and techniques
-- [animation-guide.md](animation-guide.md) - Motion design principles
-- [motion-graphics.md](motion-graphics.md) - Advanced: Lottie, GSAP, SVG, 3D, Particles
-- [decision-trees.md](decision-trees.md) - Context-specific templates
-- [ux-psychology.md](ux-psychology.md) - User psychology deep dive
-
----
-
-## Related Skills
-
-| Skill | When to Use |
-|-------|-------------|
-| **frontend-design** (this) | Before coding - Learn design principles (color, typography, UX psychology) |
-| **[web-design-guidelines](../web-design-guidelines/SKILL.md)** | After coding - Audit for accessibility, performance, and best practices |
-
-## Post-Design Workflow
-
-After implementing your design, run the audit:
-
-```
-1. DESIGN   → Read frontend-design principles ← YOU ARE HERE
-2. CODE     → Implement the design
-3. AUDIT    → Run web-design-guidelines review
-4. FIX      → Address findings from audit
-```
-
-> **Next Step:** After coding, use `web-design-guidelines` skill to audit your implementation for accessibility, focus states, animations, and performance issues.
-
----
+## Examples
 
-> **Remember:** Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users. **Avoid the Modern SaaS Safe Harbor!**
+- "Build a landing page for a developer tool — make it feel premium and editorial, not like every other SaaS template."
+- "Redesign this dashboard. It looks like AI made it. Make it distinctive."
+- "/audit this page — check accessibility, responsive behavior, and performance."
+- "/critique the checkout flow — is the hierarchy clear? Does it build trust?"
+- "/polish the hero section before we ship."
+- "I need a color system for a health tech app. No fintech blue, no AI purple."
+- "/brand anthropic — apply Anthropic's brand colors and typography to this interface."
+- "Here's our brand guide with hex values. Apply it to this dashboard — /brand"
 ````