ce-frontend-design

Guide frontend UI outcomes to align with existing design systems.

Updated Sep 25, 2024

Search Tags:#typography #accessibility #ui-ux #design-systems #frontend-design #visual-verification #color-theme

Ready to run

npx skills add https://github.com/kwam1na/athena --skill ce-frontend-design-kwam1na

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/kwam1na/athena/tree/main/.agents/skills/ce-frontend-design
Command: npx skills add https://github.com/kwam1na/athena --skill ce-frontend-design-kwam1na

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Verifies results via screenshots before declaring done.

Core Features & Use Cases

Detect existing design systems and adapt typography, color, spacing, and components to align with the current codebase.
Plan, build, and verify frontend interfaces with a design-first approach.
Verify visual results via screenshot-based checks to ensure fidelity with the design system and accessibility considerations.

Quick Start

In a new or existing frontend project, map the current UI patterns and plan a design-forward implementation that aligns with the detected design system.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema

How do I improve frontend design quality without breaking my existing design system?▼

To improve frontend design quality without breaking your system, use tools that detect existing UI patterns. This enforces typography, color, layout, motion, and accessibility standards to align deliverables with your codebase's design language.

What is the best way to ensure accessibility and typography standards in a frontend UI build?▼

Ensuring accessibility and typography standards in a frontend UI build requires applying a design-first approach. This process enforces visual verification and accessibility considerations to deliver design-ready UI outcomes.

Can I use visual verification to check UI fidelity for web app modifications?▼

Yes, you can use visual verification to check UI fidelity for web app modifications. Screenshot-based checks verify visual results to ensure the interface respects existing design systems and meets accessibility considerations before completion.

Does this design-first approach work for both greenfield projects and existing web dashboards?▼

Yes, this design-first approach works for both greenfield projects and existing web dashboards. It activates for any frontend work, detecting existing design systems to adapt spacing, typography, and color accordingly.

How do I plan a design-forward implementation for a new frontend interface?▼

To plan a design-forward implementation for a new frontend interface, map current UI patterns first. This guides the planning, building, and visual verification phases to ensure the final output respects the detected design system.

Why does my frontend UI look inconsistent with the codebase's design language?▼

Your frontend UI looks inconsistent with the codebase's design language when it lacks enforced typography, color, and layout standards. Aligning deliverables with a detected design system prevents generic outputs and maintains visual fidelity.