Agent-Skills.md

Agent Skills: Frontend Design Standards

Use when building UI, branding, design systems, or auditing accessibility/UX.

UncategorizedID: kienhaminh/anti-chaotic/designer

Repository

kienhaminh/anti-chaotic
kienhaminh
7616

Install this agent skill to your local

pnpm dlx add-skill https://github.com/kienhaminh/anti-chaotic/tree/HEAD/.agent/skills/designer

Skill Files

Browse the full folder contents for designer.

Download Skill

Loading file tree…

.agent/skills/designer/SKILL.md

Skill Metadata

Name
designer
Description
Use when building UI, branding, design systems, or auditing accessibility/UX.

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

  1. 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").

  2. Generation:

    • Use generate_image to create the initial asset.
    • Save it with a descriptive name (e.g., hero_robot_raw).

  3. Transparency Processing:

    • Run the helper script to remove the background: 
      python3 .agent/skills/designer/scripts/remove_background.py <input_path> <output_path>
    • Parameters:
      • <input_path>: 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":

  1. Generate: "Blue glass potion bottle, round shape, cork stopper, flat vector style, soft blue lighting, white background, detailed 4k" -> leads to blue_potion_raw.png
  2. Process: python3 .agent/skills/designer/scripts/remove_background.py blue_potion_raw.png blue_potion_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 |