SKILL.md
Frontend Design Standards
Expert-level design guidance for creating memorable, production-grade interfaces.
Core Design Principles
Intentionality Over Trends
Every design decision must be purposeful:
- Why this color? → Brand meaning, accessibility, contrast
- Why this font? → Readability, personality, performance
- Why this animation? → User feedback, spatial understanding
Distinctive Over Generic
Avoid "AI slop" aesthetics:
- ❌ Default purple gradients, Inter everywhere, card-with-shadow templates
- ✅ Committed aesthetic vision, unique typography pairs, contextual layouts
Technical Excellence
High-quality design = high-quality code:
- Semantic HTML first
- CSS custom properties for theming
- Performance-minded animations
- Accessibility as foundation
Tools
| Tool | Purpose | Rule |
|---|---|---|
generate_image |
UI icons, avatars, backgrounds, illustrations | Follow .agent/rules/nano-banana.md |
Asset Creation Capability
The designer skill includes a specialized workflow for creating high-quality, transparent assets (icons, avatars, game sprites) using the generate_image tool and a custom background removal script.
Workflow
- Prompt Engineering:
- Follow the formula in .agent/rules/nano-banana.md: [Core Subject] + [Visual Style] + [Lighting/Color] + [Technical/Quality specs]. - Ensure the visual style is compatible with extraction (e.g., "clean background", "minimalist").
- Generation:
- Use generateimage to create the initial asset. - Save it with a descriptive name (e.g., herorobot_raw).
- Transparency Processing:
- Run the helper script to remove the background: ``bash python3 .agent/skills/designer/scripts/removebackground.py <inputpath> <outputpath> ` - Parameters: - <inputpath>: Path to the image file you want to process. - <output_path>`: File path where the result should be saved.
Example
To create a "Blue Potion Icon":
- Generate: "Blue glass potion bottle, round shape, cork stopper, flat vector style, soft blue lighting, white background, detailed 4k" -> leads to
bluepotionraw.png - Process:
python3 .agent/skills/designer/scripts/removebackground.py bluepotionraw.png bluepotion_final.png
Integration
Works with frontend-developer skill for implementation handoff:
- Designer Role: Creates visual designs, tokens, and Motion Specs.
- Frontend Role: Writes the actual CSS/JS code based on these specs.
References
Load references based on task context:
| Reference | Path | Purpose |
|---|---|---|
| Branding | references/branding.md |
Creating logos, visual identity, brand guidelines |
| Color Theory | references/color-theory.md |
Choosing palettes, dark mode, semantic colors |
| Typography | references/typography.md |
Font pairing, scales, text rendering |
| Layout | references/layout.md |
Grids, spacing, responsive design |
| Motion | references/motion.md |
Micro-interactions, transitions, performance |
| Accessibility | references/accessibility.md |
WCAG compliance, keyboard nav, screen readers |
| Design Systems | references/design-systems.md |
Design tokens, component patterns, documentation |
| Trends | references/trends.md |
2024-2025 trends, emerging CSS features |
| Creation | references/creation.md |
New components, pages, creative direction |
| Review | references/review.md |
Code review, compliance checks, quality audit |
Concepts
Distinct visual aesthetics to drive design direction:
| Concept | Path | Description |
|---|---|---|
| Apple Glassmorphism | concepts/apple-glass.md |
Premium, translucent depth (VisionOS Style) |
| Neo-Brutalism | concepts/neo-brutalism.md |
Raw, high-contrast, bold borders |
| Claymorphism | concepts/claymorphism.md |
Soft 3D, inflated shapes, tactile feel |
| Aurora Gradients | concepts/aurora-gradients.md |
Ethereal, moving blurred color meshes |
| Bento Grids | concepts/bento-grids.md |
Modular, grid-based content layout |
Templates
| Template | Path | Purpose |
|---|---|---|
| Motion Spec | templates/design-motion-spec.md |
Motion Specification - animation timeline, triggers, easing. Use for handoff animation specs to frontend |