skills.rest
ms-moar
ms-moarCOMMUNITY
Explore all skills by this author →
GitHub

frontend-enhancer

Generate design assets and examples for modernizing web application styling.

Updated Feb 24, 2026
Search Tags:#design#ui#accessibility#frontend#react#components#animations
One-click install
npx skills add https://github.com/ms-moar/ccc-media --skill frontend-enhancer-ms-moar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-enhancer
Source: https://github.com/ms-moar/ccc-media/tree/main/ailabspro/files/extracted/v32-antigravity-workflow/antigravity-workflow/.agent/skills/frontend-enhancer
Command: npx skills add https://github.com/ms-moar/ccc-media --skill frontend-enhancer-ms-moar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Many web applications lack consistent visual design, cohesive component patterns, and accessible, responsive styling; this Skill shortens the time to polish UI by providing ready-to-use design guidance, palettes, components, and animation patterns.

Core Features & Use Cases

  • Design System Guidance: Principles for visual hierarchy, spacing, typography, responsiveness, and accessibility to create consistent, professional interfaces.
  • Curated Color Palettes: Six ready-made palettes with implementation examples for CSS variables and Tailwind configuration to quickly set brand tones.
  • Component Examples: React/TypeScript components (buttons, cards, inputs) and utility functions that can be adapted to Vue, Svelte, or vanilla HTML/CSS.
  • Layout Templates & Animations: Hero sections, feature grids, responsive layout patterns, and an animation library that respects prefers-reduced-motion.
  • Use Cases: Modernizing an existing app's styling, building a landing page with a hero and feature grid, creating an accessible dashboard, or standardizing component libraries across a team.

Quick Start

Apply the Corporate Blue palette, swap in the provided button and card components from assets, and add the animate-fade-in-up class to key elements to quickly modernize the UI.

Frequently Asked Questions about frontend-enhancer

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

FAQPage Schema
How do I modernize web app styling with consistent React components and color palettes?▼

Modernize web app styling by applying curated color palettes, swapping in provided React/TypeScript button and card components, and configuring CSS variables or Tailwind to standardize UI aesthetics and hierarchy.

What is the best way to add accessible animations to a frontend project?▼

Add accessible frontend animations by applying provided CSS animation classes like animate-fade-in-up to key elements, ensuring the animation library respects the prefers-reduced-motion media query for accessibility compliance.

Does this UI enhancement guidance work with Vue or vanilla HTML/CSS setups?▼

Yes, the UI enhancement guidance works with Vue, Svelte, and vanilla HTML/CSS setups. Component examples and utility functions provided in React/TypeScript can be directly adapted across these frontend frameworks.

Can I use these layout templates to build a responsive landing page with a hero section?▼

Yes, you can use the provided layout templates to build a responsive landing page. The assets include hero sections and feature grids designed to establish responsive layouts and visual hierarchy quickly.

How do I standardize visual design and implement accessibility checklists across a team's component library?▼

Standardize visual design and implement accessibility by applying the Skill's design system principles, spacing rules, and accessibility checklists to create consistent, professional interfaces across your team's component library.

Do I need Tailwind to use the provided color palettes and design assets?▼

No, you do not need Tailwind to use the color palettes and design assets. The Skill provides implementation examples for both CSS variables and Tailwind configuration, allowing flexible integration into various frontend setups.

Related Skills

Explore More Design & Creative Skills→
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
GrupoUSGrupoUS
1

frontend-design

Generate frontend interfaces in React, Vue, or vanilla HTML/CSS/JS.

Community
Advanced
LiorCohenLiorCohen
39

frontend-scaffolding

Generate React/TypeScript frontend scaffolds with MVVM and TanStack Router/Query.

Community
Advanced
AgLyx3AgLyx3

ui-design-system

Generate design tokens from a brand color and export them in JSON, CSS, and SCSS.

Community
Advanced