Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions .agents/skills/adapt/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: adapt
description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
user-invocable: true
description:
---

---
name: adapt
description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility."
argument-hint: "[target] [context (mobile, tablet, print...)]"
user-invocable: true
---

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
Expand Down Expand Up @@ -195,4 +200,5 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network

Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.

11 changes: 8 additions & 3 deletions .agents/skills/animate/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: animate
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
user-invocable: true
description:
---

---
name: animate
description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive."
argument-hint: "[target]"
user-invocable: true
---

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
Expand Down Expand Up @@ -171,4 +176,4 @@ Test animations thoroughly:
- **Doesn't block**: Users can interact during/after animations
- **Adds value**: Makes interface clearer or more delightful

Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
11 changes: 8 additions & 3 deletions .agents/skills/arrange/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: arrange
description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
user-invocable: true
description:
---

---
name: arrange
description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition."
argument-hint: "[target]"
user-invocable: true
---

Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.
Expand Down Expand Up @@ -121,4 +126,4 @@ Create a systematic plan:
- **Consistency**: Is the spacing system applied uniformly?
- **Responsiveness**: Does the layout adapt gracefully across screen sizes?

Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.
Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.
15 changes: 10 additions & 5 deletions .agents/skills/audit/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: audit
description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
user-invocable: true
description:
---

---
name: audit
description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review."
argument-hint: "[area (feature, page, component...)]"
user-invocable: true
---

## MANDATORY PREPARATION
Expand Down Expand Up @@ -108,7 +113,7 @@ For each issue, document:
- **Impact**: How it affects users
- **WCAG/Standard**: Which standard it violates (if applicable)
- **Recommendation**: How to fix it
- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
- **Suggested command**: Which command to use (prefer: )

### Patterns & Systemic Issues

Expand All @@ -127,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2):
1. **[P?] `/command-name`** — Brief description (specific context from audit findings)
2. **[P?] `/command-name`** — Brief description (specific context)

**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.
**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended.

After presenting the summary, tell the user:

Expand All @@ -144,4 +149,4 @@ After presenting the summary, tell the user:
- Forget to prioritize (everything can't be P0)
- Report false positives without verification

Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
11 changes: 8 additions & 3 deletions .agents/skills/bolder/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: bolder
description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.
user-invocable: true
description:
---

---
name: bolder
description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character."
argument-hint: "[target]"
user-invocable: true
---

Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
Expand Down Expand Up @@ -113,4 +118,4 @@ Ensure amplification maintains usability and coherence:

**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects."

Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.
12 changes: 9 additions & 3 deletions .agents/skills/clarify/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: clarify
description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.
user-invocable: true
description:
---

---
name: clarify
description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing."
argument-hint: "[target]"
user-invocable: true
---

Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
Expand Down Expand Up @@ -179,4 +184,5 @@ Test that copy improvements work:
- **Consistency**: Does it match terminology elsewhere?
- **Tone**: Is it appropriate for the situation?

Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.

11 changes: 8 additions & 3 deletions .agents/skills/colorize/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: colorize
description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.
user-invocable: true
description:
---

---
name: colorize
description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette."
argument-hint: "[target]"
user-invocable: true
---

Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality.
Expand Down Expand Up @@ -139,4 +144,4 @@ Test that colorization improves the experience:
- **Still accessible**: Do all color combinations meet WCAG standards?
- **Not overwhelming**: Is color balanced and purposeful?

Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.
15 changes: 10 additions & 5 deletions .agents/skills/critique/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: critique
description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
user-invocable: true
description:
---

---
name: critique
description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component."
argument-hint: "[area (feature, page, component...)]"
user-invocable: true
---

## MANDATORY PREPARATION
Expand Down Expand Up @@ -126,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe
- **[P?] What**: Name the problem clearly
- **Why it matters**: How this hurts users or undermines goals
- **Fix**: What to do about it (be concrete)
- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive)
- **Suggested command**: Which command could address this (from: )

### Persona Red Flags
> *Consult [personas](reference/personas.md)*
Expand Down Expand Up @@ -185,7 +190,7 @@ List recommended commands in priority order, based on the user's answers:
...

**Rules for recommendations**:
- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive
- Only recommend commands from:
- Order by the user's stated priorities first, then by impact
- Each item's description should carry enough context that the command knows what to focus on
- Map each Priority Issue to the appropriate command
Expand All @@ -198,4 +203,4 @@ After presenting the summary, tell the user:

> You can ask me to run these one at a time, all at once, or in any order you prefer.
>
> Re-run `/critique` after fixes to see your score improve.
> Re-run `/critique` after fixes to see your score improve.
11 changes: 8 additions & 3 deletions .agents/skills/delight/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: delight
description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
user-invocable: true
description:
---

---
name: delight
description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable."
argument-hint: "[target]"
user-invocable: true
---

Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
Expand Down Expand Up @@ -300,4 +305,4 @@ Test that delight actually delights:
- **Appropriate**: Matches brand and context
- **Accessible**: Works with reduced motion, screen readers

Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
11 changes: 8 additions & 3 deletions .agents/skills/distill/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: distill
description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.
user-invocable: true
description:
---

---
name: distill
description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused."
argument-hint: "[target]"
user-invocable: true
---

Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification.
Expand Down Expand Up @@ -118,4 +123,4 @@ If you removed features or options:
- Consider if they need alternative access points
- Note any user feedback to monitor

Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
12 changes: 9 additions & 3 deletions .agents/skills/extract/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
name: extract
description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.
user-invocable: true
description:
---

---
name: extract
description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens."
argument-hint: "[target]"
user-invocable: true
---

Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.
Expand Down Expand Up @@ -88,4 +93,5 @@ Update design system documentation:
- Add examples and guidelines
- Update any Storybook or component catalog

Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.
Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.

9 changes: 7 additions & 2 deletions .agents/skills/frontend-design/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
description:
---

---
name: frontend-design
description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context."
license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
---

Expand Down Expand Up @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.

Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
Loading