npm - @cubis/foundry - Versions diffs - 0.3.67 → 0.3.69 - Mend

@cubis/foundry 0.3.67 → 0.3.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4570) hide show

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/frontend-design/SKILL.md CHANGED Viewed

@@ -1,416 +1,213 @@
 ---
 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.
+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](references/ux-psychology.md) | 🔴 **REQUIRED** | Always read first! |
-| [color-system.md](references/color-system.md) | ⚪ Optional | Color/palette decisions |
-| [typography-system.md](references/typography-system.md) | ⚪ Optional | Font selection/pairing |
-| [visual-effects.md](references/visual-effects.md) | ⚪ Optional | Glassmorphism, shadows, gradients |
-| [animation-guide.md](references/animation-guide.md) | ⚪ Optional | Animation needed |
-| [motion-graphics.md](references/motion-graphics.md) | ⚪ Optional | Lottie, GSAP, 3D |
-| [decision-trees.md](references/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):
+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.
-| 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? |
+## When to Use
-> 🔴 **"Every 'safe' structure you choose brings you one step closer to a generic template. TAKE RISKS."**
+- 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)
----
-## 1. Constraint Analysis (ALWAYS FIRST)
-Before any design work, ANSWER THESE or ASK USER:
+## Instructions
-| 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 |
+### Step 1 — Understand the Context
-### Audience → Design Approach
+Before writing code, ask or infer:
-| 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 |
----
+1. **Purpose** — What problem does this interface solve? Who uses it?
+2. **Tone** — 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.
+3. **Constraints** — Technical requirements (framework, performance, a11y level, browser support).
+4. **Differentiation** — What makes this UNFORGETTABLE? What's the one thing someone will remember?
-## 2. UX Psychology Principles
+Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
-### Core Laws (Internalize These)
+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.
-| 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 |
+### Step 2 — Commit to a Design Direction
-### Emotional Design Levels
+Implement working code that is:
-```
-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"
-```
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
-### Trust Building
+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.
-- Security indicators on sensitive actions
-- Social proof where relevant
-- Clear contact/support access
-- Consistent, professional design
-- Transparent policies
+### Step 3 — Apply Aesthetics Guidelines
----
+For each domain, follow the DO/DON'T guidance below. Load the corresponding reference file when deeper expertise is needed.
-## 3. Layout Principles
+**Typography** → see `references/typography.md`
-### Golden Ratio (φ = 1.618)
+- 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
-```
-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)
-```
+**Color & Theme** → see `references/color-and-contrast.md`
-### 8-Point Grid Concept
+- 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
-```
-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
-```
+**Layout & Space** → see `references/spatial-design.md`
-### Key Sizing Principles
+- 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
-| 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 |
+**Visual Details**
----
+- 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
-## 4. Color Principles
+**Motion** → see `references/motion-design.md`
-### 60-30-10 Rule
+- 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
-```
-60% → Primary/Background (calm, neutral base)
-30% → Secondary (supporting areas)
-10% → Accent (CTAs, highlights, attention)
-```
+**Interaction** → see `references/interaction-design.md`
-### Color Psychology (For Decision Making)
+- 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
-| 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 |
+**Responsive** → see `references/responsive-design.md`
-### Selection Process
+- 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
-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
+**UX Writing** → see `references/ux-writing.md`
-For detailed color theory: [color-system.md](references/color-system.md)
+- DO: Make every word earn its place
+- DON'T: Repeat information users can already see
----
+### Step 4 — Run the AI Slop Test
-## 5. Typography Principles
+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.
-### Scale Selection
+A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
-| 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 |
+Review the DON'T guidelines above — they are the fingerprints of AI-generated work. Also check for these anti-patterns:
-### Pairing Concept
+- 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
-```
-Contrast + Harmony:
-├── DIFFERENT enough for hierarchy
-├── SIMILAR enough for cohesion
-└── Usually: display + neutral, or serif + sans
-```
+### Step 5 — Verify Accessibility
-### Readability Rules
+Do not treat visual polish as a substitute for accessibility:
-- **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
+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
-For detailed typography: [typography-system.md](references/typography-system.md)
+### Step 6 — Explain Decisions to the User
----
+When delivering, explain:
-## 6. Visual Effects Principles
+- 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
-### Glassmorphism (When Appropriate)
+Use plain language. Avoid unexplained jargon. If the user is non-technical, lead with the visual impact and emotional tone, not the implementation details.
-```
-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.
-```
+## Output Format
-### Shadow Hierarchy
+Deliver:
-```
-Elevation concept:
-├── Higher elements = larger shadows
-├── Y-offset > X-offset (light from above)
-├── Multiple layers = more realistic
-└── Dark mode: may need glow instead
-```
+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)
-### Gradient Usage
+## References
-```
-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
-```
+Load only what the current step needs.
-For complete effects guide: [visual-effects.md](references/visual-effects.md)
+| 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. |
----
+## Commands
-## 7. Animation Principles
-### Timing Concept
-```
-Duration based on:
-├── Distance (further = longer)
-├── Size (larger = slower)
-├── Importance (critical = clear)
-└── Context (urgent = fast, luxury = slow)
-```
-### Easing Selection
-| Action | Easing | Why |
-|--------|--------|-----|
-| Entering | Ease-out | Decelerate, settle in |
-| Leaving | Ease-in | Accelerate, exit |
-| Emphasis | Ease-in-out | Smooth, deliberate |
-| Playful | Bounce | Fun, energetic |
-### Performance
-- Animate only transform and opacity
-- Respect reduced-motion preference
-- Test on low-end devices
-For animation patterns: [animation-guide.md](references/animation-guide.md), for advanced: [motion-graphics.md](references/motion-graphics.md)
----
+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.
-## 8. "Wow Factor" Checklist
+| 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       |
-### Premium Indicators
+Usage: Most commands accept an optional argument to focus on a specific area (e.g., `/audit header`, `/polish checkout-form`).
-- [ ] 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](references/color-system.md) - Color theory and selection process
-- [typography-system.md](references/typography-system.md) - Font pairing and scale decisions
-- [visual-effects.md](references/visual-effects.md) - Effects principles and techniques
-- [animation-guide.md](references/animation-guide.md) - Motion design principles
-- [motion-graphics.md](references/motion-graphics.md) - Advanced: Lottie, GSAP, SVG, 3D, Particles
-- [decision-trees.md](references/decision-trees.md) - Context-specific templates
-- [ux-psychology.md](references/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."

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/frontend-design/commands/README.md ADDED Viewed

@@ -0,0 +1,34 @@
+# Frontend Design Commands
+17 specialized commands for targeted design operations. Each command focuses on a specific concern and can be applied to a whole page or a specific element.
+## Usage
+Most commands accept an optional argument to focus on a specific area:
+- `/audit header` — audit only the header section
+- `/polish checkout-form` — polish only the checkout form
+On Codex CLI, use prompts syntax: `/prompts:audit`, `/prompts:polish`, etc.
+## Command Index
+| Command             | Category     | Purpose                                                            |
+| ------------------- | ------------ | ------------------------------------------------------------------ |
+| `/audit`            | Quality      | Technical quality checks: a11y, performance, responsive            |
+| `/critique`         | Quality      | UX design review: hierarchy, clarity, emotional resonance          |
+| `/normalize`        | Consistency  | Align with design system tokens and standards                      |
+| `/polish`           | Refinement   | Final pass: micro-details, alignment, visual refinement            |
+| `/distill`          | Refinement   | Strip to essence: remove complexity without losing character       |
+| `/clarify`          | Content      | Improve UX copy: labels, instructions, error messages              |
+| `/optimize`         | Performance  | Performance: image sizes, render-blocking, bundle impact           |
+| `/harden`           | Robustness   | Error handling, i18n, edge cases, defensive UI                     |
+| `/animate`          | Motion       | Add purposeful transitions and micro-interactions                  |
+| `/colorize`         | Visual       | Palette refinement, accent placement, contrast fixes               |
+| `/bolder`           | Visual       | Amplify timid designs: stronger hierarchy, bigger gestures         |
+| `/quieter`          | Visual       | Reduce noise: more whitespace, simplify, calm down                 |
+| `/delight`          | Experience   | Add moments of joy: easter eggs, satisfying interactions           |
+| `/extract`          | Architecture | Pull into reusable components: identify patterns, create API       |
+| `/adapt`            | Responsive   | Adapt for different devices: breakpoints, touch, viewport          |
+| `/onboard`          | Experience   | Design onboarding: first-run, empty states, progressive disclosure |
+| `/teach-impeccable` | Setup        | One-time: gather project design context, save preferences          |