mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
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:
co-authored by
Claude Opus 4.5
parent
f6cba74a3c
commit
ee4d2e1098
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
@@ -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
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
@@ -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
@@ -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
@@ -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.
|
||||
|
||||
|
||||
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,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?
|
||||
|
||||
Vendored
+1
-1
@@ -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.
|
||||
|
||||
|
||||
Vendored
+3
-1
@@ -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
@@ -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
@@ -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
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -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.
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -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.
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
|
||||
|
||||
|
||||
+1
-1
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
|
||||
|
||||
|
||||
+1
-1
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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?
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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, {{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?
|
||||
|
||||
Reference in New Issue
Block a user