Fix skill invocation and make ask instruction more prominent

- Commands now say "Use the frontend-design skill" instead of passive note
- Skill's Design Thinking section now has explicit MUST-know checklist
- Added ask instruction to bolder command for context gathering
- AskUserQuestionTool instruction is now more prominent and imperative

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-08 13:38:00 -08:00
co-authored by Claude Opus 4.5
parent f6cba74a3c
commit ee4d2e1098
90 changed files with 180 additions and 90 deletions
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+8 -1
View File
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+8 -1
View File
@@ -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?
+1 -1
View File
@@ -3,7 +3,7 @@ description: Review a feature and enhance it with purposeful animations, micro-i
argument-hint: [TARGET=<value>]
---
→ *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.
+3 -1
View File
@@ -3,7 +3,7 @@ description: Amplify safe or boring designs to make them more visually interesti
argument-hint: [TARGET=<value>]
---
→ *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
+1 -1
View File
@@ -3,7 +3,7 @@ description: Add strategic color to features that are too monochromatic or lack
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -5,7 +5,7 @@ argument-hint: [AREA=<value>]
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
+1 -1
View File
@@ -3,7 +3,7 @@ description: Add moments of joy, personality, and unexpected touches that make i
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -3,7 +3,7 @@ description: Final quality pass before shipping. Fixes alignment, spacing, consi
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -3,7 +3,7 @@ description: Tone down overly bold or visually aggressive designs. Reduces inten
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -3,7 +3,7 @@ description: Strip designs to their essence by removing unnecessary complexity.
argument-hint: [TARGET=<value>]
---
→ *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.
+8 -1
View File
@@ -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?
+1 -1
View File
@@ -3,7 +3,7 @@ description: Review a feature and enhance it with purposeful animations, micro-i
argument-hint: [TARGET=<value>]
---
→ *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.
+3 -1
View File
@@ -3,7 +3,7 @@ description: Amplify safe or boring designs to make them more visually interesti
argument-hint: [TARGET=<value>]
---
→ *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
+1 -1
View File
@@ -3,7 +3,7 @@ description: Add strategic color to features that are too monochromatic or lack
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -5,7 +5,7 @@ argument-hint: [AREA=<value>]
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
+1 -1
View File
@@ -3,7 +3,7 @@ description: Add moments of joy, personality, and unexpected touches that make i
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -3,7 +3,7 @@ description: Final quality pass before shipping. Fixes alignment, spacing, consi
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -3,7 +3,7 @@ description: Tone down overly bold or visually aggressive designs. Reduces inten
argument-hint: [TARGET=<value>]
---
→ *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.
+1 -1
View File
@@ -3,7 +3,7 @@ description: Strip designs to their essence by removing unnecessary complexity.
argument-hint: [TARGET=<value>]
---
→ *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.
+8 -1
View File
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+8 -1
View File
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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 worksnot 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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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 worksnot 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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+8 -1
View File
@@ -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?
+1 -1
View File
@@ -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.
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -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.
+8 -1
View File
@@ -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?