Guide frontend UI outcomes to align with existing design systems.
npx skills add https://github.com/kwam1na/athena --skill ce-frontend-design-kwam1na
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
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.
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.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
ketanswebsiteAnalyze project structure and design system to propose UI/UX design options.
roderikAnalyze UI components for WCAG accessibility and visual design issues.
hramadhaanDesign and iterate frontend interfaces with audits and responsive adjustments.
danzam98Create polished UI components in Next.js, React, and Tailwind projects.
