// Create distinctive, engaging frontend interfaces for ShieldBattery. Use this skill when building user interfaces. Encourages bold, intentional design decisions within the project's design system.
| name | frontend-design |
| description | Create distinctive, engaging frontend interfaces for ShieldBattery. Use this skill when building user interfaces. Encourages bold, intentional design decisions within the project's design system. |
Every UI tells a story. Before touching the keyboard, answer these:
What's the emotional core?
What is this feature really about? Name the feeling.
What will someone remember? Pick one element that makes this UI distinctive. Not five. One. Maybe it's:
What's the energy level?
Match the energy to the moment. Not everything needs to be exciting—but the exciting things need to feel exciting.
A few moments in ShieldBattery that show the level of craft to aim for:
The post-match rank reveal. When your division changes, the icon doesn't just appear—it scales in with a spring bounce, brightness flares, and a sound plays. That half-second of choreographed animation transforms "you ranked up" from information into feeling.
Win/loss colors you can read across the room. Match results don't use subtle tints. Victories are bright green (--theme-positive), defeats are clear red (--theme-negative). There's no ambiguity. The color is the message.
The draft screen timer. As time runs low, the color shifts from calm to amber to urgent red. You feel the pressure without reading a number. The UI communicates through instinct, not interpretation.
Staggered point reveals. In the post-match dialog, your points and rating don't appear all at once. They animate in sequence—points first, then rating—with sound cues on each reveal. The delay creates anticipation; the stagger creates rhythm.
These aren't decorations. Each one makes the experience feel like something. That's the bar.
This is a platform for competitive StarCraft players. The UI should feel like it respects their time and skill:
Precise, not sloppy. Alignments matter. Spacing is intentional. Nothing feels accidental.
Responsive, not sluggish. Interactions acknowledge input immediately. Animations have purpose, not padding.
Confident, not timid. When something is important, make it important. Don't hedge with muted colors and small text when the moment calls for boldness.
Crafted, not generic. A ShieldBattery feature should feel like it belongs to ShieldBattery, not like it was pulled from a template.
Cohesive, not cobbled. Every visual element—icons, colors, typography—comes from the design system. No emoji, no mismatched icon sets, no borrowed aesthetics.
You have permission to:
Use the full color palette. The design system has semantic colors for a reason—--theme-positive for wins, --theme-negative for losses, race colors for faction identity. When the context calls for it, use them confidently.
Create moments with motion. The project uses motion/react for orchestrated animations. A well-timed staggered reveal or a satisfying spring animation can transform a feature from functional to memorable. See post-match-dialog.tsx for how this is done well.
Establish visual hierarchy ruthlessly. Not everything is equally important. Make the important things big, bold, and obvious. Let secondary information recede. If you're not sure what's most important, that's a design problem to solve before coding.
Let the content breathe. Generous spacing isn't wasted space—it's emphasis. Dense UIs have their place, but know when you're building a cockpit vs. a gallery.
Emoji as UI elements. Never use emoji (🎮 ✅ ⚠️ etc.) for icons, status indicators, or decorative elements. They clash with the crafted, professional aesthetic. Reach for MaterialIcon instead—there's a symbol for virtually every concept.
Generic placeholder aesthetics. Don't fall back on common patterns just because they're easy. A checkbox list with emoji bullets isn't ShieldBattery—it's a to-do app.
When you're stuck, these questions usually help:
The design system provides the vocabulary. Use it:
client/styles/colors.ts — theme variables, race colors, container elevationclient/styles/typography.ts — Inter for body, Sofia Sans for titles, defined scaleclient/material/ — buttons, dialogs, inputs, menus (extend, don't recreate)motion/react with spring physics, client/material/curves.ts for CSS transitionsMaterialIcon component with Material Symbols
For patterns, look at existing features:
post-match-dialog.tsx — orchestrated animations, staggered reveals, sound integrationmini-match-history.tsx — interactive lists, semantic colors for resultsdraft-screen.tsx — timer states, urgency through colorUse $-prefixed props for styled-components ($active, $disabled, $focused).
The goal is not to be safe. The goal is to be intentional.
A boring UI is a failure of imagination. A chaotic UI is a failure of discipline. The best ShieldBattery features are bold and cohesive—they have personality that serves the player.