diff --git a/.claude/commands/animate.md b/.claude/commands/animate.md index 6733c4b4d..5b1ad36c3 100644 --- a/.claude/commands/animate.md +++ b/.claude/commands/animate.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/.claude/commands/bolder.md b/.claude/commands/bolder.md index 06a4a504b..ab46b72f1 100644 --- a/.claude/commands/bolder.md +++ b/.claude/commands/bolder.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -29,6 +29,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/.claude/commands/colorize.md b/.claude/commands/colorize.md index be6e8b71d..0d8a93933 100644 --- a/.claude/commands/colorize.md +++ b/.claude/commands/colorize.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/.claude/commands/critique.md b/.claude/commands/critique.md index ea1f8377a..00b7f2aca 100644 --- a/.claude/commands/critique.md +++ b/.claude/commands/critique.md @@ -10,7 +10,7 @@ args: Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/.claude/commands/delight.md b/.claude/commands/delight.md index 442dd14cf..942cfb991 100644 --- a/.claude/commands/delight.md +++ b/.claude/commands/delight.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/.claude/commands/polish.md b/.claude/commands/polish.md index c76595bea..ccf8a2c22 100644 --- a/.claude/commands/polish.md +++ b/.claude/commands/polish.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/.claude/commands/quieter.md b/.claude/commands/quieter.md index 9d3cd7306..781b49f48 100644 --- a/.claude/commands/quieter.md +++ b/.claude/commands/quieter.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/.claude/commands/simplify.md b/.claude/commands/simplify.md index d6a1cc4cf..11767ab95 100644 --- a/.claude/commands/simplify.md +++ b/.claude/commands/simplify.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/.claude/skills/frontend-design/SKILL.md b/.claude/skills/frontend-design/SKILL.md index 454af5ce4..65a4ee945 100644 --- a/.claude/skills/frontend-design/SKILL.md +++ b/.claude/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, STOP and call the AskUserQuestionTool to clarify. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/claude-code-prefixed/.claude/commands/i-animate.md b/dist/claude-code-prefixed/.claude/commands/i-animate.md index 894ea9727..f795552ff 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-animate.md +++ b/dist/claude-code-prefixed/.claude/commands/i-animate.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/claude-code-prefixed/.claude/commands/i-bolder.md b/dist/claude-code-prefixed/.claude/commands/i-bolder.md index 2f5ac2d6c..d9bf6367b 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-bolder.md +++ b/dist/claude-code-prefixed/.claude/commands/i-bolder.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -29,6 +29,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/claude-code-prefixed/.claude/commands/i-colorize.md b/dist/claude-code-prefixed/.claude/commands/i-colorize.md index 3f3a24422..4c473460b 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-colorize.md +++ b/dist/claude-code-prefixed/.claude/commands/i-colorize.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/claude-code-prefixed/.claude/commands/i-critique.md b/dist/claude-code-prefixed/.claude/commands/i-critique.md index fb3f5c0eb..3f810e95c 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-critique.md +++ b/dist/claude-code-prefixed/.claude/commands/i-critique.md @@ -10,7 +10,7 @@ args: Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/claude-code-prefixed/.claude/commands/i-delight.md b/dist/claude-code-prefixed/.claude/commands/i-delight.md index 51c579021..d0f861153 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-delight.md +++ b/dist/claude-code-prefixed/.claude/commands/i-delight.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/claude-code-prefixed/.claude/commands/i-polish.md b/dist/claude-code-prefixed/.claude/commands/i-polish.md index ef20b37bd..d5139bd10 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-polish.md +++ b/dist/claude-code-prefixed/.claude/commands/i-polish.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/claude-code-prefixed/.claude/commands/i-quieter.md b/dist/claude-code-prefixed/.claude/commands/i-quieter.md index 3c17f35dd..6c126e868 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-quieter.md +++ b/dist/claude-code-prefixed/.claude/commands/i-quieter.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/claude-code-prefixed/.claude/commands/i-simplify.md b/dist/claude-code-prefixed/.claude/commands/i-simplify.md index 21898e0ab..623e5b5eb 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-simplify.md +++ b/dist/claude-code-prefixed/.claude/commands/i-simplify.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md b/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md index 454af5ce4..65a4ee945 100644 --- a/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, STOP and call the AskUserQuestionTool to clarify. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/claude-code/.claude/commands/animate.md b/dist/claude-code/.claude/commands/animate.md index 6733c4b4d..5b1ad36c3 100644 --- a/dist/claude-code/.claude/commands/animate.md +++ b/dist/claude-code/.claude/commands/animate.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/claude-code/.claude/commands/bolder.md b/dist/claude-code/.claude/commands/bolder.md index 06a4a504b..ab46b72f1 100644 --- a/dist/claude-code/.claude/commands/bolder.md +++ b/dist/claude-code/.claude/commands/bolder.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -29,6 +29,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/claude-code/.claude/commands/colorize.md b/dist/claude-code/.claude/commands/colorize.md index be6e8b71d..0d8a93933 100644 --- a/dist/claude-code/.claude/commands/colorize.md +++ b/dist/claude-code/.claude/commands/colorize.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/claude-code/.claude/commands/critique.md b/dist/claude-code/.claude/commands/critique.md index ea1f8377a..00b7f2aca 100644 --- a/dist/claude-code/.claude/commands/critique.md +++ b/dist/claude-code/.claude/commands/critique.md @@ -10,7 +10,7 @@ args: Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/claude-code/.claude/commands/delight.md b/dist/claude-code/.claude/commands/delight.md index 442dd14cf..942cfb991 100644 --- a/dist/claude-code/.claude/commands/delight.md +++ b/dist/claude-code/.claude/commands/delight.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/claude-code/.claude/commands/polish.md b/dist/claude-code/.claude/commands/polish.md index c76595bea..ccf8a2c22 100644 --- a/dist/claude-code/.claude/commands/polish.md +++ b/dist/claude-code/.claude/commands/polish.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/claude-code/.claude/commands/quieter.md b/dist/claude-code/.claude/commands/quieter.md index 9d3cd7306..781b49f48 100644 --- a/dist/claude-code/.claude/commands/quieter.md +++ b/dist/claude-code/.claude/commands/quieter.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/claude-code/.claude/commands/simplify.md b/dist/claude-code/.claude/commands/simplify.md index d6a1cc4cf..11767ab95 100644 --- a/dist/claude-code/.claude/commands/simplify.md +++ b/dist/claude-code/.claude/commands/simplify.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/claude-code/.claude/skills/frontend-design/SKILL.md b/dist/claude-code/.claude/skills/frontend-design/SKILL.md index 454af5ce4..65a4ee945 100644 --- a/dist/claude-code/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code/.claude/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, STOP and call the AskUserQuestionTool to clarify. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, STOP and call the AskUserQuestionTool to clarify. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/codex-prefixed/.codex/prompts/i-animate.md b/dist/codex-prefixed/.codex/prompts/i-animate.md index 774fc313e..ed5158930 100644 --- a/dist/codex-prefixed/.codex/prompts/i-animate.md +++ b/dist/codex-prefixed/.codex/prompts/i-animate.md @@ -3,7 +3,7 @@ description: Review a feature and enhance it with purposeful animations, micro-i argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/codex-prefixed/.codex/prompts/i-bolder.md b/dist/codex-prefixed/.codex/prompts/i-bolder.md index 9e38c510b..a796cde5e 100644 --- a/dist/codex-prefixed/.codex/prompts/i-bolder.md +++ b/dist/codex-prefixed/.codex/prompts/i-bolder.md @@ -3,7 +3,7 @@ description: Amplify safe or boring designs to make them more visually interesti argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -25,6 +25,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/codex-prefixed/.codex/prompts/i-colorize.md b/dist/codex-prefixed/.codex/prompts/i-colorize.md index 8539a290d..e69409d89 100644 --- a/dist/codex-prefixed/.codex/prompts/i-colorize.md +++ b/dist/codex-prefixed/.codex/prompts/i-colorize.md @@ -3,7 +3,7 @@ description: Add strategic color to features that are too monochromatic or lack argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/codex-prefixed/.codex/prompts/i-critique.md b/dist/codex-prefixed/.codex/prompts/i-critique.md index e9bba4687..2814e1fb0 100644 --- a/dist/codex-prefixed/.codex/prompts/i-critique.md +++ b/dist/codex-prefixed/.codex/prompts/i-critique.md @@ -5,7 +5,7 @@ argument-hint: [AREA=] Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/codex-prefixed/.codex/prompts/i-delight.md b/dist/codex-prefixed/.codex/prompts/i-delight.md index 485ad4787..74d9f07a2 100644 --- a/dist/codex-prefixed/.codex/prompts/i-delight.md +++ b/dist/codex-prefixed/.codex/prompts/i-delight.md @@ -3,7 +3,7 @@ description: Add moments of joy, personality, and unexpected touches that make i argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/codex-prefixed/.codex/prompts/i-polish.md b/dist/codex-prefixed/.codex/prompts/i-polish.md index c17ea41bc..e6d3960ca 100644 --- a/dist/codex-prefixed/.codex/prompts/i-polish.md +++ b/dist/codex-prefixed/.codex/prompts/i-polish.md @@ -3,7 +3,7 @@ description: Final quality pass before shipping. Fixes alignment, spacing, consi argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/codex-prefixed/.codex/prompts/i-quieter.md b/dist/codex-prefixed/.codex/prompts/i-quieter.md index 0a802865a..7e5560e29 100644 --- a/dist/codex-prefixed/.codex/prompts/i-quieter.md +++ b/dist/codex-prefixed/.codex/prompts/i-quieter.md @@ -3,7 +3,7 @@ description: Tone down overly bold or visually aggressive designs. Reduces inten argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/codex-prefixed/.codex/prompts/i-simplify.md b/dist/codex-prefixed/.codex/prompts/i-simplify.md index a455c70cf..c9c93babc 100644 --- a/dist/codex-prefixed/.codex/prompts/i-simplify.md +++ b/dist/codex-prefixed/.codex/prompts/i-simplify.md @@ -3,7 +3,7 @@ description: Strip designs to their essence by removing unnecessary complexity. argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md b/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md index face89adf..0ceecd0ee 100644 --- a/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md +++ b/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/codex/.codex/prompts/animate.md b/dist/codex/.codex/prompts/animate.md index 774fc313e..ed5158930 100644 --- a/dist/codex/.codex/prompts/animate.md +++ b/dist/codex/.codex/prompts/animate.md @@ -3,7 +3,7 @@ description: Review a feature and enhance it with purposeful animations, micro-i argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/codex/.codex/prompts/bolder.md b/dist/codex/.codex/prompts/bolder.md index 9e38c510b..a796cde5e 100644 --- a/dist/codex/.codex/prompts/bolder.md +++ b/dist/codex/.codex/prompts/bolder.md @@ -3,7 +3,7 @@ description: Amplify safe or boring designs to make them more visually interesti argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -25,6 +25,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/codex/.codex/prompts/colorize.md b/dist/codex/.codex/prompts/colorize.md index 8539a290d..e69409d89 100644 --- a/dist/codex/.codex/prompts/colorize.md +++ b/dist/codex/.codex/prompts/colorize.md @@ -3,7 +3,7 @@ description: Add strategic color to features that are too monochromatic or lack argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/codex/.codex/prompts/critique.md b/dist/codex/.codex/prompts/critique.md index e9bba4687..2814e1fb0 100644 --- a/dist/codex/.codex/prompts/critique.md +++ b/dist/codex/.codex/prompts/critique.md @@ -5,7 +5,7 @@ argument-hint: [AREA=] Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/codex/.codex/prompts/delight.md b/dist/codex/.codex/prompts/delight.md index 485ad4787..74d9f07a2 100644 --- a/dist/codex/.codex/prompts/delight.md +++ b/dist/codex/.codex/prompts/delight.md @@ -3,7 +3,7 @@ description: Add moments of joy, personality, and unexpected touches that make i argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/codex/.codex/prompts/polish.md b/dist/codex/.codex/prompts/polish.md index c17ea41bc..e6d3960ca 100644 --- a/dist/codex/.codex/prompts/polish.md +++ b/dist/codex/.codex/prompts/polish.md @@ -3,7 +3,7 @@ description: Final quality pass before shipping. Fixes alignment, spacing, consi argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/codex/.codex/prompts/quieter.md b/dist/codex/.codex/prompts/quieter.md index 0a802865a..7e5560e29 100644 --- a/dist/codex/.codex/prompts/quieter.md +++ b/dist/codex/.codex/prompts/quieter.md @@ -3,7 +3,7 @@ description: Tone down overly bold or visually aggressive designs. Reduces inten argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/codex/.codex/prompts/simplify.md b/dist/codex/.codex/prompts/simplify.md index a455c70cf..c9c93babc 100644 --- a/dist/codex/.codex/prompts/simplify.md +++ b/dist/codex/.codex/prompts/simplify.md @@ -3,7 +3,7 @@ description: Strip designs to their essence by removing unnecessary complexity. argument-hint: [TARGET=] --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/codex/.codex/skills/frontend-design/SKILL.md b/dist/codex/.codex/skills/frontend-design/SKILL.md index face89adf..0ceecd0ee 100644 --- a/dist/codex/.codex/skills/frontend-design/SKILL.md +++ b/dist/codex/.codex/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/cursor-prefixed/.cursor/commands/i-animate.md b/dist/cursor-prefixed/.cursor/commands/i-animate.md index dfec934d5..ea19b6a84 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-animate.md +++ b/dist/cursor-prefixed/.cursor/commands/i-animate.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/cursor-prefixed/.cursor/commands/i-bolder.md b/dist/cursor-prefixed/.cursor/commands/i-bolder.md index 538a409b0..586059f4b 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-bolder.md +++ b/dist/cursor-prefixed/.cursor/commands/i-bolder.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -20,6 +20,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/cursor-prefixed/.cursor/commands/i-colorize.md b/dist/cursor-prefixed/.cursor/commands/i-colorize.md index b05e491bd..d1464377b 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-colorize.md +++ b/dist/cursor-prefixed/.cursor/commands/i-colorize.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/cursor-prefixed/.cursor/commands/i-critique.md b/dist/cursor-prefixed/.cursor/commands/i-critique.md index 5580cd569..98720a444 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-critique.md +++ b/dist/cursor-prefixed/.cursor/commands/i-critique.md @@ -1,6 +1,6 @@ Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/cursor-prefixed/.cursor/commands/i-delight.md b/dist/cursor-prefixed/.cursor/commands/i-delight.md index f18fa4b75..e2cd86f48 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-delight.md +++ b/dist/cursor-prefixed/.cursor/commands/i-delight.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/cursor-prefixed/.cursor/commands/i-polish.md b/dist/cursor-prefixed/.cursor/commands/i-polish.md index 190401277..7e11a9411 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-polish.md +++ b/dist/cursor-prefixed/.cursor/commands/i-polish.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/cursor-prefixed/.cursor/commands/i-quieter.md b/dist/cursor-prefixed/.cursor/commands/i-quieter.md index 51e3ffc36..2f2f610b2 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-quieter.md +++ b/dist/cursor-prefixed/.cursor/commands/i-quieter.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/cursor-prefixed/.cursor/commands/i-simplify.md b/dist/cursor-prefixed/.cursor/commands/i-simplify.md index 5e5462efc..1a0bb0072 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-simplify.md +++ b/dist/cursor-prefixed/.cursor/commands/i-simplify.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md b/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md index 588b7524f..180965196 100644 --- a/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md +++ b/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/cursor/.cursor/commands/animate.md b/dist/cursor/.cursor/commands/animate.md index dfec934d5..ea19b6a84 100644 --- a/dist/cursor/.cursor/commands/animate.md +++ b/dist/cursor/.cursor/commands/animate.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/cursor/.cursor/commands/bolder.md b/dist/cursor/.cursor/commands/bolder.md index 538a409b0..586059f4b 100644 --- a/dist/cursor/.cursor/commands/bolder.md +++ b/dist/cursor/.cursor/commands/bolder.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -20,6 +20,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/cursor/.cursor/commands/colorize.md b/dist/cursor/.cursor/commands/colorize.md index b05e491bd..d1464377b 100644 --- a/dist/cursor/.cursor/commands/colorize.md +++ b/dist/cursor/.cursor/commands/colorize.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/cursor/.cursor/commands/critique.md b/dist/cursor/.cursor/commands/critique.md index 5580cd569..98720a444 100644 --- a/dist/cursor/.cursor/commands/critique.md +++ b/dist/cursor/.cursor/commands/critique.md @@ -1,6 +1,6 @@ Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/cursor/.cursor/commands/delight.md b/dist/cursor/.cursor/commands/delight.md index f18fa4b75..e2cd86f48 100644 --- a/dist/cursor/.cursor/commands/delight.md +++ b/dist/cursor/.cursor/commands/delight.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/cursor/.cursor/commands/polish.md b/dist/cursor/.cursor/commands/polish.md index 190401277..7e11a9411 100644 --- a/dist/cursor/.cursor/commands/polish.md +++ b/dist/cursor/.cursor/commands/polish.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/cursor/.cursor/commands/quieter.md b/dist/cursor/.cursor/commands/quieter.md index 51e3ffc36..2f2f610b2 100644 --- a/dist/cursor/.cursor/commands/quieter.md +++ b/dist/cursor/.cursor/commands/quieter.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/cursor/.cursor/commands/simplify.md b/dist/cursor/.cursor/commands/simplify.md index 5e5462efc..1a0bb0072 100644 --- a/dist/cursor/.cursor/commands/simplify.md +++ b/dist/cursor/.cursor/commands/simplify.md @@ -1,4 +1,4 @@ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/cursor/.cursor/skills/frontend-design/SKILL.md b/dist/cursor/.cursor/skills/frontend-design/SKILL.md index 588b7524f..180965196 100644 --- a/dist/cursor/.cursor/skills/frontend-design/SKILL.md +++ b/dist/cursor/.cursor/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/gemini-prefixed/.gemini/commands/i-animate.toml b/dist/gemini-prefixed/.gemini/commands/i-animate.toml index 491cea873..b9f62dcf2 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-animate.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-animate.toml @@ -1,6 +1,6 @@ description = "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/gemini-prefixed/.gemini/commands/i-bolder.toml b/dist/gemini-prefixed/.gemini/commands/i-bolder.toml index 51e8ab73b..1006953e6 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-bolder.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-bolder.toml @@ -1,6 +1,6 @@ description = "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -22,6 +22,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/gemini-prefixed/.gemini/commands/i-colorize.toml b/dist/gemini-prefixed/.gemini/commands/i-colorize.toml index 1eed94e7d..da311481e 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-colorize.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-colorize.toml @@ -1,6 +1,6 @@ description = "Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/gemini-prefixed/.gemini/commands/i-critique.toml b/dist/gemini-prefixed/.gemini/commands/i-critique.toml index ce5f20ffe..94f3e6629 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-critique.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-critique.toml @@ -2,7 +2,7 @@ description = "Evaluate design effectiveness from a UX perspective. Assesses vis prompt = """ Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/gemini-prefixed/.gemini/commands/i-delight.toml b/dist/gemini-prefixed/.gemini/commands/i-delight.toml index 86360c2ba..54944dfdc 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-delight.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-delight.toml @@ -1,6 +1,6 @@ description = "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/gemini-prefixed/.gemini/commands/i-polish.toml b/dist/gemini-prefixed/.gemini/commands/i-polish.toml index 3520607f3..a0552cd6a 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-polish.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-polish.toml @@ -1,6 +1,6 @@ description = "Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/gemini-prefixed/.gemini/commands/i-quieter.toml b/dist/gemini-prefixed/.gemini/commands/i-quieter.toml index 04b3545ac..1f21941c7 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-quieter.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-quieter.toml @@ -1,6 +1,6 @@ description = "Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/gemini-prefixed/.gemini/commands/i-simplify.toml b/dist/gemini-prefixed/.gemini/commands/i-simplify.toml index b817bd85f..8bcd9e074 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-simplify.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-simplify.toml @@ -1,6 +1,6 @@ description = "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md b/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md index 8cbf24495..921335048 100644 --- a/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md +++ b/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md @@ -7,7 +7,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/dist/gemini/.gemini/commands/animate.toml b/dist/gemini/.gemini/commands/animate.toml index 491cea873..b9f62dcf2 100644 --- a/dist/gemini/.gemini/commands/animate.toml +++ b/dist/gemini/.gemini/commands/animate.toml @@ -1,6 +1,6 @@ description = "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/dist/gemini/.gemini/commands/bolder.toml b/dist/gemini/.gemini/commands/bolder.toml index 51e8ab73b..1006953e6 100644 --- a/dist/gemini/.gemini/commands/bolder.toml +++ b/dist/gemini/.gemini/commands/bolder.toml @@ -1,6 +1,6 @@ description = "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -22,6 +22,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/dist/gemini/.gemini/commands/colorize.toml b/dist/gemini/.gemini/commands/colorize.toml index 1eed94e7d..da311481e 100644 --- a/dist/gemini/.gemini/commands/colorize.toml +++ b/dist/gemini/.gemini/commands/colorize.toml @@ -1,6 +1,6 @@ description = "Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/dist/gemini/.gemini/commands/critique.toml b/dist/gemini/.gemini/commands/critique.toml index ce5f20ffe..94f3e6629 100644 --- a/dist/gemini/.gemini/commands/critique.toml +++ b/dist/gemini/.gemini/commands/critique.toml @@ -2,7 +2,7 @@ description = "Evaluate design effectiveness from a UX perspective. Assesses vis prompt = """ Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/dist/gemini/.gemini/commands/delight.toml b/dist/gemini/.gemini/commands/delight.toml index 86360c2ba..54944dfdc 100644 --- a/dist/gemini/.gemini/commands/delight.toml +++ b/dist/gemini/.gemini/commands/delight.toml @@ -1,6 +1,6 @@ description = "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/dist/gemini/.gemini/commands/polish.toml b/dist/gemini/.gemini/commands/polish.toml index 3520607f3..a0552cd6a 100644 --- a/dist/gemini/.gemini/commands/polish.toml +++ b/dist/gemini/.gemini/commands/polish.toml @@ -1,6 +1,6 @@ description = "Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/dist/gemini/.gemini/commands/quieter.toml b/dist/gemini/.gemini/commands/quieter.toml index 04b3545ac..1f21941c7 100644 --- a/dist/gemini/.gemini/commands/quieter.toml +++ b/dist/gemini/.gemini/commands/quieter.toml @@ -1,6 +1,6 @@ description = "Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/dist/gemini/.gemini/commands/simplify.toml b/dist/gemini/.gemini/commands/simplify.toml index b817bd85f..8bcd9e074 100644 --- a/dist/gemini/.gemini/commands/simplify.toml +++ b/dist/gemini/.gemini/commands/simplify.toml @@ -1,6 +1,6 @@ description = "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean." prompt = """ -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/dist/gemini/.gemini/skills/frontend-design/SKILL.md b/dist/gemini/.gemini/skills/frontend-design/SKILL.md index 8cbf24495..921335048 100644 --- a/dist/gemini/.gemini/skills/frontend-design/SKILL.md +++ b/dist/gemini/.gemini/skills/frontend-design/SKILL.md @@ -7,7 +7,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? diff --git a/source/commands/animate.md b/source/commands/animate.md index 106f18163..1d8429b61 100644 --- a/source/commands/animate.md +++ b/source/commands/animate.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. diff --git a/source/commands/bolder.md b/source/commands/bolder.md index 91474df98..139746f94 100644 --- a/source/commands/bolder.md +++ b/source/commands/bolder.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -29,6 +29,8 @@ Analyze what makes the design feel too safe or boring: - Who's the audience? (What will resonate?) - What are the constraints? (Brand guidelines, accessibility, performance) +If any of these are unclear from the codebase, {{ask_instruction}} + **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. ## Plan Amplification diff --git a/source/commands/colorize.md b/source/commands/colorize.md index ef08de495..7e3bb2af1 100644 --- a/source/commands/colorize.md +++ b/source/commands/colorize.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. diff --git a/source/commands/critique.md b/source/commands/critique.md index d486c12bb..f15593436 100644 --- a/source/commands/critique.md +++ b/source/commands/critique.md @@ -10,7 +10,7 @@ args: Conduct a holistic design critique, evaluating whether the interface actually works—not just technically, but as a designed experience. Think like a design director giving feedback. -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. ## Design Critique diff --git a/source/commands/delight.md b/source/commands/delight.md index 0ab67959e..1619303b3 100644 --- a/source/commands/delight.md +++ b/source/commands/delight.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. diff --git a/source/commands/polish.md b/source/commands/polish.md index fa63391e0..4bdda3673 100644 --- a/source/commands/polish.md +++ b/source/commands/polish.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. diff --git a/source/commands/quieter.md b/source/commands/quieter.md index eb9395820..e84dcc4fd 100644 --- a/source/commands/quieter.md +++ b/source/commands/quieter.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. diff --git a/source/commands/simplify.md b/source/commands/simplify.md index 50d225f10..b7ca23db4 100644 --- a/source/commands/simplify.md +++ b/source/commands/simplify.md @@ -7,7 +7,7 @@ args: required: false --- -→ *Apply the frontend-design skill for design principles, if not already in context.* +**First**: Use the frontend-design skill for design principles and anti-patterns. Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. diff --git a/source/skills/frontend-design/SKILL.md b/source/skills/frontend-design/SKILL.md index 03c1e8f29..81dfeb1bb 100644 --- a/source/skills/frontend-design/SKILL.md +++ b/source/skills/frontend-design/SKILL.md @@ -8,7 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. If critical context is missing, {{ask_instruction}} Don't guess on fundamentals. +Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. + +**BEFORE writing any code**, you MUST know: +- Who is the target audience? +- What is the brand personality or tone? +- Are there existing design tokens, colors, or fonts to use? + +If ANY of these are unclear from the codebase, {{ask_instruction}} Don't guess on fundamentals—wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it?