frontend-implement

Implement UI improvements from design review findings using Anti-AI design principles.

7|4|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/MadAppGang/magus --skill frontend-implement
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-implement
Source: https://github.com/MadAppGang/magus/tree/main/plugins/dev/skills/frontend/frontend-implement
Command: npx skills add https://github.com/MadAppGang/magus --skill frontend-implement

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion, lucide-react, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill transforms generic UI designs into distinctive, human-crafted interfaces by applying advanced design principles and automating the implementation of UI improvements.

Core Features & Use Cases

  • Automated UI Implementation: Translates design analysis findings into actionable code changes.
  • Anti-AI Design Principles: Enforces rules for breaking symmetry, adding texture, dramatic typography, micro-interactions, and bespoke colors.
  • Visual Metaphor Application: Guides design decisions with pre-defined visual metaphors like Cyberpunk Glass or Neo-Brutalism.
  • Use Case: After a designer identifies UI inconsistencies, this skill can automatically refactor components to adhere to a chosen visual metaphor, ensuring a cohesive and unique brand aesthetic.

Quick Start

Implement UI improvements from the review document located at '/path/to/review.md' by applying Anti-AI design rules.

Frequently Asked Questions about frontend-implement

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my React UI look less generic and more human-crafted?

To make a React UI look less generic, apply Anti-AI design principles by refactoring components to break symmetry, add texture, use dramatic typography, and incorporate bespoke colors. This transforms standard interfaces into distinctive, human-crafted designs.

What are Anti-AI design principles for frontend implementation?

Anti-AI design principles for frontend implementation are rules that enforce asymmetry, texture, dramatic typography, micro-interactions, and custom color palettes. They guide visual metaphor application like Cyberpunk Glass or Neo-Brutalism to ensure a unique brand aesthetic.

How do I translate UI design review findings into React code changes?

Translate UI design review findings into React code changes by processing a review document and automatically applying design rules to refactor components. This implementation supports visual verification and adheres to chosen visual metaphors for distinctive UI development.

Can I use framer-motion and lucide-react for frontend UI refactoring?

Yes, you can use framer-motion and lucide-react for frontend UI refactoring. These dependencies support the implementation of micro-interactions and visual iconography required to enforce Anti-AI design principles and apply custom visual metaphors.

What is the best way to apply a Neo-Brutalism visual metaphor to existing UI components?

The best way to apply a Neo-Brutalism visual metaphor to existing UI components is to automatically refactor them based on a design analysis. This incorporates rules for asymmetry, texture, and custom colors to ensure a cohesive aesthetic.

Do I need a design analysis document before implementing UI improvements?

Yes, you need a design analysis document before implementing UI improvements. The process transforms review findings into actionable code changes, requiring a review document to identify UI inconsistencies and guide the refactoring process.